You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.6 KiB
130 lines
2.6 KiB
/* ==========================================================================
|
|
ANIMATED 3 LINE NAVICONS
|
|
https://github.com/SaraSoueidan/navicon-transformicons
|
|
========================================================================== */
|
|
|
|
/* Common to all three-liners */
|
|
|
|
@mixin line {
|
|
display: inline-block;
|
|
width: $button-size;
|
|
height: $button-size/7;
|
|
background: $white;
|
|
transition: $transition;
|
|
}
|
|
|
|
.nav-lines {
|
|
@include line;
|
|
position: relative;
|
|
&:before, &:after {
|
|
@include line;
|
|
position: absolute;
|
|
left:0;
|
|
content: '';
|
|
transform-origin: $button-size/14 center;
|
|
}
|
|
&:before {
|
|
top: $button-size/4;
|
|
}
|
|
&:after {
|
|
top: -$button-size/4;
|
|
}
|
|
}
|
|
|
|
.lines-button:hover {
|
|
.nav-lines {
|
|
&:before {
|
|
top: $button-size/3.5;
|
|
}
|
|
&:after {
|
|
top: -$button-size/3.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* For both the arrow up and left icons */
|
|
|
|
.lines-button.arrow.close {
|
|
.nav-lines {
|
|
&:before,
|
|
&:after {
|
|
top: 0;
|
|
width: $button-size/1.8;
|
|
}
|
|
&:before {
|
|
transform: rotate3d(0,0,1,40deg);
|
|
}
|
|
&:after {
|
|
transform: rotate3d(0,0,1,-40deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Arrow up only: just rotate by 90degrees */
|
|
|
|
.lines-button.arrow-up.close {
|
|
transform: scale3d(.8,.8,.8) rotate3d(0, 0, 1,90deg);
|
|
}
|
|
|
|
/* Three-lines to minus only */
|
|
|
|
.lines-button.minus.close {
|
|
.nav-lines {
|
|
&:before, &:after {
|
|
transform: none;
|
|
top: 0;
|
|
width: $button-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Three-lines to x */
|
|
|
|
.lines-button.x.close{
|
|
.nav-lines {
|
|
background: transparent;
|
|
&:before, &:after{
|
|
transform-origin: 50% 50%;
|
|
top: 0;
|
|
width: $button-size;
|
|
}
|
|
&:before{
|
|
transform: rotate3d(0,0,1,45deg);
|
|
}
|
|
&:after{
|
|
transform: rotate3d(0,0,1,-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Three-lines to x method 2 */
|
|
|
|
.lines-button.x2 {
|
|
.nav-lines {
|
|
transition: background .3s .5s ease;
|
|
&:before, &:after {
|
|
/* set transform origin */
|
|
transform-origin: 50% 50%;
|
|
transition: top .3s .6s ease, -webkit-transform .3s ease;
|
|
transition: top .3s .6s ease, transform .3s ease;
|
|
}
|
|
}
|
|
}
|
|
.lines-button.x2.close {
|
|
.nav-lines {
|
|
transition: background .3s 0s ease;
|
|
background: transparent;
|
|
&:before, &:after {
|
|
transition: top .3s ease, -webkit-transform .3s .5s ease; /* delay the formation of the x till the minus is formed */
|
|
transition: top .3s ease, transform .3s .5s ease; /* delay the formation of the x till the minus is formed */
|
|
top: 0;
|
|
width: $button-size;
|
|
}
|
|
&:before {
|
|
transform: rotate3d(0,0,1,45deg);
|
|
}
|
|
&:after {
|
|
transform: rotate3d(0,0,1,-45deg);
|
|
}
|
|
}
|
|
}
|
|
|