kazhnuz/bluesky-bootstrap-theme
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

palette: use mixin and variables for alerts

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

94
css/palette.css
View file

@ -278,51 +278,67 @@
background-color: #75b82d !important; background-color: #75b82d !important;
color: #FFF; } color: #FFF; }
/* alertes */ /* ALERTS */
.alert-primary { .alert-blue {
background-color: #e4dcf2; } background-color: #eaedf9;
color: black; }
.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 { .alert-violet {
background-color: #f5dbf5; } background-color: #faedfa;
color: black; }
.alert-purple { .alert-purple {
background-color: #e4dcf2; } background-color: #ece7f6;
color: black; }
.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 { .alert-red {
background-color: #f9d8d2; } background-color: #fadcd7;
color: black; }
.alert-light { .alert-orange {
background-color: #ffffff; } background-color: #fde0c4;
color: black; }
.alert-green {
background-color: #d9f0c1;
color: black; }
.alert-skyblue {
background-color: white;
color: black; }
.alert-dark { .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; }

88
scss/palette.scss
View file

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