From d1436a8e361e2a397edcfe7a76897d307786c5fb Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 21 Jan 2026 16:27:04 +0100 Subject: Rename button-group to hlist --- src/layouts/_hlist.scss | 50 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/layouts/_hlist.scss (limited to 'src/layouts/_hlist.scss') diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss new file mode 100644 index 0000000..5075541 --- /dev/null +++ b/src/layouts/_hlist.scss @@ -0,0 +1,50 @@ +@use 'sass:meta'; +@use 'iro-sass/src/bem'; +@use 'iro-sass/src/props'; +@use '../props' as *; + +@forward 'hlist.vars'; +@use 'hlist.vars' as vars; +@use '../objects/button.vars' as button; + +@mixin styles { + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.layout('hlist') { + display: inline-flex; + flex-wrap: wrap; + gap: props.get(vars.$gap); + + @each $mod, $size in vars.$sizes { + @include bem.modifier($mod) { + gap: props.get($size); + } + } + + @include bem.modifier('buttons') { + margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); + + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)); + } + + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); + } + + @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes { + @include bem.modifier('action-#{$mod}') { + margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width)); + + @include bem.modifier('pill') { + margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width)); + } + + @include bem.modifier('icon') { + margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); + } + } + } + } + } +} -- cgit v1.2.3-70-g09d2