summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-12 12:13:52 +0100
committerVolpeon <git@volpeon.ink>2022-02-12 12:13:52 +0100
commitb45574b83da655d9b5e48d5ef5ce7f2e147e3bbf (patch)
treef27cb293a2591da5a8045a6a062232f44334fe65 /tpl
parentAdded dark color palette (diff)
downloadiro-design-b45574b83da655d9b5e48d5ef5ce7f2e147e3bbf.tar.gz
iro-design-b45574b83da655d9b5e48d5ef5ce7f2e147e3bbf.tar.bz2
iro-design-b45574b83da655d9b5e48d5ef5ce7f2e147e3bbf.zip
Text field update
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug39
-rw-r--r--tpl/objects/text-field.pug29
2 files changed, 42 insertions, 26 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index a6a8f87..365ca52 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -112,28 +112,25 @@ html
112 +rule('medium') 112 +rule('medium')
113 113
114 +box 114 +box
115 +text-field(placeholder='Placeholder') 115 div(style={ display: 'flex', gap: '1rem' })
116 br 116 +text-field(placeholder='Placeholder')
117 br 117 +text-field(value='Just landed in L.A.')
118 +text-field(value='Just landed in L.A.') 118 +text-field(value='Readonly' readonly=true)
119 br 119 +text-field(value='Incorrect input' pattern='a+' required=true)
120 br
121 +text-field(value='Readonly' readonly=true)
122 br
123 br
124 +text-field(value='Incorrect input' pattern='a+' required=true)
125 br
126 br
127 +text-field(placeholder='Placeholder' disabled=true)
128 br
129 br
130 +text-field(value='Just landed in L.A.' disabled=true)
131 br
132 br
133 +text-field(value='Readonly' readonly=true disabled=true)
134 br
135 br 120 br
136 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) 121 div(style={ display: 'flex', gap: '1rem' })
122 +text-field(placeholder='Placeholder' disabled=true)
123 +text-field(value='Just landed in L.A.' disabled=true)
124 +text-field(value='Readonly' readonly=true disabled=true)
125 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
126 br
127 div
128 +text-field(placeholder='Just landed in L.A.')
129 +slot('pre')
130 +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
131 +slot('post')
132 +action-button(quiet=true icon='smile' class='l-card__block')
133 +action-button(quiet=true icon='send' class='l-card__block')
137 134
138 //----------------------------------------- 135 //-----------------------------------------
139 136
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index c933b69..24f8e21 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -1,13 +1,32 @@
1include icon.pug 1include icon.pug
2 2
3mixin text-field 3mixin text-field
4 - const slots = {}
5
6 mixin slot(key)
7 - slots[key] = block
8
4 - 9 -
10 block ? block() : undefined
11
5 let classes = { 12 let classes = {
6 'o-text-field': true, 13 'o-text-field': true,
7 'is-invalid': attributes.invalid, 14 'o-text-field--ext': attributes.ext,
8 'is-disabled': attributes.disabled, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled,
17 'l-card': !!block,
18 'l-card--flush': !!block,
19 'l-card--gapless': !!block
9 } 20 }
10 21
11 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) 22 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
12 input(class='o-text-field__native')&attributes(attributes) 23 if !!block
13 .o-text-field__bg 24 if slots.pre
25 - slots.pre()
26 input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes)
27 if slots.post
28 - slots.post()
29 .o-text-field__bg
30 else
31 input.o-text-field__native&attributes(attributes)
32 .o-text-field__bg