stash

_sass/photos/layout/_thumbnails.scss

@@ -0,0 +1,75 @@
+///
+/// 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;
+					}
+				}
+			}
+		}
+	}