diff options
Diffstat (limited to 'tpl')
-rw-r--r-- | tpl/index.pug | 34 | ||||
-rw-r--r-- | tpl/objects/form.pug | 13 |
2 files changed, 47 insertions, 0 deletions
diff --git a/tpl/index.pug b/tpl/index.pug index 8595be0..2ebb625 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -11,6 +11,7 @@ include objects/field-label.pug | |||
11 | include objects/radio.pug | 11 | include objects/radio.pug |
12 | include objects/checkbox.pug | 12 | include objects/checkbox.pug |
13 | include objects/switch.pug | 13 | include objects/switch.pug |
14 | include objects/form.pug | ||
14 | 15 | ||
15 | mixin box | 16 | mixin box |
16 | +container(padX=true padY=true inPage=true theme="raised") | 17 | +container(padX=true padY=true inPage=true theme="raised") |
@@ -268,3 +269,36 @@ html | |||
268 | +switch(accent=true disabled=true)= 'Cats' | 269 | +switch(accent=true disabled=true)= 'Cats' |
269 | +switch(accent=true disabled=true)= 'Dogs' | 270 | +switch(accent=true disabled=true)= 'Dogs' |
270 | +switch(accent=true checked=true disabled=true)= 'Foxes' | 271 | +switch(accent=true checked=true disabled=true)= 'Foxes' |
272 | |||
273 | //----------------------------------------- | ||
274 | |||
275 | +h1-heading(level='xl')= 'Form' | ||
276 | +rule(level='medium') | ||
277 | |||
278 | +box | ||
279 | +form | ||
280 | +form-item('Username') | ||
281 | +text-field(placeholder='Example: Volpeon') | ||
282 | |||
283 | +form-item('Password', 'At least 6 characters, all characters allowed') | ||
284 | +text-field(placeholder='Example: hunter2', type='password') | ||
285 | |||
286 | +form-item('Bio') | ||
287 | +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') | ||
288 | |||
289 | +form-item('Favorite animal') | ||
290 | +radio(name="form-demo-1" checked=true)= 'Foxes' | ||
291 | +radio(name="form-demo-1")= 'Other' | ||
292 | |||
293 | +form-item('Notification settings') | ||
294 | +switch= 'In-app notifications' | ||
295 | br | ||
296 | +switch= 'Desktop notifications' | ||
297 | br | ||
298 | +switch= 'Email notifications' | ||
299 | |||
300 | +form-item('') | ||
301 | +checkbox= 'I\'ve read and accept the terms and conditions' | ||
302 | |||
303 | +form-item('') | ||
304 | +a-button(variant='primary')= 'Register' | ||
diff --git a/tpl/objects/form.pug b/tpl/objects/form.pug new file mode 100644 index 0000000..496ed48 --- /dev/null +++ b/tpl/objects/form.pug | |||
@@ -0,0 +1,13 @@ | |||
1 | include field-label.pug | ||
2 | |||
3 | mixin form | ||
4 | form(class={ | ||
5 | 'l-form': true, | ||
6 | 'l-form--labels-right': attributes.labelsAlign === 'right', | ||
7 | 'l-form--labels-above': attributes.labelsAlign === 'above' | ||
8 | }) | ||
9 | block | ||
10 | |||
11 | mixin form-item(label, hint=null) | ||
12 | +field-label(label, hint)(class='l-form__item' labelClass='l-form__item-label' contentClass='l-form__item-content') | ||
13 | block | ||