From bfd2f3750498826f457f96b7dd89476589fa31cd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 25 Jun 2024 19:17:42 +0200 Subject: Fix form --- src/layouts/_form.scss | 20 ++++++++++---------- src/objects/_field-label.scss | 4 ++-- src/objects/_switch.scss | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) (limited to 'src') 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), -- cgit v1.2.3-70-g09d2