From f5e5873d6929aae70d5e8f0bcae65d2d946b5ead Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 12:11:32 +0100 Subject: Improved text field --- src/objects/_text-field.scss | 81 +++++++++++++++++++++++++++++++++----------- 1 file changed, 61 insertions(+), 20 deletions(-) diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 2ea2739..51b8c5a 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -2,6 +2,34 @@ @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); + } + + &: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); + } + } + + &: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); + } + } +} + +@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); + } +} + @include iro.props-namespace('text-field') { @include iro.props-store(( --dims: ( @@ -112,31 +140,28 @@ } &:invalid { - @include iro.bem-sibling-elem('bg') { - border-color: iro.props-get(--colors --error --border); - box-shadow: iro.props-get(--colors --error --shadow); - } + @include invalid; + } + } - &: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); - } - } + @include iro.bem-is('invalid') { + @include iro.bem-elem('native') { + @include invalid; + } + } - &: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); - } + @include iro.bem-at-theme('keyboard') { + @include iro.bem-elem('native') { + &:focus, + &:invalid:focus { + @include keyboard-focus; } } - @include iro.bem-at-theme('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); + @include iro.bem-is('invalid') { + @include iro.bem-elem('native') { + &:focus { + @include keyboard-focus; } } } @@ -165,6 +190,22 @@ @include iro.bem-elem('bg') { border-color: iro.props-get(--colors --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); + } + } + } + + @include iro.bem-elem('native') { + &:invalid { + @include iro.bem-sibling-elem('bg') { + border-color: iro.props-get(--colors --disabled --border); + } + } + } } } } -- cgit v1.2.3-70-g09d2