summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/index.scss1
-rw-r--r--src/layouts/_card.scss25
-rw-r--r--src/objects/_field-label.scss85
-rw-r--r--src/objects/_text-field.scss5
-rw-r--r--tpl/index.pug78
-rw-r--r--tpl/objects/button.pug2
-rw-r--r--tpl/objects/field-label.pug23
-rw-r--r--tpl/objects/text-field.pug2
8 files changed, 205 insertions, 16 deletions
diff --git a/src/index.scss b/src/index.scss
index 5a6a94c..ad3b1af 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -11,6 +11,7 @@
11@import 'objects/rule'; 11@import 'objects/rule';
12@import 'objects/button'; 12@import 'objects/button';
13@import 'objects/text-field'; 13@import 'objects/text-field';
14@import 'objects/field-label';
14 15
15:root { 16:root {
16 @include iro.props-assign; 17 @include iro.props-assign;
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index f6b6b03..037b29f 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -1,35 +1,38 @@
1@include namespace('card') { 1@use 'iro-sass/src/index' as iro;
2 @include store(( 2@use 'include-media/dist/include-media' as media;
3
4@include iro.props-namespace('card') {
5 @include iro.props-store((
3 --dims: ( 6 --dims: (
4 --pad-x: iro-px-to-rem(11px), 7 --pad-x: iro.fn-px-to-rem(11px),
5 --pad-y: iro-px-to-rem(8px), 8 --pad-y: iro.fn-px-to-rem(8px),
6 --lg: ( 9 --lg: (
7 --pad-x: iro-px-to-rem(14px), 10 --pad-x: iro.fn-px-to-rem(14px),
8 --pad-y: iro-px-to-rem(11px), 11 --pad-y: iro.fn-px-to-rem(11px),
9 ) 12 )
10 ) 13 )
11 )); 14 ));
12 15
13 @include layout(namespace()) { 16 @include iro.bem-layout(iro.props-namespace()) {
14 display: flex; 17 display: flex;
15 align-items: center; 18 align-items: center;
16 padding: prop(--dims --pad-y) prop(--dims --pad-x); 19 padding: prop(--dims --pad-y) prop(--dims --pad-x);
17 gap: prop(--dims --pad-x); 20 gap: prop(--dims --pad-x);
18 line-height: 1.4; 21 line-height: 1.4;
19 22
20 @include modifier('lg') { 23 @include iro.bem-modifier('lg') {
21 padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x); 24 padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x);
22 gap: prop(--dims --lg --pad-x); 25 gap: prop(--dims --lg --pad-x);
23 } 26 }
24 27
25 @include modifier('flush') { 28 @include iro.bem-modifier('flush') {
26 padding: 0; 29 padding: 0;
27 } 30 }
28 31
29 @include element('block') { 32 @include iro.bem-elem('block') {
30 flex: 0 0 auto; 33 flex: 0 0 auto;
31 34
32 @include modifier('main') { 35 @include iro.bem-modifier('main') {
33 flex-shrink: 1; 36 flex-shrink: 1;
34 width: 100%; 37 width: 100%;
35 } 38 }
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}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index f2c3678..ac48216 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -78,9 +78,8 @@
78 @include iro.bem-elem('input') { 78 @include iro.bem-elem('input') {
79 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); 79 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
80 80
81 display: block; 81 color: iro.props-get(--colors --text);
82 color: iro.props-get(--colors --text); 82 resize: none;
83 resize: none;
84 83
85 &::placeholder { 84 &::placeholder {
86 opacity: 1; 85 opacity: 1;
diff --git a/tpl/index.pug b/tpl/index.pug
index 7dab86f..e3918de 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,6 +7,7 @@ include objects/heading.pug
7include objects/rule.pug 7include objects/rule.pug
8include objects/button.pug 8include objects/button.pug
9include objects/text-field.pug 9include objects/text-field.pug
10include objects/field-label.pug
10 11
11mixin box 12mixin box
12 +container(padX=true padY=true inPage=true theme="raised") 13 +container(padX=true padY=true inPage=true theme="raised")
@@ -121,3 +122,80 @@ html
121 br 122 br
122 br 123 br
123 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) 124 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
125
126 //-----------------------------------------
127
128 +h1-heading(level='xl')= 'Field label'
129 +rule(level='medium')
130
131 +box
132 +field-label('First name')
133 +text-field(placeholder='Placeholder')
134 br
135 br
136 +field-label('Password', 'At least 6 characters required')
137 +text-field(placeholder='Placeholder' type='password')
138 br
139 br
140 +field-label('Password', 'At least 6 characters required')(invalid=true)
141 +text-field(placeholder='Placeholder' type='password' invalid=true)
142 br
143 br
144 +field-label('First name')(disabled=true)
145 +text-field(placeholder='Placeholder' disabled=true)
146 br
147 br
148 +field-label('Password', 'At least 6 characters required')(disabled=true)
149 +text-field(placeholder='Placeholder' type='password' disabled=true)
150 br
151 br
152 +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
153 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
154
155 +box
156 +field-label('First name')(align='left' labelWidth='100px')
157 +text-field(placeholder='Placeholder')
158 br
159 br
160 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
161 +text-field(placeholder='Placeholder' type='password')
162 br
163 br
164 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
165 +text-field(placeholder='Placeholder' type='password' invalid=true)
166 br
167 br
168 +field-label('First name')(align='left' labelWidth='100px' disabled=true)
169 +text-field(placeholder='Placeholder' disabled=true)
170 br
171 br
172 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
173 +text-field(placeholder='Placeholder' type='password' disabled=true)
174 br
175 br
176 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
177 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
178
179 +box
180 +field-label('First name')(align='right' labelWidth='100px')
181 +text-field(placeholder='Placeholder')
182 br
183 br
184 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
185 +text-field(placeholder='Placeholder' type='password')
186 br
187 br
188 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
189 +text-field(placeholder='Placeholder' type='password' invalid=true)
190 br
191 br
192 +field-label('First name')(align='right' labelWidth='100px' disabled=true)
193 +text-field(placeholder='Placeholder' disabled=true)
194 br
195 br
196 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
197 +text-field(placeholder='Placeholder' type='password' disabled=true)
198 br
199 br
200 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
201 +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 243ff58..3b10ea0 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -12,5 +12,5 @@ mixin a-button
12 12
13 let href = attributes.disabled ? null : '#'; 13 let href = attributes.disabled ? null : '#';
14 14
15 a(class=classes href=href) 15 a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
16 block 16 block
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
new file mode 100644
index 0000000..151e084
--- /dev/null
+++ b/tpl/objects/field-label.pug
@@ -0,0 +1,23 @@
1mixin field-label(label, hint=null)
2 -
3 let classes = {
4 'o-field-label': true,
5 'o-field-label--left': attributes.align === 'left',
6 'o-field-label--right': attributes.align === 'right',
7 'is-invalid': attributes.invalid,
8 'is-disabled': attributes.disabled,
9 }
10 if (attributes.class) {
11 classes[attributes.class] = true;
12 }
13
14 let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right';
15
16 let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
17
18 div(class=classes)
19 .o-field-label__label(style=labelStyle class=attributes.labelClass)= label
20 .o-field-label__content(class=attributes.contentClass)
21 block
22 if hint
23 .o-field-label__hint= hint
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 9bbe0a1..9069200 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -8,6 +8,6 @@ mixin text-field
8 'is-disabled': attributes.disabled, 8 'is-disabled': attributes.disabled,
9 } 9 }
10 10
11 div(class=classes) 11 div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
12 input(class='o-text-field__input')&attributes(attributes) 12 input(class='o-text-field__input')&attributes(attributes)
13 .o-text-field__bg 13 .o-text-field__bg
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 11:15:49 +0000