From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src_old/layouts/_form.scss | 62 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src_old/layouts/_form.scss (limited to 'src_old/layouts/_form.scss') diff --git a/src_old/layouts/_form.scss b/src_old/layouts/_form.scss new file mode 100644 index 0000000..f6b60ea --- /dev/null +++ b/src_old/layouts/_form.scss @@ -0,0 +1,62 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +// @use '../objects/field-label'; + +@include iro.props-namespace('form') { + @include iro.props-store(( + --dims: ( + --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), + ), + )); + + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + flex-direction: column; + gap: fn.dim(--item-spacing-b) fn.dim(--label-spacing-i); + + @include iro.bem-elem('item') { + display: block; + } + + @include iro.bem-elem('item-content') { + @include iro.bem-modifier('align-start') { + align-self: start; + } + } + + @include iro.bem-modifier('row') { + flex-direction: row; + align-items: flex-end; + } + + @include iro.bem-modifier('labels-start', 'labels-end') { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto; + align-items: baseline; + + @include iro.bem-elem('item') { + display: contents; + } + + @include iro.bem-elem('item-label') { + grid-column: 1; + padding-inline-end: 0; + } + + @include iro.bem-elem('item-content') { + grid-column: 2; + margin-block-start: 0; + } + } + + @include iro.bem-modifier('labels-end') { + @include iro.bem-elem('item-label') { + text-align: end; + } + } + } +} -- cgit v1.2.3-70-g09d2