Improved form

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 @@
     ));
 
     @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;
-            }
-        }
     }
 }
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 @@
         @include iro.bem-elem('native') {
             @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
     
+            width:  100%;
             color:  iro.props-get(--colors --text);
             resize: none;
 
@@ -145,7 +146,8 @@
             padding: 0;
 
             @include iro.bem-elem('native') {
-                padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
+                box-sizing: border-box;
+                padding:    iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
             }
         }