67 lines
1.2 KiB
SCSS
67 lines
1.2 KiB
SCSS
@import "../_base.scss"
|
|
|
|
%button {
|
|
height: 100%;
|
|
aspect-ratio: 3.5;
|
|
|
|
border: $border-normal;
|
|
border-radius: 5%;
|
|
|
|
color: get-color(greyscale, 0);
|
|
|
|
font-family: "Geist";
|
|
font-weight: bold;
|
|
|
|
// To center the inner svg
|
|
// TODO: Find a more efficient way to center
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
svg {
|
|
height: 85%;
|
|
width: 85%;
|
|
|
|
text {
|
|
font-size: 50;
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
fill: get-color(greyscale, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin button($color-name, $color-level) {
|
|
@extend %button;
|
|
|
|
background-color: get_color($color-name, $color-level);
|
|
|
|
&:hover {
|
|
background-color: get_color($color-name, calc($color-level - 10));
|
|
}
|
|
|
|
&:active {
|
|
background-color: get_color($color-name, calc($color-level - 20));
|
|
}
|
|
}
|
|
|
|
.register-button {
|
|
@include button(ternary, 90);
|
|
}
|
|
|
|
.login-button {
|
|
@include button(secondary, 90);
|
|
}
|
|
|
|
.success-button {
|
|
@include button(success, 100);
|
|
}
|
|
|
|
.warning-button {
|
|
@include button(warning, 100);
|
|
}
|
|
|
|
.error-button {
|
|
@include button(critical, 100);
|
|
}
|