From 6448b40f6224b271acb6010cac0672dec4755341 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 08:51:30 +0200 Subject: Update --- src/objects/_checkbox.scss | 142 ++++++++++++++++++--------------------------- 1 file changed, 55 insertions(+), 87 deletions(-) (limited to 'src/objects/_checkbox.scss') diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 8d82cd5..c6385bc 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -1,72 +1,35 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use '../core.vars' as core; -@include iro.props-namespace('checkbox') { - @include iro.props-store(( - --dims: ( - --size: fn.global-dim(--size --175), - --label-gap: fn.global-dim(--size --125), - --border: fn.global-dim(--border --medium), - --pad-i: fn.global-dim(--size --65), - --pad-b: fn.global-dim(--size --65), - --rounding: fn.global-dim(--rounding), - --spacing-sibling: fn.global-dim(--size --300), +@forward 'checkbox.vars'; +@use 'checkbox.vars' as vars; - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), - ), - ), - --colors: ( - --box-border: fn.global-color(--text-mute-more), - --box-bg: fn.global-color(--base --75), - - --hover: ( - --label: fn.global-color(--heading), - --box-border: fn.global-color(--text-mute), - ), - --accent: ( - --box-border: fn.global-color(--accent --900), - - --hover: ( - --box-border: fn.global-color(--accent --1000), - ), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - --box-border: fn.global-color(--border-strong), - --box-bg: fn.global-color(--base --75), - ), - --key-focus: ( - --label: fn.global-color(--focus --text), - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('checkbox') { position: relative; display: inline-block; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); margin-inline: - calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) - calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); + 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') { position: relative; display: inline-block; flex: 0 0 auto; - inline-size: fn.dim(--size); - block-size: fn.dim(--size); - margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); + inline-size: props.get(vars.$size); + block-size: props.get(vars.$size); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset)); vertical-align: top; - background-color: fn.color(--box-border); + background-color: props.get(vars.$box-border-color); background-clip: padding-box; - border: fn.dim(--key-focus --border-offset) solid transparent; - border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); &::before, &::after { @@ -76,23 +39,23 @@ } &::before { - inset-block-start: fn.dim(--border); - inset-inline-start: fn.dim(--border); + inset-block-start: props.get(vars.$border-width); + inset-inline-start: props.get(vars.$border-width); z-index: 2; - inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); - block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); - background-color: fn.color(--box-bg); + inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); + background-color: props.get(vars.$box-bg-color); transition: transform .2s ease; } &::after { - inset-block-start: calc(.5 * fn.dim(--size) - 1px); - inset-inline-start: calc(1.5 * fn.dim(--border)); + inset-block-start: calc(.5 * props.get(vars.$size) - 1px); + inset-inline-start: calc(1.5 * props.get(vars.$border-width)); z-index: 3; box-sizing: border-box; - inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); + inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); block-size: 0; - border-color: fn.color(--box-bg); + border-color: props.get(vars.$box-bg-color); border-style: solid; border-radius: 2px; transition: transform .2s ease; @@ -104,14 +67,14 @@ @include iro.bem-elem('check-icon') { position: absolute; - inset-block-start: calc(1 * fn.dim(--border)); - inset-inline-start: calc(1 * fn.dim(--border)); + inset-block-start: calc(1 * props.get(vars.$border-width)); + inset-inline-start: calc(1 * props.get(vars.$border-width)); z-index: 2; display: block; - inline-size: calc(100% - 2 * fn.dim(--border)); - block-size: calc(100% - 2 * fn.dim(--border)); + inline-size: calc(100% - 2 * props.get(vars.$border-width)); + block-size: calc(100% - 2 * props.get(vars.$border-width)); margin: 0; - color: fn.color(--box-bg); + color: props.get(vars.$box-bg-color); stroke-width: iro.fn-px-to-rem(3px); transition: transform .2s ease; transform: scale(0); @@ -119,7 +82,7 @@ } @include iro.bem-elem('label') { - margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); + margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); } @include iro.bem-elem('native') { @@ -133,16 +96,16 @@ margin: 0; overflow: hidden; appearance: none; - border-radius: fn.dim(--rounding); + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--hover --label); + color: props.get(vars.$hover--label-color); } @include iro.bem-sibling-elem('box') { - background-color: fn.color(--hover --box-border); + background-color: props.get(vars.$hover--box-border-color); } } @@ -176,26 +139,31 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); + color: props.get(vars.$disabled--label-color); } @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); + background-color: props.get(vars.$disabled--box-border-color); &::before { - background-color: fn.color(--disabled --box-bg); + background-color: props.get(vars.$disabled--box-bg-color); } } } &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--key-focus --label); + color: props.get(vars.$key-focus--label-color); } @include iro.bem-sibling-elem('box') { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); } } } @@ -210,48 +178,48 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --box-border); + background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --hover --box-border); + background-color: props.get(vars.$accent--hover--box-border-color); } } } &:indeterminate { @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --box-border); + background-color: props.get(vars.$accent--box-border-color); } &:hover, &:focus-visible { @include iro.bem-sibling-elem('box') { - background-color: fn.color(--accent --hover --box-border); + background-color: props.get(vars.$accent--hover--box-border-color); } } } &:disabled { @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); + background-color: props.get(vars.$disabled--box-border-color); &::before { - background-color: fn.color(--disabled --box-bg); + background-color: props.get(vars.$disabled--box-bg-color); } } &:checked { @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); + background-color: props.get(vars.$disabled--box-border-color); } } &:indeterminate { @include iro.bem-sibling-elem('box') { - background-color: fn.color(--disabled --box-border); + background-color: props.get(vars.$disabled--box-border-color); } } } -- cgit v1.3.1