Zelda64Recomp/assets/scss/styles/components/IconButton.scss

93 lines
2.1 KiB
SCSS
Raw Normal View History

2024-01-18 21:49:29 +01:00
@use 'sass:color';
2024-01-22 17:43:21 +01:00
/*
<button
class="icon-button icon-button--danger"
>
<svg src="icons/Trash.svg" />
</button>
*/
2024-01-18 21:49:29 +01:00
@mixin create-icon-button-variation($base-col) {
background-color: rgba($base-col, 0.05);
border-color: rgba($base-col, 0.8);
&:focus, &:hover {
border-color: $base-col;
background-color: rgba($base-col, 0.3);
}
&:active {
background-color: rgba($base-col, 0.2);
}
}
$icon-button-size: 56 - ($border-width-thickness-num * 2);
2024-01-18 21:49:29 +01:00
.icon-button {
@include set-color($color-text-dim);
@include trans-colors-border;
2024-01-18 21:49:29 +01:00
display: flex;
align-items: center;
justify-content: center;
border-radius: space($icon-button-size * 0.5);
border-width: $border-width-thickness;
2024-01-22 17:43:21 +01:00
border-color: $color-transparent;
background-color: $color-transparent;
2024-01-18 21:49:29 +01:00
width: space($icon-button-size);
height: space($icon-button-size);
min-width: space($icon-button-size);
min-height: space($icon-button-size);
max-width: space($icon-button-size);
max-height: space($icon-button-size);
&:focus, &:hover {
@include set-color($color-text);
2024-01-22 17:43:21 +01:00
background-color: $color-border;
2024-01-18 21:49:29 +01:00
}
&:active {
@include set-color(color.scale($color-text, $lightness: 20%));
2024-01-22 17:43:21 +01:00
background-color: $color-border-soft;
2024-01-18 21:49:29 +01:00
}
&:disabled,&[disabled] {
@include set-color($color-text-dim);
opacity: 0.5;
}
&:not([disabled]) {
@extend %nav-all;
2024-01-22 17:43:21 +01:00
cursor: pointer;
2024-01-18 21:49:29 +01:00
}
svg {
width: space(32);
height: space(32);
}
2024-01-22 17:43:21 +01:00
&--primary {
@include create-icon-button-variation($color-primary);
}
2024-01-18 21:49:29 +01:00
&--secondary {
@include create-icon-button-variation($color-secondary);
}
&--tertiary {
@include create-icon-button-variation($color-text);
}
&--success {
@include create-icon-button-variation($color-success);
}
&--danger {
@include create-icon-button-variation($color-error);
}
&--warning {
@include create-icon-button-variation($color-warning);
}
}