hypothetical/resources/sass/sections/_nav.scss
2022-06-13 17:36:34 -04:00

207 lines
5.5 KiB
SCSS

.nav-section-component {
$logo-offset: pxrem(10);
$desktop-logo-width: pxrem(35);
$mobile-logo-width: pxrem(30);
@include font-sans-semibold;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
user-select: none;
&-mobile-header {
position: relative;
width: 100%;
height: $nav-height-mobile;
background-color: $c-base;
@media (min-width: $nav-desktop-min) {
display: none;
}
&-toggle {
position: absolute;
top: 50%;
right: ($grid-gutter-width / 2);
transform: translateY(-50%);
margin: 0px;
width: pxrem(22);
height: pxrem(14);
padding: 0px;
border: 0;
border-radius: 0;
cursor: pointer;
&, &:hover, &:focus {
background-color: transparent;
}
.icon-bar {
position: absolute;
left: 0px;
margin: 0px;
width: 100%;
height: pxrem(2);
background-color: $c-text-light;
transition: all 150ms;
&:nth-child(1), &:nth-child(3) {
transform: translateY(0%) rotate(0deg);
}
&:nth-child(1) {
top: 0%;
}
&:nth-child(2) {
top: 50%;
transform: translateY(-50%);
opacity: 1;
}
&:nth-child(3) {
bottom: 0%;
}
}
&.open .icon-bar {
&:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
}
}
}
&-links {
background-color: $c-base;
opacity: 1;
transition: max-height 500ms;
@media (max-width: $nav-mobile-max) {
overflow: hidden;
z-index: 100;
position: relative;
max-height: ($nav-link-height-mobile * $nav-link-count);
&:not(.open) {
max-height: 0px;
}
}
@media (min-width: $nav-desktop-min) {
display: flex;
width: 100%;
height: $nav-height-desktop;
justify-content: flex-end;
align-items: center;
}
&-wrapper {
@media (max-width: $nav-mobile-max) {
overflow-y: auto;
max-height: calc(100vh - #{$nav-height-mobile});
}
@media (min-width: $nav-desktop-min) {
padding: 0px $grid-gutter-width 0px (($grid-gutter-width / 2) + $desktop-logo-width + $logo-offset);
}
.navlink {
position: relative;
display: inline-block;
color: $c-text-light;
font-size: pxrem(14);
text-transform: uppercase;
text-decoration: none;
@media (max-width: $nav-mobile-max) {
display: block;
height: $nav-link-height-mobile;
padding: 0px pxrem(10);
background-color: $c-base;
line-height: $nav-link-height-mobile;
transition: background-color 150ms;
&:not(.active):hover {
background-color: lighten($c-base, 5%);
}
}
@media (min-width: $nav-desktop-min) {
padding: pxrem(5) pxrem(20);
transition: color 150ms;
&:first-child {
padding-left: 0px;
}
&:last-child {
padding-right: 0px;
}
&:not(.active):hover {
color: darken($c-text-light, 5%);
}
}
&:hover, &:focus {
text-decoration: none;
}
span {
position: relative;
padding: pxrem(3) 0px;
&:after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 1px;
background-color: $c-text-light;
opacity: 0;
transition: opacity 200ms;
}
}
&.active {
pointer-events: none;
span:after {
opacity: 1;
}
}
}
}
}
&-logo {
position: absolute;
top: ($nav-height-mobile / 2);
left: $logo-offset;
transform: translateY(-50%);
display: inline-block;
width: $mobile-logo-width;
@media (min-width: $nav-desktop-min) {
top: ($nav-height-desktop / 2);
width: $desktop-logo-width;
}
img {
@include img-fluid;
width: 100%;
}
}
}