Almost ready.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _hamburger.scss
1 /* ------------------------------
2     Component: Hamburger
3 ------------------------------ */
4
5 $bar-width:   35px;
6 $bar-height:  3px;
7 $bar-spacing: 8px;
8 $bar-color:   #85C7CC;
9
10 .c-hamburger {
11   display: flex;
12   height: $bar-height + $bar-spacing*2;
13   transition: transform $ease-out 400ms;
14   backface-visibility: hidden;
15   position: relative;
16   cursor: pointer;
17
18   @include rwd(tablet) {
19     margin-right: 0;
20   }
21
22   border: 0;
23   margin: 0; padding: 0;
24   background-color: transparent;
25   appearance: none;
26
27   &:after {
28     content: attr(data-label);
29     transform: translateX(50%);
30     @include font-size(18px);
31     top: -3px; left: -7px;
32     font-weight: $medium;
33     padding-left: 17px;
34     position: absolute;
35     transition: color 300ms $ease-out;
36   }
37
38   &.is-clicked {
39     z-index: $master-layer + 2;
40
41     @include rwd(tablet) {
42       position: fixed;
43       top: 2rem; right: 1rem;
44     }
45
46     &:after {
47       color: $color-black;
48     }
49   }
50
51   .bar,
52   .bar:after,
53   .bar:before {
54     width: $bar-width;
55     height: $bar-height;
56     border-radius: 10px;
57   }
58
59   .bar {
60     position: relative;
61     transform: translateY($bar-spacing);
62     background-color: rgba($bar-color, 1);
63     transition: all 0ms 300ms;
64
65     &:before,
66     &:after {
67       left: 0;
68       content: "";
69       position: absolute;
70       bottom: $bar-spacing;
71       background-color: rgba($bar-color, 1);
72     }
73
74     &:before {
75       bottom: $bar-spacing;
76       transition: bottom 300ms 300ms $ease-out,
77       transform 300ms $ease-out,
78       background-color 300ms $ease-out;
79     }
80
81     &:after {
82       top: $bar-spacing;
83       transition: top 300ms 300ms $ease-out,
84       transform 300ms $ease-out,
85       background-color 300ms $ease-out;
86     }
87
88     &.animate {
89       background-color: rgba(255, 255, 255, 0);
90
91       &:before {
92         bottom: 0;
93         transform: rotate(-45deg);
94         transition: bottom 300ms $ease-out,
95         transform 300ms 300ms $ease-out;
96       }
97
98       &:after {
99         top: 0;
100         transform: rotate(45deg);
101         transition: top 300ms $ease-out,
102         transform 300ms 300ms $ease-out;
103       }
104     }
105   }
106 }