From dd1ade8acc17d74a45240d255cb862009129b0ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 16:53:07 +0200 Subject: Update --- tpl/views/avatar.pug | 130 ++++------------------------------------- tpl/views/status-indicator.pug | 8 +-- 2 files changed, 16 insertions(+), 122 deletions(-) (limited to 'tpl') diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug index b08f5d7..f345098 100644 --- a/tpl/views/avatar.pug +++ b/tpl/views/avatar.pug @@ -1,125 +1,19 @@ mixin view-avatar +view('avatar', 'Avatar') - .c-box - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='400' href='#') + each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'] + .c-box(style={ display: 'flex', gap: '.3em' }) + +avatar(size=size href='#') = 'Vo' - +avatar(size='400' status='green' hue=45) + +avatar(size=size status='green' hue=45) = 'lp' - +avatar(size='400' src='avatar.png') - +avatar(size='400' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='300' href='#') - = 'Vo' - +avatar(size='300' status='green' hue=45) - = 'lp' - +avatar(size='300' src='avatar.png') - +avatar(size='300' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='200' href='#') - = 'Vo' - +avatar(size='200' status='green' hue=45) - = 'lp' - +avatar(size='200' src='avatar.png') - +avatar(size='200' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='150' href='#') - = 'Vo' - +avatar(size='150' status='green' hue=45) - = 'lp' - +avatar(size='150' src='avatar.png') - +avatar(size='150' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(href='#') - = 'Vo' - +avatar(status='green' hue=45) - = 'lp' - +avatar(src='avatar.png') - +avatar(src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='75' hue=90 href='#') - = 'eo' - +avatar(size='75' status='green' hue=135) - = 'n' - +avatar(size='75' src='avatar.png') - +avatar(size='75' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='50' hue=180 href='#') - = 'V' - +avatar(size='50' hue=225) - = 'o' - +avatar(size='50' src='avatar.png') + +avatar(size=size src='avatar.png') + +avatar(size=size src='avatar.png' status='red') - .c-box - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='400' href='#') - = 'Vo' - +avatar(circle=true size='400' status='green' hue=45) - = 'lp' - +avatar(circle=true size='400' src='avatar.png') - +avatar(circle=true size='400' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='300' href='#') - = 'Vo' - +avatar(circle=true size='300' status='green' hue=45) - = 'lp' - +avatar(circle=true size='300' src='avatar.png') - +avatar(circle=true size='300' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='200' href='#') - = 'Vo' - +avatar(circle=true size='200' status='green' hue=45) - = 'lp' - +avatar(circle=true size='200' src='avatar.png') - +avatar(circle=true size='200' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='150' href='#') - = 'Vo' - +avatar(circle=true size='150' status='green' hue=45) - = 'lp' - +avatar(circle=true size='150' src='avatar.png') - +avatar(circle=true size='150' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true href='#') + each size in ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'] + .c-box(style={ display: 'flex', gap: '.3em' }) + +avatar(circle=true size=size href='#') = 'Vo' - +avatar(circle=true status='green' hue=45) + +avatar(circle=true size=size status='green' hue=45) = 'lp' - +avatar(circle=true src='avatar.png') - +avatar(circle=true src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='75' hue=90 href='#') - = 'eo' - +avatar(circle=true size='75' status='green' hue=135) - = 'n' - +avatar(circle=true size='75' src='avatar.png') - +avatar(circle=true size='75' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='50' hue=180 href='#') - = 'V' - +avatar(circle=true size='50' hue=225) - = 'o' - +avatar(circle=true size='50' src='avatar.png') + +avatar(circle=true size=size src='avatar.png') + +avatar(circle=true size=size src='avatar.png' status='red') diff --git a/tpl/views/status-indicator.pug b/tpl/views/status-indicator.pug index 553e454..f4c8ad0 100644 --- a/tpl/views/status-indicator.pug +++ b/tpl/views/status-indicator.pug @@ -3,10 +3,10 @@ mixin view-status-indicator .c-box +status-indicator = ' ' - +status-indicator('primary') + +status-indicator('accent') = ' ' - +status-indicator('green') + +status-indicator('positive') = ' ' - +status-indicator('yellow') + +status-indicator('warning') = ' ' - +status-indicator('red') + +status-indicator('negative') -- cgit v1.2.3-54-g00ecf