From f932673fb4f6e6444cfdb50f5df4a4ab8465a038 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 6 Feb 2022 11:24:41 +0100
Subject: Improved form

---
 src/layouts/_form.scss | 44 +++++++++++++++++++++-----------------------
 1 file changed, 21 insertions(+), 23 deletions(-)

(limited to 'src/layouts')

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 @@
     ));
 
     @include iro.bem-layout(iro.props-namespace()) {
-        display:               grid;
-        grid-template-columns: auto 1fr;
-        grid-template-rows:    auto;
-        align-items:           baseline;
-        gap:                   iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
+        display:        flex;
+        flex-direction: column;
+        align-items:    baseline;
+        gap:            iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
     
-        @include iro.bem-elem('item') {
-            display: contents;
-        }
-    
-        @include iro.bem-elem('item-label') {
-            grid-column: 1;
-        }
+        @include iro.bem-modifier('labels-left', 'labels-right') {
+            display:               grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows:    auto;
     
-        @include iro.bem-elem('item-content') {
-            grid-column: 2;
+            @include iro.bem-elem('item') {
+                display: contents;
+            }
+        
+            @include iro.bem-elem('item-label') {
+                grid-column:   1;
+                padding-right: 0;
+            }
+        
+            @include iro.bem-elem('item-content') {
+                grid-column: 2;
+                margin-top:  0;
+            }
         }
     
         @include iro.bem-modifier('labels-right') {
@@ -33,14 +40,5 @@
                 text-align: right;
             }
         }
-    
-        @include iro.bem-modifier('labels-above') {
-            display:        flex;
-            flex-direction: column;
-    
-            @include iro.bem-elem('item') {
-                display: block;
-            }
-        }
     }
 }
-- 
cgit v1.2.3-54-g00ecf