what2watch/scss/plugins/nav/_plugin.scss

122 lines
2.9 KiB
SCSS
Raw Normal View History

2023-09-22 00:43:18 +00:00
// Navigation bar
@import 'class';
nav {
@extend %nav;
}
@if $picnic-nav-responsive {
nav .burger {
display: none;
}
@media all and (max-width: $picnic-breakpoint) {
nav {
.burger {
display: inline-block;
cursor: pointer;
bottom: -1000em;
margin: 0;
// fix blue flash before animation in chrome
-webkit-tap-highlight-color: transparent;
}
.burger ~ .menu,
.show:checked ~ .burger {
position: fixed;
min-height: 100%;
top: 0;
@if $picnic-nav-open-left{
left: 0;
}
@else{
right: 0;
}
bottom: -1000em;
margin: 0;
background: $picnic-white;
transition: all $picnic-nav-timing ease;
transform: none;
}
.burger ~ .menu {
z-index: 11;
}
.show:checked ~ .burger {
color: transparent;
width: 100%;
border-radius: 0;
background: $picnic-overlay;
transition: all $picnic-nav-timing ease;
}
// Show animation
.show ~ .menu {
width: 70%;
max-width: 300px;
// max-width: 0;
transform-origin: center right;
transition: all math.div($picnic-nav-timing, 2) ease;
// opacity: 0;
// width: 0;
transform: scaleX(0);
& > * {
transform: translateX(100%);
transition: all 0s ease $picnic-nav-timing;
}
}
.show:checked ~ .menu > *:nth-child(1) {
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
.show:checked ~ .menu > *:nth-child(2) {
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.2;
}
.show:checked ~ .menu > *:nth-child(3) {
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.4;
}
.show:checked ~ .menu > *:nth-child(4) {
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.6;
}
.show:checked ~ .menu > *:nth-child(5) {
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 0.8;
}
.show:checked ~ .menu > *:nth-child(6) {
transition: all $picnic-nav-timing cubic-bezier(0.645, 0.045, 0.355, 1) $picnic-nav-timing * 1;
}
.show:checked ~ .menu {
// opacity: 1;
// width: 70%;
transform: scaleX(1);
& > * {
transform: translateX(0);
transition: all $picnic-nav-timing ease-in-out $picnic-nav-timing * 1.2;
}
}
.burger ~ .menu > * {
display: block;
margin: math.div($picnic-separation, 2);
text-align: left;
max-width: calc(100% - #{$picnic-separation});
}
.burger ~ .menu > a {
padding: math.div($picnic-separation, 2) $picnic-separation * 1.5;
}
}
}
}