You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.1 KiB
SCSS
72 lines
1.1 KiB
SCSS
.demo-list .figure-wrap {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.demo-list .figure-wrap,
|
|
.demo-list .figure-wrap img {
|
|
// Promote to its own layer. makes filters look ok on retina with images
|
|
transform: translateZ(0);
|
|
transition: 0.1s ease;
|
|
}
|
|
|
|
.demo-list:hover .figure-wrap {
|
|
transform: scale3d(1, 1, 1);
|
|
|
|
img {
|
|
filter: grayscale(1);
|
|
}
|
|
}
|
|
|
|
.demo-list:hover .figure-wrap:hover {
|
|
z-index: 2;
|
|
transform: scale3d(1.05, 1.05, 1);
|
|
|
|
img {
|
|
filter: none;
|
|
}
|
|
}
|
|
|
|
.demo-list .figure-wrap:nth-child(4n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.demo-list .figure-wrap > a {
|
|
display: block;
|
|
}
|
|
|
|
.demo-list .figure-wrap figcaption {
|
|
height: 2em;
|
|
margin-top: 0.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.demo-link-container::before {
|
|
content: '➜';
|
|
display: inline-block;
|
|
color: $emerald;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.demo-link-container--external::before {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
span.demo-link-container::before {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
@media screen and (max-width: 47.9375em) {
|
|
.demo-list + .demo-list {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.figure-wrap:nth-child(odd) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.figure-wrap:nth-child(n + 3) {
|
|
margin-top: 1em;
|
|
}
|
|
}
|