diff options
Diffstat (limited to 'src/objects/_field-label.scss')
| -rw-r--r-- | src/objects/_field-label.scss | 40 |
1 files changed, 22 insertions, 18 deletions
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 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
| 2 | @use '../functions' as fn; | ||
| 2 | 3 | ||
| 3 | @include iro.props-namespace('field-label') { | 4 | @include iro.props-namespace('field-label') { |
| 4 | @include iro.props-store(( | 5 | @include iro.props-store(( |
| 5 | --dims: ( | 6 | --dims: ( |
| 6 | --spacing-x: iro.props-get(--dims --spacing --x --sm, $global: true), | 7 | --spacing-x: fn.dim(--spacing --x --sm, $global: true), |
| 7 | --spacing-y: iro.props-get(--dims --spacing --y --xs, $global: true), | 8 | --spacing-y: fn.dim(--spacing --y --xs, $global: true), |
| 8 | --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), | 9 | --label-font-size: fn.dim(--font-size --sm, $global: true), |
| 9 | --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), | 10 | --hint-font-size: fn.dim(--font-size --sm, $global: true), |
| 10 | ), | 11 | ), |
| 12 | ), 'dims'); | ||
| 13 | |||
| 14 | @include iro.props-store(( | ||
| 11 | --colors: ( | 15 | --colors: ( |
| 12 | --label: iro.props-get(--colors --fg-hi, $global: true), | 16 | --label: fn.color(--fg-hi, $global: true), |
| 13 | --hint: iro.props-get(--colors --fg, $global: true), | 17 | --hint: fn.color(--fg, $global: true), |
| 14 | --error-hint: iro.props-get(--colors --accent --error, $global: true), | 18 | --error-hint: fn.color(--accent --error, $global: true), |
| 15 | --disabled: iro.props-get(--colors --fg-hi3, $global: true), | 19 | --disabled: fn.color(--fg-hi3, $global: true), |
| 16 | ), | 20 | ), |
| 17 | )); | 21 | ), 'colors'); |
| 18 | 22 | ||
| 19 | @include iro.bem-object(iro.props-namespace()) { | 23 | @include iro.bem-object(iro.props-namespace()) { |
| 20 | display: inline-block; | 24 | display: inline-block; |
| 21 | 25 | ||
| 22 | @include iro.bem-elem('label') { | 26 | @include iro.bem-elem('label') { |
| 23 | display: block; | 27 | display: block; |
| 24 | padding-right: iro.props-get(--dims --spacing-x); | 28 | padding-right: fn.dim(--spacing-x); |
| 25 | color: iro.props-get(--colors --label); | 29 | color: fn.color(--label); |
| 26 | font-size: iro.props-get(--dims --label-font-size); | 30 | font-size: fn.dim(--label-font-size); |
| 27 | font-weight: 400; | 31 | font-weight: 400; |
| 28 | line-height: 1.3; | 32 | line-height: 1.3; |
| 29 | 33 | ||
| 30 | @include iro.bem-next-elem('content') { | 34 | @include iro.bem-next-elem('content') { |
| 31 | margin-top: iro.props-get(--dims --spacing-y); | 35 | margin-top: fn.dim(--spacing-y); |
| 32 | } | 36 | } |
| 33 | } | 37 | } |
| 34 | 38 | ||
| @@ -38,20 +42,20 @@ | |||
| 38 | 42 | ||
| 39 | @include iro.bem-elem('hint') { | 43 | @include iro.bem-elem('hint') { |
| 40 | display: block; | 44 | display: block; |
| 41 | margin-top: iro.props-get(--dims --spacing-y); | 45 | margin-top: fn.dim(--spacing-y); |
| 42 | color: iro.props-get(--colors --hint); | 46 | color: fn.color(--hint); |
| 43 | font-size: iro.props-get(--dims --hint-font-size); | 47 | font-size: fn.dim(--hint-font-size); |
| 44 | } | 48 | } |
| 45 | 49 | ||
| 46 | @include iro.bem-is('invalid') { | 50 | @include iro.bem-is('invalid') { |
| 47 | @include iro.bem-elem('hint') { | 51 | @include iro.bem-elem('hint') { |
| 48 | color: iro.props-get(--colors --error-hint); | 52 | color: fn.color(--error-hint); |
| 49 | } | 53 | } |
| 50 | } | 54 | } |
| 51 | 55 | ||
| 52 | @include iro.bem-is('disabled') { | 56 | @include iro.bem-is('disabled') { |
| 53 | @include iro.bem-elem('label', 'hint') { | 57 | @include iro.bem-elem('label', 'hint') { |
| 54 | color: iro.props-get(--colors --disabled); | 58 | color: fn.color(--disabled); |
| 55 | } | 59 | } |
| 56 | } | 60 | } |
| 57 | 61 | ||
