diff options
author | Volpeon <git@volpeon.ink> | 2022-02-05 16:52:52 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-05 16:52:52 +0100 |
commit | e18669958b229235798e31e5ad8608d9fd30c8e8 (patch) | |
tree | f6cc743ba608cb2d5f714a8e277444364c8a4ecd /tpl | |
parent | Update (diff) | |
download | iro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.tar.gz iro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.tar.bz2 iro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.zip |
Added button
Diffstat (limited to 'tpl')
-rw-r--r-- | tpl/index.pug | 47 | ||||
-rw-r--r-- | tpl/layouts/container.pug | 6 | ||||
-rw-r--r-- | tpl/objects/button.pug | 16 |
3 files changed, 59 insertions, 10 deletions
diff --git a/tpl/index.pug b/tpl/index.pug index c63e9f1..47dbc55 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -2,13 +2,14 @@ | |||
2 | let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat' | 2 | let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat' |
3 | 3 | ||
4 | include layouts/container.pug | 4 | include layouts/container.pug |
5 | |||
5 | include objects/heading.pug | 6 | include objects/heading.pug |
6 | include objects/rule.pug | 7 | include objects/rule.pug |
8 | include objects/button.pug | ||
7 | 9 | ||
8 | mixin box | 10 | mixin box |
9 | .t-raised | 11 | +container(padX=true padY=true inPage=true theme="raised") |
10 | +container(padH=true padV=true inPage=true themed=true) | 12 | block |
11 | block | ||
12 | 13 | ||
13 | 14 | ||
14 | doctype html | 15 | doctype html |
@@ -17,11 +18,11 @@ html | |||
17 | meta(charset='utf-8') | 18 | meta(charset='utf-8') |
18 | meta(name='viewport' content='width=device-width, initial-scale=1') | 19 | meta(name='viewport' content='width=device-width, initial-scale=1') |
19 | title iro-design | 20 | title iro-design |
20 | link(rel="stylesheet", href="style.css") | 21 | link(rel="stylesheet" href="style.css") |
21 | script(src="script.js") | 22 | script(src="script.js") |
22 | 23 | ||
23 | body(class='t-lighter') | 24 | body(class='t-lighter') |
24 | +container(padH=true padV=true narrow=true) | 25 | +container(padX=true padY=true narrow=true) |
25 | 26 | ||
26 | +h1-heading(level='xl')= 'Heading' | 27 | +h1-heading(level='xl')= 'Heading' |
27 | +rule(level='medium') | 28 | +rule(level='medium') |
@@ -58,3 +59,35 @@ html | |||
58 | +rule(level='strong')= 'Strong' | 59 | +rule(level='strong')= 'Strong' |
59 | +rule(level='medium')= 'Medium' | 60 | +rule(level='medium')= 'Medium' |
60 | +rule(level='faint')= 'Faint' | 61 | +rule(level='faint')= 'Faint' |
62 | |||
63 | //----------------------------------------- | ||
64 | |||
65 | +h1-heading(level='xl')= 'Button' | ||
66 | +rule(level='medium') | ||
67 | |||
68 | +box | ||
69 | +a-button(variant='accent')= 'Button' | ||
70 | = ' ' | ||
71 | +a-button(variant='accent' disabled=true)= 'Button' | ||
72 | = ' ' | ||
73 | +a-button(variant='accent' outline=true)= 'Button' | ||
74 | = ' ' | ||
75 | +a-button(variant='accent' outline=true disabled=true)= 'Button' | ||
76 | br | ||
77 | br | ||
78 | +a-button(variant='primary')= 'Button' | ||
79 | = ' ' | ||
80 | +a-button(variant='primary' disabled=true)= 'Button' | ||
81 | = ' ' | ||
82 | +a-button(variant='primary' outline=true)= 'Button' | ||
83 | = ' ' | ||
84 | +a-button(variant='primary' outline=true disabled=true)= 'Button' | ||
85 | br | ||
86 | br | ||
87 | +a-button(variant='secondary')= 'Button' | ||
88 | = ' ' | ||
89 | +a-button(variant='secondary' disabled=true)= 'Button' | ||
90 | = ' ' | ||
91 | +a-button(variant='secondary' outline=true)= 'Button' | ||
92 | = ' ' | ||
93 | +a-button(variant='secondary' outline=true disabled=true)= 'Button' | ||
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug index 9dde2d6..c64de11 100644 --- a/tpl/layouts/container.pug +++ b/tpl/layouts/container.pug | |||
@@ -2,12 +2,12 @@ mixin container | |||
2 | - | 2 | - |
3 | let classes = { | 3 | let classes = { |
4 | 'l-container': true, | 4 | 'l-container': true, |
5 | 'l-container--pad-h': attributes.padH, | 5 | 'l-container--pad-x': attributes.padX, |
6 | 'l-container--pad-v': attributes.padV, | 6 | 'l-container--pad-y': attributes.padY, |
7 | 'l-container--narrow': attributes.narrow, | 7 | 'l-container--narrow': attributes.narrow, |
8 | 'l-container--sm-narrow': attributes.smNarrow, | 8 | 'l-container--sm-narrow': attributes.smNarrow, |
9 | 'l-container--in-page': attributes.inPage, | 9 | 'l-container--in-page': attributes.inPage, |
10 | 'l-container--themed': attributes.themed | 10 | 'l-container--themed': !!attributes.theme |
11 | } | 11 | } |
12 | if (!!attributes.theme) { | 12 | if (!!attributes.theme) { |
13 | classes['t-' + attributes.theme] = true | 13 | classes['t-' + attributes.theme] = true |
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug new file mode 100644 index 0000000..243ff58 --- /dev/null +++ b/tpl/objects/button.pug | |||
@@ -0,0 +1,16 @@ | |||
1 | mixin a-button | ||
2 | - | ||
3 | let classes = { | ||
4 | 'o-button': true, | ||
5 | 'o-button--block': attributes.block, | ||
6 | 'o-button--outline': attributes.outline, | ||
7 | 'is-disabled': attributes.disabled | ||
8 | } | ||
9 | if (attributes.variant) { | ||
10 | classes['o-button--' + attributes.variant] = true | ||
11 | } | ||
12 | |||
13 | let href = attributes.disabled ? null : '#'; | ||
14 | |||
15 | a(class=classes href=href) | ||
16 | block | ||