cedaei.com/themes/codex/assets/scss/partials/_burger.scss

56 lines
911 B
SCSS
Raw Normal View History

.burger__container {
height: $burgerContainerHeight;
display: flex;
align-items: center;
padding: 0 1.5rem;
position: fixed;
width: 100%;
background: $white;
z-index: 2;
@media screen and (min-width: $medium) {
display: none;
}
}
.burger {
position: relative;
width: $meatWidth;
height: $meatWidth;
cursor: pointer;
}
.burger__meat {
position: absolute;
width: $meatWidth;
height: $meatHeight;
background: $black;
top: calc(50% - #{$meatHeight} / 2);
left: calc(50% - #{$meatWidth} / 2);
transition: all 150ms ease-in;
}
.burger__meat--1 {
transform: translateY(-10px);
}
.burger__meat--2 {
width: calc(#{$meatWidth} - 6px);
}
.burger__meat--3 {
transform: translateY(10px);
}
.nav--active .burger__meat--1 {
transform: rotate(45deg);
}
.nav--active .burger__meat--2 {
opacity: 0;
}
.nav--active .burger__meat--3 {
transform: rotate(-45deg);
}