Zelda64Recomp/assets/scss/styles/components/Button.scss

81 lines
1.6 KiB
SCSS
Raw Normal View History

2024-01-07 22:33:22 +01:00
@use 'sass:color';
2024-01-07 01:04:28 +01:00
2024-01-08 01:23:05 +01:00
@mixin create-button-variation($base-col) {
background-color: rgba($base-col, 0.05);
color: $color-text-dim;
border-color: rgba($base-col, 0.8);
&:focus {
color: $color-text;
border-color: $base-col;
background-color: rgba($base-col, 0.3);
}
&:disabled,&[disabled] {
color: $color-text-inactive;
}
&:active {
background-color: rgba($base-col, 0.2);
color: color.scale($color-text, $lightness: 20%);
}
}
2024-01-07 01:04:28 +01:00
.button {
2024-01-22 17:43:21 +01:00
@extend %label-md;
2024-01-08 01:23:05 +01:00
@include create-button-variation($color-primary);
@include trans-colors;
2024-01-08 01:23:05 +01:00
2024-01-07 01:04:28 +01:00
display: block;
2024-01-08 01:26:40 +01:00
// leave 1dp room for border expansion
padding: space(24 - 1);
2024-01-08 01:23:05 +01:00
2024-01-07 22:33:22 +01:00
border-radius: $border-radius-md;
border-width: $border-width-thickness;
2024-01-07 22:33:22 +01:00
width: auto;
height: auto;
2024-01-07 01:04:28 +01:00
2024-01-08 01:23:05 +01:00
// Setting it by default for convenience
// &--primary {
// @include create-button-variation($color-primary);
// }
2024-01-22 17:43:21 +01:00
&--large {
@extend %label-lg;
}
2024-01-08 01:23:05 +01:00
&--secondary {
@include create-button-variation($color-secondary);
2024-01-07 01:04:28 +01:00
}
2024-01-08 01:23:05 +01:00
&--tertiary {
@include create-button-variation($color-text);
2024-01-07 01:04:28 +01:00
}
2024-01-08 01:23:05 +01:00
&--success {
@include create-button-variation($color-success);
2024-01-07 01:04:28 +01:00
}
2024-01-08 01:23:05 +01:00
&--error {
@include create-button-variation($color-error);
}
&--warning {
@include create-button-variation($color-warning);
}
&:not([disabled]) {
@extend %nav-all;
2024-01-22 17:43:21 +01:00
cursor: pointer;
2024-01-08 01:23:05 +01:00
}
&:disabled,&[disabled] {
opacity: 0.5;
2024-01-07 22:33:22 +01:00
}
&__label {
width: auto;
height: auto;
2024-01-07 01:04:28 +01:00
}
}