From 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 17:17:33 +0100 Subject: Improved variable structure --- src/objects/_field-label.scss | 40 ++++++++++++++++++++++------------------ 1 file changed, 22 insertions(+), 18 deletions(-) (limited to 'src/objects/_field-label.scss') diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index d0bc6ad..144afad 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,34 +1,38 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('field-label') { @include iro.props-store(( --dims: ( - --spacing-x: iro.props-get(--dims --spacing --x --sm, $global: true), - --spacing-y: iro.props-get(--dims --spacing --y --xs, $global: true), - --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), - --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), + --spacing-x: fn.dim(--spacing --x --sm, $global: true), + --spacing-y: fn.dim(--spacing --y --xs, $global: true), + --label-font-size: fn.dim(--font-size --sm, $global: true), + --hint-font-size: fn.dim(--font-size --sm, $global: true), ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --label: iro.props-get(--colors --fg-hi, $global: true), - --hint: iro.props-get(--colors --fg, $global: true), - --error-hint: iro.props-get(--colors --accent --error, $global: true), - --disabled: iro.props-get(--colors --fg-hi3, $global: true), + --label: fn.color(--fg-hi, $global: true), + --hint: fn.color(--fg, $global: true), + --error-hint: fn.color(--accent --error, $global: true), + --disabled: fn.color(--fg-hi3, $global: true), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { display: inline-block; @include iro.bem-elem('label') { display: block; - padding-right: iro.props-get(--dims --spacing-x); - color: iro.props-get(--colors --label); - font-size: iro.props-get(--dims --label-font-size); + padding-right: fn.dim(--spacing-x); + color: fn.color(--label); + font-size: fn.dim(--label-font-size); font-weight: 400; line-height: 1.3; @include iro.bem-next-elem('content') { - margin-top: iro.props-get(--dims --spacing-y); + margin-top: fn.dim(--spacing-y); } } @@ -38,20 +42,20 @@ @include iro.bem-elem('hint') { display: block; - margin-top: iro.props-get(--dims --spacing-y); - color: iro.props-get(--colors --hint); - font-size: iro.props-get(--dims --hint-font-size); + margin-top: fn.dim(--spacing-y); + color: fn.color(--hint); + font-size: fn.dim(--hint-font-size); } @include iro.bem-is('invalid') { @include iro.bem-elem('hint') { - color: iro.props-get(--colors --error-hint); + color: fn.color(--error-hint); } } @include iro.bem-is('disabled') { @include iro.bem-elem('label', 'hint') { - color: iro.props-get(--colors --disabled); + color: fn.color(--disabled); } } -- cgit v1.2.3-54-g00ecf