Zelda64Recomp/assets/scss/styles/components/ControlOption.scss

169 lines
3.8 KiB
SCSS

@use 'sass:color';
@use 'sass:math';
.control-option {
@include set-color($color-text-dim);
@include trans-colors-svg;
display: flex;
position: relative;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: auto;
padding: space(4) space(16) space(4) space(20);
border-radius: $border-radius-sm;
background-color: rgba(0, 0, 0, 0);
&:focus-visible:not(:disabled, [disabled]),
&:hover:not(:disabled, [disabled]) {
@include set-color($color-text);
background-color: $color-bg-overlay;
}
&:disabled, &[disabled] {
opacity: 0.5;
}
&--active {
// while actively looking for inputs, set styles to the correct slots
$valid-binding-slots: 0, 1;
@each $slot in $valid-binding-slots {
// global attr -> this active row -> binding slot
[cur-binding-slot="#{$slot}"] & .control-option__binding[bind-slot="#{$slot}"] {
border-color: $color-error;
.control-option__binding-icon {
opacity: 0;
}
.control-option__binding-recording {
opacity: 1;
}
}
}
}
.icon-button {
flex: 1 1 auto;
}
}
.control-option__label {
@extend %label-md;
flex: 2 1 space(300);
height: auto;
white-space: nowrap;
}
.control-option__bindings {
display: flex;
position: relative;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 2 1 space(400);
width: 100%;
height: space(56);
padding: 0 space(12) 0 space(4);
}
.control-option__binding {
@include set-color($color-text-dim);
@include trans-colors-border;
display: flex;
position: relative;
align-items: center;
justify-content: center;
margin: 0 space(4);
flex: 1 1 100%;
width: 100%;
height: space(56);
padding: space(8);
background-color: $color-bg-overlay;
border-color: $color-bg-overlay;
border-width: $border-width-thickness;
border-radius: $border-radius-sm;
&:focus, &:hover {
@include set-color($color-text);
background-color: $color-border-soft;
border-color: $color-text;
}
&:active {
@include set-color(color.scale($color-text, $lightness: 20%));
}
&:disabled, &[disabled] {
@include set-color($color-text-dim);
opacity: 0.5;
}
&:not([disabled]) {
@extend %nav-all;
cursor: pointer;
}
}
.control-option__binding-icon {
@include trans-colors-opa;
opacity: 1;
}
@keyframes control-option__binding-recording-scale {
0% {
transform: scale(1);
}
50% {
transform: scale(0.85);
}
to {
transform: scale(1);
}
}
.control-option__binding-recording {
@include trans-colors-opa;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
.control-option__binding-circle {
$rec-size: 24;
width: space($rec-size);
height: space($rec-size);
background-color: $color-error;
border-radius: space($rec-size);
animation: 1.5s sine-in-out infinite control-option__binding-recording-scale;
}
.control-option__binding-edge {
$edge-size: 36;
$h-edge-size: math.div($edge-size, 2);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: space($edge-size);
height: space($edge-size);
> svg.control-option__binding-edge-svg {
width: space($edge-size);
height: space($edge-size);
image-color: $color-error;
}
}
}