There are no notes for this item.
<div class="mobile left">
<nav class="primary">
<ul>
<li class="mega">
<a href="">Maine <i class="fas fa-caret-down" aria-hidden=""></i></a>
<button class="sub-menu-toggle" data-menu="Maine "><i class="fa fa-angle-right" aria-hidden="true"></i></button></li>
<li>
<a href="#yup">Markup <i class="fas fa-caret-down" aria-hidden=""></i></a>
<button class="sub-menu-toggle" data-menu="Markup "><i class="fa fa-angle-right" aria-hidden="true"></i></button></li>
<li>
<a href="">New Hampshire</a>
</li>
<li>
<a href="">Vermont</a>
</li>
<li>
<a href="">Massachusetts</a>
</li>
<li>
<a href="">Rhode Island</a>
</li>
</ul>
</nav>
<div class="utilities">
<nav class="utility">
<ul>
<li><a href="">Careers</a></li>
<li><a href="">Legal</a></li>
<li><a href="">Log In</a></li>
</ul>
</nav>
<form class="search" method="post">
<div class="text">
<label for="search">Search the website</label>
<input id="search" placeholder="Search the website" type="text">
</div>
<div class="submit">
<input type="submit" value="Search">
</div>
</form>
</div>
</div>
///
/// The mobile navigation mixin is missing any kind of sass, docblock style
/// documentation within _components.scss. Sorry.
///
/// @demo demo/mobile-navigation.html
///
@mixin mobileNavigation() {
background-color: $gray-900;
bottom: 0;
display: none;
height: 100%;
opacity: 0;
overflow-y: auto;
padding: 1rem;
position: fixed;
top: 0;
transition: transform .25s;
width: 80%;
z-index: 1000;
&.left {
display: block;
left: 0;
right: auto;
transform: translateX(-100%);
}
&.right {
display: block;
left: auto;
right: 0;
transform: translateX(100%);
}
&.left.open, &.right.open {
transform: translateX(0);
transition: transform .25s;
}
&.init {
display: block;
opacity: 1;
.menu > div + div {
display: none
}
}
nav.utility {
ul li a {
padding: 0.75rem 0;
}
}
ul {
display: block;
padding-left: 0;
}
ul li {
align-items: center;
border-bottom: 1px solid $gray-800;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-bottom: 0;
text-align: left;
a {
color: #fff;
display: block;
padding: 1rem 0;
}
a > i.fa {
display: none;
}
i.fa {
display: inline-block;
}
}
@include breakpoint(lg) {
&.open.left {
transform: translateX(-100%);
}
&.open.right {
transform: translateX(100%);
}
}
}