X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;ds=sidebyside;f=assets%2Fsass%2Flayout%2F_menu.scss;fp=assets%2Fsass%2Flayout%2F_menu.scss;h=e53f21f0b41522960ab9f721ad8efdf707d06d8e;hb=748286b530a4b000cac6b88bbcebb258056a9e77;hp=0000000000000000000000000000000000000000;hpb=2882a244f06ed28dbd9148e7b36241242c836629;p=theme-danix.xyz.git
diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss
new file mode 100644
index 0000000..e53f21f
--- /dev/null
+++ b/assets/sass/layout/_menu.scss
@@ -0,0 +1,164 @@
+///
+/// Forty by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Menu */
+
+ #menu {
+ @include vendor('transition', (
+ 'transform #{_duration(menu)} ease',
+ 'opacity #{_duration(menu)} ease',
+ 'visibility #{_duration(menu)}'
+ ));
+ @include vendor('align-items', 'center');
+ @include vendor('display', 'flex');
+ @include vendor('justify-content', 'center');
+ @include vendor('pointer-events', 'none');
+ background: transparentize(_palette(bg), 0.1);
+ box-shadow: none;
+ height: 100%;
+ left: 0;
+ opacity: 0;
+ overflow: hidden;
+ padding: 3em 2em;
+ position: fixed;
+ top: 0;
+ visibility: hidden;
+ width: 100%;
+ z-index: _misc(z-index-base) + 2;
+
+ .inner {
+ @include vendor('transition', (
+ 'transform #{_duration(menu)} ease-out',
+ 'opacity #{_duration(menu)} ease',
+ 'visibility #{_duration(menu)}'
+ ));
+ @include vendor('transform', 'rotateX(20deg)');
+ -webkit-overflow-scrolling: touch;
+ max-width: 100%;
+ max-height: 100vh;
+ opacity: 0;
+ overflow: auto;
+ text-align: center;
+ visibility: hidden;
+ width: 18em;
+
+ > :first-child {
+ margin-top: _size(element-margin);
+ }
+
+ > :last-child {
+ margin-bottom: (_size(element-margin) * 1.5);
+ }
+ }
+
+ ul {
+ margin: 0 0 (_size(element-margin) * 0.5) 0;
+
+ &.links {
+ list-style: none;
+ padding: 0;
+
+ > li {
+ padding: 0;
+
+ > a:not(.button) {
+ border: 0;
+ border-top: solid 1px _palette(border);
+ display: block;
+ font-size: 0.8em;
+ font-weight: _font(weight-bold);
+ letter-spacing: _font(letter-spacing-alt);
+ line-height: 4em;
+ text-decoration: none;
+ text-transform: uppercase;
+ }
+
+ > .button {
+ display: block;
+ margin: 0.5em 0 0 0;
+ }
+
+ &:first-child {
+ > a:not(.button) {
+ border-top: 0 !important;
+ }
+ }
+ }
+ }
+ }
+
+ .close {
+ @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ border: 0;
+ cursor: pointer;
+ display: block;
+ height: 4em;
+ line-height: 4em;
+ overflow: hidden;
+ padding-right: 1.25em;
+ position: absolute;
+ right: 0;
+ text-align: right;
+ text-indent: 8em;
+ top: 0;
+ vertical-align: middle;
+ white-space: nowrap;
+ width: 8em;
+
+ &:before, &:after {
+ @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
+ background-position: center;
+ background-repeat: no-repeat;
+ content: '';
+ display: block;
+ height: 4em;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 4em;
+ }
+
+ &:before {
+ background-image: svg-url('');
+ }
+
+ &:after {
+ background-image: svg-url('');
+ opacity: 0;
+ }
+
+ &:hover, &:active {
+ &:after {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ body.is-ie {
+ #menu {
+ background: transparentize(_palette(bg-alt), 0.025);
+ }
+ }
+
+ body.is-menu-visible {
+ #wrapper {
+ @include vendor('filter', 'blur(0.5em)');
+ }
+
+ #menu {
+ @include vendor('pointer-events', 'auto');
+ opacity: 1;
+ visibility: visible;
+
+ .inner {
+ @include vendor('transform', 'none');
+ opacity: 1;
+ visibility: visible;
+ }
+ }
+ }
\ No newline at end of file