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.scss44
1 files changed, 18 insertions, 26 deletions
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 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
4@use 'icon.vars' as icon;
3 5
4@include iro.props-namespace('field-label') { 6@forward 'field-label.vars';
5 @include iro.props-store(( 7@use 'field-label.vars' as vars;
6 --dims: (
7 --spacing-i: fn.global-dim(--size --150),
8 --spacing-b: fn.global-dim(--size --85),
9 --label-font-size: fn.global-dim(--font-size --75),
10 --hint-font-size: fn.global-dim(--font-size --75),
11 ),
12 --colors: (
13 --label: fn.global-color(--text-mute),
14 --hint: fn.global-color(--text-mute),
15 --error-hint: fn.global-color(--negative --900),
16 --disabled: fn.global-color(--text-disabled),
17 ),
18 ));
19 8
20 @include iro.bem-object(iro.props-namespace()) { 9@mixin styles {
10 @include props.materialize(meta.module-variables('vars'));
11
12 @include iro.bem-object('field-label') {
21 display: block; 13 display: block;
22 14
23 @include iro.bem-elem('label') { 15 @include iro.bem-elem('label') {
24 display: block; 16 display: block;
25 flex: 0 0 auto; 17 flex: 0 0 auto;
26 padding-inline-end: fn.dim(--spacing-i); 18 padding-inline-end: props.get(vars.$spacing-i);
27 font-size: fn.dim(--label-font-size); 19 font-size: props.get(vars.$label-font-size);
28 font-weight: 400; 20 font-weight: 400;
29 line-height: 1.3; 21 line-height: 1.3;
30 color: fn.color(--label); 22 color: props.get(vars.$label-color);
31 23
32 @include iro.bem-next-elem('content') { 24 @include iro.bem-next-elem('content') {
33 margin-block-start: fn.dim(--spacing-b); 25 margin-block-start: props.get(vars.$spacing-b);
34 } 26 }
35 } 27 }
36 28
@@ -41,20 +33,20 @@
41 33
42 @include iro.bem-elem('hint') { 34 @include iro.bem-elem('hint') {
43 display: block; 35 display: block;
44 margin-block-start: fn.dim(--spacing-b); 36 margin-block-start: props.get(vars.$spacing-b);
45 font-size: fn.dim(--hint-font-size); 37 font-size: props.get(vars.$hint-font-size);
46 color: fn.color(--hint); 38 color: props.get(vars.$hint-color);
47 } 39 }
48 40
49 @include iro.bem-is('invalid') { 41 @include iro.bem-is('invalid') {
50 @include iro.bem-elem('hint') { 42 @include iro.bem-elem('hint') {
51 color: fn.color(--error-hint); 43 color: props.get(vars.$error-hint-color);
52 } 44 }
53 } 45 }
54 46
55 @include iro.bem-is('disabled') { 47 @include iro.bem-is('disabled') {
56 @include iro.bem-elem('label', 'hint') { 48 @include iro.bem-elem('label', 'hint') {
57 color: fn.color(--disabled); 49 color: props.get(vars.$disabled-color);
58 } 50 }
59 } 51 }
60 52