192 lines
6.6 KiB
SCSS
192 lines
6.6 KiB
SCSS
#{$wrap} .mega-menu-toggle {
|
|
|
|
|
|
@if length($menu_toggle_blocks) > 0 {
|
|
@each $item in $menu_toggle_blocks {
|
|
$id: nth($item, 1);
|
|
$align: nth($item, 2);
|
|
$closed_text: nth($item, 3);
|
|
$open_text: nth($item, 4);
|
|
$closed_icon: nth($item, 5);
|
|
$open_icon: nth($item, 6);
|
|
$text_color: nth($item, 7);
|
|
$icon_color: nth($item, 8);
|
|
$icon_position: nth($item, 9);
|
|
$text_size: nth($item, 10);
|
|
$icon_size: nth($item, 11);
|
|
|
|
@if type-of($id) == number {
|
|
|
|
.mega-toggle-block-#{$id} button.mega-toggle-standard {
|
|
cursor: pointer;
|
|
color: $text_color;
|
|
font-size: $text_size;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 5px;
|
|
|
|
@if $icon_position == before {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.mega-toggle-label-open {
|
|
display: none;
|
|
}
|
|
|
|
.mega-toggle-label-closed {
|
|
display: flex;
|
|
}
|
|
|
|
&:after {
|
|
display: inline-block;
|
|
content: $closed_icon;
|
|
font-family: 'dashicons';
|
|
font-size: $icon_size;
|
|
color: $icon_color;
|
|
}
|
|
}
|
|
|
|
&.mega-menu-open {
|
|
|
|
.mega-toggle-block-#{$id} button {
|
|
|
|
&:after {
|
|
content: $open_icon;
|
|
}
|
|
|
|
.mega-toggle-label-open {
|
|
display: flex;
|
|
}
|
|
.mega-toggle-label-closed {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@if length($spacer_toggle_blocks) > 0 {
|
|
@each $item in $spacer_toggle_blocks {
|
|
|
|
$id: nth($item, 1);
|
|
$align: nth($item, 2);
|
|
$width: nth($item, 3);
|
|
|
|
@if type-of($id) == number {
|
|
|
|
.mega-toggle-block-#{$id} {
|
|
width: $width;
|
|
margin: 0;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
@if length($menu_toggle_animated_blocks) > 0 {
|
|
@each $item in $menu_toggle_animated_blocks {
|
|
|
|
$id: nth($item, 1);
|
|
$scale: nth($item, 2);
|
|
$color: nth($item, 3);
|
|
|
|
@if type-of($id) == number {
|
|
|
|
.mega-toggle-block-#{$id} {
|
|
cursor: pointer;
|
|
|
|
/*!
|
|
* Hamburgers
|
|
* @description Tasty CSS-animated hamburgers
|
|
* @author Jonathan Suh @jonsuh
|
|
* @site https://jonsuh.com/hamburgers
|
|
* @link https://github.com/jonsuh/hamburgers
|
|
*/
|
|
.mega-toggle-animated {
|
|
padding: 0;
|
|
display: flex;
|
|
cursor: pointer;
|
|
transition-property: opacity, filter;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: linear;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-transform: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
transform: scale($scale);
|
|
align-self: center;
|
|
outline: 0;
|
|
background: none;
|
|
}
|
|
.mega-toggle-animated-box {
|
|
width: 40px;
|
|
height: 24px;
|
|
display: inline-block;
|
|
position: relative;
|
|
outline: 0;
|
|
}
|
|
.mega-toggle-animated-inner {
|
|
display: block;
|
|
top: 50%;
|
|
margin-top: -2px;
|
|
}
|
|
.mega-toggle-animated-inner,
|
|
.mega-toggle-animated-inner::before,
|
|
.mega-toggle-animated-inner::after {
|
|
width: 40px;
|
|
height: 4px;
|
|
background-color: $color;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
transition-property: transform;
|
|
transition-duration: 0.15s;
|
|
transition-timing-function: ease;
|
|
}
|
|
.mega-toggle-animated-inner::before,
|
|
.mega-toggle-animated-inner::after {
|
|
content: "";
|
|
display: block;
|
|
}
|
|
.mega-toggle-animated-inner::before {
|
|
top: -10px;
|
|
}
|
|
.mega-toggle-animated-inner::after {
|
|
bottom: -10px;
|
|
}
|
|
.mega-toggle-animated-slider .mega-toggle-animated-inner {
|
|
top: 2px;
|
|
}
|
|
.mega-toggle-animated-slider .mega-toggle-animated-inner::before {
|
|
top: 10px;
|
|
transition-property: transform, opacity;
|
|
transition-timing-function: ease;
|
|
transition-duration: 0.15s;
|
|
}
|
|
.mega-toggle-animated-slider .mega-toggle-animated-inner::after {
|
|
top: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
&.mega-menu-open .mega-toggle-block-#{$id} {
|
|
.mega-toggle-animated-slider .mega-toggle-animated-inner {
|
|
transform: translate3d(0, 10px, 0) rotate(45deg);
|
|
}
|
|
.mega-toggle-animated-slider .mega-toggle-animated-inner::before {
|
|
transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
|
|
opacity: 0;
|
|
}
|
|
.mega-toggle-animated-slider .mega-toggle-animated-inner::after {
|
|
transform: translate3d(0, -20px, 0) rotate(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |