Improved form

4 files changed, 26 insertions, 25 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);
             }
         }
 
diff --git a/tpl/index.pug b/tpl/index.pug
index 2ebb625..6971faa 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -276,7 +276,7 @@ html
             +rule(level='medium')
 
             +box
-                +form
+                +form(labelsAlign="left")
                     +form-item('Username')
                         +text-field(placeholder='Example: Volpeon')
 
diff --git a/tpl/objects/form.pug b/tpl/objects/form.pug
index 496ed48..24ac3f0 100644
--- a/tpl/objects/form.pug
+++ b/tpl/objects/form.pug
@@ -3,6 +3,7 @@ include field-label.pug
 mixin form
     form(class={
         'l-form':               true,
+        'l-form--labels-left':  attributes.labelsAlign === 'left',
         'l-form--labels-right': attributes.labelsAlign === 'right',
         'l-form--labels-above': attributes.labelsAlign === 'above'
         })