Built out (functional) hamburger menu
This commit is contained in:
52
public/styles/objects/_hamburger-menu.scss
Normal file
52
public/styles/objects/_hamburger-menu.scss
Normal file
@ -0,0 +1,52 @@
|
||||
/*
|
||||
* Hamburger Menu
|
||||
* Mobile-Centric openable menu with a hamburger icon to toggle.
|
||||
*
|
||||
* Dependencies:
|
||||
* styles/settings/colors.scss
|
||||
* styles/settings/z.scss
|
||||
*
|
||||
* Version:
|
||||
* 1.0.0 - 2018/06/12
|
||||
*/
|
||||
.o-hamburger-menu {
|
||||
border: 1px solid red;
|
||||
|
||||
&__menu {
|
||||
@extend %t-list-blank;
|
||||
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $s-color--menu__background;
|
||||
|
||||
z-index: $s-z--menu;
|
||||
}
|
||||
|
||||
&__link {
|
||||
@extend %t-list-litem-blank;
|
||||
}
|
||||
|
||||
&__button {
|
||||
position: relative;//Helps us win the Z-Fight
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5em;
|
||||
cursor: pointer;
|
||||
z-index: $s-z--menu-button;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
&.is-open {
|
||||
.o-hamburger-menu__menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
@ -37,7 +37,6 @@ $o-navbar--link-thickness: 5px;
|
||||
&__logo-container {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
@ -81,12 +80,12 @@ $o-navbar--link-thickness: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__hamburger {
|
||||
}
|
||||
|
||||
@include t-media-query($s-xsmall-up) {
|
||||
//padding: 1em;
|
||||
|
||||
&__logo-container {
|
||||
text-align: left;
|
||||
&__hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
@ -99,6 +98,7 @@ $o-navbar--link-thickness: 5px;
|
||||
}
|
||||
|
||||
@include t-media-query($s-small-up) {
|
||||
|
||||
&__logo {
|
||||
width: 12em;
|
||||
}
|
||||
|
Reference in New Issue
Block a user