summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/heading.pug40
-rw-r--r--tpl/views/heading.pug20
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 @@
1mixin h1-heading(level, inner = false) 1mixin 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
10mixin h2-heading(level) 6mixin 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
15mixin h3-heading(level) 11mixin 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
20mixin h4-heading(level) 16mixin 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
25mixin h5-heading(level) 21mixin 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
30mixin h6-heading(level) 26mixin 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
35mixin div-heading(level, primary = false) 31mixin 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'