32 lines
611 B
SCSS
32 lines
611 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;
|
|
-webkit-appearance: none;
|
|
transform: skew(30deg) rotate(-30deg);
|
|
background-image: asset_url("Neon_Cube_01_190513_v01-02.png");;
|
|
padding-bottom: 78%;
|
|
margin: 12% -10%;
|
|
background-size: cover;
|
|
background-position: 0 100%;
|
|
&:checked {
|
|
background-position: 0 33.33%;
|
|
}
|
|
} |