summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-05 19:23:14 +0100
committerVolpeon <git@volpeon.ink>2022-02-05 19:23:14 +0100
commit3b7e35551b499a7b8887adb068d3a80e4088b0c2 (patch)
treee8aa73b422b7d112be2a9deb00c86e3b7cc77749 /tpl
parentAdded text field (diff)
downloadiro-design-3b7e35551b499a7b8887adb068d3a80e4088b0c2.tar.gz
iro-design-3b7e35551b499a7b8887adb068d3a80e4088b0c2.tar.bz2
iro-design-3b7e35551b499a7b8887adb068d3a80e4088b0c2.zip
Added field-label
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug78
-rw-r--r--tpl/objects/button.pug2
-rw-r--r--tpl/objects/field-label.pug23
-rw-r--r--tpl/objects/text-field.pug2
4 files changed, 103 insertions, 2 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 7dab86f..e3918de 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,6 +7,7 @@ include objects/heading.pug
7include objects/rule.pug 7include objects/rule.pug
8include objects/button.pug 8include objects/button.pug
9include objects/text-field.pug 9include objects/text-field.pug
10include objects/field-label.pug
10 11
11mixin box 12mixin box
12 +container(padX=true padY=true inPage=true theme="raised") 13 +container(padX=true padY=true inPage=true theme="raised")
@@ -121,3 +122,80 @@ html
121 br 122 br
122 br 123 br
123 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) 124 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
125
126 //-----------------------------------------
127
128 +h1-heading(level='xl')= 'Field label'
129 +rule(level='medium')
130
131 +box
132 +field-label('First name')
133 +text-field(placeholder='Placeholder')
134 br
135 br
136 +field-label('Password', 'At least 6 characters required')
137 +text-field(placeholder='Placeholder' type='password')
138 br
139 br
140 +field-label('Password', 'At least 6 characters required')(invalid=true)
141 +text-field(placeholder='Placeholder' type='password' invalid=true)
142 br
143 br
144 +field-label('First name')(disabled=true)
145 +text-field(placeholder='Placeholder' disabled=true)
146 br
147 br
148 +field-label('Password', 'At least 6 characters required')(disabled=true)
149 +text-field(placeholder='Placeholder' type='password' disabled=true)
150 br
151 br
152 +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
153 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
154
155 +box
156 +field-label('First name')(align='left' labelWidth='100px')
157 +text-field(placeholder='Placeholder')
158 br
159 br
160 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
161 +text-field(placeholder='Placeholder' type='password')
162 br
163 br
164 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
165 +text-field(placeholder='Placeholder' type='password' invalid=true)
166 br
167 br
168 +field-label('First name')(align='left' labelWidth='100px' disabled=true)
169 +text-field(placeholder='Placeholder' disabled=true)
170 br
171 br
172 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
173 +text-field(placeholder='Placeholder' type='password' disabled=true)
174 br
175 br
176 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
177 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
178
179 +box
180 +field-label('First name')(align='right' labelWidth='100px')
181 +text-field(placeholder='Placeholder')
182 br
183 br
184 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
185 +text-field(placeholder='Placeholder' type='password')
186 br
187 br
188 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
189 +text-field(placeholder='Placeholder' type='password' invalid=true)
190 br
191 br
192 +field-label('First name')(align='right' labelWidth='100px' disabled=true)
193 +text-field(placeholder='Placeholder' disabled=true)
194 br
195 br
196 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
197 +text-field(placeholder='Placeholder' type='password' disabled=true)
198 br
199 br
200 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
201 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 243ff58..3b10ea0 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -12,5 +12,5 @@ mixin a-button
12 12
13 let href = attributes.disabled ? null : '#'; 13 let href = attributes.disabled ? null : '#';
14 14
15 a(class=classes href=href) 15 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
16 block 16 block
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
new file mode 100644
index 0000000..151e084
--- /dev/null
+++ b/tpl/objects/field-label.pug
@@ -0,0 +1,23 @@
1mixin field-label(label, hint=null)
2 -
3 let classes = {
4 'o-field-label': true,
5 'o-field-label--left': attributes.align === 'left',
6 'o-field-label--right': attributes.align === 'right',
7 'is-invalid': attributes.invalid,
8 'is-disabled': attributes.disabled,
9 }
10 if (attributes.class) {
11 classes[attributes.class] = true;
12 }
13
14 let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right';
15
16 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
17
18 div(class=classes)
19 .o-field-label__label(style=labelStyle class=attributes.labelClass)= label
20 .o-field-label__content(class=attributes.contentClass)
21 block
22 if hint
23 .o-field-label__hint= hint
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 9bbe0a1..9069200 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -8,6 +8,6 @@ mixin text-field
8 'is-disabled': attributes.disabled, 8 'is-disabled': attributes.disabled,
9 } 9 }
10 10
11 div(class=classes) 11 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
12 input(class='o-text-field__input')&attributes(attributes) 12 input(class='o-text-field__input')&attributes(attributes)
13 .o-text-field__bg 13 .o-text-field__bg