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.scss85
1 files changed, 85 insertions, 0 deletions
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
new file mode 100644
index 0000000..341bf49
--- /dev/null
+++ b/src/objects/_field-label.scss
@@ -0,0 +1,85 @@
1@use 'iro-sass/src/index' as iro;
2@use '../vars';
3@use '../mixins/typography';
4
5@include iro.props-namespace('field-label') {
6 @include iro.props-store((
7 --dims: (
8 --spacing-x: iro.props-get(--dims --spacing --x --sm, $global: true),
9 --spacing-y: iro.props-get(--dims --spacing --y --xs, $global: true),
10 --label-font-size: iro.props-get(--dims --font-size --sm, $global: true),
11 --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true),
12 ),
13 --colors: (
14 --label: iro.props-get(--colors --fg-hi, $global: true),
15 --hint: iro.props-get(--colors --fg, $global: true),
16 --error-hint: iro.props-get(--colors --accent --error, $global: true),
17 --disabled: iro.props-get(--colors --fg-hi3, $global: true),
18 ),
19 ));
20
21 @include iro.bem-object(iro.props-namespace()) {
22 display: inline-block;
23
24 @include iro.bem-elem('label') {
25 display: block;
26 padding-right: iro.props-get(--dims --spacing-x);
27 color: iro.props-get(--colors --label);
28 font-size: iro.props-get(--dims --label-font-size);
29 font-weight: 400;
30 line-height: 1.3;
31
32 @include iro.bem-next-elem('content') {
33 margin-top: iro.props-get(--dims --spacing-y);
34 }
35 }
36
37 @include iro.bem-elem('content') {
38 display: inline-block;
39 }
40
41 @include iro.bem-elem('hint') {
42 display: block;
43 margin-top: iro.props-get(--dims --spacing-y);
44 color: iro.props-get(--colors --hint);
45 font-size: iro.props-get(--dims --hint-font-size);
46 }
47
48 @include iro.bem-is('invalid') {
49 @include iro.bem-elem('hint') {
50 color: iro.props-get(--colors --error-hint);
51 }
52 }
53
54 @include iro.bem-is('disabled') {
55 @include iro.bem-elem('label', 'hint') {
56 color: iro.props-get(--colors --disabled);
57 }
58 }
59
60 @include iro.bem-modifier('left', 'right') {
61 display: inline-flex;
62 align-items: baseline;
63
64 @include iro.bem-elem('label') {
65 display: inline-block;
66
67 @include iro.bem-next-elem('content') {
68 margin-top: 0;
69 }
70 }
71 }
72
73 @include iro.bem-modifier('left') {
74 @include iro.bem-elem('label') {
75 text-align: left;
76 }
77 }
78
79 @include iro.bem-modifier('right') {
80 @include iro.bem-elem('label') {
81 text-align: right;
82 }
83 }
84 }
85}