diff options
-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 | } |