summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 18:32:31 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 18:32:31 +0100
commit1cb77f7c4cb27e40e368656b6536bb208d96aef9 (patch)
treef2e21f92a50c78895473d998811488fdb96cfec3 /tpl
parentAdded button (diff)
downloadiro-design-1cb77f7c4cb27e40e368656b6536bb208d96aef9.tar.gz
iro-design-1cb77f7c4cb27e40e368656b6536bb208d96aef9.tar.bz2
iro-design-1cb77f7c4cb27e40e368656b6536bb208d96aef9.zip
Added text field
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug32
-rw-r--r--tpl/objects/icon.pug7
-rw-r--r--tpl/objects/text-field.pug13
3 files changed, 51 insertions, 1 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 47dbc55..7dab86f 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -6,6 +6,7 @@ include layouts/container.pug
6include objects/heading.pug 6include objects/heading.pug
7include objects/rule.pug 7include objects/rule.pug
8include objects/button.pug 8include objects/button.pug
9include objects/text-field.pug
9 10
10mixin box 11mixin box
11 +container(padX=true padY=true inPage=true theme="raised") 12 +container(padX=true padY=true inPage=true theme="raised")
@@ -21,7 +22,7 @@ html
21 link(rel="stylesheet" href="style.css") 22 link(rel="stylesheet" href="style.css")
22 script(src="script.js") 23 script(src="script.js")
23 24
24 body(class='t-lighter') 25 body
25 +container(padX=true padY=true narrow=true) 26 +container(padX=true padY=true narrow=true)
26 27
27 +h1-heading(level='xl')= 'Heading' 28 +h1-heading(level='xl')= 'Heading'
@@ -91,3 +92,32 @@ html
91 +a-button(variant='secondary' outline=true)= 'Button' 92 +a-button(variant='secondary' outline=true)= 'Button'
92 = ' ' 93 = ' '
93 +a-button(variant='secondary' outline=true disabled=true)= 'Button' 94 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
95
96 //-----------------------------------------
97
98 +h1-heading(level='xl')= 'Text field'
99 +rule(level='medium')
100
101 +box
102 +text-field(placeholder='Placeholder')
103 br
104 br
105 +text-field(value='Just landed in L.A.')
106 br
107 br
108 +text-field(value='Readonly' readonly=true)
109 br
110 br
111 +text-field(value='Incorrect input' pattern='a+' required=true)
112 br
113 br
114 +text-field(placeholder='Placeholder' disabled=true)
115 br
116 br
117 +text-field(value='Just landed in L.A.' disabled=true)
118 br
119 br
120 +text-field(value='Readonly' readonly=true disabled=true)
121 br
122 br
123 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
new file mode 100644
index 0000000..a77a3ed
--- /dev/null
+++ b/tpl/objects/icon.pug
@@ -0,0 +1,7 @@
1mixin icon(id)
2 -
3 let href = '../node_modules/iro-icons/src/icons/' + id + '.svg'
4 let classes = attributes.class ? attributes.class : ''
5
6 svg(class=['o-icon', 'o-icon--iro', 'o-icon--iro-' + id, classes] width='1em' height='1em')
7 use(xlink:href=href)
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
new file mode 100644
index 0000000..9bbe0a1
--- /dev/null
+++ b/tpl/objects/text-field.pug
@@ -0,0 +1,13 @@
1include icon.pug
2
3mixin text-field
4 -
5 let classes = {
6 'o-text-field': true,
7 'is-invalid': attributes.invalid,
8 'is-disabled': attributes.disabled,
9 }
10
11 div(class=classes)
12 input(class='o-text-field__input')&attributes(attributes)
13 .o-text-field__bg