65 lines
2.6 KiB
SCSS
65 lines
2.6 KiB
SCSS
/* ------------------ COULEURS ------------------- */
|
|
|
|
$color-button-light: $color-light;
|
|
$color-button-dark: $color-dark;
|
|
|
|
@mixin button-lighten($background-color, $text-color) {
|
|
background-color: lighten($background-color, 10%);
|
|
color:$text-color;
|
|
}
|
|
|
|
@mixin button-color($background-color, $text-color) {
|
|
background-color: $background-color;
|
|
color: $text-color;
|
|
&, &:not(.disabled):not(:disabled) {
|
|
&:hover, &:active, &:focus {
|
|
@include button-lighten($background-color, $text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin badge-color($background-color, $text-color) {
|
|
background-color: $background-color;
|
|
color: $text-color;
|
|
&, &:not(.disabled):not(:disabled) {
|
|
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
|
@include button-lighten($background-color, $text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* BUTTONS & BADGES */
|
|
|
|
.btn, a.btn, .badge, .chip, a.chip, a.badge, .label, a.label {
|
|
&-blue { @include button-color($color-blue, $color-button-light); }
|
|
&-violet { @include button-color($color-violet, $color-button-light); }
|
|
&-purple { @include button-color($color-purple, $color-button-light); }
|
|
&-red { @include button-color($color-red, $color-button-light); }
|
|
&-orange { @include button-color($color-orange, $color-button-light); }
|
|
&-green { @include button-color($color-green, $color-button-light); }
|
|
&-skyblue { @include button-color($color-skyblue, $color-button-light); }
|
|
&-dark { @include button-color($color-dark, $color-button-light); }
|
|
&-light { @include button-color($color-light2, $color-button-dark); }
|
|
&-turquoise { @include button-color($color-turquoise, $color-button-light); }
|
|
&-yellow { @include button-color($color-yellow, $color-button-light); }
|
|
&-brown { @include button-color($color-brown, $color-button-light); }
|
|
&-grey { @include button-color($color-grey, $color-button-light); }
|
|
|
|
&-primary { @include button-color($color-primary, $color-button-light); }
|
|
&-secondary { @include button-color($color-secondary, $color-button-light); }
|
|
&-warning { @include button-color($color-warning, $color-button-light); }
|
|
&-danger { @include button-color($color-danger, $color-button-light); }
|
|
&-info { @include button-color($color-info, $color-button-light); }
|
|
&-success { @include button-color($color-success, $color-button-light); }
|
|
}
|
|
|
|
/* social */
|
|
|
|
.btn, a.btn {
|
|
&-facebook {@include button-color(#3B5998, $color-button-light);}
|
|
&-twitter {@include button-color(#55ACEE, $color-button-light);}
|
|
&-googleplus {@include button-color(#d34836, $color-button-light);}
|
|
&-diaspora {@include button-color(#313739, $color-button-light);}
|
|
&-mastodon {@include button-color(#282c37, $color-button-light);}
|
|
}
|