82 lines
1.6 KiB
SCSS
82 lines
1.6 KiB
SCSS
@use 'sass:color';
|
|
|
|
@mixin create-button-variation($base-col) {
|
|
border-color: rgba($base-col, 0.8);
|
|
background-color: rgba($base-col, 0.05);
|
|
color: $color-text-dim;
|
|
|
|
&:focus, &:hover {
|
|
border-color: $base-col;
|
|
background-color: rgba($base-col, 0.3);
|
|
color: $color-text;
|
|
}
|
|
|
|
&:disabled,&[disabled] {
|
|
color: $color-text-inactive;
|
|
}
|
|
|
|
&:active {
|
|
background-color: rgba($base-col, 0.2);
|
|
color: color.scale($color-text, $lightness: 20%);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
@extend %label-md;
|
|
@extend %nav-all;
|
|
@include create-button-variation($color-primary);
|
|
@include trans-colors;
|
|
|
|
display: block;
|
|
width: auto;
|
|
height: auto;
|
|
// leave 1dp room for border expansion
|
|
padding: space(24 - 1);
|
|
border-width: $border-width-thickness;
|
|
|
|
border-radius: $border-radius-md;
|
|
|
|
// Setting it by default for convenience
|
|
&--primary {
|
|
@include create-button-variation($color-primary);
|
|
}
|
|
|
|
&--large {
|
|
@extend %label-lg;
|
|
}
|
|
|
|
&--secondary {
|
|
@include create-button-variation($color-secondary);
|
|
}
|
|
|
|
&--tertiary {
|
|
@include create-button-variation($color-text);
|
|
}
|
|
|
|
&--success {
|
|
@include create-button-variation($color-success);
|
|
}
|
|
|
|
&--error {
|
|
@include create-button-variation($color-error);
|
|
}
|
|
|
|
&--warning {
|
|
@include create-button-variation($color-warning);
|
|
}
|
|
|
|
&:not([disabled]) {
|
|
@extend %nav-all;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:disabled,&[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&__label {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
}
|