diff options
| author | Volpeon <git@volpeon.ink> | 2022-02-06 12:11:32 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-02-06 12:11:32 +0100 |
| commit | f5e5873d6929aae70d5e8f0bcae65d2d946b5ead (patch) | |
| tree | 5a732f72142c5e84b67639e876d8d2eec55c7c65 /src/objects | |
| parent | Improved form (diff) | |
| download | iro-design-f5e5873d6929aae70d5e8f0bcae65d2d946b5ead.tar.gz iro-design-f5e5873d6929aae70d5e8f0bcae65d2d946b5ead.tar.bz2 iro-design-f5e5873d6929aae70d5e8f0bcae65d2d946b5ead.zip | |
Improved text field
Diffstat (limited to 'src/objects')
| -rw-r--r-- | src/objects/_text-field.scss | 81 |
1 files 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 @@ | |||
| 2 | @use '../vars'; | 2 | @use '../vars'; |
| 3 | @use '../mixins/typography'; | 3 | @use '../mixins/typography'; |
| 4 | 4 | ||
| 5 | @mixin invalid { | ||
| 6 | @include iro.bem-sibling-elem('bg') { | ||
| 7 | border-color: iro.props-get(--colors --error --border); | ||
| 8 | box-shadow: iro.props-get(--colors --error --shadow); | ||
| 9 | } | ||
| 10 | |||
| 11 | &:hover { | ||
| 12 | @include iro.bem-sibling-elem('bg') { | ||
| 13 | border-color: iro.props-get(--colors --error --hover --border); | ||
| 14 | box-shadow: iro.props-get(--colors --error --hover --shadow); | ||
| 15 | } | ||
| 16 | } | ||
| 17 | |||
| 18 | &:focus { | ||
| 19 | @include iro.bem-sibling-elem('bg') { | ||
| 20 | border-color: iro.props-get(--colors --error --focus --border); | ||
| 21 | box-shadow: iro.props-get(--colors --error --focus --shadow); | ||
| 22 | } | ||
| 23 | } | ||
| 24 | } | ||
| 25 | |||
| 26 | @mixin keyboard-focus { | ||
| 27 | @include iro.bem-sibling-elem('bg') { | ||
| 28 | border-color: iro.props-get(--colors --key-focus --border); | ||
| 29 | box-shadow: iro.props-get(--colors --key-focus --shadow); | ||
| 30 | } | ||
| 31 | } | ||
| 32 | |||
| 5 | @include iro.props-namespace('text-field') { | 33 | @include iro.props-namespace('text-field') { |
| 6 | @include iro.props-store(( | 34 | @include iro.props-store(( |
| 7 | --dims: ( | 35 | --dims: ( |
| @@ -112,31 +140,28 @@ | |||
| 112 | } | 140 | } |
| 113 | 141 | ||
| 114 | &:invalid { | 142 | &:invalid { |
| 115 | @include iro.bem-sibling-elem('bg') { | 143 | @include invalid; |
| 116 | border-color: iro.props-get(--colors --error --border); | 144 | } |
| 117 | box-shadow: iro.props-get(--colors --error --shadow); | 145 | } |
| 118 | } | ||
| 119 | 146 | ||
| 120 | &:hover { | 147 | @include iro.bem-is('invalid') { |
| 121 | @include iro.bem-sibling-elem('bg') { | 148 | @include iro.bem-elem('native') { |
| 122 | border-color: iro.props-get(--colors --error --hover --border); | 149 | @include invalid; |
| 123 | box-shadow: iro.props-get(--colors --error --hover --shadow); | 150 | } |
| 124 | } | 151 | } |
| 125 | } | ||
| 126 | 152 | ||
| 127 | &:focus { | 153 | @include iro.bem-at-theme('keyboard') { |
| 128 | @include iro.bem-sibling-elem('bg') { | 154 | @include iro.bem-elem('native') { |
| 129 | border-color: iro.props-get(--colors --error --focus --border); | 155 | &:focus, |
| 130 | box-shadow: iro.props-get(--colors --error --focus --shadow); | 156 | &:invalid:focus { |
| 131 | } | 157 | @include keyboard-focus; |
| 132 | } | 158 | } |
| 133 | } | 159 | } |
| 134 | 160 | ||
| 135 | @include iro.bem-at-theme('keyboard') { | 161 | @include iro.bem-is('invalid') { |
| 136 | &:focus { | 162 | @include iro.bem-elem('native') { |
| 137 | @include iro.bem-sibling-elem('bg') { | 163 | &:focus { |
| 138 | border-color: iro.props-get(--colors --key-focus --border); | 164 | @include keyboard-focus; |
| 139 | box-shadow: iro.props-get(--colors --key-focus --shadow); | ||
| 140 | } | 165 | } |
| 141 | } | 166 | } |
| 142 | } | 167 | } |
| @@ -165,6 +190,22 @@ | |||
| 165 | @include iro.bem-elem('bg') { | 190 | @include iro.bem-elem('bg') { |
| 166 | border-color: iro.props-get(--colors --disabled --border); | 191 | border-color: iro.props-get(--colors --disabled --border); |
| 167 | } | 192 | } |
| 193 | |||
| 194 | @include iro.bem-is('invalid') { | ||
| 195 | @include iro.bem-elem('native') { | ||
| 196 | @include iro.bem-sibling-elem('bg') { | ||
| 197 | border-color: iro.props-get(--colors --disabled --border); | ||
| 198 | } | ||
| 199 | } | ||
| 200 | } | ||
| 201 | |||
| 202 | @include iro.bem-elem('native') { | ||
| 203 | &:invalid { | ||
| 204 | @include iro.bem-sibling-elem('bg') { | ||
| 205 | border-color: iro.props-get(--colors --disabled --border); | ||
| 206 | } | ||
| 207 | } | ||
| 208 | } | ||
| 168 | } | 209 | } |
| 169 | } | 210 | } |
| 170 | } | 211 | } |