diff options
Diffstat (limited to 'tpl')
-rw-r--r-- | tpl/objects/heading.pug | 40 | ||||
-rw-r--r-- | tpl/views/heading.pug | 20 |
2 files changed, 34 insertions, 26 deletions
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug index 47ffefa..6cc05ad 100644 --- a/tpl/objects/heading.pug +++ b/tpl/objects/heading.pug | |||
@@ -1,42 +1,34 @@ | |||
1 | mixin h1-heading(level, inner = false) | 1 | mixin h1-heading(level, display = false) |
2 | - let classes = ['o-heading', 'o-heading--' + level] | 2 | - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] |
3 | h1(class=classes)&attributes(attributes) | 3 | h1(class=classes)&attributes(attributes) |
4 | if inner | 4 | block |
5 | span.o-heading__inner | ||
6 | block | ||
7 | else | ||
8 | block | ||
9 | 5 | ||
10 | mixin h2-heading(level) | 6 | mixin h2-heading(level, display = false) |
11 | - let classes = ['o-heading', 'o-heading--' + level] | 7 | - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] |
12 | h2(class=classes)&attributes(attributes) | 8 | h2(class=classes)&attributes(attributes) |
13 | block | 9 | block |
14 | 10 | ||
15 | mixin h3-heading(level) | 11 | mixin h3-heading(level, display = false) |
16 | - let classes = ['o-heading', 'o-heading--' + level] | 12 | - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] |
17 | h3(class=classes)&attributes(attributes) | 13 | h3(class=classes)&attributes(attributes) |
18 | block | 14 | block |
19 | 15 | ||
20 | mixin h4-heading(level) | 16 | mixin h4-heading(level, display = false) |
21 | - let classes = ['o-heading', 'o-heading--' + level] | 17 | - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] |
22 | h4(class=classes)&attributes(attributes) | 18 | h4(class=classes)&attributes(attributes) |
23 | block | 19 | block |
24 | 20 | ||
25 | mixin h5-heading(level) | 21 | mixin h5-heading(level, display = false) |
26 | - let classes = ['o-heading', 'o-heading--' + level] | 22 | - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] |
27 | h5(class=classes)&attributes(attributes) | 23 | h5(class=classes)&attributes(attributes) |
28 | block | 24 | block |
29 | 25 | ||
30 | mixin h6-heading(level) | 26 | mixin h6-heading(level, display = false) |
31 | - let classes = ['o-heading', 'o-heading--' + level] | 27 | - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] |
32 | h6(class=classes)&attributes(attributes) | 28 | h6(class=classes)&attributes(attributes) |
33 | block | 29 | block |
34 | 30 | ||
35 | mixin div-heading(level, primary = false) | 31 | mixin div-heading(level, display = false) |
36 | - let classes = ['o-heading', 'o-heading--' + level] | 32 | - let classes = ['o-heading', 'o-heading--' + level, { 'o-heading--display': display }] |
37 | div(class=classes)&attributes(attributes) | 33 | div(class=classes)&attributes(attributes) |
38 | if primary | 34 | block |
39 | span.o-heading__primary | ||
40 | block | ||
41 | else | ||
42 | block | ||
diff --git a/tpl/views/heading.pug b/tpl/views/heading.pug index 07080d5..bc16cee 100644 --- a/tpl/views/heading.pug +++ b/tpl/views/heading.pug | |||
@@ -9,17 +9,33 @@ mixin view-heading | |||
9 | h6= 'H6 default' | 9 | h6= 'H6 default' |
10 | 10 | ||
11 | .c-box.s-headings | 11 | .c-box.s-headings |
12 | h1.u-mt-0: span.s-headings__primary= 'H1 styled' | 12 | h1.u-mt-0= 'H1 styled' |
13 | h2= 'H2 styled' | 13 | h2= 'H2 styled' |
14 | h3= 'H3 styled' | 14 | h3= 'H3 styled' |
15 | h4= 'H4 styled' | 15 | h4= 'H4 styled' |
16 | h5= 'H5 styled' | 16 | h5= 'H5 styled' |
17 | h6= 'H6 styled' | 17 | h6= 'H6 styled' |
18 | 18 | ||
19 | .c-box.s-headings.s-headings--display | ||
20 | h1.u-mt-0= 'H1 display styled' | ||
21 | h2= 'H2 display styled' | ||
22 | h3= 'H3 display styled' | ||
23 | h4= 'H4 display styled' | ||
24 | h5= 'H5 display styled' | ||
25 | h6= 'H6 display styled' | ||
26 | |||
19 | .c-box | 27 | .c-box |
20 | +div-heading('xxl', true)(class='u-mt-0')= 'XXL Heading' | 28 | +div-heading('xxl')(class='u-mt-0')= 'XXL Heading' |
21 | +div-heading('xl')= 'XL Heading' | 29 | +div-heading('xl')= 'XL Heading' |
22 | +div-heading('lg')= 'LG Heading' | 30 | +div-heading('lg')= 'LG Heading' |
23 | +div-heading('md')= 'MD Heading' | 31 | +div-heading('md')= 'MD Heading' |
24 | +div-heading('sm')= 'SM Heading' | 32 | +div-heading('sm')= 'SM Heading' |
25 | +div-heading('xs')= 'XS Heading' | 33 | +div-heading('xs')= 'XS Heading' |
34 | |||
35 | .c-box | ||
36 | +div-heading('xxl', true)(class='u-mt-0')= 'XXL display Heading' | ||
37 | +div-heading('xl', true)= 'XL display Heading' | ||
38 | +div-heading('lg', true)= 'LG display Heading' | ||
39 | +div-heading('md', true)= 'MD display Heading' | ||
40 | +div-heading('sm', true)= 'SM display Heading' | ||
41 | +div-heading('xs', true)= 'XS display Heading' | ||