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

palette: use mixin and variables for cards palette

Browse source
This commit is contained in:
Kazhnuz 2018-10-13 18:03:09 +02:00
parent 3eb25443c5
commit 6f584d35bf
2 changed files with 142 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
css/palette.css
View file

@ -1,49 +1,114 @@
/* ------------------ COULEURS ------------------- */ /* ------------------ COULEURS ------------------- */
/* de base */ /* CARDS */
.card-primary > .card-header, .btn-primary, .btn-primary:hover, .btn-primary:active, .badge-primary { .card-blue > .card-header {
background-color: #7951c0;
color: #FFF; }
.card-secondary > .card-header, .btn-secondary, .btn-secondary:hover, .btn-secondary:active, .badge-secondary {
background-color: #4e63c9; background-color: #4e63c9;
color: #FFF; } color: #FFF; }
.card-danger > .card-header, .card-red > .card-header, .btn-danger, .btn-red, .badge-red, .badge-danger { .card-violet > .card-header {
background-color: #e33d22;
color: #FFF; }
.card-warning > .card-header, .card-orange > .card-header, .btn-warning, .btn-orange, .badge-warning, .badge-orange {
background-color: #eb790a;
color: #FFF; }
.card-success > .card-header, .card-green > .card-header, .btn-success, .btn-green, .badge-success, .badge-green {
background-color: #75b82d;
color: #FFF; }
.card-info > .card-header, .card-skyblue > .card-header, .btn-info, .btn-skyblue, .badge-info, .badge-skyblue {
background-color: #42a0f3;
color: #FFF; }
.card-blue > .card-header, .btn-blue, .badge-blue {
background-color: #4e63c9;
color: #FFF; }
.card-purple > .card-header, .btn-purple, .badge-purple {
background-color: #7951c0;
color: #FFF; }
.card-dark > .card-header, .btn-dark, .badge-dark {
background-color: #6d6d6d;
color: #FFF; }
.card-light > .card-header, .btn-light, .badge-light {
background-color: #eeeeec; }
.card-violet > .card-header, .btn-violet, .badge-violet {
background-color: #ce4dcd; background-color: #ce4dcd;
color: #FFF; } color: #FFF; }
.card-turquoise > .card-header, .btn-turquoise, .badge-turquoise { .card-purple > .card-header {
background-color: #7951c0;
color: #FFF; }
.card-red > .card-header {
background-color: #e33d22;
color: #FFF; }
.card-orange > .card-header {
background-color: #eb790a;
color: #FFF; }
.card-green > .card-header {
background-color: #75b82d;
color: #FFF; }
.card-skyblue > .card-header {
background-color: #42a0f3;
color: #FFF; }
.card-dark > .card-header {
background-color: #6d6d6d;
color: #FFF; }
.card-light > .card-header {
background-color: #eeeeec;
color: #111; }
.card-turquoise > .card-header {
background-color: #46bd9e;
color: #FFF; }
.card-primary > .card-header {
background-color: #7951c0;
color: #FFF; }
.card-secondary > .card-header {
background-color: #4e63c9;
color: #FFF; }
.card-warning > .card-header {
background-color: #eb790a;
color: #FFF; }
.card-danger > .card-header {
background-color: #e33d22;
color: #FFF; }
.card-info > .card-header {
background-color: #42a0f3;
color: #FFF; }
.card-success > .card-header {
background-color: #75b82d;
color: #FFF; }
/* de base */
.btn-primary, .btn-primary:hover, .btn-primary:active, .badge-primary {
background-color: #7951c0;
color: #FFF; }
.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .badge-secondary {
background-color: #4e63c9;
color: #FFF; }
.btn-danger, .btn-red, .badge-red, .badge-danger {
background-color: #e33d22;
color: #FFF; }
.btn-warning, .btn-orange, .badge-warning, .badge-orange {
background-color: #eb790a;
color: #FFF; }
.btn-success, .btn-green, .badge-success, .badge-green {
background-color: #75b82d;
color: #FFF; }
.btn-info, .btn-skyblue, .badge-info, .badge-skyblue {
background-color: #42a0f3;
color: #FFF; }
.btn-blue, .badge-blue {
background-color: #4e63c9;
color: #FFF; }
.btn-purple, .badge-purple {
background-color: #7951c0;
color: #FFF; }
.btn-dark, .badge-dark {
background-color: #6d6d6d;
color: #FFF; }
.btn-light, .badge-light {
background-color: #eeeeec; }
.btn-violet, .badge-violet {
background-color: #ce4dcd;
color: #FFF; }
.btn-turquoise, .badge-turquoise {
background-color: #46bd9e; background-color: #46bd9e;
color: #FFF; } color: #FFF; }

51
scss/palette.scss
View file

@ -18,64 +18,89 @@ $color-danger: $color-red;
$color-info: $color-skyblue; $color-info: $color-skyblue;
$color-success: $color-green; $color-success: $color-green;
@mixin card-color($background-color, $text-color) {
& > .card-header { background-color: $background-color; color:$text-color; }
}
/* CARDS */
.card {
&-blue { @include card-color($color-blue, #FFF); }
&-violet { @include card-color($color-violet, #FFF); }
&-purple { @include card-color($color-purple, #FFF); }
&-red { @include card-color($color-red, #FFF); }
&-orange { @include card-color($color-orange, #FFF); }
&-green { @include card-color($color-green, #FFF); }
&-skyblue { @include card-color($color-skyblue, #FFF); }
&-dark { @include card-color($color-dark, #FFF); }
&-light { @include card-color($color-light, #111); }
&-turquoise { @include card-color($color-turquoise, #FFF); }
&-primary { @include card-color($color-primary, #FFF); }
&-secondary { @include card-color($color-secondary, #FFF); }
&-warning { @include card-color($color-warning, #FFF); }
&-danger { @include card-color($color-danger, #FFF); }
&-info { @include card-color($color-info, #FFF); }
&-success { @include card-color($color-success, #FFF); }
}
/* de base */ /* de base */
.btn-primary, .btn-primary:hover, .btn-primary:active, .badge-primary {
.card-primary > .card-header, .btn-primary, .btn-primary:hover, .btn-primary:active, .badge-primary {
background-color:#7951c0; background-color:#7951c0;
color:#FFF; color:#FFF;
} }
.card-secondary > .card-header, .btn-secondary, .btn-secondary:hover, .btn-secondary:active, .badge-secondary { .btn-secondary, .btn-secondary:hover, .btn-secondary:active, .badge-secondary {
background-color:#4e63c9; background-color:#4e63c9;
color:#FFF; color:#FFF;
} }
.card-danger > .card-header, .card-red > .card-header, .btn-danger, .btn-red, .badge-red, .badge-danger { .btn-danger, .btn-red, .badge-red, .badge-danger {
background-color:#e33d22; background-color:#e33d22;
color:#FFF; color:#FFF;
} }
.card-warning > .card-header, .card-orange > .card-header, .btn-warning, .btn-orange, .badge-warning, .badge-orange { .btn-warning, .btn-orange, .badge-warning, .badge-orange {
background-color:#eb790a; background-color:#eb790a;
color:#FFF; color:#FFF;
} }
.card-success > .card-header, .card-green > .card-header, .btn-success, .btn-green, .badge-success, .badge-green { .btn-success, .btn-green, .badge-success, .badge-green {
background-color:#75b82d; background-color:#75b82d;
color:#FFF; color:#FFF;
} }
.card-info > .card-header, .card-skyblue > .card-header, .btn-info, .btn-skyblue, .badge-info, .badge-skyblue { .btn-info, .btn-skyblue, .badge-info, .badge-skyblue {
background-color:#42a0f3; background-color:#42a0f3;
color:#FFF; color:#FFF;
} }
.card-blue > .card-header, .btn-blue, .badge-blue { .btn-blue, .badge-blue {
background-color:#4e63c9; background-color:#4e63c9;
color:#FFF color:#FFF
} }
.card-purple > .card-header, .btn-purple, .badge-purple { .btn-purple, .badge-purple {
background-color:#7951c0; background-color:#7951c0;
color:#FFF color:#FFF
} }
.card-dark > .card-header, .btn-dark, .badge-dark { .btn-dark, .badge-dark {
background-color:#6d6d6d; background-color:#6d6d6d;
color:#FFF color:#FFF
} }
.card-light > .card-header, .btn-light, .badge-light { .btn-light, .badge-light {
background-color:#eeeeec; background-color:#eeeeec;
} }
.card-violet > .card-header, .btn-violet, .badge-violet { .btn-violet, .badge-violet {
background-color:#ce4dcd; background-color:#ce4dcd;
color:#FFF color:#FFF
} }
.card-turquoise > .card-header, .btn-turquoise, .badge-turquoise { .btn-turquoise, .badge-turquoise {
background-color:#46bd9e; background-color:#46bd9e;
color:#FFF color:#FFF
} }