74 lines
2.1 KiB
SCSS
74 lines
2.1 KiB
SCSS
@mixin button($size) {
|
|
@include button-layout($size);
|
|
@include shape-style($size);
|
|
@include button-hover();
|
|
font-weight: $fontweight_base;
|
|
}
|
|
|
|
@mixin button-layout($size) {
|
|
padding: $size;
|
|
padding-top: $size/3;
|
|
padding-bottom: $size/3;
|
|
margin:$size/2;
|
|
margin-top: $size/3;
|
|
margin-bottom: $lineheight;
|
|
//font-size: 4.75mm;
|
|
line-height:$lineheight;
|
|
height:auto;
|
|
}
|
|
|
|
@mixin button-hover() {
|
|
transition: background .2s, border .2s, box-shadow .2s, color .2s;
|
|
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
|
text-decoration:none;
|
|
background-color:transparent;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
|
|
&:before {
|
|
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
transition: background-color .2s;
|
|
}
|
|
}
|
|
|
|
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
|
|
@include colorize-shape($background-color);
|
|
color:$text-color;
|
|
&:visited {
|
|
@include colorize-shape($background-color);
|
|
color:$text-color;
|
|
}
|
|
&, &:visited, &:not(.disabled):not(:disabled) {
|
|
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
|
@include colorize-shape($hover-color);
|
|
color:lighten($text-color, 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin button-color($background-color) {
|
|
@include button-fullcontrol($background-color, lighten($background-color, 7.5%), getTextColorFromBackground($background-color));
|
|
}
|
|
|
|
@mixin label-color($background-color) {
|
|
@include colorize-shape($background-color);
|
|
color:getTextColorFromBackground($background-color);
|
|
&:visited {
|
|
@include colorize-shape($background-color);
|
|
color:getTextColorFromBackground($background-color);
|
|
}
|
|
&, &:visited, &:not(.disabled):not(:disabled) {
|
|
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
|
@include colorize-shape(accentuate($background-color));
|
|
color:lighten(getTextColorFromBackground($background-color), 5%);
|
|
}
|
|
}
|
|
}
|