This repository has been archived on 2022-11-22. You can view files and clone it, but cannot push or open issues or pull requests.
roleplay.css/scss/components/_buttons.scss

103 lines
2.2 KiB
SCSS
Raw Normal View History

2019-11-13 11:54:06 +01:00
// Mixins, variables and colorizations
@mixin button() {
@include borders();
@include border-radius();
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
// Colorization functions
@mixin colorize-button() {
@each $name, $color in list-colors() {
&-#{$name} { @include button-color(get-color($name), #FFF, #000); }
}
}
@mixin button-color($background-color, $light-color, $dark-color) {
@include background-color($background-color, $light-color, $dark-color);
&, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include button-hover($background-color, $light-color, $dark-color);
}
}
}
@mixin button-hover($background-color, $light-color, $dark-color) {
@include background-color(lighten($background-color, 10%), $light-color, $dark-color);
}
// 11.1 - Buttons
.btn {
@include button();
box-shadow: $inset-shadow, $narrow-shadow;
&:hover {
box-shadow: $inset-shadow, $narrow-shadow;
@include button();
}
&:focus {
box-shadow: $inset-shadow, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
outline: none;
}
&:active {
box-shadow: $inset-shadow-inverted, $narrow-shadow;
@include button();
&:focus {
box-shadow: $inset-shadow-inverted, $narrow-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3)!important;
outline: none;
}
}
@include colorize-button();
}
.btn-group {
box-shadow: none;
}
.btn-group .btn {
@include border-radius();
&:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
/* 11.2 - Badges */
.badge {
font-weight:400;
@include colorize-button();
}
/* 11.3 - Réseaux sociaux */
.share-buttons {
margin-top: $baselinerem;
margin-bottom: $baselinerem;
}
.reagir {
text-align:right;
}
.btn {
&-facebook {@include button-color(#3B5998, #FFF, #000);}
&-twitter {@include button-color(#55ACEE, #FFF, #000);}
&-googleplus {@include button-color(#d34836, #FFF, #000);}
&-diaspora {@include button-color(#313739, #FFF, #000);}
&-mastodon {@include button-color(#282c37, #FFF, #000);}
}