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.
kspace-wordpress-theme/scss/components/_buttons.scss

139 lines
2.8 KiB
SCSS
Raw Normal View History

2023-10-13 09:11:42 +02: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;
&:hover,
&:active {
background-color: transparent;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-shape($background-color);
outline-color: $background-color;
color: $text-color;
&:visited {
@include colorize-shape($background-color);
color: $text-color;
}
&,
&:visited,
&:not(.disabled):not(:disabled) {
&:hover,
&:active {
@include colorize-shape($hover-color);
color: lighten($text-color, 5%);
outline-color: $hover-color;
box-shadow: none;
}
}
}
@mixin button-color($background-color) {
@include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
box-shadow: $narrow-shadow;
}
2020-12-30 19:11:12 +01:00
.btn {
2023-10-13 09:11:42 +02:00
@include shape-style($button_large);
text-decoration: none;
padding: $button_large/3 $button_large;
margin: $button_large/3 $button_large/2 $lineheight;
line-height: $lineheight;
height: auto;
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
outline-color: var(--accent-color);
color: var(--text-color-contrast);
&::before {
background-color: var(--accent-color);
}
&:visited {
color: var(--text-color-contrast);
}
&:hover,
&:active {
&::before {
background-color: var(--accent-color-hover);
2020-12-30 19:11:12 +01:00
}
2023-10-13 09:11:42 +02:00
outline-color: var(--accent-color-hover);
box-shadow: none;
}
font-weight: $fontweight_base;
p &:last-child {
margin-bottom:0;
}
.fake {
background-color: transparent !important;
&::before {
background-color: transparent !important;
2020-12-30 19:11:12 +01:00
}
2023-10-13 09:11:42 +02:00
color:var(--text-color);
}
2020-12-30 19:11:12 +01:00
}
2023-10-13 09:11:42 +02:00
.btn.disabled, .btn:disabled {
opacity: 0.8;
background-color: var(--accent-color)!important;
outline-color: var(--accent-color)!important;
color: var(--text-color-contrast)!important;
}
2020-12-30 19:11:12 +01:00
2023-10-13 09:11:42 +02:00
.btn-small {
padding: $button_small/3 $button_small/2;
margin: $button_small/3 $button_small/2 $lineheight;
&:before {
left: -$button_small/2;
right: -$button_small/2;
}
2020-12-30 19:11:12 +01:00
}
2023-10-13 09:11:42 +02:00
.btn-readmore, .btn-link {
2023-10-13 09:11:42 +02:00
color: var(--link-color);
&:visited {
color: var(--link-color);
}
background-color: transparent!important;
&::before {
background-color: transparent;
}
&:hover,
&:active {
&::before {
background-color: var(--link-color-hover);
}
}
2020-12-30 19:11:12 +01:00
}