Home Explore Help
Sign In
bux
/
tracim_v2
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'master' of github.com:tracim/tracim_front

Skylsmoi 7 years ago
parent
f43e8c746f 98622647a9
commit
a5828f7972
6 changed files with 1030 additions and 1 deletions
Split View Show Diff Stats
  1. 320 0
      dist/asset/hamburger/example.html
  2. 700 0
      dist/asset/hamburger/hamburgers.css
  3. 7 0
      dist/asset/hamburger/hamburgers.min.css
  4. 1 0
      dist/index.html
  5. 1 0
      src/css/FileItem.styl
  6. 1 1
      src/css/index.styl

+ 320 - 0
dist/asset/hamburger/example.html View File 

@@ -0,0 +1,320 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+<head>
4 
+  <meta charset="UTF-8">
5 
+  <title>Hamburgers by Jonathan Suh</title>
6 
+  <link rel="stylesheet" href="hamburgers.css">
7 
+  <style>
8 
+    code {
9 
+      display: inline-block;
10 
+    }
11 
+
12 
+    code,
13 
+    .hamburger {
14 
+      vertical-align: middle;
15 
+    }
16 
+  </style>
17 
+</head>
18 
+<body>
19 
+  <div class="hamburger hamburger--3dx">
20 
+    <div class="hamburger-box">
21 
+      <div class="hamburger-inner"></div>
22 
+    </div>
23 
+  </div>
24 
+  <code>hamburger--3dx</code>
25 
+
26 
+  <br>
27 
+
28 
+  <div class="hamburger hamburger--3dx-r">
29 
+    <div class="hamburger-box">
30 
+      <div class="hamburger-inner"></div>
31 
+    </div>
32 
+  </div>
33 
+  <code>hamburger--3dx-r</code>
34 
+
35 
+  <br>
36 
+
37 
+  <div class="hamburger hamburger--3dy">
38 
+    <div class="hamburger-box">
39 
+      <div class="hamburger-inner"></div>
40 
+    </div>
41 
+  </div>
42 
+  <code>hamburger--3dy</code>
43 
+
44 
+  <br>
45 
+
46 
+  <div class="hamburger hamburger--3dy-r">
47 
+    <div class="hamburger-box">
48 
+      <div class="hamburger-inner"></div>
49 
+    </div>
50 
+  </div>
51 
+  <code>hamburger--3dy-r</code>
52 
+
53 
+  <br>
54 
+
55 
+  <div class="hamburger hamburger--3dxy">
56 
+    <div class="hamburger-box">
57 
+      <div class="hamburger-inner"></div>
58 
+    </div>
59 
+  </div>
60 
+  <code>hamburger--3dxy</code>
61 
+
62 
+  <br>
63 
+
64 
+  <div class="hamburger hamburger--3dxy-r">
65 
+    <div class="hamburger-box">
66 
+      <div class="hamburger-inner"></div>
67 
+    </div>
68 
+  </div>
69 
+  <code>hamburger--3dxy-r</code>
70 
+
71 
+  <br>
72 
+
73 
+  <div class="hamburger hamburger--arrow">
74 
+    <div class="hamburger-box">
75 
+      <div class="hamburger-inner"></div>
76 
+    </div>
77 
+  </div>
78 
+  <code>hamburger--arrow</code>
79 
+
80 
+  <br>
81 
+
82 
+  <div class="hamburger hamburger--arrow-r">
83 
+    <div class="hamburger-box">
84 
+      <div class="hamburger-inner"></div>
85 
+    </div>
86 
+  </div>
87 
+  <code>hamburger--arrow-r</code>
88 
+
89 
+  <br>
90 
+
91 
+  <div class="hamburger hamburger--arrowalt">
92 
+    <div class="hamburger-box">
93 
+      <div class="hamburger-inner"></div>
94 
+    </div>
95 
+  </div>
96 
+  <code>hamburger--arrowalt</code>
97 
+
98 
+  <br>
99 
+
100 
+  <div class="hamburger hamburger--arrowalt-r">
101 
+    <div class="hamburger-box">
102 
+      <div class="hamburger-inner"></div>
103 
+    </div>
104 
+  </div>
105 
+  <code>hamburger--arrowalt-r</code>
106 
+
107 
+  <br>
108 
+
109 
+  <div class="hamburger hamburger--arrowturn">
110 
+    <div class="hamburger-box">
111 
+      <div class="hamburger-inner"></div>
112 
+    </div>
113 
+  </div>
114 
+  <code>hamburger--arrowturn</code>
115 
+
116 
+  <br>
117 
+
118 
+  <div class="hamburger hamburger--arrowturn-r">
119 
+    <div class="hamburger-box">
120 
+      <div class="hamburger-inner"></div>
121 
+    </div>
122 
+  </div>
123 
+  <code>hamburger--arrowturn-r</code>
124 
+
125 
+  <br>
126 
+
127 
+  <div class="hamburger hamburger--boring">
128 
+    <div class="hamburger-box">
129 
+      <div class="hamburger-inner"></div>
130 
+    </div>
131 
+  </div>
132 
+  <code>hamburger--boring</code>
133 
+
134 
+  <br>
135 
+
136 
+  <div class="hamburger hamburger--collapse">
137 
+    <div class="hamburger-box">
138 
+      <div class="hamburger-inner"></div>
139 
+    </div>
140 
+  </div>
141 
+  <code>hamburger--collapse</code>
142 
+
143 
+  <br>
144 
+
145 
+  <div class="hamburger hamburger--collapse-r">
146 
+    <div class="hamburger-box">
147 
+      <div class="hamburger-inner"></div>
148 
+    </div>
149 
+  </div>
150 
+  <code>hamburger--collapse-r</code>
151 
+
152 
+  <br>
153 
+
154 
+  <div class="hamburger hamburger--elastic">
155 
+    <div class="hamburger-box">
156 
+      <div class="hamburger-inner"></div>
157 
+    </div>
158 
+  </div>
159 
+  <code>hamburger--elastic</code>
160 
+
161 
+  <br>
162 
+
163 
+  <div class="hamburger hamburger--elastic-r">
164 
+    <div class="hamburger-box">
165 
+      <div class="hamburger-inner"></div>
166 
+    </div>
167 
+  </div>
168 
+  <code>hamburger--elastic-r</code>
169 
+
170 
+  <br>
171 
+
172 
+  <div class="hamburger hamburger--emphatic">
173 
+    <div class="hamburger-box">
174 
+      <div class="hamburger-inner"></div>
175 
+    </div>
176 
+  </div>
177 
+  <code>hamburger--emphatic</code>
178 
+
179 
+  <br>
180 
+
181 
+  <div class="hamburger hamburger--emphatic-r">
182 
+    <div class="hamburger-box">
183 
+      <div class="hamburger-inner"></div>
184 
+    </div>
185 
+  </div>
186 
+  <code>hamburger--emphatic-r</code>
187 
+
188 
+  <br>
189 
+
190 
+  <div class="hamburger hamburger--minus">
191 
+    <div class="hamburger-box">
192 
+      <div class="hamburger-inner"></div>
193 
+    </div>
194 
+  </div>
195 
+  <code>hamburger--minus</code>
196 
+
197 
+  <br>
198 
+
199 
+  <div class="hamburger hamburger--slider">
200 
+    <div class="hamburger-box">
201 
+      <div class="hamburger-inner"></div>
202 
+    </div>
203 
+  </div>
204 
+  <code>hamburger--slider</code>
205 
+
206 
+  <br>
207 
+
208 
+  <div class="hamburger hamburger--slider-r">
209 
+    <div class="hamburger-box">
210 
+      <div class="hamburger-inner"></div>
211 
+    </div>
212 
+  </div>
213 
+  <code>hamburger--slider-r</code>
214 
+
215 
+  <br>
216 
+
217 
+  <div class="hamburger hamburger--spin">
218 
+    <div class="hamburger-box">
219 
+      <div class="hamburger-inner"></div>
220 
+    </div>
221 
+  </div>
222 
+  <code>hamburger--spin</code>
223 
+
224 
+  <br>
225 
+
226 
+  <div class="hamburger hamburger--spin-r">
227 
+    <div class="hamburger-box">
228 
+      <div class="hamburger-inner"></div>
229 
+    </div>
230 
+  </div>
231 
+  <code>hamburger--spin-r</code>
232 
+
233 
+  <br>
234 
+
235 
+  <div class="hamburger hamburger--spring">
236 
+    <div class="hamburger-box">
237 
+      <div class="hamburger-inner"></div>
238 
+    </div>
239 
+  </div>
240 
+  <code>hamburger--spring</code>
241 
+
242 
+  <br>
243 
+
244 
+  <div class="hamburger hamburger--spring-r">
245 
+    <div class="hamburger-box">
246 
+      <div class="hamburger-inner"></div>
247 
+    </div>
248 
+  </div>
249 
+  <code>hamburger--spring-r</code>
250 
+
251 
+  <br>
252 
+
253 
+  <div class="hamburger hamburger--stand">
254 
+    <div class="hamburger-box">
255 
+      <div class="hamburger-inner"></div>
256 
+    </div>
257 
+  </div>
258 
+  <code>hamburger--stand</code>
259 
+
260 
+  <br>
261 
+
262 
+  <div class="hamburger hamburger--stand-r">
263 
+    <div class="hamburger-box">
264 
+      <div class="hamburger-inner"></div>
265 
+    </div>
266 
+  </div>
267 
+  <code>hamburger--stand-r</code>
268 
+
269 
+  <br>
270 
+
271 
+  <div class="hamburger hamburger--squeeze">
272 
+    <div class="hamburger-box">
273 
+      <div class="hamburger-inner"></div>
274 
+    </div>
275 
+  </div>
276 
+  <code>hamburger--squeeze</code>
277 
+
278 
+  <br>
279 
+
280 
+  <div class="hamburger hamburger--vortex">
281 
+    <div class="hamburger-box">
282 
+      <div class="hamburger-inner"></div>
283 
+    </div>
284 
+  </div>
285 
+  <code>hamburger--vortex</code>
286 
+
287 
+  <br>
288 
+
289 
+  <div class="hamburger hamburger--vortex-r">
290 
+    <div class="hamburger-box">
291 
+      <div class="hamburger-inner"></div>
292 
+    </div>
293 
+  </div>
294 
+  <code>hamburger--vortex-r</code>
295 
+
296 
+  <script>
297 
+  /**
298 
+   * forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options
299 
+   *
300 
+   * @private
301 
+   * @author Todd Motto
302 
+   * @link https://github.com/toddmotto/foreach
303 
+   * @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList
304 
+   * @callback requestCallback      callback   - Callback function for each iteration.
305 
+   * @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback.
306 
+   * @returns {}
307 
+   */
308 
+    var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};
309 
+
310 
+    var hamburgers = document.querySelectorAll(".hamburger");
311 
+    if (hamburgers.length > 0) {
312 
+      forEach(hamburgers, function(hamburger) {
313 
+        hamburger.addEventListener("click", function() {
314 
+          this.classList.toggle("is-active");
315 
+        }, false);
316 
+      });
317 
+    }
318 
+  </script>
319 
+</body>
320 
+</html>

