首頁 探索 說明
登入
bux
/
tracim_v2
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

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

Skylsmoi 7 年之前
父節點
a5828f7972 ada49adeec
當前提交
84e59a0047
共有 6 個文件被更改，包括 10 次插入 和 929 次删除
分割檢視 顯示文件統計
  1. 0 320
      dist/asset/hamburger/example.html
  2. 0 599
      dist/asset/hamburger/hamburgers.css
  3. 1 1
      dist/asset/hamburger/hamburgers.min.css
  4. 1 1
      dist/index.html
  5. 1 1
      src/container/Dashboard.jsx
  6. 7 7
      src/css/Sidebar.styl

+ 0 - 320
dist/asset/hamburger/example.html 查看文件 

@@ -1,320 +0,0 @@
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>

+ 0 - 599
dist/asset/hamburger/hamburgers.css 查看文件 

@@ -48,212 +48,6 @@
48 48 
     top: -10px; }
49 49 
   .hamburger-inner::after {
50 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 51 
 /*
258 52 
    * Collapse
259 53 
    */
 
@@ -281,247 +75,6 @@
281 75 
     top: 0;
282 76 
     transform: rotate(-90deg);
283 77 
     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 78 
 /*
526 79 
    * Spring
527 80 
    */
 
@@ -546,155 +99,3 @@
546 99 
     top: 0;
547 100 
     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 101 
     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); }

文件差異過大導致無法顯示
+ 1 - 1
dist/asset/hamburger/hamburgers.min.css


+ 1 - 1
dist/index.html 查看文件 

@@ -11,7 +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 
+    <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
15 15 
     <link rel="stylesheet" type="text/css" href="/dev/bootstrap-4.0.0-beta.css">
16 16 
   </head>
17 17 
   <body>

+ 1 - 1
src/container/Dashboard.jsx 查看文件 

@@ -304,7 +304,7 @@ class Dashboard extends Component {
304 304 
                   </div>
305 305
306 306 
                   <form className='dashboard__memberlist__addmember'>
307 
-                    <label className='dashboard__memberlist__addmember__label' for='addmember'>Indiqué le nom de l'utilisateur</label>
307 
+                    <label className='dashboard__memberlist__addmember__label' for='addmember'>Indiquer le nom de l'utilisateur</label>
308 308 
                     <input type='text' id='addmember' className='dashboard__memberlist__addmember__name form-control' placeholder='Name' />
309 309 
                     <div className='dashboard__memberlist__addmember__role'>
310 310 
                       <div className='dashboard__memberlist__addmember__role__dropdown dropdown'>

+ 7 - 7
src/css/Sidebar.styl 查看文件 

@@ -17,13 +17,13 @@
17 17 
 /**** MENU HAMBURGER ON EXPAND BAR *****/
18 18
19 19 
 .hamburger--spring .hamburger-inner
20 
-  margin 2px 6px
20 
+  margin 4px 8px
21 21
22 22 
 .hamburger--spring .hamburger-inner::before
23 
-  top 8px
23 
+  top 7px
24 24
25 25 
 .hamburger--spring .hamburger-inner::after
26 
-  top 16px
26 
+  top 14px
27 27
28 28 
  /***************************************/
29 29 
 
@@ -52,11 +52,11 @@ leftside()
52 52 
         transition-delay 0.22s
53 53 
         background-color transparent
54 54 
         &::before
55 
-            top 0
55 
+            top -3px
56 56 
             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)
57 57 
             transform translate3d(0, 10px, 0) rotate(45deg)
58 58 
         &::after
59 
-            top 0
59 
+            top -3px
60 60 
             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)
61 61 
             transform translate3d(0, 10px, 0) rotate(-45deg)
62 62 
   &__expand
 
@@ -76,8 +76,8 @@ leftside()
76 76 
         outline none
77 77 
       &__box
78 78 
         &__icon, &__icon::before, &__icon::after
79 
-          width 25px
80 
-          height 3px
79 
+          width 20px
80 
+          height 2px
81 81 
           background-color off-white
82 82 
         &__icon::before
83 83 
           top 8px