.btn-o#Button_Nav(onclick= 'Toggle_Menu()')
|
|
a.me(href='https://codepen.io/uzcho_/pens/popular/?grid_type=list' target='_blank')

$r0: rotate(0deg);
$r45: rotate(45deg);
$rm45: rotate(-45deg);
$tr: translate(0, 0);
$ani: 2s ease both;

body{
    @include _flexbox($n, $rw, $n, $c)
}

.btn-o{
    @include _dimension(50px);
    position: $rl;
    cursor: pointer;
    @include _hide-show(2.5s ease);
    @include _pseudo-complete($bfaf, $bl, #000, $n, $n, $n, $n, $n, 5px){
        border-radius: 2px
    }
    #{$bf}{
        @include _animation(obf, $ani, x){
            0%, 100%{
                width: 100%;
                top: 15px
            }
            0%{
                transform: $r45 translate(5px, 5px)
            }
            25%, 50%{
                width: 0;
                top: 0
            }
            25%{
                transform: $r45 $tr
            }
            50%{
                transform: $r0 $tr
            }
            90%{
                width: 100%;
                top: 0
            }
        }
    }
    #{$af}{
        @include _animation(oaf, $ani, x){
            0%{
                width: 100%;
                @include _offset($n, $n, 15px, 0);
                transform: $rm45 translate(-5px, -5px)
            }
            25%, 50%{
                width: 0;
                bottom: 0
            }
            25%{
                transform: $rm45 $tr
            }
            50%{
                right: 0;
                transform: $r0 $tr
            }
            90%, 100%{
                width: 100%;
                right: 0
            }
            90%{
                bottom: 0
            }
            100%{
                bottom: 15px
            }
        }
    }
}

.btn-x{
    #{$bfaf}{
        background: #ff1a1a
    }
    #{$bf}{
        @include _animation(xbf, $ani, x){
            0%, 100%{
                width: 100%;
                @include _offset(15px, 0, $n, $n)
            }
            25%{
                width: 100%;
                top: 0
            }
            50%{
                width: 0;
                top: 0;
                transform: $r0 $tr
            }
            90%{
                width: 0;
                bottom: 0;
                transform: $rm45 $tr
            }
            100%{
                transform: $rm45 translate(-5px, 5px)
            }
        }
    }
    #{$af}{
        @include _animation(xaf, $ani, x){
            0%, 100%{
                width: 100%;
                bottom: 15px
            }
            0%{
                left: 0
            }
            25%{
                width: 100%;
                @include _offset($n, $n, 0, 0)
            }
            50%, 90%{
                width: 0;
                @include _offset($n, 0, 0, $n)
            }
            50%{
                transform: $r0 $tr
            }
            90%{
                transform: $r45 $tr
            }
            100%{
                right: 0;
                transform: $r45 translate(-5px, -5px)
            }
        }
    }
}

function Toggle_Menu(){
    _tgl('Button_Nav', 'btn-x')
}