diff options
Diffstat (limited to 'tpl/index.pug')
-rw-r--r-- | tpl/index.pug | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/tpl/index.pug b/tpl/index.pug index 2980016..206e40b 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -13,6 +13,8 @@ include objects/checkbox.pug | |||
13 | include objects/switch.pug | 13 | include objects/switch.pug |
14 | include objects/form.pug | 14 | include objects/form.pug |
15 | include objects/action-button.pug | 15 | include objects/action-button.pug |
16 | include objects/status-indicator.pug | ||
17 | include objects/avatar.pug | ||
16 | 18 | ||
17 | mixin box | 19 | mixin box |
18 | +container(padX=true padY=true inPage=true theme="raised") | 20 | +container(padX=true padY=true inPage=true theme="raised") |
@@ -363,3 +365,73 @@ html | |||
363 | = ' ' | 365 | = ' ' |
364 | +action-button(quiet=true icon='trash' selected=true disabled=true) | 366 | +action-button(quiet=true icon='trash' selected=true disabled=true) |
365 | 367 | ||
368 | //----------------------------------------- | ||
369 | |||
370 | +h1-heading(level='xl')= 'Status indicator' | ||
371 | +rule(level='medium') | ||
372 | |||
373 | +box | ||
374 | +status-indicator | ||
375 | = ' ' | ||
376 | +status-indicator('green') | ||
377 | = ' ' | ||
378 | +status-indicator('yellow') | ||
379 | = ' ' | ||
380 | +status-indicator('red') | ||
381 | |||
382 | //----------------------------------------- | ||
383 | |||
384 | +h1-heading(level='xl')= 'Avatar' | ||
385 | +rule(level='medium') | ||
386 | |||
387 | +box | ||
388 | div(style={ display: 'flex', gap: '.3em' }) | ||
389 | +avatar | ||
390 | = 'Vo' | ||
391 | +avatar(status='green' hue=45) | ||
392 | = 'lp' | ||
393 | +avatar(src='avatar.png') | ||
394 | +avatar(src='avatar.png' status='red') | ||
395 | br | ||
396 | br | ||
397 | div(style={ display: 'flex', gap: '.3em' }) | ||
398 | +avatar(size='sm' hue=90) | ||
399 | = 'eo' | ||
400 | +avatar(size='sm' status='green' hue=135) | ||
401 | = 'n' | ||
402 | +avatar(size='sm' src='avatar.png') | ||
403 | +avatar(size='sm' src='avatar.png' status='red') | ||
404 | br | ||
405 | br | ||
406 | div(style={ display: 'flex', gap: '.3em' }) | ||
407 | +avatar(size='xs' hue=180) | ||
408 | = 'V' | ||
409 | +avatar(size='xs' hue=225) | ||
410 | = 'o' | ||
411 | +avatar(size='xs' src='avatar.png') | ||
412 | |||
413 | +box | ||
414 | div(style={ display: 'flex', gap: '.3em' }) | ||
415 | +avatar(circle=true) | ||
416 | = 'Vo' | ||
417 | +avatar(circle=true status='green' hue=45) | ||
418 | = 'lp' | ||
419 | +avatar(circle=true src='avatar.png') | ||
420 | +avatar(circle=true src='avatar.png' status='red') | ||
421 | br | ||
422 | br | ||
423 | div(style={ display: 'flex', gap: '.3em' }) | ||
424 | +avatar(circle=true size='sm' hue=90) | ||
425 | = 'eo' | ||
426 | +avatar(circle=true size='sm' status='green' hue=135) | ||
427 | = 'n' | ||
428 | +avatar(circle=true size='sm' src='avatar.png') | ||
429 | +avatar(circle=true size='sm' src='avatar.png' status='red') | ||
430 | br | ||
431 | br | ||
432 | div(style={ display: 'flex', gap: '.3em' }) | ||
433 | +avatar(circle=true size='xs' hue=180) | ||
434 | = 'V' | ||
435 | +avatar(circle=true size='xs' hue=225) | ||
436 | = 'o' | ||
437 | +avatar(circle=true size='xs' src='avatar.png') | ||