Zelda64Recomp/assets/scss/styles/components/InputConfig.scss

347 lines
6.2 KiB
SCSS

@use 'sass:math';
// Probably will need to adjust for other langs...
$mapping-min-width: 80*8;
$visual-max-width: $base-modal-max-width - $mapping-min-width - $scrollbar-width;
.input-config {
padding: 0;
}
.input-config__horizontal-split {
display: flex;
position: relative;
flex-direction: row;
height: 100%;
}
.input-config__mappings {
display: block;
flex: 1 1 auto;
height: 100%;
min-width: space($mapping-min-width);
}
.input-config__mappings-scroll {
display: block;
width: 100%;
max-height: 100%;
overflow-y: auto;
}
.input-config__mappings-wrapper {
padding: space(8);
}
.input-config__visual-wrapper {
display: block;
width: auto;
height: auto;
max-width: space($visual-max-width);
max-height: space(math.div($visual-max-width, 4) * 3);
margin: auto 0;
flex: 1 1 100%;
}
.input-config__visual-aspect {
position: relative;
width: 100%;
padding-bottom: 75%;
background-color: $color-bg-shadow;
margin: auto 0;
}
.input-config__visual {
display: flex;
flex-direction: column;
position: absolute;
top: space(16);
right: space(16);
bottom: space(16);
left: space(16);
border-radius: space(108);
background-color: $color-white-a5;
}
.input-config__visual-half {
display: flex;
position: relative;
flex-direction: row;
flex: 1 1 100%;
padding: 6%;
&--bottom {
align-items: flex-end;
justify-content: space-between;
}
}
.input-config__visual-quarter-left {
display: flex;
flex: 1 1 50%;
width: auto;
align-items: flex-start;
justify-content: flex-start;
}
.input-config__visual-quarter-right {
display: flex;
flex: 1 1 100%;
align-items: flex-start;
justify-content: flex-end;
}
.input-config__visual-stick-wrapper {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.input-viz {
@include trans-colors-opa;
position: relative;
display: flex;
align-items: center;
justify-content: center;
> svg:not(.input-viz__dpad-arrow) {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
&__mappings div {
@extend %prompt-font-sm;
}
}
$all-inputs:
A,
B,
Z,
START,
DPAD_UP,
DPAD_DOWN,
DPAD_LEFT,
DPAD_RIGHT,
L,
R,
C_UP,
C_DOWN,
C_LEFT,
C_RIGHT,
X_AXIS_NEG,
X_AXIS_POS,
Y_AXIS_NEG,
Y_AXIS_POS;
// Show default state while no inputs are active
[cur-input="NONE"] .input-viz[visual-input] {
opacity: 1;
}
@each $inp in $all-inputs {
.input-viz[visual-input~="#{$inp}"] {
opacity: 0.25;
[cur-input="#{$inp}"] & {
opacity: 1.0;
}
}
}
@mixin set-sizes($sz) {
width: space($sz);
height: space($sz);
> svg {
width: space($sz);
height: space($sz);
}
}
.input-viz__button {
@include set-color($color-text);
&--sm {
@include set-sizes(64);
}
&--md {
@include set-sizes(76);
}
&--lg {
@include set-sizes(84);
}
&--C {
@include set-svgs-color($color-warning);
}
&--A {
@include set-svgs-color($color-a);
margin-top: auto;
}
&--B {
@include set-svgs-color($color-success);
}
&--Start {
@include set-svgs-color($color-error);
}
}
.input-viz__Z {
@include set-svgs-color($color-warning);
@include set-sizes(136);
}
$dpad-size: 192;
.input-viz.input-viz__dpad {
@include set-svgs-color($color-text);
@include set-sizes($dpad-size);
position: relative;
}
$stick-size: 200;
.input-config__visual-stick {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: space($stick-size);
height: space($stick-size);
border-radius: space(math.div($stick-size, 2));
background-color: $color-white-a5;
}
.input-viz__dpad-split,
.input-viz__stick-split {
@include inset-block(0);
display: flex;
width: 100%;
height: 100%;
&--vertical {
flex-direction: column;
align-items: center;
justify-content: space-between;
}
&--horizontal {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
> div {
display: flex;
flex: 1 1 100%;
align-items: center;
justify-content: center;
flex-direction: row;
}
}
.input-viz__dpad-split > div {
width: space(math.div($dpad-size, 3));
height: space(math.div($dpad-size, 3));
}
.input-viz__stick-split > div {
width: space(math.div($stick-size, 3));
height: space(math.div($stick-size, 3));
}
.input-viz__dpad-arrow {
position: absolute;
width: space(60);
height: space(60);
$edge-dist: space(4);
&--up {
top: $edge-dist;
margin: 0 auto;
}
&--down {
bottom: $edge-dist;
margin: 0 auto;
transform: rotate(180deg);
}
&--left {
left: $edge-dist;
margin: auto 0;
transform: rotate(-90deg);
}
&--right {
right: $edge-dist;
margin: auto 0;
transform: rotate(90deg);
}
}
.input-viz__R {
@include set-svgs-color($color-white);
@include set-sizes(96);
}
.input-viz__L {
@include set-svgs-color($color-secondary);
@include set-sizes(136);
}
.input-config__c-buttons {
position: relative;
width: space(76+76+56);
height: space(76+56);
&-lr, &-du {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
&-lr {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
&-du {
flex-direction: column-reverse;
align-items: center;
justify-content: space-between;
}
.input-viz {
&[visual-input="C_UP"] {
margin-top: space(-32);
}
}
}
.input-config__main-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
width: space(268);
height: space(128);
position: relative;
margin-right: space(10);
}