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/index.pug | 6 -- tpl/objects/action-button.pug | 36 -------- tpl/objects/badge.pug | 37 -------- tpl/objects/button.pug | 56 ++++++++---- tpl/objects/dialog.pug | 6 +- tpl/objects/icon-nav.pug | 8 +- tpl/objects/lightbox.pug | 6 +- tpl/objects/menu.pug | 2 +- tpl/objects/navbar.pug | 2 +- tpl/objects/side-nav.pug | 2 +- 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 +- 20 files changed, 217 insertions(+), 434 deletions(-) delete mode 100644 tpl/objects/action-button.pug delete mode 100644 tpl/objects/badge.pug delete mode 100644 tpl/views/action-button.pug delete mode 100644 tpl/views/badge.pug (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug index 7d73c75..0f1b5b0 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -9,7 +9,6 @@ include layouts/container.pug include objects/palette.pug include objects/heading.pug include objects/divider.pug -include objects/badge.pug include objects/button.pug include objects/text-field.pug include objects/field-label.pug @@ -17,7 +16,6 @@ include objects/radio.pug include objects/checkbox.pug include objects/switch.pug include objects/form.pug -include objects/action-button.pug include objects/overflow-button.pug include objects/status-indicator.pug include objects/avatar.pug @@ -62,7 +60,6 @@ include views/links.pug include views/code.pug include views/blockquote.pug include views/list.pug -include views/badge.pug include views/button.pug include views/text-field.pug include views/field-label.pug @@ -70,7 +67,6 @@ include views/radio.pug include views/checkbox.pug include views/switch.pug include views/form.pug -include views/action-button.pug include views/overflow-button.pug include views/status-indicator.pug include views/avatar.pug @@ -110,7 +106,6 @@ html +view-blockquote +view-list +view-emoji - +view-badge +view-button +view-text-field +view-field-label @@ -118,7 +113,6 @@ html +view-checkbox +view-switch +view-form - +view-action-button //+view-overflow-button +view-status-indicator +view-avatar diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug deleted file mode 100644 index 0e77e58..0000000 --- a/tpl/objects/action-button.pug +++ /dev/null @@ -1,36 +0,0 @@ -include icon.pug - -mixin action-button - - - let classes = { - 'o-action-button': true, - 'u-d-block': attributes.block, - 'o-action-button--secondary': attributes.secondary, - 'o-action-button--quiet': attributes.quiet, - 'o-action-button--pill': attributes.pill, - 'o-action-button--static': attributes.static, - 'o-action-button--icon': !!attributes.icon && !block, - 'is-selected': attributes.selected, - } - if (attributes.theme) { - classes['o-action-button--' + attributes.theme] = true - } - if (attributes.size) { - classes['o-action-button--' + attributes.size] = true - } - if (attributes.class) { - classes[attributes.class] = true; - } - - let href = attributes.disabled ? null : '#'; - - a(class=classes href=href) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-action-button__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug deleted file mode 100644 index 48e4029..0000000 --- a/tpl/objects/badge.pug +++ /dev/null @@ -1,37 +0,0 @@ -mixin badge(variant) - - - let classes = { - 'o-badge': true, - 'o-badge--pill': !!attributes.pill, - 'o-badge--quiet': !!attributes.quiet, - 'o-menu__badge': !!attributes.menu, - } - if (attributes.size) { - classes['o-badge--' + attributes.size] = true - } - if (variant) { - classes['o-badge--' + variant] = true - } - - if attributes.href - a(href=attributes.href class=classes) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-badge__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) - else - span(class=classes) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-badge__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 0884c8d..b9b4cbd 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -1,28 +1,48 @@ -mixin a-button +include icon.pug + +mixin button - let classes = { - 'o-button': true, - 'o-button--block': attributes.block, - 'o-button--primary': attributes.primary, - 'o-button--outline': attributes.outline, - 'o-button--round': !!attributes.icon && !block + 'o-button': true, + 'u-d-block': attributes.block, + 'o-button--secondary': attributes.secondary, + 'o-button--quiet': attributes.quiet, + 'o-button--pill': attributes.pill, + 'o-button--static': attributes.static, + 'o-button--icon': !!attributes.icon && !block, + 'is-selected': attributes.selected, } - if (attributes.variant) { - classes['o-button--' + attributes.variant] = true + if (attributes.theme) { + classes['o-button--' + attributes.theme] = true } if (attributes.size) { classes['o-button--' + attributes.size] = true } + if (attributes.class) { + classes[attributes.class] = true; + } let href = attributes.disabled ? null : '#'; - a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) - if attributes.icon - +icon(attributes.icon) - = ' ' - if block - span.o-button__label - block - if attributes.postIcon - = ' ' - +icon(attributes.postIcon) + if attributes.badge + span(class=classes href=href) + if attributes.icon + +icon(attributes.icon) + = ' ' + if block + span.o-button__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) + else + a(class=classes href=href) + if attributes.icon + +icon(attributes.icon) + = ' ' + if block + span.o-button__label + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 3ceae69..1a2f061 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -54,13 +54,13 @@ mixin dialog(title) else if title +div-heading('xl')(class='o-dialog__title l-media__block l-media__block--main')= title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') + +button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') section(class=bodyClass) if slots.body - slots.body() footer.o-dialog__footer.l-button-group - +a-button(outline=true)= 'Cancel' + +button(outline=true)= 'Cancel' = ' ' - +a-button(variant='accent')= 'Continue' + +button(variant='accent')= 'Continue' diff --git a/tpl/objects/icon-nav.pug b/tpl/objects/icon-nav.pug index f1c7d8a..afdf2db 100644 --- a/tpl/objects/icon-nav.pug +++ b/tpl/objects/icon-nav.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin icon-nav - @@ -19,9 +19,9 @@ mixin icon-nav-item(icon) - let classes = { 'o-icon-nav__item': true, - 'o-action-button': true, - 'o-action-button--round': true, - 'o-action-button--quiet': true, + 'o-button': true, + 'o-button--round': true, + 'o-button--quiet': true, 'is-selected': attributes.selected, } if (attributes.class) { diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 842d44a..2d520b5 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -23,14 +23,14 @@ mixin lightbox(images) header.o-lightbox__header div(class=linksClasses) block - +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') + +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') each img, i in images img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) if images.length > 1 - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') .o-lightbox__thumbnails each img, i in images diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 578f9bc..802f9bd 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin menu - diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug index 5c7642c..14ec9d3 100644 --- a/tpl/objects/navbar.pug +++ b/tpl/objects/navbar.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin navbar - diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug index ccd24e4..2dcbd84 100644 --- a/tpl/objects/side-nav.pug +++ b/tpl/objects/side-nav.pug @@ -1,6 +1,6 @@ include icon.pug include status-indicator.pug -include action-button.pug +include button.pug mixin side-nav - 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