Added overflow stop for mobile menu, shifting some stuff.

This commit is contained in:
2018-06-18 21:55:24 +10:00
parent c52c04db63
commit 07aa74f359
12 changed files with 244 additions and 67 deletions

View File

@ -10,9 +10,8 @@
*/
.o-app {
position: relative;
min-height: 100vh;
height: 100vh;
width: 100%;
@extend %t-flexbox;
@include t-flex-direction(column);
overflow-y: scroll;
overflow-x: hidden;
}

View File

@ -3,18 +3,29 @@
* Mobile-Centric openable menu with a hamburger icon to toggle.
*
* Dependencies:
* styles/settings/animation.scss
* styles/settings/colors.scss
* styles/settings/z.scss
*
* Version:
* 1.0.0 - 2018/06/12
*/
$o-hamburger-menu--max: 200%;
$o-hamburger-menu--pos-x: 100%;
$o-hamburger-menu--pos-y: 0%;
@include t-keyframes(o-hamburger-menu--open) {
from { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
to { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
}
@include t-keyframes(o-hamburger-menu--close) {
from { clip-path: circle($o-hamburger-menu--max at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
to { clip-path: circle(0% at $o-hamburger-menu--pos-x $o-hamburger-menu--pos-y); }
}
.o-hamburger-menu {
border: 1px solid red;
&__menu {
@extend %t-list-blank;
display: none;
position: fixed;
top: 0;
@ -22,12 +33,37 @@
width: 100%;
height: 100%;
background: $s-color--menu__background;
transition: all 1s $s-animation--ease-out;
z-index: $s-z--menu;
@include t-animation-fill-mode(forwards);
@include t-animation-timing-function($s-animation--ease-out);
@include t-animation-duration(0.4s);
}
&__links {
@extend %t-list-blank;
padding: 1em;
}
&__link {
@extend %t-list-litem-blank;
display: block;
font-size: 1.25em;
width: 100%;
position: relative;
border: 1px solid red;
&-link {
position: relative;
display: block;
padding: 1.5em 0;
}
&:hover:before {
//@include t-translate-x(5%); Disabled due to not being needed on mobile
}
}
&__button {
@ -47,6 +83,14 @@
&.is-open {
.o-hamburger-menu__menu {
display: block;
@include t-animation-name(o-hamburger-menu--open);
}
}
&.is-closing {
.o-hamburger-menu__menu {
display: block;
@include t-animation-name(o-hamburger-menu--close);
}
}
}

View File

@ -20,7 +20,7 @@
.o-page-transition__container {
overflow: hidden;
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
}