new styles for alertify dialogs

pull/1/head
ansuz 8 years ago
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…
Cancel
Save