59 lines
1.1 KiB
SCSS
59 lines
1.1 KiB
SCSS
|
/********************************
|
||
|
|
offcanvas toggler btn
|
||
|
|
********************************/
|
||
|
|
.mobile-menu-toggle {
|
||
|
|
svg {
|
||
|
|
width: 50px;
|
||
|
|
position: relative;
|
||
|
|
@include min-screen(576) {
|
||
|
|
top: -8px;
|
||
|
|
}
|
||
|
|
path {
|
||
|
|
transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25),
|
||
|
|
stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
|
||
|
|
fill: none;
|
||
|
|
stroke-dashoffset: 0;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-width: 30px;
|
||
|
|
&#top,
|
||
|
|
&#bottom {
|
||
|
|
stroke-dasharray: 240px 950px;
|
||
|
|
}
|
||
|
|
&#middle {
|
||
|
|
stroke-dasharray: 240px 240px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& .close {
|
||
|
|
svg {
|
||
|
|
path {
|
||
|
|
&#top,
|
||
|
|
&#bottom {
|
||
|
|
stroke-dasharray: -650px;
|
||
|
|
stroke-dashoffset: -650px;
|
||
|
|
}
|
||
|
|
&#middle {
|
||
|
|
stroke-dasharray: 1px 220px;
|
||
|
|
stroke-dashoffset: -115px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// theme1
|
||
|
|
&.theme1 {
|
||
|
|
svg {
|
||
|
|
path {
|
||
|
|
stroke: $color-dark;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/********************************
|
||
|
|
offcanvas toggler btn END
|
||
|
|
********************************/
|