mirror of
https://github.com/BanjoRecomp/BanjoRecomp
synced 2026-06-01 17:27:25 -04:00
thecozies
71dfde0270
* Refactor color usage for full theming support from one source of truth * remove unused components * remove old commented out font families * override custom theme in main.cpp
93 lines
2.5 KiB
SCSS
93 lines
2.5 KiB
SCSS
@use 'sass:color';
|
|
|
|
/*
|
|
<button
|
|
class="icon-button icon-button--danger"
|
|
>
|
|
<svg src="icons/Trash.svg" />
|
|
</button>
|
|
*/
|
|
@mixin create-icon-button-variation($base-col, $base-col-05, $base-col-20, $base-col-30, $base-col-80) {
|
|
border-color: $base-col-80;
|
|
background-color: $base-col-05;
|
|
|
|
&:focus, &:hover {
|
|
border-color: $base-col;
|
|
background-color: $base-col-30;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $base-col-20;
|
|
}
|
|
}
|
|
|
|
$icon-button-size: 56 - ($border-width-thickness-num * 2);
|
|
|
|
.icon-button {
|
|
@include set-color($color-text-dim);
|
|
@include trans-colors-border;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: space($icon-button-size);
|
|
min-width: space($icon-button-size);
|
|
max-width: space($icon-button-size);
|
|
height: space($icon-button-size);
|
|
min-height: space($icon-button-size);
|
|
max-height: space($icon-button-size);
|
|
border-width: $border-width-thickness;
|
|
border-radius: space($icon-button-size * 0.5);
|
|
border-color: $color-transparent;
|
|
background-color: $color-transparent;
|
|
|
|
&:focus, &:hover {
|
|
@include set-color($color-text);
|
|
background-color: $color-border;
|
|
}
|
|
|
|
&:active {
|
|
@include set-color($color-text-active);
|
|
background-color: $color-border-soft;
|
|
}
|
|
|
|
&:disabled,&[disabled] {
|
|
@include set-color($color-text-dim);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&:not([disabled]) {
|
|
@extend %nav-all;
|
|
cursor: pointer;
|
|
}
|
|
|
|
svg {
|
|
width: space(32);
|
|
height: space(32);
|
|
}
|
|
|
|
&--primary {
|
|
@include create-icon-button-variation($color-primary, $color-primary-a5, $color-primary-a20, $color-primary-a30, $color-primary-a80);
|
|
}
|
|
|
|
&--secondary {
|
|
@include create-icon-button-variation($color-secondary, $color-secondary-a5, $color-secondary-a20, $color-secondary-a30, $color-secondary-a80);
|
|
}
|
|
|
|
&--tertiary {
|
|
@include create-icon-button-variation($color-text, $color-text-a5, $color-text-a20, $color-text-a30, $color-text-a80);
|
|
}
|
|
|
|
&--success {
|
|
@include create-icon-button-variation($color-success, $color-success-a5, $color-success-a20, $color-success-a30, $color-success-a80);
|
|
}
|
|
|
|
&--danger {
|
|
@include create-icon-button-variation($color-danger, $color-danger-a5, $color-danger-a20, $color-danger-a30, $color-danger-a80);
|
|
}
|
|
|
|
&--warning {
|
|
@include create-icon-button-variation($color-warning, $color-warning-a5, $color-warning-a20, $color-warning-a30, $color-warning-a80);
|
|
}
|
|
}
|