Sites-Camelia/branches/magzine/v4/assets/sass/layout/_thumbnails.scss

79 lines
1.3 KiB
SCSS

@import '../libs/vars';
@import '../libs/functions';
@import '../libs/mixins';
///
/// Lens by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Thumbnails */
#thumbnails {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
padding: 0 0.75em;
article {
position: relative;
width: #{100% / _misc(thumbnails-per-row)};
background: #101010;
outline: 0;
.thumbnail {
-webkit-tap-highlight-color: rgba(0,0,0,0);
display: block;
position: relative;
border: 0;
outline: 0;
img {
display: block;
width: 100%;
}
&:before {
@include vendor('pointer-events', 'none');
@include vendor('transition', 'opacity 0.25s ease');
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 2px _palette(accent), inset 0 0 0px 3px rgba(0,0,0,0.15);
opacity: 0;
z-index: 1;
}
&:focus {
&:before {
opacity: 0.5;
}
}
}
h2, p {
display: none;
}
&.active {
.thumbnail {
&:before {
opacity: 1;
}
}
}
}
@include breakpoint(xsmall) {
article {
.thumbnail {
&:before {
display: none;
}
}
}
}
}