summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/layouts/_form.scss44
-rw-r--r--src/objects/_text-field.scss4
2 files changed, 24 insertions, 24 deletions
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 9e6520f..3c7edcb 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -10,22 +10,29 @@
10 )); 10 ));
11 11
12 @include iro.bem-layout(iro.props-namespace()) { 12 @include iro.bem-layout(iro.props-namespace()) {
13 display: grid; 13 display: flex;
14 grid-template-columns: auto 1fr; 14 flex-direction: column;
15 grid-template-rows: auto; 15 align-items: baseline;
16 align-items: baseline; 16 gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
17 gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
18 17
19 @include iro.bem-elem('item') { 18 @include iro.bem-modifier('labels-left', 'labels-right') {
20 display: contents; 19 display: grid;
21 } 20 grid-template-columns: auto 1fr;
22 21 grid-template-rows: auto;
23 @include iro.bem-elem('item-label') {
24 grid-column: 1;
25 }
26 22
27 @include iro.bem-elem('item-content') { 23 @include iro.bem-elem('item') {
28 grid-column: 2; 24 display: contents;
25 }
26
27 @include iro.bem-elem('item-label') {
28 grid-column: 1;
29 padding-right: 0;
30 }
31
32 @include iro.bem-elem('item-content') {
33 grid-column: 2;
34 margin-top: 0;
35 }
29 } 36 }
30 37
31 @include iro.bem-modifier('labels-right') { 38 @include iro.bem-modifier('labels-right') {
@@ -33,14 +40,5 @@
33 text-align: right; 40 text-align: right;
34 } 41 }
35 } 42 }
36
37 @include iro.bem-modifier('labels-above') {
38 display: flex;
39 flex-direction: column;
40
41 @include iro.bem-elem('item') {
42 display: block;
43 }
44 }
45 } 43 }
46} 44}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 4201f00..2ea2739 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -78,6 +78,7 @@
78 @include iro.bem-elem('native') { 78 @include iro.bem-elem('native') {
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 width: 100%;
81 color: iro.props-get(--colors --text); 82 color: iro.props-get(--colors --text);
82 resize: none; 83 resize: none;
83 84
@@ -145,7 +146,8 @@
145 padding: 0; 146 padding: 0;
146 147
147 @include iro.bem-elem('native') { 148 @include iro.bem-elem('native') {
148 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 149 box-sizing: border-box;
150 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
149 } 151 }
150 } 152 }
151 153