From 71af9d144c4dfc27c8824aec4d945897289ed440 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 14:46:36 +0200 Subject: Add static themes to action button --- tpl/objects/action-button.pug | 3 +++ tpl/objects/button.pug | 1 + tpl/views/action-button.pug | 22 ++++++++++++++++++++++ tpl/views/button.pug | 15 ++++++++++++++- 4 files changed, 40 insertions(+), 1 deletion(-) (limited to 'tpl') diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index 976a646..c3a9b53 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -10,6 +10,9 @@ mixin action-button '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 } diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 61ba0b6..b5fb8da 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -3,6 +3,7 @@ mixin a-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 } diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug index 2c94c68..8fbf9ea 100644 --- a/tpl/views/action-button.pug +++ b/tpl/views/action-button.pug @@ -85,3 +85,25 @@ mixin view-action-button +action-button(pill=true quiet=true disabled=true)= 'Disabled' = ' ' +action-button(pill=true 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' + + .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + +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/button.pug b/tpl/views/button.pug index c476d9b..eacf302 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -45,7 +45,7 @@ mixin view-button +a-button(variant=theme outline=true icon='trash') +a-button(variant=theme outline=true disabled=true icon='trash') - each theme in ['static-black', 'static-black-primary', 'static-white', 'static-white-primary'] + each theme in ['static-black', 'static-white'] - const bg = theme.startsWith('static-black') ? 500 : 1000; @@ -61,3 +61,16 @@ mixin view-button +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' + 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') -- cgit v1.2.3-54-g00ecf