+ 700 - 0
dist/asset/hamburger/hamburgers.css View File 

@@ -0,0 +1,700 @@
1 
+/*!
2 
+ * Hamburgers
3 
+ * @description Tasty CSS-animated hamburgers
4 
+ * @author Jonathan Suh @jonsuh
5 
+ * @site https://jonsuh.com/hamburgers
6 
+ * @link https://github.com/jonsuh/hamburgers
7 
+ */
8 
+.hamburger {
9 
+  padding: 15px 15px;
10 
+  display: inline-block;
11 
+  cursor: pointer;
12 
+  transition-property: opacity, filter;
13 
+  transition-duration: 0.15s;
14 
+  transition-timing-function: linear;
15 
+  font: inherit;
16 
+  color: inherit;
17 
+  text-transform: none;
18 
+  background-color: transparent;
19 
+  border: 0;
20 
+  margin: 0;
21 
+  overflow: visible; }
22 
+  .hamburger:hover {
23 
+    opacity: 0.7; }
24 
+
25 
+.hamburger-box {
26 
+  width: 40px;
27 
+  height: 24px;
28 
+  display: inline-block;
29 
+  position: relative; }
30 
+
31 
+.hamburger-inner {
32 
+  display: block;
33 
+  top: 50%;
34 
+  margin-top: -2px; }
35 
+  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
36 
+    width: 40px;
37 
+    height: 4px;
38 
+    background-color: #000;
39 
+    border-radius: 4px;
40 
+    position: absolute;
41 
+    transition-property: transform;
42 
+    transition-duration: 0.15s;
43 
+    transition-timing-function: ease; }
44 
+  .hamburger-inner::before, .hamburger-inner::after {
45 
+    content: "";
46 
+    display: block; }
47 
+  .hamburger-inner::before {
48 
+    top: -10px; }
49 
+  .hamburger-inner::after {
50 
+    bottom: -10px; }
51 
+
52 
+/*
53 
+   * 3DX
54 
+   */
55 
+.hamburger--3dx .hamburger-box {
56 
+  perspective: 80px; }
57 
+
58 
+.hamburger--3dx .hamburger-inner {
59 
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
60 
+  .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
61 
+    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
62 
+
63 
+.hamburger--3dx.is-active .hamburger-inner {
64 
+  background-color: transparent;
65 
+  transform: rotateY(180deg); }
66 
+  .hamburger--3dx.is-active .hamburger-inner::before {
67 
+    transform: translate3d(0, 10px, 0) rotate(45deg); }
68 
+  .hamburger--3dx.is-active .hamburger-inner::after {
69 
+    transform: translate3d(0, -10px, 0) rotate(-45deg); }
70 
+
71 
+/*
72 
+   * 3DX Reverse
73 
+   */
74 
+.hamburger--3dx-r .hamburger-box {
75 
+  perspective: 80px; }
76 
+
77 
+.hamburger--3dx-r .hamburger-inner {
78 
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
79 
+  .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
80 
+    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
81 
+
82 
+.hamburger--3dx-r.is-active .hamburger-inner {
83 
+  background-color: transparent;
84 
+  transform: rotateY(-180deg); }
85 
+  .hamburger--3dx-r.is-active .hamburger-inner::before {
86 
+    transform: translate3d(0, 10px, 0) rotate(45deg); }
87 
+  .hamburger--3dx-r.is-active .hamburger-inner::after {
88 
+    transform: translate3d(0, -10px, 0) rotate(-45deg); }
89 
+
90 
+/*
91 
+   * 3DY
92 
+   */
93 
+.hamburger--3dy .hamburger-box {
94 
+  perspective: 80px; }
95 
+
96 
+.hamburger--3dy .hamburger-inner {
97 
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
98 
+  .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
99 
+    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
100 
+
101 
+.hamburger--3dy.is-active .hamburger-inner {
102 
+  background-color: transparent;
103 
+  transform: rotateX(-180deg); }
104 
+  .hamburger--3dy.is-active .hamburger-inner::before {
105 
+    transform: translate3d(0, 10px, 0) rotate(45deg); }
106 
+  .hamburger--3dy.is-active .hamburger-inner::after {
107 
+    transform: translate3d(0, -10px, 0) rotate(-45deg); }
108 
+
109 
+/*
110 
+   * 3DY Reverse
111 
+   */
112 
+.hamburger--3dy-r .hamburger-box {
113 
+  perspective: 80px; }
114 
+
115 
+.hamburger--3dy-r .hamburger-inner {
116 
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
117 
+  .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
118 
+    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
119 
+
120 
+.hamburger--3dy-r.is-active .hamburger-inner {
121 
+  background-color: transparent;
122 
+  transform: rotateX(180deg); }
123 
+  .hamburger--3dy-r.is-active .hamburger-inner::before {
124 
+    transform: translate3d(0, 10px, 0) rotate(45deg); }
125 
+  .hamburger--3dy-r.is-active .hamburger-inner::after {
126 
+    transform: translate3d(0, -10px, 0) rotate(-45deg); }
127 
+
128 
+/*
129 
+   * 3DXY
130 
+   */
131 
+.hamburger--3dxy .hamburger-box {
132 
+  perspective: 80px; }
133 
+
134 
+.hamburger--3dxy .hamburger-inner {
135 
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
136 
+  .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
137 
+    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
138 
+
139 
+.hamburger--3dxy.is-active .hamburger-inner {
140 
+  background-color: transparent;
141 
+  transform: rotateX(180deg) rotateY(180deg); }
142 
+  .hamburger--3dxy.is-active .hamburger-inner::before {
143 
+    transform: translate3d(0, 10px, 0) rotate(45deg); }
144 
+  .hamburger--3dxy.is-active .hamburger-inner::after {
145 
+    transform: translate3d(0, -10px, 0) rotate(-45deg); }
146 
+
147 
+/*
148 
+   * 3DXY Reverse
149 
+   */
150 
+.hamburger--3dxy-r .hamburger-box {
151 
+  perspective: 80px; }
152 
+
153 
+.hamburger--3dxy-r .hamburger-inner {
154 
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
155 
+  .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
156 
+    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
157 
+
158 
+.hamburger--3dxy-r.is-active .hamburger-inner {
159 
+  background-color: transparent;
160 
+  transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); }
161 
+  .hamburger--3dxy-r.is-active .hamburger-inner::before {
162 
+    transform: translate3d(0, 10px, 0) rotate(45deg); }
163 
+  .hamburger--3dxy-r.is-active .hamburger-inner::after {
164 
+    transform: translate3d(0, -10px, 0) rotate(-45deg); }
165 
+
166 
+/*
167 
+   * Arrow
168 
+   */
169 
+.hamburger--arrow.is-active .hamburger-inner::before {
170 
+  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
171 
+
172 
+.hamburger--arrow.is-active .hamburger-inner::after {
173 
+  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
174 
+
175 
+/*
176 
+   * Arrow Right
177 
+   */
178 
+.hamburger--arrow-r.is-active .hamburger-inner::before {
179 
+  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
180 
+
181 
+.hamburger--arrow-r.is-active .hamburger-inner::after {
182 
+  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
183 
+
184 
+/*
185 
+   * Arrow Alt
186 
+   */
187 
+.hamburger--arrowalt .hamburger-inner::before {
188 
+  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
189 
+
190 
+.hamburger--arrowalt .hamburger-inner::after {
191 
+  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
192 
+
193 
+.hamburger--arrowalt.is-active .hamburger-inner::before {
194 
+  top: 0;
195 
+  transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
196 
+  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
197 
+
198 
+.hamburger--arrowalt.is-active .hamburger-inner::after {
199 
+  bottom: 0;
200 
+  transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
201 
+  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
202 
+
203 
+/*
204 
+   * Arrow Alt Right
205 
+   */
206 
+.hamburger--arrowalt-r .hamburger-inner::before {
207 
+  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
208 
+
209 
+.hamburger--arrowalt-r .hamburger-inner::after {
210 
+  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }
211 
+
212 
+.hamburger--arrowalt-r.is-active .hamburger-inner::before {
213 
+  top: 0;
214 
+  transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
215 
+  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
216 
+
217 
+.hamburger--arrowalt-r.is-active .hamburger-inner::after {
218 
+  bottom: 0;
219 
+  transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
220 
+  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }
221 
+
222 
+/*
223 
+ * Arrow Turn
224 
+ */
225 
+.hamburger--arrowturn.is-active .hamburger-inner {
226 
+  transform: rotate(-180deg); }
227 
+  .hamburger--arrowturn.is-active .hamburger-inner::before {
228 
+    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
229 
+  .hamburger--arrowturn.is-active .hamburger-inner::after {
230 
+    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
231 
+
232 
+/*
233 
+ * Arrow Turn Right
234 
+ */
235 
+.hamburger--arrowturn-r.is-active .hamburger-inner {
236 
+  transform: rotate(-180deg); }
237 
+  .hamburger--arrowturn-r.is-active .hamburger-inner::before {
238 
+    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
239 
+  .hamburger--arrowturn-r.is-active .hamburger-inner::after {
240 
+    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }
241 
+
242 
+/*
243 
+   * Boring
244 
+   */
245 
+.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
246 
+  transition-property: none; }
247 
+
248 
+.hamburger--boring.is-active .hamburger-inner {
249 
+  transform: rotate(45deg); }
250 
+  .hamburger--boring.is-active .hamburger-inner::before {
251 
+    top: 0;
252 
+    opacity: 0; }
253 
+  .hamburger--boring.is-active .hamburger-inner::after {
254 
+    bottom: 0;
255 
+    transform: rotate(-90deg); }
256 
+
257 
+/*
258 
+   * Collapse
259 
+   */
260 
+.hamburger--collapse .hamburger-inner {
261 
+  top: auto;
262 
+  bottom: 0;
263 
+  transition-duration: 0.13s;
264 
+  transition-delay: 0.13s;
265 
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
266 
+  .hamburger--collapse .hamburger-inner::after {
267 
+    top: -20px;
268 
+    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
269 
+  .hamburger--collapse .hamburger-inner::before {
270 
+    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
271 
+
272 
+.hamburger--collapse.is-active .hamburger-inner {
273 
+  transform: translate3d(0, -10px, 0) rotate(-45deg);
274 
+  transition-delay: 0.22s;
275 
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
276 
+  .hamburger--collapse.is-active .hamburger-inner::after {
277 
+    top: 0;
278 
+    opacity: 0;
279 
+    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
280 
+  .hamburger--collapse.is-active .hamburger-inner::before {
281 
+    top: 0;
282 
+    transform: rotate(-90deg);
283 
+    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
284 
+
285 
+/*
286 
+   * Collapse Reverse
287 
+   */
288 
+.hamburger--collapse-r .hamburger-inner {
289 
+  top: auto;
290 
+  bottom: 0;
291 
+  transition-duration: 0.13s;
292 
+  transition-delay: 0.13s;
293 
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
294 
+  .hamburger--collapse-r .hamburger-inner::after {
295 
+    top: -20px;
296 
+    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
297 
+  .hamburger--collapse-r .hamburger-inner::before {
298 
+    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
299 
+
300 
+.hamburger--collapse-r.is-active .hamburger-inner {
301 
+  transform: translate3d(0, -10px, 0) rotate(45deg);
302 
+  transition-delay: 0.22s;
303 
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
304 
+  .hamburger--collapse-r.is-active .hamburger-inner::after {
305 
+    top: 0;
306 
+    opacity: 0;
307 
+    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
308 
+  .hamburger--collapse-r.is-active .hamburger-inner::before {
309 
+    top: 0;
310 
+    transform: rotate(90deg);
311 
+    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
312 
+
313 
+/*
314 
+   * Elastic
315 
+   */
316 
+.hamburger--elastic .hamburger-inner {
317 
+  top: 2px;
318 
+  transition-duration: 0.275s;
319 
+  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
320 
+  .hamburger--elastic .hamburger-inner::before {
321 
+    top: 10px;
322 
+    transition: opacity 0.125s 0.275s ease; }
323 
+  .hamburger--elastic .hamburger-inner::after {
324 
+    top: 20px;
325 
+    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
326 
+
327 
+.hamburger--elastic.is-active .hamburger-inner {
328 
+  transform: translate3d(0, 10px, 0) rotate(135deg);
329 
+  transition-delay: 0.075s; }
330 
+  .hamburger--elastic.is-active .hamburger-inner::before {
331 
+    transition-delay: 0s;
332 
+    opacity: 0; }
333 
+  .hamburger--elastic.is-active .hamburger-inner::after {
334 
+    transform: translate3d(0, -20px, 0) rotate(-270deg);
335 
+    transition-delay: 0.075s; }
336 
+
337 
+/*
338 
+   * Elastic Reverse
339 
+   */
340 
+.hamburger--elastic-r .hamburger-inner {
341 
+  top: 2px;
342 
+  transition-duration: 0.275s;
343 
+  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
344 
+  .hamburger--elastic-r .hamburger-inner::before {
345 
+    top: 10px;
346 
+    transition: opacity 0.125s 0.275s ease; }
347 
+  .hamburger--elastic-r .hamburger-inner::after {
348 
+    top: 20px;
349 
+    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
350 
+
351 
+.hamburger--elastic-r.is-active .hamburger-inner {
352 
+  transform: translate3d(0, 10px, 0) rotate(-135deg);
353 
+  transition-delay: 0.075s; }
354 
+  .hamburger--elastic-r.is-active .hamburger-inner::before {
355 
+    transition-delay: 0s;
356 
+    opacity: 0; }
357 
+  .hamburger--elastic-r.is-active .hamburger-inner::after {
358 
+    transform: translate3d(0, -20px, 0) rotate(270deg);
359 
+    transition-delay: 0.075s; }
360 
+
361 
+/*
362 
+   * Emphatic
363 
+   */
364 
+.hamburger--emphatic {
365 
+  overflow: hidden; }
366 
+  .hamburger--emphatic .hamburger-inner {
367 
+    transition: background-color 0.125s 0.175s ease-in; }
368 
+    .hamburger--emphatic .hamburger-inner::before {
369 
+      left: 0;
370 
+      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
371 
+    .hamburger--emphatic .hamburger-inner::after {
372 
+      top: 10px;
373 
+      right: 0;
374 
+      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
375 
+  .hamburger--emphatic.is-active .hamburger-inner {
376 
+    transition-delay: 0s;
377 
+    transition-timing-function: ease-out;
378 
+    background-color: transparent; }
379 
+    .hamburger--emphatic.is-active .hamburger-inner::before {
380 
+      left: -80px;
381 
+      top: -80px;
382 
+      transform: translate3d(80px, 80px, 0) rotate(45deg);
383 
+      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
384 
+    .hamburger--emphatic.is-active .hamburger-inner::after {
385 
+      right: -80px;
386 
+      top: -80px;
387 
+      transform: translate3d(-80px, 80px, 0) rotate(-45deg);
388 
+      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
389 
+
390 
+/*
391 
+   * Emphatic Reverse
392 
+   */
393 
+.hamburger--emphatic-r {
394 
+  overflow: hidden; }
395 
+  .hamburger--emphatic-r .hamburger-inner {
396 
+    transition: background-color 0.125s 0.175s ease-in; }
397 
+    .hamburger--emphatic-r .hamburger-inner::before {
398 
+      left: 0;
399 
+      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
400 
+    .hamburger--emphatic-r .hamburger-inner::after {
401 
+      top: 10px;
402 
+      right: 0;
403 
+      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
404 
+  .hamburger--emphatic-r.is-active .hamburger-inner {
405 
+    transition-delay: 0s;
406 
+    transition-timing-function: ease-out;
407 
+    background-color: transparent; }
408 
+    .hamburger--emphatic-r.is-active .hamburger-inner::before {
409 
+      left: -80px;
410 
+      top: 80px;
411 
+      transform: translate3d(80px, -80px, 0) rotate(-45deg);
412 
+      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
413 
+    .hamburger--emphatic-r.is-active .hamburger-inner::after {
414 
+      right: -80px;
415 
+      top: 80px;
416 
+      transform: translate3d(-80px, -80px, 0) rotate(45deg);
417 
+      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
418 
+
419 
+/*
420 
+   * Minus
421 
+   */
422 
+.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
423 
+  transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }
424 
+
425 
+.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
426 
+  opacity: 0;
427 
+  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }
428 
+
429 
+.hamburger--minus.is-active .hamburger-inner::before {
430 
+  top: 0; }
431 
+
432 
+.hamburger--minus.is-active .hamburger-inner::after {
433 
+  bottom: 0; }
434 
+
435 
+/*
436 
+   * Slider
437 
+   */
438 
+.hamburger--slider .hamburger-inner {
439 
+  top: 2px; }
440 
+  .hamburger--slider .hamburger-inner::before {
441 
+    top: 10px;
442 
+    transition-property: transform, opacity;
443 
+    transition-timing-function: ease;
444 
+    transition-duration: 0.15s; }
445 
+  .hamburger--slider .hamburger-inner::after {
446 
+    top: 20px; }
447 
+
448 
+.hamburger--slider.is-active .hamburger-inner {
449 
+  transform: translate3d(0, 10px, 0) rotate(45deg); }
450 
+  .hamburger--slider.is-active .hamburger-inner::before {
451 
+    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
452 
+    opacity: 0; }
453 
+  .hamburger--slider.is-active .hamburger-inner::after {
454 
+    transform: translate3d(0, -20px, 0) rotate(-90deg); }
455 
+
456 
+/*
457 
+   * Slider Reverse
458 
+   */
459 
+.hamburger--slider-r .hamburger-inner {
460 
+  top: 2px; }
461 
+  .hamburger--slider-r .hamburger-inner::before {
462 
+    top: 10px;
463 
+    transition-property: transform, opacity;
464 
+    transition-timing-function: ease;
465 
+    transition-duration: 0.15s; }
466 
+  .hamburger--slider-r .hamburger-inner::after {
467 
+    top: 20px; }
468 
+
469 
+.hamburger--slider-r.is-active .hamburger-inner {
470 
+  transform: translate3d(0, 10px, 0) rotate(-45deg); }
471 
+  .hamburger--slider-r.is-active .hamburger-inner::before {
472 
+    transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
473 
+    opacity: 0; }
474 
+  .hamburger--slider-r.is-active .hamburger-inner::after {
475 
+    transform: translate3d(0, -20px, 0) rotate(90deg); }
476 
+
477 
+/*
478 
+   * Spin
479 
+   */
480 
+.hamburger--spin .hamburger-inner {
481 
+  transition-duration: 0.22s;
482 
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
483 
+  .hamburger--spin .hamburger-inner::before {
484 
+    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
485 
+  .hamburger--spin .hamburger-inner::after {
486 
+    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
487 
+
488 
+.hamburger--spin.is-active .hamburger-inner {
489 
+  transform: rotate(225deg);
490 
+  transition-delay: 0.12s;
491 
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
492 
+  .hamburger--spin.is-active .hamburger-inner::before {
493 
+    top: 0;
494 
+    opacity: 0;
495 
+    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
496 
+  .hamburger--spin.is-active .hamburger-inner::after {
497 
+    bottom: 0;
498 
+    transform: rotate(-90deg);
499 
+    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
500 
+
501 
+/*
502 
+   * Spin Reverse
503 
+   */
504 
+.hamburger--spin-r .hamburger-inner {
505 
+  transition-duration: 0.22s;
506 
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
507 
+  .hamburger--spin-r .hamburger-inner::before {
508 
+    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
509 
+  .hamburger--spin-r .hamburger-inner::after {
510 
+    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
511 
+
512 
+.hamburger--spin-r.is-active .hamburger-inner {
513 
+  transform: rotate(-225deg);
514 
+  transition-delay: 0.12s;
515 
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
516 
+  .hamburger--spin-r.is-active .hamburger-inner::before {
517 
+    top: 0;
518 
+    opacity: 0;
519 
+    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
520 
+  .hamburger--spin-r.is-active .hamburger-inner::after {
521 
+    bottom: 0;
522 
+    transform: rotate(90deg);
523 
+    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
524 
+
525 
+/*
526 
+   * Spring
527 
+   */
528 
+.hamburger--spring .hamburger-inner {
529 
+  top: 2px;
530 
+  transition: background-color 0s 0.13s linear; }
531 
+  .hamburger--spring .hamburger-inner::before {
532 
+    top: 10px;
533 
+    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
534 
+  .hamburger--spring .hamburger-inner::after {
535 
+    top: 20px;
536 
+    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
537 
+
538 
+.hamburger--spring.is-active .hamburger-inner {
539 
+  transition-delay: 0.22s;
540 
+  background-color: transparent; }
541 
+  .hamburger--spring.is-active .hamburger-inner::before {
542 
+    top: 0;
543 
+    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
544 
+    transform: translate3d(0, 10px, 0) rotate(45deg); }
545 
+  .hamburger--spring.is-active .hamburger-inner::after {
546 
+    top: 0;
547 
+    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
548 
+    transform: translate3d(0, 10px, 0) rotate(-45deg); }
549 
+
550 
+/*
551 
+   * Spring Reverse
552 
+   */
553 
+.hamburger--spring-r .hamburger-inner {
554 
+  top: auto;
555 
+  bottom: 0;
556 
+  transition-duration: 0.13s;
557 
+  transition-delay: 0s;
558 
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
559 
+  .hamburger--spring-r .hamburger-inner::after {
560 
+    top: -20px;
561 
+    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
562 
+  .hamburger--spring-r .hamburger-inner::before {
563 
+    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
564 
+
565 
+.hamburger--spring-r.is-active .hamburger-inner {
566 
+  transform: translate3d(0, -10px, 0) rotate(-45deg);
567 
+  transition-delay: 0.22s;
568 
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
569 
+  .hamburger--spring-r.is-active .hamburger-inner::after {
570 
+    top: 0;
571 
+    opacity: 0;
572 
+    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
573 
+  .hamburger--spring-r.is-active .hamburger-inner::before {
574 
+    top: 0;
575 
+    transform: rotate(90deg);
576 
+    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }
577 
+
578 
+/*
579 
+   * Stand
580 
+   */
581 
+.hamburger--stand .hamburger-inner {
582 
+  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
583 
+  .hamburger--stand .hamburger-inner::before {
584 
+    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
585 
+  .hamburger--stand .hamburger-inner::after {
586 
+    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
587 
+
588 
+.hamburger--stand.is-active .hamburger-inner {
589 
+  transform: rotate(90deg);
590 
+  background-color: transparent;
591 
+  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
592 
+  .hamburger--stand.is-active .hamburger-inner::before {
593 
+    top: 0;
594 
+    transform: rotate(-45deg);
595 
+    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
596 
+  .hamburger--stand.is-active .hamburger-inner::after {
597 
+    bottom: 0;
598 
+    transform: rotate(45deg);
599 
+    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
600 
+
601 
+/*
602 
+   * Stand Reverse
603 
+   */
604 
+.hamburger--stand-r .hamburger-inner {
605 
+  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
606 
+  .hamburger--stand-r .hamburger-inner::before {
607 
+    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
608 
+  .hamburger--stand-r .hamburger-inner::after {
609 
+    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
610 
+
611 
+.hamburger--stand-r.is-active .hamburger-inner {
612 
+  transform: rotate(-90deg);
613 
+  background-color: transparent;
614 
+  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
615 
+  .hamburger--stand-r.is-active .hamburger-inner::before {
616 
+    top: 0;
617 
+    transform: rotate(-45deg);
618 
+    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
619 
+  .hamburger--stand-r.is-active .hamburger-inner::after {
620 
+    bottom: 0;
621 
+    transform: rotate(45deg);
622 
+    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
623 
+
624 
+/*
625 
+   * Squeeze
626 
+   */
627 
+.hamburger--squeeze .hamburger-inner {
628 
+  transition-duration: 0.075s;
629 
+  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
630 
+  .hamburger--squeeze .hamburger-inner::before {
631 
+    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
632 
+  .hamburger--squeeze .hamburger-inner::after {
633 
+    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
634 
+
635 
+.hamburger--squeeze.is-active .hamburger-inner {
636 
+  transform: rotate(45deg);
637 
+  transition-delay: 0.12s;
638 
+  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
639 
+  .hamburger--squeeze.is-active .hamburger-inner::before {
640 
+    top: 0;
641 
+    opacity: 0;
642 
+    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
643 
+  .hamburger--squeeze.is-active .hamburger-inner::after {
644 
+    bottom: 0;
645 
+    transform: rotate(-90deg);
646 
+    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
647 
+
648 
+/*
649 
+   * Vortex
650 
+   */
651 
+.hamburger--vortex .hamburger-inner {
652 
+  transition-duration: 0.2s;
653 
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
654 
+  .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
655 
+    transition-duration: 0s;
656 
+    transition-delay: 0.1s;
657 
+    transition-timing-function: linear; }
658 
+  .hamburger--vortex .hamburger-inner::before {
659 
+    transition-property: top, opacity; }
660 
+  .hamburger--vortex .hamburger-inner::after {
661 
+    transition-property: bottom, transform; }
662 
+
663 
+.hamburger--vortex.is-active .hamburger-inner {
664 
+  transform: rotate(765deg);
665 
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
666 
+  .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
667 
+    transition-delay: 0s; }
668 
+  .hamburger--vortex.is-active .hamburger-inner::before {
669 
+    top: 0;
670 
+    opacity: 0; }
671 
+  .hamburger--vortex.is-active .hamburger-inner::after {
672 
+    bottom: 0;
673 
+    transform: rotate(90deg); }
674 
+
675 
+/*
676 
+   * Vortex Reverse
677 
+   */
678 
+.hamburger--vortex-r .hamburger-inner {
679 
+  transition-duration: 0.2s;
680 
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
681 
+  .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
682 
+    transition-duration: 0s;
683 
+    transition-delay: 0.1s;
684 
+    transition-timing-function: linear; }
685 
+  .hamburger--vortex-r .hamburger-inner::before {
686 
+    transition-property: top, opacity; }
687 
+  .hamburger--vortex-r .hamburger-inner::after {
688 
+    transition-property: bottom, transform; }
689 
+
690 
+.hamburger--vortex-r.is-active .hamburger-inner {
691 
+  transform: rotate(-765deg);
692 
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
693 
+  .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
694 
+    transition-delay: 0s; }
695 
+  .hamburger--vortex-r.is-active .hamburger-inner::before {
696 
+    top: 0;
697 
+    opacity: 0; }
698 
+  .hamburger--vortex-r.is-active .hamburger-inner::after {
699 
+    bottom: 0;
700 
+    transform: rotate(-90deg); }

File diff suppressed because it is too large
+ 7 - 0
dist/asset/hamburger/hamburgers.min.css


+ 1 - 0
dist/index.html View File 

@@ -11,6 +11,7 @@
11 11 
     <!--
12 12 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
13 13 
     -->
14 
+    <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.css">
14 15 
     <link rel="stylesheet" type="text/css" href="/dev/bootstrap-4.0.0-beta.css">
15 16 
   </head>
16 17 
   <body>

+ 1 - 0
src/css/FileItem.styl View File 

@@ -15,6 +15,7 @@ iconrules()
15 15 
     text-align center
16 16 
   &__name
17 17 
     display flex
18 
+    align-items center
18 19 
     justify-content space-between
19 20 
     &__text
20 21 
       margin-right 10px

+ 1 - 1
src/css/index.styl View File 

@@ -1,4 +1,4 @@
1 
->body
1 
+body
2 2 
   font-family 'Quicksand', sans-serif
3 3 
 html, body, #content
4 4 
   height 100%