bemuse/src/app/ui/OptionsInputKeys.scss
@use 'sass:math';
@import '~bemuse/ui/common';
.OptionsInputKeys {
height: 160px;
position: relative;
$spacing: 12px;
&のkeys {
position: absolute;
top: 0;
right: -$spacing;
bottom: -$spacing;
left: 0;
}
.OptionsInputKey {
position: absolute;
box-sizing: border-box;
height: 50%;
padding-bottom: $spacing;
padding-right: $spacing;
}
&[data-arrangement='bm'] {
width: 240px;
.OptionsInputKey {
width: 25%;
&[data-n='1'],
&[data-n='3'],
&[data-n='5'],
&[data-n='7'] {
top: 50%;
}
&[data-n='2'],
&[data-n='4'],
&[data-n='6'] {
top: 0%;
}
&[data-n='1'] {
left: 0%;
}
&[data-n='2'] {
left: 12.5%;
}
&[data-n='3'] {
left: 25%;
}
&[data-n='4'] {
left: 37.5%;
}
&[data-n='5'] {
left: 50%;
}
&[data-n='6'] {
left: 62.5%;
}
&[data-n='7'] {
left: 75%;
}
}
}
&[data-arrangement='kb'] {
width: 420px;
.OptionsInputKey {
width: math.div(100%, 7);
top: 0%;
&[data-n='1'] {
left: math.div(100%, 7) * 0;
}
&[data-n='2'] {
left: math.div(100%, 7) * 1;
}
&[data-n='3'] {
left: math.div(100%, 7) * 2;
}
&[data-n='4'] {
left: math.div(100%, 7) * 1;
width: math.div(100%, 7) * 5;
top: 50%;
}
&[data-n='5'] {
left: math.div(100%, 7) * 4;
}
&[data-n='6'] {
left: math.div(100%, 7) * 5;
}
&[data-n='7'] {
left: math.div(100%, 7) * 6;
}
}
}
}