summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 12:11:32 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 12:11:32 +0100
commitf5e5873d6929aae70d5e8f0bcae65d2d946b5ead (patch)
tree5a732f72142c5e84b67639e876d8d2eec55c7c65 /src
parentImproved form (diff)
downloadiro-design-f5e5873d6929aae70d5e8f0bcae65d2d946b5ead.tar.gz
iro-design-f5e5873d6929aae70d5e8f0bcae65d2d946b5ead.tar.bz2
iro-design-f5e5873d6929aae70d5e8f0bcae65d2d946b5ead.zip
Improved text field
Diffstat (limited to 'src')
-rw-r--r--src/objects/_text-field.scss81
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}