1 | @require './normalize.css/normalize.css'
|
2 | @require './github-markdown-css/github-markdown.css'
|
3 | @require './nprogress/nprogress.css'
|
4 | @require './iconfonts/stylesheets/ionicons'
|
5 |
|
6 | ion-font()
|
7 |
|
8 | $bg ?= white
|
9 | $black ?= #111
|
10 | $slate ?= #505d6b
|
11 | $accent ?= #4078C0
|
12 | $nav-width ?= 250px
|
13 | $collapsed-nav-width ?= 64px
|
14 | $xpad ?= 24px
|
15 | $line ?= rgba($black, 0.1)
|
16 |
|
17 |
|
18 |
|
19 | clearfix()
|
20 | &:after
|
21 | content: ''
|
22 | display: table
|
23 | clear: both
|
24 | zoom: 1
|
25 |
|
26 | *
|
27 | box-sizing: border-box
|
28 |
|
29 | html, body
|
30 | height: 100%
|
31 |
|
32 | html
|
33 | background: $bg
|
34 |
|
35 | .doc-layout
|
36 | width: 100%
|
37 | height: 100%
|
38 |
|
39 | .body
|
40 | padding: 16px
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | .toc-menu
|
47 | $pad = 24px
|
48 |
|
49 | &
|
50 | position: relative
|
51 | padding: ($pad - 4px) 0
|
52 |
|
53 | box-shadow: inset -1px 0 $line
|
54 | font-size: 13px
|
55 | transition: opacity 1500ms linear
|
56 |
|
57 | ul, li
|
58 | margin: 0
|
59 | padding: 0
|
60 | list-style: none
|
61 |
|
62 | .title
|
63 | display: block
|
64 | padding: 7px $pad
|
65 | height: 1em
|
66 | text-overflow: ellipsis
|
67 | overflow: hidden
|
68 | white-space: nowrap
|
69 | box-sizing: content-box
|
70 |
|
71 | .-level-1.-parent
|
72 | margin-bottom: 16px
|
73 |
|
74 | .-level-1.-parent > .title
|
75 | margin-top: 16px
|
76 | font-weight: bold
|
77 | color: $black
|
78 | font-size: 1.1em
|
79 |
|
80 | .link
|
81 | &, &:visited
|
82 | color: $slate
|
83 | text-decoration: none
|
84 | position: relative
|
85 |
|
86 | .link, .hlink
|
87 | &
|
88 | transition: background-color 200ms linear, color 500ms linear, box-shadow 200ms linear
|
89 | box-shadow: inset -2px 0 rgba($accent, 0)
|
90 | box-sizing: content-box
|
91 |
|
92 | &:hover
|
93 | background-color: rgba($accent, 0.02)
|
94 | color: darken($slate, 20%)
|
95 | transition: box-shadow 200ms linear
|
96 |
|
97 | &:active
|
98 | background-color: rgba($accent, 0.1)
|
99 | color: $black
|
100 | transition: box-shadow 200ms linear
|
101 |
|
102 | &.-active
|
103 | box-shadow: inset -2px 0 $accent
|
104 | transition: background-color 200ms linear, color 500ms linear
|
105 |
|
106 |
|
107 | .-level-1:first-child
|
108 | margin-bottom: 16px
|
109 |
|
110 |
|
111 | .-level-1:first-child > .heading-list
|
112 | margin-top: 16px
|
113 |
|
114 |
|
115 | .-level-1:first-child > .title
|
116 | margin-top: 0
|
117 | font-size: 1.5em
|
118 | font-weight: 300
|
119 | color: $black
|
120 |
|
121 | .-level-3 .title
|
122 | padding-left: $pad + 8px * 1
|
123 |
|
124 | .-level-4 .title
|
125 | padding-left: $pad + 8px * 2
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | ul.heading-list
|
132 | $pad = 24px
|
133 |
|
134 | .hlink
|
135 | text-decoration: none
|
136 | padding: 6px $pad
|
137 | display: block
|
138 | height: 1em
|
139 | text-overflow: ellipsis
|
140 | overflow: hidden
|
141 | white-space: nowrap
|
142 |
|
143 | &, &:visited
|
144 | color: $slate
|
145 |
|
146 | .hlink:before
|
147 | content: ''
|
148 | display: inline-block
|
149 | vertical-align: middle
|
150 | margin-right: 8px
|
151 | height: 2px
|
152 | width: 12px
|
153 | background: $slate
|
154 | opacity: 0.3
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 | .toc-menu.-faded
|
161 | .title:not(.-active)
|
162 | opacity: 0.2
|
163 | transition: opacity 1500ms linear
|
164 |
|
165 | &:hover .title
|
166 | opacity: 1
|
167 | transition: opacity 200ms linear
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 | .markdown-body
|
174 | margin: 0 auto
|
175 | max-width: 768px
|
176 | overflow: visible
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 | .markdown-body
|
183 | h1
|
184 | font-size: 2.5em
|
185 | font-weight: 300
|
186 | margin-bottom: .5em
|
187 | padding-bottom: .5em
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | #nprogress
|
194 | .bar
|
195 | background: $accent
|
196 |
|
197 | .peg
|
198 | box-shadow: 0 0 10px $accent, 0 0 5px $accent
|
199 | display: block
|
200 |
|
201 | .spinner-icon
|
202 | border-top-color: $accent
|
203 | border-left-color: $accent
|
204 |
|
205 |
|
206 |
|
207 |
|
208 |
|
209 | .menu-toggle
|
210 | $size = 40px
|
211 |
|
212 | &
|
213 | display: none
|
214 | box-sizing: content-box
|
215 |
|
216 | @media (min-width: 769px)
|
217 | display: block
|
218 | width: $size + 12px
|
219 | height: $size + 12px
|
220 | line-height: $size
|
221 |
|
222 | position: fixed
|
223 | padding-left: 12px
|
224 | left: 0
|
225 | bottom: 0
|
226 | color: $black
|
227 | z-index: 10
|
228 | cursor: pointer
|
229 | background: transparent
|
230 |
|
231 | &
|
232 |
|
233 | transition: width 1ms linear 250ms, background-color 1ms linear 250ms, color 400ms linear
|
234 |
|
235 | .-menu-visible &
|
236 | width: $nav-width - 1px - 20px
|
237 | background-color: $bg
|
238 | transition: color 400ms linear
|
239 |
|
240 | &:before
|
241 | display: inline-block
|
242 | ion-icon('navicon', 24px)
|
243 | text-align: center
|
244 | width: $size
|
245 |
|
246 | &:hover
|
247 | color: $accent
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 | .toc-menu
|
255 | &:before
|
256 | ion-icon('ios-search-strong', 20px)
|
257 | display: block
|
258 | width: 40px
|
259 | height: 40px
|
260 | line-height: 40px
|
261 | text-align: center
|
262 |
|
263 | position: absolute
|
264 | right: 24px - 14px
|
265 | top: 24px - 8px
|
266 | color: $slate
|
267 | transition: color 400ms linear
|
268 | border-radius: 3px
|
269 | z-index: 10
|
270 | cursor: pointer
|
271 |
|
272 | .header-nav,
|
273 | .footer-nav
|
274 | font-size: 16px
|
275 |
|
276 |
|
277 |
|
278 |
|
279 | .header-nav
|
280 | &
|
281 | position: fixed
|
282 | top: 0
|
283 | right: 0
|
284 | left: 0
|
285 | height: 40px + $xpad + $xpad
|
286 | line-height: 40px
|
287 | text-align: center
|
288 |
|
289 | &
|
290 | opacity: 0
|
291 | transition: opacity 250ms linear
|
292 | pointer-events: none
|
293 |
|
294 | &.-expanded
|
295 | opacity: 1
|
296 | pointer-events: auto
|
297 |
|
298 | .left
|
299 | position: absolute
|
300 | left: 0
|
301 | top: 0
|
302 | text-align: left
|
303 |
|
304 | .right
|
305 | position: absolute
|
306 | right: 0
|
307 | top: 0
|
308 | text-align: right
|
309 |
|
310 | .iconlink
|
311 | position: relative
|
312 | display: inline-block
|
313 | vertical-align: middle
|
314 | height: 32px
|
315 | line-height: 1em
|
316 | color: rgba($slate, 0.75)
|
317 | transition: all 150ms linear
|
318 | padding: $xpad
|
319 |
|
320 | .iconlink:hover
|
321 | color: $accent
|
322 |
|
323 | .iconlink
|
324 | white-space: nowrap
|
325 | text-decoration: none
|
326 |
|
327 | .title, .label
|
328 | white-space: nowrap
|
329 | margin: 0 8px
|
330 |
|
331 | position: relative
|
332 | top: -4px
|
333 |
|
334 |
|
335 | .iconlink[data-title]:before
|
336 | content: attr(data-title)
|
337 | display: inline-block
|
338 | position: absolute
|
339 | bottom: -24px - $xpad
|
340 | right: $xpad
|
341 | font-size: 13px
|
342 | padding: 3px 10px
|
343 | background: rgba($black, 0.8)
|
344 | color: white
|
345 | border: solid 1px rgba($black, 0.2)
|
346 | border-radius: 2px
|
347 | text-decoration: none
|
348 | height: 22px
|
349 | line-height: 22px
|
350 | width: auto
|
351 | white-space: nowrap
|
352 | pointer-events: none
|
353 | opacity: 0
|
354 | transition: opacity 150ms linear, transform 150ms linear
|
355 | transform: translate3d(0, -8px, 0)
|
356 |
|
357 | .iconlink[data-title]:hover:before
|
358 | opacity: 1
|
359 | transform: translate3d(0, 0, 0)
|
360 | pointer-events: auto
|
361 |
|
362 | .icon:after
|
363 | font-size: 24px
|
364 | width: 32px
|
365 | height: 32px
|
366 | text-align: center
|
367 |
|
368 | .icon
|
369 | color: rgba($slate, 0.5)
|
370 | transition: color 150ms linear
|
371 |
|
372 | &.-expanded .icon
|
373 | color: $black
|
374 |
|
375 | .iconlink:hover .icon
|
376 | color: $accent
|
377 |
|
378 |
|
379 | .icon.-github:after
|
380 | ion-icon('social-github')
|
381 |
|
382 |
|
383 |
|
384 |
|
385 |
|
386 | .footer-nav
|
387 | &
|
388 | position: fixed
|
389 | bottom: 0
|
390 | right: 0
|
391 | left: 0
|
392 | border-top: solid 1px transparent
|
393 | background-color: rgba(white, 0)
|
394 | clearfix()
|
395 |
|
396 | &, a
|
397 | height: 24px + 16px + $xpad
|
398 | line-height: 24px
|
399 |
|
400 | a
|
401 | display: block
|
402 | white-space: nowrap
|
403 | text-overflow: ellipsis
|
404 |
|
405 |
|
406 | &.-expanded
|
407 | background-color: rgba(white, 1)
|
408 |
|
409 | &:before
|
410 | content: ''
|
411 | position: absolute
|
412 | left: $xpad
|
413 | right: $xpad
|
414 | top: 0
|
415 | height: 1px
|
416 | background: $line
|
417 |
|
418 |
|
419 | .left
|
420 | position: absolute
|
421 | left: 0
|
422 | top: 0
|
423 |
|
424 | .right
|
425 | position: absolute
|
426 | right: 0
|
427 | top: 0
|
428 | text-align: right
|
429 |
|
430 | &.-expanded .right
|
431 | width: 60%
|
432 |
|
433 |
|
434 | .title,
|
435 | .label
|
436 | opacity: 0
|
437 | pointer-events: none
|
438 |
|
439 |
|
440 | .right .title,
|
441 | .right .label
|
442 | transform: translate3d(-8px, 0, 0)
|
443 |
|
444 | .title,
|
445 | .label,
|
446 | a:before,
|
447 | a:after
|
448 | transition: all 250ms ease-in
|
449 |
|
450 | &.-expanded .title,
|
451 | &.-expanded .label
|
452 | opacity: 1
|
453 | transform: translate3d(0, 0, 0)
|
454 | pointer-events: auto
|
455 |
|
456 |
|
457 | a
|
458 | text-decoration: none
|
459 | color: $slate
|
460 | padding: 16px $xpad $xpad $xpad
|
461 |
|
462 | .label,
|
463 | .left .title
|
464 | color: rgba($slate, 0.5)
|
465 |
|
466 | .right .title
|
467 | margin-right: 0.1em
|
468 | color: $black
|
469 |
|
470 | .left a:hover:before,
|
471 | .right a:hover:after
|
472 | color: $accent
|
473 |
|
474 | a:hover .title
|
475 | color: $accent
|
476 |
|
477 | .left a:before,
|
478 | .right a:after
|
479 | display: inline-block
|
480 | font-size: 20px
|
481 | vertical-align: middle
|
482 | position: relative
|
483 | top: -1px
|
484 |
|
485 | .left a:before
|
486 | ion-icon('chevron-left')
|
487 | margin-right: 16px
|
488 |
|
489 | .right a:after
|
490 | ion-icon('chevron-right')
|
491 | margin-left: 16px
|
492 |
|
493 |
|
494 |
|
495 |
|
496 |
|
497 | @media (min-width: 960px)
|
498 | .doc-layout
|
499 | .menu
|
500 | width: $nav-width
|
501 | position: fixed
|
502 | top: 0
|
503 | left: 0
|
504 | height: 100%
|
505 | overflow-y: auto
|
506 |
|
507 | .body
|
508 | padding-top: $xpad + 40px
|
509 | padding-bottom: 64px + 64px
|
510 | transition: all 250ms ease-in
|
511 |
|
512 | .menu
|
513 | display: block
|
514 | transform: translate3d(-1 * $nav-width, 0, 0)
|
515 | transition: all 250ms ease-in
|
516 |
|
517 | .header-nav,
|
518 | .footer-nav
|
519 | transition: all 250ms ease-in
|
520 | left: $collapsed-nav-width
|
521 |
|
522 | .-menu-visible &
|
523 | .header-nav,
|
524 | .footer-nav
|
525 | left: $nav-width
|
526 |
|
527 | .body
|
528 | padding-left: $nav-width + $xpad
|
529 | padding-right: $xpad
|
530 |
|
531 | .menu
|
532 | transform: translate3d(0, 0, 0)
|
533 |
|
534 |
|
535 | &:after
|
536 | content: ''
|
537 | display: block
|
538 | height: 64px
|
539 |
|