first commit

2024-06-03 18:43:35 +02:00
parent 2da01a3f6e
commit f501d519af
883 changed files with 71550 additions and 2 deletions
--- a/dockers/web/html/assets/sass/layout/_menu.scss
+++ b/dockers/web/html/assets/sass/layout/_menu.scss
@ -0,0 +1,164 @@
+///
+/// Phantom by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Menu */
+
+	#wrapper {
+		@include vendor('transition', 'opacity #{_duration(menu)} ease');
+		opacity: 1;
+	}
+
+	#menu {
+		@include vendor('transform', 'translateX(#{_size(menu)})');
+		@include vendor('transition', ('transform #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));
+		position: fixed;
+		top: 0;
+		right: 0;
+		width: _size(menu);
+		max-width: 80%;
+		height: 100%;
+		-webkit-overflow-scrolling: touch;
+		background: _palette(fg);
+		color: _palette(bg);
+		cursor: default;
+		visibility: hidden;
+		z-index: _misc(z-index-base) + 2;
+
+		> .inner {
+			@include vendor('transition', 'opacity #{_duration(menu)} ease');
+			-webkit-overflow-scrolling: touch;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			padding: 2.75em;
+			opacity: 0;
+			overflow-y: auto;
+
+			> ul {
+				list-style: none;
+				margin: 0 0 (_size(element-margin) * 0.5) 0;
+				padding: 0;
+
+				> li {
+					padding: 0;
+					border-top: solid 1px transparentize(_palette(bg), 0.85);
+
+					a {
+						display: block;
+						padding: 1em 0;
+						line-height: 1.5;
+						border: 0;
+						color: inherit;
+					}
+
+					&:first-child {
+						border-top: 0;
+						margin-top: -1em;
+					}
+				}
+			}
+		}
+
+		> .close {
+			@include vendor('transition', (
+				'opacity #{_duration(menu)} ease',
+				'transform #{_duration(menu)} ease'
+			));
+			@include vendor('transform', 'scale(0.25) rotate(180deg)');
+			-webkit-tap-highlight-color: transparent;
+			display: block;
+			position: absolute;
+			top: 2em;
+			left: -6em;
+			width: 6em;
+			text-indent: 6em;
+			height: 3em;
+			border: 0;
+			font-size: 1em;
+			opacity: 0;
+			overflow: hidden;
+			padding: 0;
+			white-space: nowrap;
+
+			&:before, &:after {
+				@include vendor('transition', 'opacity #{_duration(transition)} ease');
+				content: '';
+				display: block;
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 2em 2em;
+			}
+
+			&:before {
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');
+				opacity: 0;
+			}
+
+			&:after {
+				background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');
+				opacity: 1;
+			}
+
+			&:hover {
+				&:before {
+					opacity: 1;
+				}
+
+				&:after {
+					opacity: 0;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			@include vendor('transform', 'translateX(#{_size(menu) * 0.75})');
+			width: (_size(menu) * 0.75);
+
+			> .inner {
+				padding: 2.75em 1.5em;
+			}
+
+			> .close {
+				top: 0.5em;
+				left: -4.25em;
+				width: 4.25em;
+				text-indent: 4.25em;
+
+				&:before, &:after {
+					background-size: 1.5em 1.5em;
+				}
+			}
+		}
+	}
+
+	body.is-menu-visible {
+		#wrapper {
+			@include vendor('pointer-events', 'none');
+			cursor: default;
+			opacity: 0.25;
+		}
+
+		#menu {
+			@include vendor('transform', 'translateX(0)');
+			visibility: visible;
+
+			> * {
+				opacity: 1;
+			}
+
+			.close {
+				@include vendor('transform', 'scale(1.0) rotate(0deg)');
+				opacity: 1;
+			}
+		}
+	}