diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/layouts/_form.scss | 44 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 4 |
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 | ||