From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/.old/objects/_field-label.scss | 89 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 src/.old/objects/_field-label.scss (limited to 'src/.old/objects/_field-label.scss') diff --git a/src/.old/objects/_field-label.scss b/src/.old/objects/_field-label.scss new file mode 100644 index 0000000..2127a09 --- /dev/null +++ b/src/.old/objects/_field-label.scss @@ -0,0 +1,89 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('field-label') { + @include iro.props-store(( + --dims: ( + --spacing-x: fn.global-dim(--size --150), + --spacing-y: fn.global-dim(--size --85), + --label-font-size: fn.global-dim(--font-size --75), + --hint-font-size: fn.global-dim(--font-size --75), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --label: fn.global-color(--fg-hi), + --hint: fn.global-color(--fg-hi), + --error-hint: fn.global-color(--accent --error --quiet --fg), + --disabled: fn.global-color(--fg-hi3), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + 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); + font-weight: 400; + line-height: 1.3; + + @include iro.bem-next-elem('content') { + margin-top: fn.dim(--spacing-y); + } + } + + @include iro.bem-elem('content') { + display: block; + width: 100%; + } + + @include iro.bem-elem('hint') { + display: block; + margin-top: fn.dim(--spacing-y); + color: fn.color(--hint); + font-size: fn.dim(--hint-font-size); + } + + @include iro.bem-is('invalid') { + @include iro.bem-elem('hint') { + color: fn.color(--error-hint); + } + } + + @include iro.bem-is('disabled') { + @include iro.bem-elem('label', 'hint') { + color: fn.color(--disabled); + } + } + + @include iro.bem-modifier('left', 'right') { + display: flex; + align-items: baseline; + + @include iro.bem-elem('label') { + display: inline-block; + + @include iro.bem-next-elem('content') { + margin-top: 0; + } + } + } + + @include iro.bem-modifier('left') { + @include iro.bem-elem('label') { + text-align: left; + } + } + + @include iro.bem-modifier('right') { + @include iro.bem-elem('label') { + text-align: right; + } + } + } +} -- cgit v1.2.3-54-g00ecf