added dark theme option. It ìs selected automagically based on system choiche of...

[theme-danix.xyz.git] / assets / sass / layout / _menu.scss

///\r
/// Forty by HTML5 UP\r
/// html5up.net | @ajlkn\r
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
///\r
\r
/* Menu */\r
\r
	#menu {\r
		@include vendor('transition', (\r
			'transform #{_duration(menu)} ease',\r
			'opacity #{_duration(menu)} ease',\r
			'visibility #{_duration(menu)}'\r
		));\r
		@include vendor('align-items', 'center');\r
		@include vendor('display', 'flex');\r
		@include vendor('justify-content', 'center');\r
		@include vendor('pointer-events', 'none');\r
		background: transparentize(_palette_light(bg), 0.1);\r
		box-shadow: none;\r
		height: 100%;\r
		left: 0;\r
		opacity: 0;\r
		overflow: hidden;\r
		padding: 3em 2em;\r
		position: fixed;\r
		top: 0;\r
		visibility: hidden;\r
		width: 100%;\r
		z-index: _misc(z-index-base) + 2;\r
		@media screen and (prefers-color-scheme: dark) {\r
			background: transparentize(_palette_dark(bg), 0.1);\r
		}\r
\r
		.inner {\r
			@include vendor('transition', (\r
				'transform #{_duration(menu)} ease-out',\r
				'opacity #{_duration(menu)} ease',\r
				'visibility #{_duration(menu)}'\r
			));\r
			@include vendor('transform', 'rotateX(20deg)');\r
			-webkit-overflow-scrolling: touch;\r
			max-width: 100%;\r
			max-height: 100vh;\r
			opacity: 0;\r
			overflow: auto;\r
			text-align: center;\r
			visibility: hidden;\r
			width: 18em;\r
\r
			> :first-child {\r
				margin-top: _size(element-margin);\r
			}\r
\r
			> :last-child {\r
				margin-bottom: (_size(element-margin) * 1.5);\r
			}\r
		}\r
\r
		ul {\r
			margin: 0 0 (_size(element-margin) * 0.5) 0;\r
\r
			&.links {\r
				list-style: none;\r
				padding: 0;\r
\r
				> li {\r
					padding: 0;\r
\r
					> a:not(.button) {\r
						border: 0;\r
						border-top: solid 1px _palette_light(border);\r
						display: block;\r
						font-size: 0.8em;\r
						font-weight: _font(weight-bold);\r
						letter-spacing: _font(letter-spacing-alt);\r
						line-height: 4em;\r
						text-decoration: none;\r
						text-transform: uppercase;\r
						@media screen and (prefers-color-scheme: dark) {\r
							border-top: solid 1px _palette_dark(border);\r
						}\r
					}\r
\r
					> .button {\r
						display: block;\r
						margin: 0.5em 0 0 0;\r
					}\r
\r
					&:first-child {\r
						> a:not(.button) {\r
							border-top: 0 !important;\r
						}\r
					}\r
				}\r
			}\r
		}\r
\r
		.close {\r
			@include vendor('transition', 'color #{_duration(transition)} ease-in-out');\r
			-webkit-tap-highlight-color: rgba(0,0,0,0);\r
			border: 0;\r
			cursor: pointer;\r
			display: block;\r
			height: 4em;\r
			line-height: 4em;\r
			overflow: hidden;\r
			padding-right: 1.25em;\r
			position: absolute;\r
			right: 0;\r
			text-align: right;\r
			text-indent: 8em;\r
			top: 0;\r
			vertical-align: middle;\r
			white-space: nowrap;\r
			width: 8em;\r
\r
			&:before, &:after {\r
				@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');\r
				background-position: center;\r
				background-repeat: no-repeat;\r
				content: '';\r
				display: block;\r
				height: 4em;\r
				position: absolute;\r
				right: 0;\r
				top: 0;\r
				width: 4em;\r
			}\r
\r
			&:before {\r
				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
				@media screen and (prefers-color-scheme: dark) {\r
					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
				}\r
			}\r
\r
			&:after {\r
				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
				opacity: 0;\r
				@media screen and (prefers-color-scheme: dark) {\r
					background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');\r
				}\r
			}\r
\r
			&:hover, &:active {\r
				&:after {\r
					opacity: 1;\r
				}\r
			}\r
		}\r
	}\r
\r
	body.is-ie {\r
		#menu {\r
			background: transparentize(_palette_light(bg-alt), 0.025);\r
			@media screen and (prefers-color-scheme: dark) {\r
				background: transparentize(_palette_dark(bg-alt), 0.025);\r
			}\r
		}\r
	}\r
\r
	body.is-menu-visible {\r
		#wrapper {\r
			@include vendor('filter', 'blur(0.5em)');\r
		}\r
\r
		#menu {\r
			@include vendor('pointer-events', 'auto');\r
			opacity: 1;\r
			visibility: visible;\r
\r
			.inner {\r
				@include vendor('transform', 'none');\r
				opacity: 1;\r
				visibility: visible;\r
			}\r
		}\r
	}