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' | ||
