From 0ff123a5b12feb73dedc2bbf5420828faa570685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 1 Mar 2022 16:52:13 +0100 Subject: Update --- src/_utils.scss | 4 ++-- src/layouts/_form.scss | 6 +++++- src/objects/_dialog.scss | 1 + src/objects/_field-label.scss | 8 +++++--- tpl/index.pug | 17 +---------------- 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' -- cgit v1.2.3-70-g09d2