.page-review {
input { display: none; } .review-hover { background: rgba($link-color, 0.05); border: 0.1em solid transparent; cursor: pointer; display: inline-block; margin-bottom: 0.2em; padding: 0 0.2em; } input:checked + .review-hover, .review-hover:hover { background: none; border: 0.1em solid; }
}
.review-thumbs, .everything-thumbs, .topnine-thumbs {
@extend %clearfix; height: 100%; width: 100%;
}
.review-thumb, .everything-thumb, .topnine-thumb {
background-position: center; background-size: cover; display: block; padding-bottom: (100 / 6) * 1%; position: relative; width: (100 / 6) * 1%; &::before, &::after { content: ""; position: absolute; } &::before { background: transparent; transition: background 0.2s; } &:hover { &::before { background: rgba($black, 0.75); bottom: 0; height: 100%; left: 0; right: 0; top: 0; transition: background 0.2s; width: 100%; } &::after { @extend %fancy-type; align-items: center; box-sizing: border-box; color: $white; content: attr(title); display: flex; font-size: 0.6em; height: 100%; justify-content: center; padding: 0 0.2em; text-align: center; text-transform: uppercase; width: 100%; word-wrap: break-word; } } .icon { bottom: 3px; color: rgba($white, 0.7); position: absolute; right: 3px; }
}
.topnine-thumb {
padding-bottom: (100 / 3) * 1%; width: (100 / 3) * 1%;
}
// scss-lint:disable PropertySortOrder, DeclarationOrder .review-container, .review-thumbs, .everything-thumbs, .topnine-thumbs {
-webkit-box-align: top; -webkit-align-items: top; -ms-flex-align: top; align-items: top; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: left; -webkit-justify-content: left; -ms-flex-pack: left; justify-content: left;
}
.review-container + .container {
margin-top: 1em;
}
.page-playlists .everything-thumb:hover::after {
font-size: 1em;
}