town-page/_assets/styles/sequencer.scss

39 lines
712 B
SCSS
Raw Normal View History

2019-05-13 02:52:27 +00:00
.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;
2019-05-13 03:18:25 +00:00
-webkit-appearance: none;
2019-05-13 02:52:27 +00:00
transform: skew(30deg) rotate(-30deg);
background-image: asset_url("Neon_Cube_01_200209_v02-02.png");
2019-05-13 03:33:36 +00:00
padding-bottom: 78%;
2019-05-13 03:18:25 +00:00
margin: 12% -10%;
background-size: cover;
2019-05-13 03:31:46 +00:00
background-position: 0 100%;
2019-05-13 02:52:27 +00:00
&:checked {
2019-05-13 03:31:46 +00:00
background-position: 0 33.33%;
2020-02-09 11:00:28 +00:00
&.activated {
background-position: 0 0;
}
2019-05-13 02:52:27 +00:00
}
2020-02-09 11:00:28 +00:00
&.activated {
background-position: 0 66.66%;
}
}