spc-site/data/magprog/assets/styles/layout/_sidebar.scss

///
/// Hyperspace by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Sidebar */

	#sidebar {
		@include padding(2.5em, 2.5em);
		background: _palette(bg);
		cursor: default;
		height: 100vh;
		left: 0;
		overflow-x: hidden;
		overflow-y: auto;
		position: fixed;
		text-align: right;
		top: 0;
		width: _size(sidebar-width);
		z-index: _misc(z-index-base);

		> .inner {
			@include vendor('display', 'flex');
			@include vendor('flex-direction', 'column');
			@include vendor('justify-content', 'center');
			@include vendor('transform', 'translateY(0)');
			@include vendor('transition', (
				'opacity #{_duration(activation)} ease',
			));
			min-height: 100%;
			opacity: 1;
			width: 100%;

			body.is-ie & {
				height: 100%;
			}
		}

		nav {
			> ul {
				list-style: none;
				padding: 0;

				> li {
					@include vendor('transform', 'translateY(0)');
					@include vendor('transition', (
						'opacity #{_duration(activation) * 0.15} ease',
						'transform #{_duration(activation) * 0.75} ease'
					));
					margin: 1.5em 0 0 0;
					opacity: 1;
					padding: 0;
					position: relative;

					&:first-child {
						margin: 0;
					}

					@for $i from 1 through _misc(max-sidebar-links) {
						&:nth-child(#{$i}) {
							@include vendor('transition-delay', '#{(_duration(activation) * 0.2 * $i) + (_duration(activation) * 0.25)}');
						}
					}
				}
			}

			a {
				@include vendor('transition', 'color #{_duration(transition)} ease');
				border: 0;
				color: _palette(fg-light);
				display: block;
				font-size: 0.6em;
				font-weight: _font(weight-bold);
				letter-spacing: _font(kerning-alt);
				line-height: 1.75;
				outline: 0;
				padding: 1.35em 0;
				position: relative;
				text-decoration: none;
				text-transform: uppercase;

				&:before,
				&:after {
					border-radius: 0.2em;
					bottom: 0;
					content: '';
					height: 0.2em;
					position: absolute;
					right: 0;
					width: 100%;
				}

				&:before {
					background: lighten(_palette(bg), 5);
				}

				&:after {
					@include vendor('background-image', 'linear-gradient(to right, #{_palette(accent1)}, #{_palette(accent3)})');
					@include vendor('transition', 'max-width #{_duration(transition)} ease');
					max-width: 0;
				}

				&:hover {
					color: _palette(fg);
				}

				&.active {
					color: _palette(fg-bold);

					&:after {
						max-width: 100%;
					}
				}
			}
		}

		body.is-preload & {
			> .inner {
				opacity: 0;
			}

			nav {
				ul {
					li {
						@include vendor('transform', 'translateY(2em)');
						opacity: 0;
					}
				}
			}
		}

		@include breakpoint('<=large') {
			height: _size(sidebar-height);
			left: 0;
			line-height: _size(sidebar-height);
			overflow: hidden;
			padding: 0;
			text-align: center;
			top: 0;
			width: 100%;

			> .inner {
				@include vendor('flex-direction', 'row');
				@include vendor('align-items', 'stretch');
				height: inherit;
				line-height: inherit;
			}

			nav {
				height: inherit;
				line-height: inherit;

				ul {
					@include vendor('display', 'flex');
					height: inherit;
					line-height: inherit;
					margin: 0;

					li {
						display: block;
						height: inherit;
						line-height: inherit;
						margin: 0 0 0 2em;
						padding: 0;
					}
				}

				a {
					height: inherit;
					line-height: inherit;
					padding: 0;

					&:after {
						background-image: none;
						background-color: _palette(accent3);
					}
				}
			}
		}

		@include breakpoint('<=small') {
			display: none;
		}
	}