UNPKG

9.06 kBtext/stylusView Raw
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
6ion-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// :before:
18
19clearfix()
20 &:after
21 content: ''
22 display: table
23 clear: both
24 zoom: 1
25
26*
27 box-sizing: border-box
28
29html, body
30 height: 100%
31
32html
33 background: $bg
34
35.doc-layout
36 width: 100%
37 height: 100%
38
39 .body
40 padding: 16px
41
42//
43// Menu
44//
45
46.toc-menu
47 $pad = 24px
48
49 &
50 position: relative
51 padding: ($pad - 4px) 0
52 // background: #fdfefe
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 // The readme
107 .-level-1:first-child
108 margin-bottom: 16px
109
110 // The readme's headings
111 .-level-1:first-child > .heading-list
112 margin-top: 16px
113
114 // The readme's title
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// Headings menu
129//
130
131ul.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// Hover fade
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// Markdown body
171//
172
173.markdown-body
174 margin: 0 auto
175 max-width: 768px
176 overflow: visible
177
178//
179// Markdown overrides
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// Nprogress
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// Menu toggle
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 // keep the white visible
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 // transition: width 0 linear 250ms, background-color 0 linear 250ms, color 100ms linear
249
250//
251// Search (to do)
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// Header
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 // Tooltip
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 // Icons
379 .icon.-github:after
380 ion-icon('social-github')
381
382//
383// Footer nav
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 // Expanded: background
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 // Layout
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 // Title and labels
434 .title,
435 .label
436 opacity: 0
437 pointer-events: none
438
439 // Fly the 'next: ___' from the left
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 // Link styles
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// Desktop layout
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 // compensate for toggle button
535 &:after
536 content: ''
537 display: block
538 height: 64px
539