Fix form

5 files changed, 39 insertions, 38 deletions

diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 9c741ec..f6b60ea 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -6,8 +6,8 @@
 @include iro.props-namespace('form') {
     @include iro.props-store((
         --dims: (
-            --item-spacing-y:  fn.global-dim(--size --325),
-            --label-spacing-x: fn.global-dim(--size --325),
+            --item-spacing-b:  fn.global-dim(--size --325),
+            --label-spacing-i: fn.global-dim(--size --325),
             --hint-font-size:  fn.global-dim(--font-size --75),
         ),
     ));
@@ -15,7 +15,7 @@
     @include iro.bem-layout(iro.props-namespace()) {
         display:        flex;
         flex-direction: column;
-        gap:            fn.dim(--item-spacing-y) fn.dim(--label-spacing-x);
+        gap:            fn.dim(--item-spacing-b) fn.dim(--label-spacing-i);
     
         @include iro.bem-elem('item') {
             display: block;
@@ -32,7 +32,7 @@
             align-items:    flex-end;
         }
     
-        @include iro.bem-modifier('labels-left', 'labels-right') {
+        @include iro.bem-modifier('labels-start', 'labels-end') {
             display:               grid;
             grid-template-columns: auto 1fr;
             grid-template-rows:    auto;
@@ -43,19 +43,19 @@
             }
         
             @include iro.bem-elem('item-label') {
-                grid-column:   1;
-                padding-right: 0;
+                grid-column:        1;
+                padding-inline-end: 0;
             }
         
             @include iro.bem-elem('item-content') {
-                grid-column: 2;
-                margin-top:  0;
+                grid-column:        2;
+                margin-block-start: 0;
             }
         }
     
-        @include iro.bem-modifier('labels-right') {
+        @include iro.bem-modifier('labels-end') {
             @include iro.bem-elem('item-label') {
-                text-align: right;
+                text-align: end;
             }
         }
     }
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 9f267cb..1518ea6 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -35,8 +35,8 @@
         }
     
         @include iro.bem-elem('content') {
-            display:     block;
-            inline-size: 100%;
+            display: block;
+            flex:    1 1 auto;
         }
     
         @include iro.bem-elem('hint') {
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index a67aa8d..e1f1132 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -16,17 +16,17 @@
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
                 --border-offset: fn.global-dim(--key-focus --border-offset),
-                --outline:       fn.global-dim(--key-focus --border),
+                --outline:       fn.global-dim(--key-focus --outline),
             ),
         ),
         --colors: (
             --track-bg:      fn.global-color(--border),
-            --handle-border: fn.global-color(--text-mute),
+            --handle-border: fn.global-color(--text-mute-more),
             --handle-bg:     fn.global-color(--base --50),
     
             --hover: (
                 --label:         fn.global-color(--heading),
-                --handle-border: fn.global-color(--text),
+                --handle-border: fn.global-color(--text-mute),
             ),
             --accent: (
                 --handle-border: fn.global-color(--accent --900),
diff --git a/tpl/objects/form.pug b/tpl/objects/form.pug
index 24ac3f0..cbb1758 100644
--- a/tpl/objects/form.pug
+++ b/tpl/objects/form.pug
@@ -3,8 +3,8 @@ 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-start': attributes.labelsAlign === 'start',
+        'l-form--labels-end':   attributes.labelsAlign === 'end',
         'l-form--labels-above': attributes.labelsAlign === 'above'
         })
         block
diff --git a/tpl/views/form.pug b/tpl/views/form.pug
index 859e9a6..5b24757 100644
--- a/tpl/views/form.pug
+++ b/tpl/views/form.pug
@@ -1,29 +1,30 @@
 mixin view-form 
     +view('form', 'Form')
-        .c-box
-            +form(labelsAlign="left")
-                +form-item('Username')
-                    +text-field(placeholder='Example: Volpeon')
+        each align in ['above', 'start', 'end']
+            .c-box
+                +form(labelsAlign=align)
+                    +form-item('Username')
+                        +text-field(placeholder='Example: Volpeon')
 
-                +form-item('Password', 'At least 6 characters, all characters allowed')
-                    +text-field(placeholder='Example: hunter2' type='password')
+                    +form-item('Password', 'At least 6 characters, all characters allowed')
+                        +text-field(placeholder='Example: hunter2' type='password')
 
-                +form-item('Bio')
-                    +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
+                    +form-item('Bio')
+                        +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
 
-                +form-item('Favorite animal')
-                    +radio(name="form-demo-1" checked=true)= 'Foxes'
-                    +radio(name="form-demo-1")= 'Other'
+                    +form-item('Favorite animal')
+                        +radio(name="form-demo-1" checked=true)= 'Foxes'
+                        +radio(name="form-demo-1")= 'Other'
 
-                +form-item('Notification settings')
-                    +switch= 'In-app notifications'
-                    br
-                    +switch= 'Desktop notifications'
-                    br
-                    +switch= 'Email notifications'
+                    +form-item('Notification settings')
+                        +switch= 'In-app notifications'
+                        br
+                        +switch= 'Desktop notifications'
+                        br
+                        +switch= 'Email notifications'
 
-                +form-item('')
-                    +checkbox= 'I\'ve read and accept the terms and conditions'
+                    +form-item('')
+                        +checkbox= 'I\'ve read and accept the terms and conditions'
 
-                +form-item('')
-                    +a-button(variant='primary')= 'Register'
+                    +form-item('')
+                        +a-button(variant='primary')= 'Register'