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 | ||