Skip to content

Instantly share code, notes, and snippets.

@rafibomb
Created December 22, 2021 19:19
Show Gist options
  • Save rafibomb/5e7376193f63b9e158f6e08e5198b73a to your computer and use it in GitHub Desktop.
Save rafibomb/5e7376193f63b9e158f6e08e5198b73a to your computer and use it in GitHub Desktop.
Scroll Toggle SCSS
.tile-display {
--transition-time: 1s;
--transition-easing: ease-in-out;
text-align: left;
background-color: swatch(fill);
border-radius: var(--tile-radius);
margin-bottom: 150px;
.tile-content-wrapper {
--column-gap: 50px;
--row-gap: 80px;
--max-width: 925px;
--padding-top: 125px;
padding: var(--padding-top) 30px;
max-width: var(--max-width);
width: auto;
margin-left: auto;
margin-right: auto;
display: grid;
grid-column-gap: var(--column-gap);
grid-row-gap: var(--row-gap);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
align-content: start;
grid-template-areas:
"image copy"
"image control";
@include viewport(medium) {
--row-gap: 60px;
--padding-top: 90px;
}
@include viewport(small) {
--row-gap: 30px;
--padding-top: 30px;
padding: var(--padding-top) 30px calc(var(--padding-top)*2);
grid-template-areas:
"copy"
"image"
"control";
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
place-items: center;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment