summaryrefslogtreecommitdiffstats
path: root/src/objects/_field-label.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_field-label.scss')
-rw-r--r--src/objects/_field-label.scss40
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