Zelda64Recomp/assets/scss/styles/components/Toggle.scss

98 lines
2.2 KiB
SCSS
Raw Normal View History

@use "sass:math";
$toggle-width: 162;
$toggle-height: 72;
$toggle-floater-width: 80;
$toggle-floater-height: 64;
$toggle-floater-margin: 4;
$toggle-checked-left-offset: $toggle-width - $toggle-floater-margin - $toggle-floater-width;
.toggle {
@extend %nav-all;
@include trans-colors-opa;
display: flex;
position: relative;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: space($toggle-width);
height: space($toggle-height);
border-radius: space(math.div($toggle-height, 2));
opacity: 0.9;
background: $color-transparent;
cursor: pointer;
&:hover, &:focus-visible, &:focus {
opacity: 1;
background-color: $color-secondary-a30;
}
&:active {
opacity: 1;
background-color: $color-secondary-a5;
}
.toggle__border {
@include inner-border-block($color-secondary-l);
border-radius: space(math.div($toggle-height, 2));
}
.toggle__floater {
position: absolute;
top: 50%;
left: space($toggle-floater-margin);
width: space($toggle-floater-width);
height: space($toggle-floater-height);
transform: translateY(-50%);
border-radius: space(math.div($toggle-floater-height, 2));
background: $color-secondary-d;
}
&--checked {
.toggle__floater {
left: space($toggle-checked-left-offset);
}
.toggle__icon {
&.toggle__icon--left {
opacity: 0.9;
color: $color-secondary-l;
}
&.toggle__icon--right {
opacity: 1.0;
color: $color-text;
}
}
}
}
.toggle__icons {
display: flex;
position: absolute;
top: 50%;
right: space(16);
left: space(16);
align-items: center;
justify-content: space-between;
height: space(56);
transform: translateY(-50%);
}
.toggle__icon {
@extend %prompt-font-lg;
@include trans-colors;
display: flex;
align-items: center;
justify-content: center;
width: space(56);
height: space(56);
color: $color-text;
&--right {
opacity: 1;
color: $color-secondary-l;
}
}