qdouze-bludit-theme/scss/components/_buttons.scss
2024-04-10 20:54:20 +02:00

72 lines
1.4 KiB
SCSS
Executable file

.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);
}
}
}