From 50d24a41b5656cdaf31468b28d08da765ca95763 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 10:34:53 +0200 Subject: Update --- src/objects/_field-label.scss | 44 ++++++++++++++++++------------------------- 1 file changed, 18 insertions(+), 26 deletions(-) (limited to 'src/objects/_field-label.scss') diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index ba3841a..467d30a 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,36 +1,28 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use 'icon.vars' as icon; -@include iro.props-namespace('field-label') { - @include iro.props-store(( - --dims: ( - --spacing-i: fn.global-dim(--size --150), - --spacing-b: fn.global-dim(--size --85), - --label-font-size: fn.global-dim(--font-size --75), - --hint-font-size: fn.global-dim(--font-size --75), - ), - --colors: ( - --label: fn.global-color(--text-mute), - --hint: fn.global-color(--text-mute), - --error-hint: fn.global-color(--negative --900), - --disabled: fn.global-color(--text-disabled), - ), - )); +@forward 'field-label.vars'; +@use 'field-label.vars' as vars; - @include iro.bem-object(iro.props-namespace()) { +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('field-label') { display: block; @include iro.bem-elem('label') { display: block; flex: 0 0 auto; - padding-inline-end: fn.dim(--spacing-i); - font-size: fn.dim(--label-font-size); + padding-inline-end: props.get(vars.$spacing-i); + font-size: props.get(vars.$label-font-size); font-weight: 400; line-height: 1.3; - color: fn.color(--label); + color: props.get(vars.$label-color); @include iro.bem-next-elem('content') { - margin-block-start: fn.dim(--spacing-b); + margin-block-start: props.get(vars.$spacing-b); } } @@ -41,20 +33,20 @@ @include iro.bem-elem('hint') { display: block; - margin-block-start: fn.dim(--spacing-b); - font-size: fn.dim(--hint-font-size); - color: fn.color(--hint); + margin-block-start: props.get(vars.$spacing-b); + font-size: props.get(vars.$hint-font-size); + color: props.get(vars.$hint-color); } @include iro.bem-is('invalid') { @include iro.bem-elem('hint') { - color: fn.color(--error-hint); + color: props.get(vars.$error-hint-color); } } @include iro.bem-is('disabled') { @include iro.bem-elem('label', 'hint') { - color: fn.color(--disabled); + color: props.get(vars.$disabled-color); } } -- cgit v1.3.1