120 lines
2.7 KiB
SCSS
120 lines
2.7 KiB
SCSS
// -------------------------------
|
|
// Hamburger-Cross
|
|
// -------------------------------
|
|
|
|
// https://codepen.io/djdabe/pen/qXgJNV
|
|
|
|
.hamburger {
|
|
|
|
display: block;
|
|
width: 32px;
|
|
height: 32px;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
|
|
.hamb-top, .hamb-middle, .hamb-bottom {
|
|
position: absolute;
|
|
left: 0;
|
|
height: 4px;
|
|
width: 100%;
|
|
background-color: #1a1a1a;
|
|
}
|
|
|
|
&.light {
|
|
.hamb-top, .hamb-middle, .hamb-bottom {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
&.is-closed {
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
width: 100px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-webkit-transition: all .35s ease-in-out;
|
|
}
|
|
|
|
&:hover{
|
|
&:before {
|
|
opacity: 1;
|
|
display: block;
|
|
transform: translate3d(-100px, 0, 0);
|
|
transition: all .35s ease-in-out;
|
|
}
|
|
|
|
.hamb-top {
|
|
top: 0;
|
|
transition: all .35s ease-in-out;
|
|
}
|
|
.hamb-bottom {
|
|
bottom: 0;
|
|
transition: all .35s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.hamb-top {
|
|
top: 5px;
|
|
-webkit-transition: all .35s ease-in-out;
|
|
}
|
|
.hamb-middle {
|
|
top: 50%;
|
|
margin-top: -2px;
|
|
}
|
|
.hamb-bottom {
|
|
bottom: 5px;
|
|
-webkit-transition: all .35s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&.is-open {
|
|
.hamb-top,
|
|
.hamb-bottom {
|
|
top: 50%;
|
|
margin-top: -2px;
|
|
}
|
|
.hamb-top {
|
|
-webkit-transform: rotate(45deg);
|
|
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
|
|
}
|
|
.hamb-middle {
|
|
display: none;
|
|
}
|
|
.hamb-bottom {
|
|
-webkit-transform: rotate(-45deg);
|
|
-webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
|
|
}
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
width: 100px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,0,0);
|
|
-webkit-transition: all .35s ease-in-out;
|
|
}
|
|
&:hover:before {
|
|
opacity: 1;
|
|
display: block;
|
|
-webkit-transform: translate3d(-100px,0,0);
|
|
-webkit-transition: all .35s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|