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/components/_buttons.scss
2023-11-20 10:05:50 +01:00

72 lines
1.4 KiB
SCSS

.btn {
@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);
background-color: var(--accent-color);
&:visited {
color: var(--text-color-contrast);
}
&:hover,
&:active {
background-color: var(--accent-color-hover);
outline-color: var(--accent-color-hover);
box-shadow: none;
}
font-weight: $fontweight_base;
p &:last-child {
margin-bottom: 0;
}
.fake {
background-color: transparent !important;
color:var(--text-color);
}
}
.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;
}
.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;
}
}
.btn-readmore,
.btn-link {
color: var(--link-color);
&:visited {
color: var(--link-color);
}
background-color: transparent;
&:hover,
&:active {
&::before {
background-color: var(--link-color-hover);
}
}
}