palette: use mixin and variables for alerts

This commit is contained in:
Kazhnuz 2018-10-13 18:08:18 +02:00
parent d2d1e548fd
commit ea245b33e9
2 changed files with 79 additions and 103 deletions

View File

@ -278,51 +278,67 @@
background-color: #75b82d !important;
color: #FFF; }
/* alertes */
.alert-primary {
background-color: #e4dcf2; }
.alert-secondary {
background-color: #dbdff4; }
.alert-info {
background-color: #d9ecfc; }
.alert-success {
background-color: #e3f0d5; }
.alert-warning {
background-color: #fbe4ce; }
.alert-danger {
background-color: #f9d8d2; }
/* ALERTS */
.alert-blue {
background-color: #eaedf9;
color: black; }
.alert-violet {
background-color: #f5dbf5; }
background-color: #faedfa;
color: black; }
.alert-purple {
background-color: #e4dcf2; }
.alert-blue {
background-color: #dbdff4; }
.alert-skyblue {
background-color: #d9ecfc; }
.alert-turquoise {
background-color: #daf1eb; }
.alert-green {
background-color: #e3f0d5; }
.alert-orange {
background-color: #fbe4ce; }
background-color: #ece7f6;
color: black; }
.alert-red {
background-color: #f9d8d2; }
background-color: #fadcd7;
color: black; }
.alert-light {
background-color: #ffffff; }
.alert-orange {
background-color: #fde0c4;
color: black; }
.alert-green {
background-color: #d9f0c1;
color: black; }
.alert-skyblue {
background-color: white;
color: black; }
.alert-dark {
background-color: #e1e1e1; }
background-color: lightgray;
color: black; }
.alert-light {
background-color: white;
color: #23231f; }
.alert-turquoise {
background-color: #dcf3ed;
color: black; }
.alert-primary {
background-color: #ece7f6;
color: black; }
.alert-secondary {
background-color: #eaedf9;
color: black; }
.alert-warning {
background-color: #fde0c4;
color: black; }
.alert-danger {
background-color: #fadcd7;
color: black; }
.alert-info {
background-color: white;
color: black; }
.alert-success {
background-color: #d9f0c1;
color: black; }

View File

@ -33,6 +33,11 @@ $color-success: $color-green;
color: $text-color;
}
@mixin alert-color($background-color) {
background-color: lighten($background-color, 40%);
color: darken($background-color, 80%);
}
/* CARDS */
.card {
@ -109,69 +114,24 @@ $color-success: $color-green;
&-success { @include background-color($color-success, #FFF); }
}
/* alertes */
/* ALERTS */
.alert-primary {
background-color:#e4dcf2;
}
.alert-secondary {
background-color:#dbdff4;
}
.alert-info {
background-color:#d9ecfc;
}
.alert-success {
background-color:#e3f0d5;
}
.alert-warning {
background-color:#fbe4ce;
}
.alert-danger {
background-color:#f9d8d2;
}
.alert-violet {
background-color:#f5dbf5;
}
.alert-purple {
background-color:#e4dcf2;
}
.alert-blue {
background-color:#dbdff4;
}
.alert-skyblue {
background-color:#d9ecfc;
}
.alert-turquoise {
background-color:#daf1eb;
}
.alert-green {
background-color:#e3f0d5;
}
.alert-orange {
background-color:#fbe4ce;
}
.alert-red {
background-color:#f9d8d2;
}
.alert-light {
background-color:#ffffff;
}
.alert-dark {
background-color:#e1e1e1;
.alert {
&-blue { @include alert-color($color-blue); }
&-violet { @include alert-color($color-violet); }
&-purple { @include alert-color($color-purple); }
&-red { @include alert-color($color-red); }
&-orange { @include alert-color($color-orange); }
&-green { @include alert-color($color-green); }
&-skyblue { @include alert-color($color-skyblue); }
&-dark { @include alert-color($color-dark); }
&-light { @include alert-color($color-light); }
&-turquoise { @include alert-color($color-turquoise); }
&-primary { @include alert-color($color-primary); }
&-secondary { @include alert-color($color-secondary); }
&-warning { @include alert-color($color-warning); }
&-danger { @include alert-color($color-danger); }
&-info { @include alert-color($color-info); }
&-success { @include alert-color($color-success); }
}