.::Undergrounds v3.3 Webshells::.

: / home / sc1jaqa5103 / prod.puv-editions.fr / wp-content / plugins / megamenu / css /
Filename : toggle-blocks.scss
back
#{$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_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);
            $icon_font:         nth($item, 12);
            $icon_font_weight:  nth($item, 13);

            @if type-of($id) == number {

                .mega-toggle-block-#{$id} button.mega-toggle-standard {
                    @if $css_type == flex {
                        all: revert;
                        appearance: none;
                        background: none;
                        border: 0;
                        padding: 0;
                        margin: 0;
                    }

                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    flex-direction: if($icon_position == before, row-reverse, row);
                    gap: 5px;
                    color: $text_color;
                    font-size: $text_size;

                    .mega-toggle-label-open  { display: none; }
                    .mega-toggle-label-closed { display: flex; }

                    @if $icon_font == svg {
                        .mega-svg-icon {
                            display: inline-flex;
                            align-items: center;
                            color: $icon_color;

                            svg {
                                display: block;
                                width: $icon_size;
                                height: $icon_size;
                                stroke: currentColor;
                                fill: none;
                            }
                        }
                        .mega-svg-icon-open { display: none; }
                    } @else if $closed_icon != '' or $open_icon != '' {
                        &:after {
                            display: inline-block;
                            content: $closed_icon;
                            font-family: $icon_font;
                            font-weight: $icon_font_weight;
                            font-size: $icon_size;
                            color: $icon_color;
                        }
                    }
                }

                &.mega-menu-open .mega-toggle-block-#{$id} button {
                    .mega-toggle-label-open  { display: flex; }
                    .mega-toggle-label-closed { display: none; }

                    @if $icon_font == svg {
                        .mega-svg-icon-closed { display: none; }
                        .mega-svg-icon-open  { display: inline-flex; }
                    } @else if $open_icon != '' {
                        &:after { content: $open_icon; }
                    }
                }
            }
        }
    }
    
    @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} {
                    /*! 
                    * 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;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        height: 100%;
                        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);
                    }
                }
            }
        }
    }
}