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/action-button.pug | 182 -------------------------------------- tpl/views/badge.pug | 69 --------------- tpl/views/button.pug | 207 ++++++++++++++++++++++++++++++++------------ tpl/views/card.pug | 8 +- tpl/views/dialog.pug | 4 +- tpl/views/emoji.pug | 8 +- tpl/views/form.pug | 2 +- tpl/views/menu.pug | 2 +- tpl/views/popover.pug | 2 +- tpl/views/text-field.pug | 6 +- 10 files changed, 166 insertions(+), 324 deletions(-) delete mode 100644 tpl/views/action-button.pug delete mode 100644 tpl/views/badge.pug (limited to 'tpl/views') diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug deleted file mode 100644 index 4d2ffb6..0000000 --- a/tpl/views/action-button.pug +++ /dev/null @@ -1,182 +0,0 @@ -mixin view-action-button - +view('action-button', 'Action button') - .c-box - +action-button(size='sm')= 'Idle' - = ' ' - +action-button= 'Idle' - = ' ' - +action-button(size='lg')= 'Idle' - = ' ' - +action-button(size='xl')= 'Idle' - br - br - +action-button(icon='trash' size='sm') - = ' ' - +action-button(icon='trash') - = ' ' - +action-button(icon='trash' size='lg') - = ' ' - +action-button(icon='trash' size='xl') - br - br - +action-button(icon='user' size='sm')= 'Idle' - = ' ' - +action-button(icon='user')= 'Idle' - = ' ' - +action-button(icon='user' size='lg')= 'Idle' - = ' ' - +action-button(icon='user' size='xl')= 'Idle' - - .c-box - +action-button(pill=true size='sm')= 'Idle' - = ' ' - +action-button(pill=true)= 'Idle' - = ' ' - +action-button(pill=true size='lg')= 'Idle' - = ' ' - +action-button(pill=true size='xl')= 'Idle' - br - br - +action-button(pill=true icon='trash' size='sm') - = ' ' - +action-button(pill=true icon='trash') - = ' ' - +action-button(pill=true icon='trash' size='lg') - = ' ' - +action-button(pill=true icon='trash' size='xl') - br - br - +action-button(pill=true icon='user' size='sm')= 'Idle' - = ' ' - +action-button(pill=true icon='user')= 'Idle' - = ' ' - +action-button(pill=true icon='user' size='lg')= 'Idle' - = ' ' - +action-button(pill=true icon='user' size='xl')= 'Idle' - - .c-box - +action-button= 'Label' - = ' ' - +action-button(icon='trash')= 'Label' - = ' ' - +action-button(icon='trash') - br - br - +action-button(quiet=true)= 'Label' - = ' ' - +action-button(quiet=true icon='trash')= 'Label' - = ' ' - +action-button(quiet=true icon='trash') - - .c-box - +action-button= 'Idle' - = ' ' - +action-button(selected=true)= 'Selected' - = ' ' - +action-button(disabled=true)= 'Disabled' - = ' ' - +action-button(selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(static=true )= 'Idle' - = ' ' - +action-button(static=true selected=true)= 'Selected' - = ' ' - +action-button(static=true disabled=true)= 'Disabled' - = ' ' - +action-button(static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(quiet=true )= 'Idle' - = ' ' - +action-button(quiet=true selected=true)= 'Selected' - = ' ' - +action-button(quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' - - .c-box - +action-button(pill=true)= 'Idle' - = ' ' - +action-button(pill=true selected=true)= 'Selected' - = ' ' - +action-button(pill=true disabled=true)= 'Disabled' - = ' ' - +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(pill=true static=true)= 'Idle' - = ' ' - +action-button(pill=true static=true selected=true)= 'Selected' - = ' ' - +action-button(pill=true static=true disabled=true)= 'Disabled' - = ' ' - +action-button(pill=true static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(pill=true quiet=true)= 'Idle' - = ' ' - +action-button(pill=true quiet=true selected=true)= 'Selected' - = ' ' - +action-button(pill=true quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' - - each theme, i in ['accent', 'positive', 'negative', 'warning'] - .c-box - +action-button(theme=theme)= 'Idle' - = ' ' - +action-button(theme=theme selected=true)= 'Selected' - = ' ' - +action-button(theme=theme disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme static=true)= 'Idle' - = ' ' - +action-button(theme=theme static=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme static=true disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme quiet=true)= 'Idle' - = ' ' - +action-button(theme=theme quiet=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme quiet=true disabled=true)= 'Disabled' - = ' ' - +action-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});`) - +action-button(theme=theme)= 'Idle' - = ' ' - +action-button(theme=theme selected=true)= 'Selected' - = ' ' - +action-button(theme=theme disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme static=true)= 'Idle' - = ' ' - +action-button(theme=theme static=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme static=true disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme static=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(theme=theme quiet=true)= 'Idle' - = ' ' - +action-button(theme=theme quiet=true selected=true)= 'Selected' - = ' ' - +action-button(theme=theme quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug deleted file mode 100644 index cc1f346..0000000 --- a/tpl/views/badge.pug +++ /dev/null @@ -1,69 +0,0 @@ -mixin view-badge - +view('badge', 'Badge') - .c-box - +badge(size='sm' href='#')= '50' - = ' ' - +badge(href='#')= '100' - = ' ' - +badge(size='lg' href='#')= '200' - = ' ' - +badge(size='xl' href='#')= '300' - - .c-box - +badge(pill=true size='sm' href='#')= '50' - = ' ' - +badge(pill=true href='#')= '100' - = ' ' - +badge(pill=true size='lg' href='#')= '200' - = ' ' - +badge(pill=true size='xl' href='#')= '300' - - .c-box - +badge(icon='image' size='sm' href='#')= '50' - = ' ' - +badge(icon='image' href='#')= '100' - = ' ' - +badge(icon='image' size='lg' href='#')= '200' - = ' ' - +badge(icon='image' size='xl' href='#')= '300' - - .c-box - +badge(pill=true icon='image' size='sm' href='#')= '50' - = ' ' - +badge(pill=true icon='image' href='#')= '100' - = ' ' - +badge(pill=true icon='image' size='lg' href='#')= '200' - = ' ' - +badge(pill=true icon='image' size='xl' href='#')= '300' - - .c-box - +badge(href='#')= '100' - = ' ' - +badge(quiet=true href='#')= '100' - = ' ' - +badge(pill=true href='#')= '100' - = ' ' - +badge(quiet=true pill=true href='#')= '100' - - each theme in ['accent', 'positive', 'negative', 'warning'] - .c-box - +badge(theme)(href='#')= 'new' - = ' ' - +badge(theme)(quiet=true href='#')= 'new' - = ' ' - +badge(theme)(pill=true href='#')= 'new' - = ' ' - +badge(theme)(quiet=true pill=true href='#')= 'new' - - 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});`) - +badge(theme)(href='#')= 'new' - = ' ' - +badge(theme)(quiet=true href='#')= 'new' - = ' ' - +badge(theme)(pill=true href='#')= 'new' - = ' ' - +badge(theme)(quiet=true pill=true href='#')= 'new' 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' diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 9a35b37..f030abf 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -83,17 +83,17 @@ mixin view-card +card-body .l-media .l-media__block - +badge('positive')(quiet=true icon='repeat' href='#') + +button(theme='positive' static=true pill=true size='sm' icon='repeat' href='#') strong= '12' .l-media__block - +badge('warning')(quiet=true icon='star' href='#') + +button(theme='warning' static=true pill=true size='sm' icon='star' href='#') strong= '34' .l-media__block.u-mis-auto - +a-button(primary=true)= 'Reply' + +button(selected=true)= 'Reply' +card(quiet=true href='#' class='l-card-list__card') +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) - +badge= 'Drawings' + +button(badge=true static=true selected=true)= 'Drawings' +card-body +card-title= 'XS Heading' +card-content diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 5a659dd..9c2e520 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug @@ -53,8 +53,8 @@ mixin view-dialog +dialog +slot('header') .l-media__block.l-flex - +action-button(quiet=true icon='chevron-left') - +action-button(quiet=true icon='chevron-right') + +button(quiet=true icon='chevron-left') + +button(quiet=true icon='chevron-right') .l-media__block.l-media__block--main +div-heading('xl')(class="u-mt-0")= 'Tags' +slot('sidebar') diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug index 3d01ca7..d6e2b56 100644 --- a/tpl/views/emoji.pug +++ b/tpl/views/emoji.pug @@ -1,14 +1,14 @@ mixin view-emoji +view('emoji', 'Emoji') .c-box - +action-button(icon='trash') + +button(icon='trash') = ' ' - +action-button + +button +emoji('drgn')(size='icon') = ' ' - +action-button(icon='trash' quiet=true) + +button(icon='trash' quiet=true) = ' ' - +action-button(quiet=true) + +button(quiet=true) +emoji('drgn')(size='icon') .c-box diff --git a/tpl/views/form.pug b/tpl/views/form.pug index 5b24757..ca9e224 100644 --- a/tpl/views/form.pug +++ b/tpl/views/form.pug @@ -27,4 +27,4 @@ mixin view-form +checkbox= 'I\'ve read and accept the terms and conditions' +form-item('') - +a-button(variant='primary')= 'Register' + +button(variant='primary')= 'Register' diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug index 7c5df03..682f8bb 100644 --- a/tpl/views/menu.pug +++ b/tpl/views/menu.pug @@ -2,7 +2,7 @@ mixin view-menu +view('menu', 'Menu') .c-box div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) - +action-button(quiet=true selected=true)= 'Menu' + +button(quiet=true selected=true)= 'Menu' +popover +menu +menu-slot(class='l-media') diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug index b269596..bd78471 100644 --- a/tpl/views/popover.pug +++ b/tpl/views/popover.pug @@ -1,6 +1,6 @@ mixin view-popover +view('popover', 'Popover') .c-box - +action-button(quiet=true selected=true)= 'Popover' + +button(quiet=true selected=true)= 'Popover' +popover = loremIpsum diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 165e2ce..4309ff6 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug @@ -16,8 +16,8 @@ mixin view-text-field div +text-field(placeholder='Just landed in L.A.' class="u-p-50") +slot('pre') - +action-button(quiet=true class='l-media__block')= 'Volpeon' + +button(quiet=true class='l-media__block')= 'Volpeon' +divider('vertical')(class='u-mis-50') +slot('post') - +action-button(quiet=true icon='smile' class='l-media__block') - +action-button(quiet=true icon='send' class='l-media__block') + +button(quiet=true icon='smile' class='l-media__block') + +button(quiet=true icon='send' class='l-media__block') -- cgit v1.2.3-70-g09d2