29 lines
465 B
SCSS
29 lines
465 B
SCSS
|
.sequencer-baseline {
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sequencer-wrapper {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 12%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sequencer {
|
||
|
|
display: grid;
|
||
|
|
margin: 0 auto;
|
||
|
|
grid-template-columns: repeat(8, 1fr);
|
||
|
|
transform: rotate(30deg) skew(-30deg);
|
||
|
|
left: 25%;
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sequencer-button {
|
||
|
|
-moz-appearance: none;
|
||
|
|
transform: skew(30deg) rotate(-30deg);
|
||
|
|
background: white;
|
||
|
|
padding-bottom: 100%;
|
||
|
|
margin: 0;
|
||
|
|
&:checked {
|
||
|
|
background: #000;
|
||
|
|
}
|
||
|
|
}
|