blob: 634b4aeb5b70a6d52ce9b08f1e334ea28728cfd0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
@import "../globalCssVariables";
$height-icon: 15px;
$width-line: 30px;
$height-line: 4px;
$transition-time: 0.4s;
$rotation: 45deg;
$translateY: ($height-icon / 2);
$translateX: 0;
#hamburger-icon {
width:$width-line;
height:$height-icon;
position:relative;
display:block;
transition: all $transition-time;
-webkit-transition: all $transition-time;
-moz-transition: all $transition-time;
.line {
display:block;
background:$alt-accent;
width:$width-line;
height:$height-line;
position:absolute;
left:0;
border-radius:($height-line / 2);
transition: all $transition-time;
-webkit-transition: all $transition-time;
-moz-transition: all $transition-time;
&.line-1 {
top:0;
}
&.line-2 {
top:50%;
}
&.line-3 {
top:100%;
}
}
}
.filter-header.active {
.line-1 {
transform: translateY($translateY) translateX($translateX) rotate($rotation);
-webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
-moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
}
.line-2 {
opacity:0;
}
.line-3 {
transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
-moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
}
}
.filter-header:hover #hamburger-icon {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
|
