summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug72
-rw-r--r--tpl/objects/avatar.pug26
-rw-r--r--tpl/objects/status-indicator.pug8
3 files changed, 106 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
13include objects/switch.pug 13include objects/switch.pug
14include objects/form.pug 14include objects/form.pug
15include objects/action-button.pug 15include objects/action-button.pug
16include objects/status-indicator.pug
17include objects/avatar.pug
16 18
17mixin box 19mixin 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')
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
new file mode 100644
index 0000000..83c0f7c
--- /dev/null
+++ b/tpl/objects/avatar.pug
@@ -0,0 +1,26 @@
1include ../objects/status-indicator.pug
2
3mixin avatar
4 -
5 let classes = {
6 'o-avatar': true,
7 'o-avatar--circle': attributes.circle
8 }
9
10 if (attributes.size) {
11 classes['o-avatar--' + attributes.size] = true;
12 }
13
14 let styles = {}
15 if (attributes.hue) {
16 styles['--avatar--colors--h'] = attributes.hue;
17 }
18
19 div(class=classes style=styles)
20 if attributes.status
21 +status-indicator(attributes.status)(class='o-avatar__status')
22 if attributes.src
23 img.o-avatar__content(src=attributes.src)
24 else
25 .o-avatar__content
26 block
diff --git a/tpl/objects/status-indicator.pug b/tpl/objects/status-indicator.pug
new file mode 100644
index 0000000..9b240e1
--- /dev/null
+++ b/tpl/objects/status-indicator.pug
@@ -0,0 +1,8 @@
1mixin status-indicator(status)
2 -
3 let classes = {
4 'o-status-indicator': true,
5 }
6 classes['is-' + status] = true
7
8 div(class=classes)&attributes(attributes)