From 2336e6b58fd6ff5e56fd87fe3644b0ddf865fff8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 30 Jan 2023 17:12:41 +0100 Subject: Added round button variant --- src/objects/_button.scss | 6 ++++++ tpl/objects/button.pug | 6 +++++- tpl/views/button.pug | 18 ++++++++++++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/objects/_button.scss b/src/objects/_button.scss index f35bc50..df1438f 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -157,5 +157,11 @@ color: fn.color(--any --key-focus --label); } } + + @include iro.bem-modifier('round') { + padding-right: fn.dim(--pad-y); + padding-left: fn.dim(--pad-y); + border-radius: 100em; + } } } diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 8cae2f1..e99e5ab 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -3,7 +3,8 @@ mixin a-button let classes = { 'o-button': true, 'o-button--block': attributes.block, - 'o-button--outline': attributes.outline + 'o-button--outline': attributes.outline, + 'o-button--round': !!attributes.icon } if (attributes.variant) { classes['o-button--' + attributes.variant] = true @@ -12,4 +13,7 @@ mixin a-button let href = attributes.disabled ? null : '#'; a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) + if attributes.icon + +icon(attributes.icon)(block=!block) + = ' ' block diff --git a/tpl/views/button.pug b/tpl/views/button.pug index 9deba01..2a1bd57 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -7,14 +7,32 @@ mixin view-button +a-button(variant='accent' outline=true)= 'Button' +a-button(variant='accent' outline=true disabled=true)= 'Button' br + .l-button-group + +a-button(variant='accent' icon='trash') + +a-button(variant='accent' disabled=true icon='trash') + +a-button(variant='accent' outline=true icon='trash') + +a-button(variant='accent' outline=true disabled=true icon='trash') + br .l-button-group +a-button(variant='primary')= 'Button' +a-button(variant='primary' disabled=true)= 'Button' +a-button(variant='primary' outline=true)= 'Button' +a-button(variant='primary' outline=true disabled=true)= 'Button' br + .l-button-group + +a-button(variant='primary' icon='trash') + +a-button(variant='primary' disabled=true icon='trash') + +a-button(variant='primary' outline=true icon='trash') + +a-button(variant='primary' outline=true disabled=true icon='trash') + br .l-button-group +a-button(variant='secondary')= 'Button' +a-button(variant='secondary' disabled=true)= 'Button' +a-button(variant='secondary' outline=true)= 'Button' +a-button(variant='secondary' outline=true disabled=true)= 'Button' + br + .l-button-group + +a-button(variant='secondary' icon='trash') + +a-button(variant='secondary' disabled=true icon='trash') + +a-button(variant='secondary' outline=true icon='trash') + +a-button(variant='secondary' outline=true disabled=true icon='trash') -- cgit v1.2.3-70-g09d2