159 lines
3.8 KiB
SCSS
159 lines
3.8 KiB
SCSS
/* ------------------ COULEURS ------------------- */
|
|
|
|
$color-blue: #4e63c9;
|
|
$color-violet: #ce4dcd;
|
|
$color-purple: #7951c0;
|
|
$color-red: #e33d22;
|
|
$color-orange: #eb790a;
|
|
$color-green: #75b82d;
|
|
$color-skyblue: #42a0f3;
|
|
$color-dark: #6d6d6d;
|
|
$color-light: #eeeeec;
|
|
$color-turquoise: #46bd9e;
|
|
|
|
$color-primary: $color-purple;
|
|
$color-secondary: $color-blue;
|
|
$color-warning: $color-orange;
|
|
$color-danger: $color-red;
|
|
$color-info: $color-skyblue;
|
|
$color-success: $color-green;
|
|
|
|
@mixin card-color($background-color, $text-color) {
|
|
& > .card-header { background-color: $background-color; color:$text-color; }
|
|
}
|
|
|
|
@mixin button-color($background-color, $text-color) {
|
|
background-color: $background-color;
|
|
&:hover, &:active, &:focus, &[href]:hover, &[href]:active, &[href]:focus {background-color: lighten($background-color, 10%); color:$text-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); }
|
|
}
|
|
|
|
/* BUTTONS & BADGES */
|
|
|
|
.btn, .badge {
|
|
&-blue { @include button-color($color-blue, #FFF); }
|
|
&-violet { @include button-color($color-violet, #FFF); }
|
|
&-purple { @include button-color($color-purple, #FFF); }
|
|
&-red { @include button-color($color-red, #FFF); }
|
|
&-orange { @include button-color($color-orange, #FFF); }
|
|
&-green { @include button-color($color-green, #FFF); }
|
|
&-skyblue { @include button-color($color-skyblue, #FFF); }
|
|
&-dark { @include button-color($color-dark, #FFF); }
|
|
&-light { @include button-color($color-light, #111); }
|
|
&-turquoise { @include button-color($color-turquoise, #FFF); }
|
|
|
|
&-primary { @include button-color($color-primary, #FFF); }
|
|
&-secondary { @include button-color($color-secondary, #FFF); }
|
|
&-warning { @include button-color($color-warning, #FFF); }
|
|
&-danger { @include button-color($color-danger, #FFF); }
|
|
&-info { @include button-color($color-info, #FFF); }
|
|
&-success { @include button-color($color-success, #FFF); }
|
|
}
|
|
|
|
.btn {
|
|
&-facebook {@include button-color(#3B5998, #FFF);}
|
|
&-twitter {@include button-color(#55ACEE, #FFF);}
|
|
&-googleplus {@include button-color(#d34836, #FFF);}
|
|
&-diaspora {@include button-color(#313739, #FFF);}
|
|
&-mastodon {@include button-color(#282c37, #FFF);}
|
|
}
|
|
|
|
/* social */
|
|
|
|
|
|
|
|
/* de base */
|
|
|
|
.bg-primary {
|
|
background-color:#7951c0!important;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|