From 75857aedd1c6b58e6cf5ffaf184e994e4e2d52db Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 11 Feb 2022 18:49:39 +0100 Subject: Added button group --- src/index.scss | 1 + src/layouts/_button-group.scss | 15 +++++++++++++++ src/objects/_dialog.scss | 4 ++-- tpl/index.pug | 42 +++++++++++++++++------------------------- tpl/objects/dialog.pug | 2 +- 5 files changed, 36 insertions(+), 28 deletions(-) create mode 100644 src/layouts/_button-group.scss diff --git a/src/index.scss b/src/index.scss index 3796c18..21054db 100644 --- a/src/index.scss +++ b/src/index.scss @@ -6,6 +6,7 @@ @use 'layouts/card'; @use 'layouts/container'; +@use 'layouts/button-group'; @use 'objects/icon'; @use 'objects/heading'; diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss new file mode 100644 index 0000000..aee2000 --- /dev/null +++ b/src/layouts/_button-group.scss @@ -0,0 +1,15 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('button-group') { + @include iro.props-store(( + --dims: ( + --spacing: 1rem + ), + ), 'dims'); + + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + gap: 1rem; + } +} diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss index 453b32b..4f18b08 100644 --- a/src/objects/_dialog.scss +++ b/src/objects/_dialog.scss @@ -50,8 +50,8 @@ } @include iro.bem-elem('footer') { - padding-top: fn.dim(--pad-y); - text-align: right; + justify-content: flex-end; + padding-top: fn.dim(--pad-y); } } } diff --git a/tpl/index.pug b/tpl/index.pug index 0b74ed8..605fa35 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -88,31 +88,23 @@ html +rule('medium') +box - +a-button(variant='accent')= 'Button' - = ' ' - +a-button(variant='accent' disabled=true)= 'Button' - = ' ' - +a-button(variant='accent' outline=true)= 'Button' - = ' ' - +a-button(variant='accent' outline=true disabled=true)= 'Button' - br - br - +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 - br - +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' + .l-button-group + +a-button(variant='accent')= 'Button' + +a-button(variant='accent' disabled=true)= 'Button' + +a-button(variant='accent' outline=true)= 'Button' + +a-button(variant='accent' outline=true disabled=true)= 'Button' + 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='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' //----------------------------------------- diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 2cbbd4f..3cbe95e 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -10,7 +10,7 @@ mixin dialog(title) +rule('medium') section.o-dialog__body block - footer.o-dialog__footer + footer.o-dialog__footer.l-button-group +a-button(outline=true)= 'Cancel' = ' ' +a-button(outline=true variant='primary')= 'Continue' -- cgit v1.2.3-70-g09d2