From 5c878876d3bdd2c7cd094871fa0644f3310bcec8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 23 Jul 2025 08:34:23 +0200 Subject: Commit merge of button and badge into action-button (and rename it to button) --- tpl/views/button.pug | 207 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 150 insertions(+), 57 deletions(-) (limited to 'tpl/views/button.pug') diff --git a/tpl/views/button.pug b/tpl/views/button.pug index da7531b..7e03e04 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -1,89 +1,182 @@ mixin view-button +view('button', 'Button') .c-box - +a-button(size='sm')= 'Button' + +button(size='sm')= 'Idle' = ' ' - +a-button= 'Button' + +button= 'Idle' = ' ' - +a-button(size='lg')= 'Button' + +button(size='lg')= 'Idle' = ' ' - +a-button(size='xl')= 'Button' + +button(size='xl')= 'Idle' + br + br + +button(icon='trash' size='sm') + = ' ' + +button(icon='trash') + = ' ' + +button(icon='trash' size='lg') + = ' ' + +button(icon='trash' size='xl') + br + br + +button(icon='user' size='sm')= 'Idle' + = ' ' + +button(icon='user')= 'Idle' + = ' ' + +button(icon='user' size='lg')= 'Idle' + = ' ' + +button(icon='user' size='xl')= 'Idle' .c-box - +a-button(size='sm' outline=true)= 'Button' + +button(pill=true size='sm')= 'Idle' + = ' ' + +button(pill=true)= 'Idle' + = ' ' + +button(pill=true size='lg')= 'Idle' + = ' ' + +button(pill=true size='xl')= 'Idle' + br + br + +button(pill=true icon='trash' size='sm') + = ' ' + +button(pill=true icon='trash') = ' ' - +a-button(outline=true)= 'Button' + +button(pill=true icon='trash' size='lg') = ' ' - +a-button(size='lg' outline=true)= 'Button' + +button(pill=true icon='trash' size='xl') + br + br + +button(pill=true icon='user' size='sm')= 'Idle' = ' ' - +a-button(size='xl' outline=true)= 'Button' + +button(pill=true icon='user')= 'Idle' + = ' ' + +button(pill=true icon='user' size='lg')= 'Idle' + = ' ' + +button(pill=true icon='user' size='xl')= 'Idle' .c-box - +a-button(postIcon='arrow-right' size='sm')= 'Button' + +button= 'Label' + = ' ' + +button(icon='trash')= 'Label' = ' ' - +a-button(postIcon='arrow-right')= 'Button' + +button(icon='trash') + br + br + +button(quiet=true)= 'Label' = ' ' - +a-button(postIcon='arrow-right' size='lg')= 'Button' + +button(quiet=true icon='trash')= 'Label' = ' ' - +a-button(postIcon='arrow-right' size='xl')= 'Button' + +button(quiet=true icon='trash') .c-box - .l-button-group - +a-button= 'Button' - +a-button(disabled=true)= 'Button' - +a-button(outline=true)= 'Button' - +a-button(outline=true disabled=true)= 'Button' - br - br - .l-button-group - +a-button(icon='trash') - +a-button(disabled=true icon='trash') - +a-button(outline=true icon='trash') - +a-button(outline=true disabled=true icon='trash') + +button= 'Idle' + = ' ' + +button(selected=true)= 'Selected' + = ' ' + +button(disabled=true)= 'Disabled' + = ' ' + +button(selected=true disabled=true)= 'Selected + disabled' + br + br + +button(static=true )= 'Idle' + = ' ' + +button(static=true selected=true)= 'Selected' + = ' ' + +button(static=true disabled=true)= 'Disabled' + = ' ' + +button(static=true selected=true disabled=true)= 'Selected + disabled' + br + br + +button(quiet=true )= 'Idle' + = ' ' + +button(quiet=true selected=true)= 'Selected' + = ' ' + +button(quiet=true disabled=true)= 'Disabled' + = ' ' + +button(quiet=true selected=true disabled=true)= 'Selected + disabled' - each theme in ['primary', 'accent', 'negative'] + .c-box + +button(pill=true)= 'Idle' + = ' ' + +button(pill=true selected=true)= 'Selected' + = ' ' + +button(pill=true disabled=true)= 'Disabled' + = ' ' + +button(pill=true selected=true disabled=true)= 'Selected + disabled' + br + br + +button(pill=true static=true)= 'Idle' + = ' ' + +button(pill=true static=true selected=true)= 'Selected' + = ' ' + +button(pill=true static=true disabled=true)= 'Disabled' + = ' ' + +button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' + br + br + +button(pill=true quiet=true)= 'Idle' + = ' ' + +button(pill=true quiet=true selected=true)= 'Selected' + = ' ' + +button(pill=true quiet=true disabled=true)= 'Disabled' + = ' ' + +button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' + + each theme, i in ['accent', 'positive', 'negative', 'warning'] .c-box - .l-button-group - +a-button(variant=theme)= 'Button' - +a-button(variant=theme disabled=true)= 'Button' - +a-button(variant=theme outline=true)= 'Button' - +a-button(variant=theme outline=true disabled=true)= 'Button' + +button(theme=theme)= 'Idle' + = ' ' + +button(theme=theme selected=true)= 'Selected' + = ' ' + +button(theme=theme disabled=true)= 'Disabled' + = ' ' + +button(theme=theme selected=true disabled=true)= 'Selected + disabled' + br br + +button(theme=theme static=true)= 'Idle' + = ' ' + +button(theme=theme static=true selected=true)= 'Selected' + = ' ' + +button(theme=theme static=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' br - .l-button-group - +a-button(variant=theme icon='trash') - +a-button(variant=theme disabled=true icon='trash') - +a-button(variant=theme outline=true icon='trash') - +a-button(variant=theme outline=true disabled=true icon='trash') + br + +button(theme=theme quiet=true)= 'Idle' + = ' ' + +button(theme=theme quiet=true selected=true)= 'Selected' + = ' ' + +button(theme=theme quiet=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' each theme in ['static-black', 'static-white'] - const bg = theme.startsWith('static-black') ? 500 : 1000; .c-box(style=`background-color: var(--colors--blue-static--${bg});`) - .l-button-group - +a-button(variant=theme)= 'Button' - +a-button(variant=theme disabled=true)= 'Button' - +a-button(variant=theme outline=true)= 'Button' - +a-button(variant=theme outline=true disabled=true)= 'Button' + +button(theme=theme)= 'Idle' + = ' ' + +button(theme=theme selected=true)= 'Selected' + = ' ' + +button(theme=theme disabled=true)= 'Disabled' + = ' ' + +button(theme=theme selected=true disabled=true)= 'Selected + disabled' br br - .l-button-group - +a-button(variant=theme icon='trash') - +a-button(variant=theme disabled=true icon='trash') - +a-button(variant=theme outline=true icon='trash') - +a-button(variant=theme outline=true disabled=true icon='trash') - - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) - .l-button-group - +a-button(variant=theme primary=true)= 'Button' - +a-button(variant=theme primary=true disabled=true)= 'Button' - +a-button(variant=theme primary=true outline=true)= 'Button' - +a-button(variant=theme primary=true outline=true disabled=true)= 'Button' + +button(theme=theme static=true)= 'Idle' + = ' ' + +button(theme=theme static=true selected=true)= 'Selected' + = ' ' + +button(theme=theme static=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' br br - .l-button-group - +a-button(variant=theme primary=true icon='trash') - +a-button(variant=theme primary=true disabled=true icon='trash') - +a-button(variant=theme primary=true outline=true icon='trash') - +a-button(variant=theme primary=true outline=true disabled=true icon='trash') + +button(theme=theme quiet=true)= 'Idle' + = ' ' + +button(theme=theme quiet=true selected=true)= 'Selected' + = ' ' + +button(theme=theme quiet=true disabled=true)= 'Disabled' + = ' ' + +button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' -- cgit v1.2.3-70-g09d2