89 lines
1.9 KiB
SCSS
89 lines
1.9 KiB
SCSS
@use "../01-base/typography" as *;
|
|
@use "../01-base/breakpoints" as *;
|
|
@use "../01-base/colors" as *;
|
|
|
|
@mixin button-primary($bg) {
|
|
background: $bg;
|
|
&:hover {
|
|
background:darken($bg,8%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
&:active {
|
|
background:darken($bg,25%);
|
|
}
|
|
}
|
|
|
|
@mixin button-secondary($bg) {
|
|
background: $bg;
|
|
&:hover {
|
|
background:darken($bg,8%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
&:active {
|
|
background:darken($bg,25%);
|
|
}
|
|
}
|
|
|
|
@mixin button-tertiary($bg) {
|
|
background: $bg;
|
|
&:hover {
|
|
background:darken($bg,8%);
|
|
transition: all 0.3s ease;
|
|
}
|
|
&:active {
|
|
background:darken($bg,25%);
|
|
}
|
|
}
|
|
|
|
%btn {
|
|
@include font-primary;
|
|
font-weight: 400;
|
|
display: block;
|
|
padding: 15px 68px;
|
|
border-radius: 7px;
|
|
font-size: 1.6rem;
|
|
text-transform: uppercase;
|
|
max-width: fit-content;
|
|
@include responsive(desktop){
|
|
padding: 15px 68px;
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|
|
|
|
.btn-primary, a.btn-primary {
|
|
@extend %btn;
|
|
background-color: $accent-color;
|
|
color: $white-color!important;
|
|
border: 2px solid $accent-color;
|
|
transition: all 0.3s ease;
|
|
&:hover{
|
|
background-color: darken($accent-color, 8%);
|
|
border: 2px solid darken($accent-color, 8%);
|
|
}
|
|
}
|
|
.btn-secondary, a.btn-secondary {
|
|
@extend %btn;
|
|
background-color: $dark-color;
|
|
color: $accent-color;
|
|
border: 2px solid $white-color;
|
|
transition: all 0.3s ease;
|
|
&:hover{
|
|
background-color: darken($dark-color, 8%);
|
|
border: 2px solid $accent-color;
|
|
}
|
|
}
|
|
|
|
.wp-block-button{
|
|
&__link, a{
|
|
@extend %btn;
|
|
background-color: $accent-color!important;
|
|
color: $white-color!important;
|
|
border: 2px solid $accent-color!important;
|
|
}
|
|
}
|
|
|
|
.btn-link, a.btn-link {
|
|
font-size: 1.6rem;
|
|
color: $dark-color;
|
|
text-decoration: underline;
|
|
} |