diff options
| author | Volpeon <git@volpeon.ink> | 2026-01-21 16:27:04 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-01-21 16:27:04 +0100 |
| commit | d1436a8e361e2a397edcfe7a76897d307786c5fb (patch) | |
| tree | ffb647ed15d4d4ee63ca6ce1517d14df7fe8867d | |
| parent | Add wide button modifier (diff) | |
| download | iro-design-d1436a8e361e2a397edcfe7a76897d307786c5fb.tar.gz iro-design-d1436a8e361e2a397edcfe7a76897d307786c5fb.tar.bz2 iro-design-d1436a8e361e2a397edcfe7a76897d307786c5fb.zip | |
Rename button-group to hlist
| -rw-r--r-- | src/_iro-design.scss | 2 | ||||
| -rw-r--r-- | src/layouts/_button-group.vars.scss | 16 | ||||
| -rw-r--r-- | src/layouts/_hlist.scss (renamed from src/layouts/_button-group.scss) | 8 | ||||
| -rw-r--r-- | src/layouts/_hlist.vars.scss | 16 | ||||
| -rw-r--r-- | src_demo/index.scss | 2 | ||||
| -rw-r--r-- | tpl/objects/dialog.pug | 2 |
6 files changed, 23 insertions, 23 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss index 22e50c0..83d5a9d 100644 --- a/src/_iro-design.scss +++ b/src/_iro-design.scss | |||
| @@ -25,11 +25,11 @@ $breakpoints: ( | |||
| 25 | @forward 'core' as core--*; | 25 | @forward 'core' as core--*; |
| 26 | @forward 'layers' as layers--*; | 26 | @forward 'layers' as layers--*; |
| 27 | 27 | ||
| 28 | @forward 'layouts/button-group' as l-button-group--*; | ||
| 29 | @forward 'layouts/card-list' as l-card-list--*; | 28 | @forward 'layouts/card-list' as l-card-list--*; |
| 30 | @forward 'layouts/container' as l-container--*; | 29 | @forward 'layouts/container' as l-container--*; |
| 31 | @forward 'layouts/flex' as l-flex--*; | 30 | @forward 'layouts/flex' as l-flex--*; |
| 32 | @forward 'layouts/form' as l-form--*; | 31 | @forward 'layouts/form' as l-form--*; |
| 32 | @forward 'layouts/hlist' as l-hlist--*; | ||
| 33 | @forward 'layouts/media' as l-media--*; | 33 | @forward 'layouts/media' as l-media--*; |
| 34 | @forward 'layouts/overflow' as l-overflow--*; | 34 | @forward 'layouts/overflow' as l-overflow--*; |
| 35 | @forward 'layouts/split-view' as l-split-view--*; | 35 | @forward 'layouts/split-view' as l-split-view--*; |
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss deleted file mode 100644 index b56eec7..0000000 --- a/src/layouts/_button-group.vars.scss +++ /dev/null | |||
| @@ -1,16 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $gap: props.def(--l-button-group--gap, props.get(core.$size--150)) !default; | ||
| 5 | |||
| 6 | $gapless: props.def(--l-button-group--gapless, 0) !default; | ||
| 7 | $sm: props.def(--l-button-group--sm, props.get(core.$size--100)) !default; | ||
| 8 | $lg: props.def(--l-button-group--lg, props.get(core.$size--300)) !default; | ||
| 9 | $xl: props.def(--l-button-group--xl, props.get(core.$size--450)) !default; | ||
| 10 | |||
| 11 | $sizes: ( | ||
| 12 | 'gapless': $gapless, | ||
| 13 | 'sm': $sm, | ||
| 14 | 'lg': $lg, | ||
| 15 | 'xl': $xl, | ||
| 16 | ) !default; | ||
diff --git a/src/layouts/_button-group.scss b/src/layouts/_hlist.scss index 44719be..5075541 100644 --- a/src/layouts/_button-group.scss +++ b/src/layouts/_hlist.scss | |||
| @@ -3,14 +3,14 @@ | |||
| 3 | @use 'iro-sass/src/props'; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../props' as *; | 4 | @use '../props' as *; |
| 5 | 5 | ||
| 6 | @forward 'button-group.vars'; | 6 | @forward 'hlist.vars'; |
| 7 | @use 'button-group.vars' as vars; | 7 | @use 'hlist.vars' as vars; |
| 8 | @use '../objects/button.vars' as button; | 8 | @use '../objects/button.vars' as button; |
| 9 | 9 | ||
| 10 | @mixin styles { | 10 | @mixin styles { |
| 11 | @include materialize-at-root(meta.module-variables('vars')); | 11 | @include materialize-at-root(meta.module-variables('vars')); |
| 12 | 12 | ||
| 13 | @include bem.layout('button-group') { | 13 | @include bem.layout('hlist') { |
| 14 | display: inline-flex; | 14 | display: inline-flex; |
| 15 | flex-wrap: wrap; | 15 | flex-wrap: wrap; |
| 16 | gap: props.get(vars.$gap); | 16 | gap: props.get(vars.$gap); |
| @@ -21,7 +21,7 @@ | |||
| 21 | } | 21 | } |
| 22 | } | 22 | } |
| 23 | 23 | ||
| 24 | @include bem.modifier('align-block') { | 24 | @include bem.modifier('buttons') { |
| 25 | margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); | 25 | margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); |
| 26 | 26 | ||
| 27 | @include bem.modifier('pill') { | 27 | @include bem.modifier('pill') { |
diff --git a/src/layouts/_hlist.vars.scss b/src/layouts/_hlist.vars.scss new file mode 100644 index 0000000..fecded5 --- /dev/null +++ b/src/layouts/_hlist.vars.scss | |||
| @@ -0,0 +1,16 @@ | |||
| 1 | @use 'iro-sass/src/props'; | ||
| 2 | @use '../core.vars' as core; | ||
| 3 | |||
| 4 | $gap: props.def(--l-hlist--gap, props.get(core.$size--150)) !default; | ||
| 5 | |||
| 6 | $gapless: props.def(--l-hlist--gapless, 0) !default; | ||
| 7 | $sm: props.def(--l-hlist--sm, props.get(core.$size--100)) !default; | ||
| 8 | $lg: props.def(--l-hlist--lg, props.get(core.$size--300)) !default; | ||
| 9 | $xl: props.def(--l-hlist--xl, props.get(core.$size--450)) !default; | ||
| 10 | |||
| 11 | $sizes: ( | ||
| 12 | 'gapless': $gapless, | ||
| 13 | 'sm': $sm, | ||
| 14 | 'lg': $lg, | ||
| 15 | 'xl': $xl, | ||
| 16 | ) !default; | ||
diff --git a/src_demo/index.scss b/src_demo/index.scss index 5614bc4..2ac8e9d 100644 --- a/src_demo/index.scss +++ b/src_demo/index.scss | |||
| @@ -13,7 +13,7 @@ | |||
| 13 | @include iro.s-lists--styles; | 13 | @include iro.s-lists--styles; |
| 14 | @include iro.s-tables--styles; | 14 | @include iro.s-tables--styles; |
| 15 | 15 | ||
| 16 | @include iro.l-button-group--styles; | 16 | @include iro.l-hlist--styles; |
| 17 | @include iro.l-card-list--styles; | 17 | @include iro.l-card-list--styles; |
| 18 | @include iro.l-container--styles; | 18 | @include iro.l-container--styles; |
| 19 | @include iro.l-flex--styles; | 19 | @include iro.l-flex--styles; |
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 1a2f061..95053f7 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug | |||
| @@ -60,7 +60,7 @@ mixin dialog(title) | |||
| 60 | if slots.body | 60 | if slots.body |
| 61 | - slots.body() | 61 | - slots.body() |
| 62 | 62 | ||
| 63 | footer.o-dialog__footer.l-button-group | 63 | footer.o-dialog__footer.l-hlist |
| 64 | +button(outline=true)= 'Cancel' | 64 | +button(outline=true)= 'Cancel' |
| 65 | = ' ' | 65 | = ' ' |
| 66 | +button(variant='accent')= 'Continue' | 66 | +button(variant='accent')= 'Continue' |
