From c41e16f6044548e27fbf8e4ef65ed3067278c80b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 17:14:45 +0200 Subject: Update --- src/objects/_text-field.scss | 139 ++++++++++++++----------------------------- 1 file changed, 45 insertions(+), 94 deletions(-) (limited to 'src/objects/_text-field.scss') diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index cfb5a6d..793d23a 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,100 +1,51 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; -@mixin invalid { - $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); +@forward 'text-field.vars'; +@use 'text-field.vars' as vars; + +@mixin -invalid { + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); @include iro.bem-sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; - border: fn.dim(--focus --border) solid fn.color(--error --border); - border-radius: calc(fn.dim(--rounding) - $focus-border-offset); + border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--error --hover --border); + border-color: props.get(vars.$error--hover--border-color); } } &:focus { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--error --focus --border); + border-color: props.get(vars.$error--focus--border-color); } } } -@mixin keyboard-focus { +@mixin -keyboard-focus { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--key-focus --border); - outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); - //outline-offset: fn.dim(--focus --border); + border-color: props.get(vars.$key-focus--border-color); + outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); + //outline-offset: props.get(vars.$focus --border); } } -@include iro.props-namespace('text-field') { - @include iro.props-store(( - --dims: ( - --line-height: 1.4, - --pad-i: fn.global-dim(--size --125), - --pad-b: fn.global-dim(--size --125), - --border: fn.global-dim(--border --thin), - --rounding: fn.global-dim(--rounding), - - --extended: ( - --pad: fn.global-dim(--size --50), - ), - - --focus: ( - --border: fn.global-dim(--border --medium), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --outline), - ), - ), - --colors: ( - --bg: fn.global-color(--base --50), - --placeholder: fn.global-color(--text-mute-more), - --text: fn.global-color(--text), - --border: fn.global-color(--border-strong), - - --hover: ( - --border: fn.global-color(--text-mute-more), - ), - --focus: ( - --border: fn.global-color(--focus --border), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - --error: ( - --border: fn.global-color(--negative --700), - - --hover: ( - --border: fn.global-color(--negative --900), - ), - --focus: ( - --border: fn.global-color(--negative --900), - ), - ), - --disabled: ( - --bg: fn.global-color(--border-mute), - --placeholder: fn.global-color(--text-disabled), - --text: fn.global-color(--text-disabled), - --border: fn.global-color(--border-mute), - ), - ), - )); - - @include iro.bem-object(iro.props-namespace()) { - $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('text-field') { + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); position: relative; min-inline-size: 0; - background-color: fn.color(--bg); - border-radius: fn.dim(--rounding); + background-color: props.get(vars.$bg-color); + border-radius: props.get(vars.$rounding); @include iro.bem-elem('bg') { position: absolute; @@ -102,18 +53,18 @@ inset-inline: 0; display: block; pointer-events: none; - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); } @include iro.bem-elem('native') { box-sizing: border-box; inline-size: 100%; - padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); - padding-inline: fn.dim(--pad-i); + padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); + padding-inline: props.get(vars.$pad-i); font: inherit; - line-height: fn.dim(--line-height); - color: fn.color(--text); + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); appearance: none; resize: none; background-color: transparent; @@ -121,13 +72,13 @@ &::placeholder { font-style: italic; - color: fn.color(--placeholder); + color: props.get(vars.$placeholder-color); opacity: 1; } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--hover --border); + border-color: props.get(vars.$hover--border-color); } } @@ -137,32 +88,32 @@ @include iro.bem-sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; - border: fn.dim(--focus --border) solid fn.color(--focus --border); - border-radius: calc(fn.dim(--rounding) - $focus-border-offset); + border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } } &:invalid { - @include invalid; + @include -invalid; } &:focus-visible, &:invalid:focus-visible { - @include keyboard-focus; + @include -keyboard-focus; } } @include iro.bem-modifier('extended') { - padding: fn.dim(--extended --pad); + padding: props.get(vars.$extended--pad); @include iro.bem-multi('&', 'elem' 'bg') { - border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); } @include iro.bem-elem('native') { &:focus { @include iro.bem-sibling-elem('bg') { - border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); } } } @@ -170,33 +121,33 @@ @include iro.bem-is('invalid') { @include iro.bem-elem('native') { - @include invalid; + @include -invalid; &:focus-visible { - @include keyboard-focus; + @include -keyboard-focus; } } } @include iro.bem-is('disabled') { - background-color: fn.color(--disabled --bg); + background-color: props.get(vars.$disabled--bg-color); @include iro.bem-elem('native') { - color: fn.color(--disabled --text); + color: props.get(vars.$disabled--text-color); &::placeholder { - color: fn.color(--disabled --placeholder); + color: props.get(vars.$disabled--placeholder-color); } } @include iro.bem-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } @include iro.bem-is('invalid') { @include iro.bem-elem('native') { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } } } @@ -204,7 +155,7 @@ @include iro.bem-elem('native') { &:invalid { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } } } -- cgit v1.2.3-70-g09d2