town-page/_assets/styles/sequencer.scss

32 lines
608 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: 77%;
margin: 12% -10%;
background-size: cover;
background-position: bottom;
&:checked {
background-position: top;
}
}