This repository has been archived on 2024-04-03. You can view files and clone it, but cannot push or open issues or pull requests.
qdouze2-wordpress-theme/scss/mixins/_btns.scss

49 lines
1.3 KiB
SCSS
Raw Permalink Normal View History

2022-12-17 22:34:02 +01:00
@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-color .2s, border .2s, box-shadow .2s, color .2s;
2023-04-24 20:14:42 +02:00
&:hover, &:active {
2022-12-17 22:34:02 +01:00
background-color:transparent;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-shape($background-color);
2023-04-24 20:14:42 +02:00
outline-color: $background-color;
2022-12-17 22:34:02 +01:00
color:$text-color;
&:visited {
@include colorize-shape($background-color);
color:$text-color;
}
&, &:visited, &:not(.disabled):not(:disabled) {
2023-04-24 20:14:42 +02:00
&:hover, &:active {
2022-12-17 22:34:02 +01:00
@include colorize-shape($hover-color);
color:lighten($text-color, 5%);
2023-04-24 20:14:42 +02:00
outline-color: $hover-color;
box-shadow:none;
2022-12-17 22:34:02 +01:00
}
}
}
@mixin button-color($background-color) {
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
box-shadow: $narrow-shadow;
}