From 5855a6821cf5585378a70f9bee13563bdbfe2d86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Oct 2024 08:23:33 +0200 Subject: Less broad imports --- src/objects/_checkbox.scss | 57 +++++++++++++++++++++++----------------------- 1 file changed, 29 insertions(+), 28 deletions(-) (limited to 'src/objects/_checkbox.scss') diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index f0c6b85..f902da7 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -1,5 +1,6 @@ @use 'sass:meta'; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; +@use 'iro-sass/src/functions' as fn; @use 'iro-sass/src/props'; @use '../props' as *; @use '../core.vars' as core; @@ -10,7 +11,7 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-object('checkbox') { + @include bem.object('checkbox') { position: relative; display: inline-block; padding-block: props.get(vars.$pad-b); @@ -19,7 +20,7 @@ calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); - @include iro.bem-elem('box') { + @include bem.elem('box') { position: relative; display: inline-block; flex: 0 0 auto; @@ -66,7 +67,7 @@ } } - @include iro.bem-elem('check-icon') { + @include bem.elem('check-icon') { position: absolute; inset-block-start: calc(1 * props.get(vars.$border-width)); inset-inline-start: calc(1 * props.get(vars.$border-width)); @@ -76,17 +77,17 @@ block-size: calc(100% - 2 * props.get(vars.$border-width)); margin: 0; color: props.get(vars.$box-bg-color); - stroke-width: iro.fn-px-to-rem(3px); + stroke-width: fn.px-to-rem(3px); transition: transform .2s ease; transform: scale(0); transform-origin: 40% 90%; } - @include iro.bem-elem('label') { + @include bem.elem('label') { margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); } - @include iro.bem-elem('native') { + @include bem.elem('native') { position: absolute; inset-block-start: 0; inset-inline-start: 0; @@ -101,29 +102,29 @@ &:hover, &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$hover--label-color); } - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$hover--box-border-color); } } &:checked { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { &::before { transform: scale(0); } - @include iro.bem-elem('check-icon') { + @include bem.elem('check-icon') { transform: scale(1); } } } &:indeterminate { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { &::before { transform: scale(0); } @@ -132,18 +133,18 @@ transform: scale(1); } - @include iro.bem-elem('check-icon') { + @include bem.elem('check-icon') { transform: scale(0); } } } &:disabled { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$disabled--label-color); } - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -153,11 +154,11 @@ } &:focus-visible { - @include iro.bem-sibling-elem('label') { + @include bem.sibling-elem('label') { color: props.get(vars.$key-focus--label-color); } - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: 0 @@ -169,42 +170,42 @@ } } - @include iro.bem-modifier('standalone') { - @include iro.bem-elem('box') { + @include bem.modifier('standalone') { + @include bem.elem('box') { margin-block-start: 0; } } - @include iro.bem-modifier('accent') { - @include iro.bem-elem('native') { + @include bem.modifier('accent') { + @include bem.elem('native') { &:checked { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:indeterminate { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$accent--hover--box-border-color); } } } &:disabled { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); &::before { @@ -213,13 +214,13 @@ } &:checked { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); } } &:indeterminate { - @include iro.bem-sibling-elem('box') { + @include bem.sibling-elem('box') { background-color: props.get(vars.$disabled--box-border-color); } } -- cgit v1.2.3-70-g09d2