103 lines
2.2 KiB
SCSS
103 lines
2.2 KiB
SCSS
|
|
||
|
|
// 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);}
|
||
|
|
}
|