diff options
Diffstat (limited to 'tpl/views/divider.pug')
-rw-r--r-- | tpl/views/divider.pug | 13 |
1 files changed, 13 insertions, 0 deletions
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug index ea08984..5429ab5 100644 --- a/tpl/views/divider.pug +++ b/tpl/views/divider.pug | |||
@@ -12,34 +12,45 @@ mixin view-divider | |||
12 | 12 | ||
13 | .c-box | 13 | .c-box |
14 | +div-heading('xs')= 'Heading' | 14 | +div-heading('xs')= 'Heading' |
15 | +divider('quiet') | ||
16 | p= loremIpsum | ||
17 | |||
18 | .c-box | ||
19 | +div-heading('xs')= 'Heading' | ||
15 | +divider('faint') | 20 | +divider('faint') |
16 | p= loremIpsum | 21 | p= loremIpsum |
17 | 22 | ||
18 | .c-box | 23 | .c-box |
19 | +divider('strong')= 'Strong' | 24 | +divider('strong')= 'Strong' |
20 | +divider('medium')= 'Medium' | 25 | +divider('medium')= 'Medium' |
26 | +divider('quiet')= 'Quiet' | ||
21 | +divider('faint')= 'Faint' | 27 | +divider('faint')= 'Faint' |
22 | +divider('strong') | 28 | +divider('strong') |
23 | +divider('medium') | 29 | +divider('medium') |
30 | +divider('quiet') | ||
24 | +divider('faint') | 31 | +divider('faint') |
25 | 32 | ||
26 | .c-box | 33 | .c-box |
27 | .l-media(style="height: 1em") | 34 | .l-media(style="height: 1em") |
28 | +divider('strong')(vertical=true class="l-media__block") | 35 | +divider('strong')(vertical=true class="l-media__block") |
29 | +divider('medium')(vertical=true class="l-media__block") | 36 | +divider('medium')(vertical=true class="l-media__block") |
37 | +divider('quiet')(vertical=true class="l-media__block") | ||
30 | +divider('faint')(vertical=true class="l-media__block") | 38 | +divider('faint')(vertical=true class="l-media__block") |
31 | .l-media(style="height: 1em") | 39 | .l-media(style="height: 1em") |
32 | +divider('strong')(dot=true class="l-media__block") | 40 | +divider('strong')(dot=true class="l-media__block") |
33 | +divider('medium')(dot=true class="l-media__block") | 41 | +divider('medium')(dot=true class="l-media__block") |
42 | +divider('quiet')(dot=true class="l-media__block") | ||
34 | +divider('faint')(dot=true class="l-media__block") | 43 | +divider('faint')(dot=true class="l-media__block") |
35 | 44 | ||
36 | each theme in ['accent', 'negative'] | 45 | each theme in ['accent', 'negative'] |
37 | .c-box | 46 | .c-box |
38 | +divider('strong')(color=theme)= 'Strong' | 47 | +divider('strong')(color=theme)= 'Strong' |
39 | +divider('medium')(color=theme)= 'Medium' | 48 | +divider('medium')(color=theme)= 'Medium' |
49 | +divider('quiet')(color=theme)= 'Quiet' | ||
40 | +divider('faint')(color=theme)= 'Faint' | 50 | +divider('faint')(color=theme)= 'Faint' |
41 | +divider('strong')(color=theme) | 51 | +divider('strong')(color=theme) |
42 | +divider('medium')(color=theme) | 52 | +divider('medium')(color=theme) |
53 | +divider('quiet')(color=theme) | ||
43 | +divider('faint')(color=theme) | 54 | +divider('faint')(color=theme) |
44 | 55 | ||
45 | each theme in ['static-black', 'static-white'] | 56 | each theme in ['static-black', 'static-white'] |
@@ -49,7 +60,9 @@ mixin view-divider | |||
49 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) | 60 | .c-box(style=`background-color: var(--colors--blue-static--${bg});`) |
50 | +divider('strong')(color=theme)= 'Strong' | 61 | +divider('strong')(color=theme)= 'Strong' |
51 | +divider('medium')(color=theme)= 'Medium' | 62 | +divider('medium')(color=theme)= 'Medium' |
63 | +divider('quiet')(color=theme)= 'Quiet' | ||
52 | +divider('faint')(color=theme)= 'Faint' | 64 | +divider('faint')(color=theme)= 'Faint' |
53 | +divider('strong')(color=theme) | 65 | +divider('strong')(color=theme) |
54 | +divider('medium')(color=theme) | 66 | +divider('medium')(color=theme) |
67 | +divider('quiet')(color=theme) | ||
55 | +divider('faint')(color=theme) | 68 | +divider('faint')(color=theme) |