summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 16:52:52 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 16:52:52 +0100
commite18669958b229235798e31e5ad8608d9fd30c8e8 (patch)
treef6cc743ba608cb2d5f714a8e277444364c8a4ecd /tpl
parentUpdate (diff)
downloadiro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.tar.gz
iro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.tar.bz2
iro-design-e18669958b229235798e31e5ad8608d9fd30c8e8.zip
Added button
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug47
-rw-r--r--tpl/layouts/container.pug6
-rw-r--r--tpl/objects/button.pug16
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
4include layouts/container.pug 4include layouts/container.pug
5
5include objects/heading.pug 6include objects/heading.pug
6include objects/rule.pug 7include objects/rule.pug
8include objects/button.pug
7 9
8mixin box 10mixin 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
14doctype html 15doctype 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 @@
1mixin 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