diff options
Diffstat (limited to 'src/objects/_field-label.scss')
-rw-r--r-- | src/objects/_field-label.scss | 110 |
1 files changed, 55 insertions, 55 deletions
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 564ab2b..aa12eb5 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss | |||
@@ -7,70 +7,70 @@ | |||
7 | @use 'field-label.vars' as vars; | 7 | @use 'field-label.vars' as vars; |
8 | 8 | ||
9 | @mixin styles { | 9 | @mixin styles { |
10 | @include materialize-at-root(meta.module-variables('vars')); | 10 | @include materialize-at-root(meta.module-variables('vars')); |
11 | 11 | ||
12 | @include bem.object('field-label') { | 12 | @include bem.object('field-label') { |
13 | @include bem.elem('label') { | 13 | @include bem.elem('label') { |
14 | display: block; | 14 | display: block; |
15 | flex: 0 0 auto; | 15 | flex: 0 0 auto; |
16 | padding-inline-end: props.get(vars.$spacing-i); | 16 | padding-inline-end: props.get(vars.$spacing-i); |
17 | font-size: props.get(vars.$label-font-size); | 17 | font-size: props.get(vars.$label-font-size); |
18 | font-weight: 400; | 18 | font-weight: 400; |
19 | line-height: 1.3; | 19 | line-height: 1.3; |
20 | color: props.get(vars.$label-color); | 20 | color: props.get(vars.$label-color); |
21 | 21 | ||
22 | @include bem.next-elem('content') { | 22 | @include bem.next-elem('content') { |
23 | margin-block-start: props.get(vars.$spacing-b); | 23 | margin-block-start: props.get(vars.$spacing-b); |
24 | } | 24 | } |
25 | } | 25 | } |
26 | 26 | ||
27 | @include bem.elem('content') { | 27 | @include bem.elem('content') { |
28 | display: block; | 28 | display: block; |
29 | flex: 1 1 auto; | 29 | flex: 1 1 auto; |
30 | } | 30 | } |
31 | 31 | ||
32 | @include bem.elem('hint') { | 32 | @include bem.elem('hint') { |
33 | display: block; | 33 | display: block; |
34 | margin-block-start: props.get(vars.$spacing-b); | 34 | margin-block-start: props.get(vars.$spacing-b); |
35 | font-size: props.get(vars.$hint-font-size); | 35 | font-size: props.get(vars.$hint-font-size); |
36 | color: props.get(vars.$hint-color); | 36 | color: props.get(vars.$hint-color); |
37 | } | 37 | } |
38 | 38 | ||
39 | @include bem.is('invalid') { | 39 | @include bem.is('invalid') { |
40 | @include bem.elem('hint') { | 40 | @include bem.elem('hint') { |
41 | color: props.get(vars.$error-hint-color); | 41 | color: props.get(vars.$error-hint-color); |
42 | } | 42 | } |
43 | } | 43 | } |
44 | 44 | ||
45 | @include bem.is('disabled') { | 45 | @include bem.is('disabled') { |
46 | @include bem.elem('label', 'hint') { | 46 | @include bem.elem('label', 'hint') { |
47 | color: props.get(vars.$disabled-color); | 47 | color: props.get(vars.$disabled-color); |
48 | } | 48 | } |
49 | } | 49 | } |
50 | 50 | ||
51 | @include bem.modifier('align-start', 'align-end') { | 51 | @include bem.modifier('align-start', 'align-end') { |
52 | display: flex; | 52 | display: flex; |
53 | align-items: baseline; | 53 | align-items: baseline; |
54 | 54 | ||
55 | @include bem.elem('label') { | 55 | @include bem.elem('label') { |
56 | display: inline-block; | 56 | display: inline-block; |
57 | 57 | ||
58 | @include bem.next-elem('content') { | 58 | @include bem.next-elem('content') { |
59 | margin-block-start: 0; | 59 | margin-block-start: 0; |
60 | } | 60 | } |
61 | } | 61 | } |
62 | } | 62 | } |
63 | 63 | ||
64 | @include bem.modifier('align-start') { | 64 | @include bem.modifier('align-start') { |
65 | @include bem.elem('label') { | 65 | @include bem.elem('label') { |
66 | text-align: start; | 66 | text-align: start; |
67 | } | 67 | } |
68 | } | 68 | } |
69 | 69 | ||
70 | @include bem.modifier('align-end') { | 70 | @include bem.modifier('align-end') { |
71 | @include bem.elem('label') { | 71 | @include bem.elem('label') { |
72 | text-align: end; | 72 | text-align: end; |
73 | } | 73 | } |
74 | } | 74 | } |
75 | } | 75 | } |
76 | } | 76 | } |