stash

_sass/photos/layout/_main.scss

@@ -0,0 +1,118 @@
+///
+/// Lens by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Main */
+
+	#main {
+		@include vendor('transition', ('opacity #{_duration(layout)} ease', 'right #{_duration(layout)} ease', 'left #{_duration(layout)} ease', 'visibility #{_duration(layout)}'));
+		-webkit-overflow-scrolling: touch;
+		position: fixed;
+		top: 0;
+		width: _size(main);
+		height: 100%;
+		background: _palette(bg);
+		outline: 0;
+		overflow-x: hidden;
+		overflow-y: auto;
+		text-align: _misc(main-align);
+		visibility: visible;
+		z-index: _misc(z-index-base);
+
+		@if _misc(main-side) == 'left' {
+			left: 0;
+		}
+		@else {
+			right: 0;
+		}
+
+		.toggle {
+			-webkit-tap-highlight-color: rgba(0,0,0,0);
+			position: absolute;
+			top: 0;
+			width: 4em;
+			height: 4em;
+			background-image: url('images/close-small-alt.svg');
+			background-repeat: no-repeat;
+			background-size: 32px 32px;
+			cursor: pointer;
+			display: none;
+			z-index: 1;
+
+			@if _misc(main-side) == 'left' {
+				background-position: calc(100% - 0.5em) 0.5em;
+				right: 0;
+			}
+			@else {
+				background-position: 0.5em 0.5em;
+				left: 0;
+			}
+		}
+
+		body.fullscreen & {
+			visibility: hidden;
+
+			@if _misc(main-side) == 'left' {
+				left: (_size(main) * -1);
+			}
+			@else {
+				right: (_size(main) * -1);
+			}
+		}
+
+		body.is-preload-1 & {
+			opacity: 0;
+
+			@if _misc(main-side) == 'left' {
+				left: -2em;
+			}
+			@else {
+				right: -2em;
+			}
+		}
+
+		@include breakpoint('<=large') {
+			width: _size(main-alt);
+
+			body.fullscreen & {
+				@if _misc(main-side) == 'left' {
+					left: (_size(main-alt) * -1);
+				}
+				@else {
+					right: (_size(main-alt) * -1);
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			background: transparentize(_palette(bg), 0.075);
+
+			.toggle {
+				display: block;
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			@include vendor('transition', ('opacity #{_duration(layout-alt)} ease', 'visibility #{_duration(layout-alt)}'));
+			width: 100%;
+			background: _palette(bg);
+			text-align: center;
+
+			body.is-preload-1 & {
+				left: auto !important;
+				right: auto !important;
+			}
+
+			body.fullscreen & {
+				left: auto !important;
+				right: auto !important;
+				opacity: 0;
+			}
+
+			.toggle {
+				display: none;
+			}
+		}
+	}