From 3524f1bac11c8a9d1640bfeac5ceb063ff96d623 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 17:17:33 +0100 Subject: Improved variable structure --- src/objects/_text-field.scss | 96 +++++++++++++++++++++++--------------------- 1 file changed, 50 insertions(+), 46 deletions(-) (limited to 'src/objects/_text-field.scss') diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 51b8c5a..aef79d7 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,32 +1,33 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @use '../vars'; @use '../mixins/typography'; @mixin invalid { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --error --border); - box-shadow: iro.props-get(--colors --error --shadow); + border-color: fn.color(--error --border); + box-shadow: fn.color(--error --shadow); } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --error --hover --border); - box-shadow: iro.props-get(--colors --error --hover --shadow); + border-color: fn.color(--error --hover --border); + box-shadow: fn.color(--error --hover --shadow); } } &:focus { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --error --focus --border); - box-shadow: iro.props-get(--colors --error --focus --shadow); + 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: iro.props-get(--colors --key-focus --border); - box-shadow: iro.props-get(--colors --key-focus --shadow); + border-color: fn.color(--key-focus --border); + box-shadow: fn.color(--key-focus --shadow); } } @@ -35,60 +36,63 @@ --dims: ( --padding-x: .6rem, --padding-y: .5rem, - --border-width: iro.props-get(--dims --border-width --thin, $global: true), + --border-width: fn.dim(--border-width --thin, $global: true), --border-radius: 2px, --focus: ( - --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --border-width: fn.dim(--border-width --medium, $global: true), ) ), + ), 'dims'); + + @include iro.props-store(( --colors: ( - --bg: iro.props-get(--colors --bg-hi2, $global: true), - --placeholder: iro.props-get(--colors --fg-hi2, $global: true), - --text: iro.props-get(--colors --fg, $global: true), - --border: iro.props-get(--colors --obj-lo, $global: true), + --bg: fn.color(--bg-hi2, $global: true), + --placeholder: fn.color(--fg-hi2, $global: true), + --text: fn.color(--fg, $global: true), + --border: fn.color(--obj-lo, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --border: iro.props-get(--colors --fg-hi2, $global: true), + --border: fn.color(--fg-hi2, $global: true), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: iro.props-get(--colors --accent --primary, $global: true), + --border: fn.color(--accent --primary, $global: true), --shadow: 0 0 0 0 transparent, ), --key-focus: ( - --border: iro.props-get(--colors --focus --fill, $global: true), - --shadow: iro.props-get(--colors --focus --shadow, $global: true), + --border: fn.color(--focus --fill, $global: true), + --shadow: fn.color(--focus --shadow, $global: true), ), --error: ( - --border: iro.props-get(--colors --accent --error-hi, $global: true), + --border: fn.color(--accent --error-hi, $global: true), --shadow: 0 0 0 0 transparent, --hover: ( - --border: iro.props-get(--colors --accent --error, $global: true), + --border: fn.color(--accent --error, $global: true), --shadow: 0 0 0 0 transparent, ), --focus: ( - --border: iro.props-get(--colors --accent --error, $global: true), + --border: fn.color(--accent --error, $global: true), --shadow: 0 0 0 0 transparent, ), ), --disabled: ( - --bg: iro.props-get(--colors --obj-hi, $global: true), - --placeholder: iro.props-get(--colors --fg-hi3, $global: true), - --text: iro.props-get(--colors --fg-hi3, $global: true), - --border: iro.props-get(--colors --obj-hi, $global: true), + --bg: fn.color(--obj-hi, $global: true), + --placeholder: fn.color(--fg-hi3, $global: true), + --text: fn.color(--fg-hi3, $global: true), + --border: fn.color(--obj-hi, $global: true), --shadow: 0 0 0 0 transparent, ), ), - )); + ), 'colors'); @include iro.bem-object(iro.props-namespace()) { position: relative; min-width: 0; - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); - background-color: iro.props-get(--colors --bg); + padding: fn.dim(--padding-y) fn.dim(--padding-x); + background-color: fn.color(--bg); @include iro.bem-elem('bg') { display: block; @@ -97,9 +101,9 @@ right: 0; bottom: 0; left: 0; - border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --border); - border-radius: iro.props-get(--dims --border-radius); - box-shadow: iro.props-get(--colors --shadow); + border: fn.dim(--border-width) solid fn.color(--border); + border-radius: fn.dim(--border-radius); + box-shadow: fn.color(--shadow); pointer-events: none; } @@ -107,19 +111,19 @@ @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); width: 100%; - color: iro.props-get(--colors --text); + color: fn.color(--text); resize: none; &::placeholder { opacity: 1; - color: iro.props-get(--colors --placeholder); + color: fn.color(--placeholder); font-style: italic; } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --hover --border); - box-shadow: iro.props-get(--colors --hover --shadow); + border-color: fn.color(--hover --border); + box-shadow: fn.color(--hover --shadow); } } @@ -127,15 +131,15 @@ outline: 0; @include iro.bem-sibling-elem('bg') { - $offset: calc(iro.props-get(--dims --border-width) - iro.props-get(--dims --focus --border-width)); + $offset: calc(fn.dim(--border-width) - fn.dim(--focus --border-width)); top: $offset; right: $offset; bottom: $offset; left: $offset; - border: iro.props-get(--dims --focus --border-width) solid iro.props-get(--colors --focus --border); - border-radius: calc(iro.props-get(--dims --border-radius) - $offset); - box-shadow: iro.props-get(--colors --focus --shadow); + border: fn.dim(--focus --border-width) solid fn.color(--focus --border); + border-radius: calc(fn.dim(--border-radius) - $offset); + box-shadow: fn.color(--focus --shadow); } } @@ -172,29 +176,29 @@ @include iro.bem-elem('native') { box-sizing: border-box; - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + padding: fn.dim(--padding-y) fn.dim(--padding-x); } } @include iro.bem-is('disabled') { - background-color: iro.props-get(--colors --disabled --bg); + background-color: fn.color(--disabled --bg); @include iro.bem-elem('native') { - color: iro.props-get(--colors --disabled --text); + color: fn.color(--disabled --text); &::placeholder { - color: iro.props-get(--colors --disabled --placeholder); + color: fn.color(--disabled --placeholder); } } @include iro.bem-elem('bg') { - border-color: iro.props-get(--colors --disabled --border); + border-color: fn.color(--disabled --border); } @include iro.bem-is('invalid') { @include iro.bem-elem('native') { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --disabled --border); + border-color: fn.color(--disabled --border); } } } @@ -202,7 +206,7 @@ @include iro.bem-elem('native') { &:invalid { @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --disabled --border); + border-color: fn.color(--disabled --border); } } } -- cgit v1.2.3-54-g00ecf