64 lines
1.8 KiB
SCSS
64 lines
1.8 KiB
SCSS
// = Main Navbar
|
|
// ============================================================================
|
|
.o_main_navbar {
|
|
.o_menu_toggle {
|
|
@extend %-main-navbar-entry-base;
|
|
@extend %-main-navbar-entry-spacing;
|
|
color: $o-navbar-entry-color;
|
|
|
|
rect, g {
|
|
transform-origin: 0 50%;
|
|
}
|
|
|
|
// Define a local mixin to handle the toggle state
|
|
// --------------------------------------------------------------------
|
|
@mixin o_main_navbar_toggler_toggled() {
|
|
rect {
|
|
width: 6px;
|
|
height: 3px;
|
|
|
|
&:first-child {
|
|
transform: translate(12%,0);
|
|
rx: 1;
|
|
}
|
|
}
|
|
|
|
#o_menu_toggle_row_0 {
|
|
transform: scale3d(.5, 1, 1) translate(0, 45%) skewY(-22deg);
|
|
|
|
+ g rect {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
#o_menu_toggle_row_2 {
|
|
transform: scale3d(.5, 1, 1) translate(0, -37%) skewY(22deg);
|
|
}
|
|
}
|
|
|
|
&.o_menu_toggle_back {
|
|
@include o_main_navbar_toggler_toggled();
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
// Animate on large screen without 'reduced-motion' only.
|
|
// --------------------------------------------------------------------
|
|
@include media-breakpoint-up(lg) {
|
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
&:hover {
|
|
@include o_main_navbar_toggler_toggled();
|
|
}
|
|
|
|
&, g {
|
|
transition: all .3s;
|
|
}
|
|
|
|
rect {
|
|
transition: all .1s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|