Update

5 files changed, 14 insertions, 22 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 8ac1b01..ce0220a 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -63,7 +63,7 @@ $dirs: (
         margin#{$suffix}: auto;
     }
 
-    @each $size in (0 50 100) {
+    @each $size in (0 10 50 100 200) {
         @include iro.bem-utility('m#{$dir}-#{$size}') {
             margin#{$suffix}: fn.global-dim(--size --#{$size});
         }
@@ -75,7 +75,7 @@ $dirs: (
         padding#{$suffix}: auto;
     }
 
-    @each $size in (0 50 100) {
+    @each $size in (0 10 50 100 200) {
         @include iro.bem-utility('p#{$dir}-#{$size}') {
             padding#{$suffix}: fn.global-dim(--size --#{$size});
         }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 8228c44..15dca2e 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -15,13 +15,17 @@
     @include iro.bem-layout(iro.props-namespace()) {
         display:        flex;
         flex-direction: column;
-        align-items:    baseline;
         gap:            fn.dim(--item-spacing-y) fn.dim(--label-spacing-x);
     
+        @include iro.bem-elem('item') {
+            display: block;
+        }
+    
         @include iro.bem-modifier('labels-left', 'labels-right') {
             display:               grid;
             grid-template-columns: auto 1fr;
             grid-template-rows:    auto;
+            align-items:           baseline;
     
             @include iro.bem-elem('item') {
                 display: contents;
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index b0b435f..ad6e7db 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -76,6 +76,7 @@
             grid-area:  body;
             min-height: 0;
             margin-top: fn.dim(--title-body-spacing);
+            overflow:   auto;
         }
 
         @include iro.bem-elem('footer') {
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index e990568..4195e11 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -21,10 +21,11 @@
     ), 'colors');
 
     @include iro.bem-object(iro.props-namespace()) {
-        display: inline-block;
+        display: block;
 
         @include iro.bem-elem('label') {
             display:       block;
+            flex:          0 0 auto;
             padding-right: fn.dim(--spacing-x);
             color:         fn.color(--label);
             font-size:     fn.dim(--label-font-size);
@@ -37,7 +38,8 @@
         }
     
         @include iro.bem-elem('content') {
-            display: inline-block;
+            display: block;
+            width:   100%;
         }
     
         @include iro.bem-elem('hint') {
@@ -60,7 +62,7 @@
         }
     
         @include iro.bem-modifier('left', 'right') {
-            display:     inline-flex;
+            display:     flex;
             align-items: baseline;
     
             @include iro.bem-elem('label') {
diff --git a/tpl/index.pug b/tpl/index.pug
index 4926889..623a513 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -166,23 +166,18 @@ html
                 +field-label('First name')
                     +text-field(placeholder='Placeholder')
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')
                     +text-field(placeholder='Placeholder' type='password')
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(invalid=true)
                     +text-field(placeholder='Placeholder' type='password' invalid=true)
                 br
-                br
                 +field-label('First name')(disabled=true)
                     +text-field(placeholder='Placeholder' disabled=true)
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(disabled=true)
                     +text-field(placeholder='Placeholder' type='password' disabled=true)
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
                     +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
 
@@ -190,23 +185,18 @@ html
                 +field-label('First name')(align='left' labelWidth='100px')
                     +text-field(placeholder='Placeholder')
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
                     +text-field(placeholder='Placeholder' type='password')
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
                     +text-field(placeholder='Placeholder' type='password' invalid=true)
                 br
-                br
                 +field-label('First name')(align='left' labelWidth='100px' disabled=true)
                     +text-field(placeholder='Placeholder' disabled=true)
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
                     +text-field(placeholder='Placeholder' type='password' disabled=true)
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
                     +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
 
@@ -214,23 +204,18 @@ html
                 +field-label('First name')(align='right' labelWidth='100px')
                     +text-field(placeholder='Placeholder')
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
                     +text-field(placeholder='Placeholder' type='password')
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
                     +text-field(placeholder='Placeholder' type='password' invalid=true)
                 br
-                br
                 +field-label('First name')(align='right' labelWidth='100px' disabled=true)
                     +text-field(placeholder='Placeholder' disabled=true)
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
                     +text-field(placeholder='Placeholder' type='password' disabled=true)
                 br
-                br
                 +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
                     +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
 
@@ -473,7 +458,7 @@ html
                     +action-button(quiet=true selected=true)= 'Menu'
                     +action-menu
                         +action-menu-slot(class='l-card l-card--flush')
-                            +avatar(block=true circle=true size='75' src='avatar.png' class='l-card__block')
+                            +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block')
                             .l-card__block.l-card__block--main
                                 strong.u-d-block= 'Volpeon'
                                 small.u-d-block= '@volpeon@mk.vulpes.one'