splitted up stylesheet and added lots of scaffolding to it. Style needs working.
[theme-danix.xyz.git] / assets / sass / layout / _menu.scss
diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss
new file mode 100644 (file)
index 0000000..e53f21f
--- /dev/null
@@ -0,0 +1,164 @@
+///\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(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
+\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(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
+                                       }\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(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
+                       &: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(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
+                       }\r
+\r
+                       &:hover, &:active {\r
+                               &:after {\r
+                                       opacity: 1;\r
+                               }\r
+                       }\r
+               }\r
+       }\r
+\r
+       body.is-ie {\r
+               #menu {\r
+                       background: transparentize(_palette(bg-alt), 0.025);\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
+       }
\ No newline at end of file