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/_text-field.scss | 232 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 src/.old/objects/_text-field.scss (limited to 'src/.old/objects/_text-field.scss') diff --git a/src/.old/objects/_text-field.scss b/src/.old/objects/_text-field.scss new file mode 100644 index 0000000..88c4535 --- /dev/null +++ b/src/.old/objects/_text-field.scss @@ -0,0 +1,232 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@mixin invalid { + @include iro.bem-sibling-elem('bg') { + border-color: fn.color(--error --border); + box-shadow: fn.color(--error --shadow); + } + + &:hover { + @include iro.bem-sibling-elem('bg') { + border-color: fn.color(--error --hover --border); + box-shadow: fn.color(--error --hover --shadow); + } + } + + &:focus { + @include iro.bem-sibling-elem('bg') { + border-color: fn.color(--error --focus --border); + box-shadow: fn.color(--error --focus --shadow); + } + } +} + +@mixin keyboard-focus { + @include iro.bem-sibling-elem('bg') { + border-color: fn.color(--key-focus --border); + box-shadow: fn.color(--key-focus --shadow); + } +} + +@include iro.props-namespace('text-field') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --125), + --pad-y: fn.global-dim(--size --125), + --border: fn.global-dim(--border --thin), + --rounding: 2px, + + --extended: ( + --pad: fn.global-dim(--size --50), + --rounding: 6px, + ), + + --focus: ( + --border: fn.global-dim(--border --medium), + ) + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--bg-hi2), + --placeholder: fn.global-color(--fg-hi2), + --text: fn.global-color(--fg), + --border: fn.global-color(--obj-lo), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --border: fn.global-color(--fg-hi2), + --shadow: 0 0 0 0 transparent, + ), + --focus: ( + --border: fn.global-color(--accent --primary --solid --bg), + --shadow: 0 0 0 0 transparent, + ), + --key-focus: ( + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), + ), + --error: ( + --border: fn.global-color(--accent --error --solid --bg-hi), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --border: fn.global-color(--accent --error --solid --bg), + --shadow: 0 0 0 0 transparent, + ), + --focus: ( + --border: fn.global-color(--accent --error --solid --bg), + --shadow: 0 0 0 0 transparent, + ), + ), + --disabled: ( + --bg: fn.global-color(--obj-hi), + --placeholder: fn.global-color(--fg-hi3), + --text: fn.global-color(--fg-hi3), + --border: fn.global-color(--obj-hi), + --shadow: 0 0 0 0 transparent, + ), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + $line-height: 1.4; + $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); + + position: relative; + min-width: 0; + border-radius: fn.dim(--rounding); + background-color: fn.color(--bg); + + @include iro.bem-elem('bg') { + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: fn.dim(--border) solid fn.color(--border); + border-radius: fn.dim(--rounding); + box-shadow: fn.color(--shadow); + pointer-events: none; + } + + @include iro.bem-elem('native') { + box-sizing: border-box; + width: 100%; + padding: calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x); + border: 1px solid transparent; + background-color: transparent; + color: fn.color(--text); + font: inherit; + line-height: $line-height; + resize: none; + appearance: none; + + &::placeholder { + opacity: 1; + color: fn.color(--placeholder); + font-style: italic; + } + + &:hover { + @include iro.bem-sibling-elem('bg') { + border-color: fn.color(--hover --border); + box-shadow: fn.color(--hover --shadow); + } + } + + &:focus { + outline: 0; + + @include iro.bem-sibling-elem('bg') { + top: $focus-border-offset; + right: $focus-border-offset; + bottom: $focus-border-offset; + left: $focus-border-offset; + border: fn.dim(--focus --border) solid fn.color(--focus --border); + border-radius: calc(fn.dim(--rounding) - $focus-border-offset); + box-shadow: fn.color(--focus --shadow); + } + } + + &:invalid { + @include invalid; + } + } + + @include iro.bem-modifier('extended') { + padding: fn.dim(--extended --pad); + + @include iro.bem-multi('&', 'elem' 'bg') { + border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); + } + + @include iro.bem-elem('native') { + &:focus { + @include iro.bem-sibling-elem('bg') { + border-radius: calc(fn.dim(--extended --rounding) - $focus-border-offset); + } + } + } + } + + @include iro.bem-is('invalid') { + @include iro.bem-elem('native') { + @include invalid; + } + } + + @include iro.bem-at-theme('keyboard') { + @include iro.bem-elem('native') { + &:focus, + &:invalid:focus { + @include keyboard-focus; + } + } + + @include iro.bem-is('invalid') { + @include iro.bem-elem('native') { + &:focus { + @include keyboard-focus; + } + } + } + } + + @include iro.bem-is('disabled') { + background-color: fn.color(--disabled --bg); + box-shadow: fn.color(--disabled --shadow); + + @include iro.bem-elem('native') { + color: fn.color(--disabled --text); + + &::placeholder { + color: fn.color(--disabled --placeholder); + } + } + + @include iro.bem-elem('bg') { + border-color: fn.color(--disabled --border); + } + + @include iro.bem-is('invalid') { + @include iro.bem-elem('native') { + @include iro.bem-sibling-elem('bg') { + border-color: fn.color(--disabled --border); + } + } + } + + @include iro.bem-elem('native') { + &:invalid { + @include iro.bem-sibling-elem('bg') { + border-color: fn.color(--disabled --border); + } + } + } + } + } +} -- cgit v1.2.3-54-g00ecf