new styles for alertify dialogs
parent
413d9a6f0b
commit
11ff3f5347
|
@ -61,11 +61,25 @@
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.alertify .dialog .bright,
|
||||
.alertify .alert .bright {
|
||||
color: #ffffff;
|
||||
}
|
||||
.alertify .dialog > div,
|
||||
.alertify .alert > div {
|
||||
background-color: #444;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.alertify .dialog > div.half,
|
||||
.alertify .alert > div.half {
|
||||
width: 50%;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.alertify .dialog > div.half,
|
||||
.alertify .alert > div.half {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.alertify .dialog > *,
|
||||
.alertify .alert > * {
|
||||
width: 30%;
|
||||
|
@ -123,6 +137,34 @@
|
|||
border: 1px solid #302B28;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe,
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger {
|
||||
color: #302B28;
|
||||
white-space: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger {
|
||||
background-color: #FA5858;
|
||||
}
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:hover,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:hover,
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:active,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).danger:active {
|
||||
background-color: #fb7171;
|
||||
}
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe {
|
||||
background-color: #46E981;
|
||||
}
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:hover,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:hover,
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:active,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button).safe:active {
|
||||
background-color: #74eea0;
|
||||
}
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
|
||||
.alertify .alert nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):hover,
|
||||
.alertify .dialog nav button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button):active,
|
||||
|
|
|
@ -61,10 +61,19 @@
|
|||
}
|
||||
|
||||
.dialog, .alert {
|
||||
.bright {
|
||||
color: @light-base;
|
||||
}
|
||||
|
||||
& > div {
|
||||
background-color: @alertify-dialog-bg;
|
||||
border-radius: 5px;
|
||||
&.half {
|
||||
width: 50%;
|
||||
@media (max-width: @media-medium-screen) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
|
@ -138,16 +147,23 @@
|
|||
|
||||
&.safe, &.danger {
|
||||
color: @old-base;
|
||||
white-space: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
&.danger {
|
||||
background-color: @cp-red;
|
||||
&:hover, &:active {
|
||||
background-color: lighten(@cp-red, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&.safe {
|
||||
background-color: @cp-green;
|
||||
&:hover, &:active {
|
||||
background-color: lighten(@cp-green, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: @alertify-btn-bg-hover;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue