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 +++++--- 4 files changed, 13 insertions(+), 6 deletions(-) (limited to 'src') 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') { -- cgit v1.2.3-54-g00ecf