summaryrefslogtreecommitdiffstats
path: root/src/layouts
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 11:24:41 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 11:24:41 +0100
commitf932673fb4f6e6444cfdb50f5df4a4ab8465a038 (patch)
tree75052efa371dacce844180e43dc929602b571d6d /src/layouts
parentAdded form (diff)
downloadiro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.tar.gz
iro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.tar.bz2
iro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.zip
Improved form
Diffstat (limited to 'src/layouts')
-rw-r--r--src/layouts/_form.scss44
1 files changed, 21 insertions, 23 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}