summaryrefslogtreecommitdiffstats
path: root/src/objects/_text-field.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_text-field.scss')
-rw-r--r--src/objects/_text-field.scss48
1 files changed, 24 insertions, 24 deletions
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index b945866..0f96634 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,5 +1,5 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/bem' as bem;
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../props' as *; 4@use '../props' as *;
5 5
@@ -9,7 +9,7 @@
9@mixin -invalid { 9@mixin -invalid {
10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
11 11
12 @include iro.bem-sibling-elem('bg') { 12 @include bem.sibling-elem('bg') {
13 inset-block: $focus-border-offset; 13 inset-block: $focus-border-offset;
14 inset-inline: $focus-border-offset; 14 inset-inline: $focus-border-offset;
15 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); 15 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
@@ -17,20 +17,20 @@
17 } 17 }
18 18
19 &:hover { 19 &:hover {
20 @include iro.bem-sibling-elem('bg') { 20 @include bem.sibling-elem('bg') {
21 border-color: props.get(vars.$error--hover--border-color); 21 border-color: props.get(vars.$error--hover--border-color);
22 } 22 }
23 } 23 }
24 24
25 &:focus { 25 &:focus {
26 @include iro.bem-sibling-elem('bg') { 26 @include bem.sibling-elem('bg') {
27 border-color: props.get(vars.$error--focus--border-color); 27 border-color: props.get(vars.$error--focus--border-color);
28 } 28 }
29 } 29 }
30} 30}
31 31
32@mixin -keyboard-focus { 32@mixin -keyboard-focus {
33 @include iro.bem-sibling-elem('bg') { 33 @include bem.sibling-elem('bg') {
34 border-color: props.get(vars.$key-focus--border-color); 34 border-color: props.get(vars.$key-focus--border-color);
35 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); 35 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
36 //outline-offset: props.get(vars.$focus --border); 36 //outline-offset: props.get(vars.$focus --border);
@@ -40,7 +40,7 @@
40@mixin styles { 40@mixin styles {
41 @include materialize-at-root(meta.module-variables('vars')); 41 @include materialize-at-root(meta.module-variables('vars'));
42 42
43 @include iro.bem-object('text-field') { 43 @include bem.object('text-field') {
44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
45 45
46 position: relative; 46 position: relative;
@@ -48,7 +48,7 @@
48 background-color: props.get(vars.$bg-color); 48 background-color: props.get(vars.$bg-color);
49 border-radius: props.get(vars.$rounding); 49 border-radius: props.get(vars.$rounding);
50 50
51 @include iro.bem-elem('bg') { 51 @include bem.elem('bg') {
52 position: absolute; 52 position: absolute;
53 inset-block: 0; 53 inset-block: 0;
54 inset-inline: 0; 54 inset-inline: 0;
@@ -58,7 +58,7 @@
58 border-radius: props.get(vars.$rounding); 58 border-radius: props.get(vars.$rounding);
59 } 59 }
60 60
61 @include iro.bem-elem('native') { 61 @include bem.elem('native') {
62 box-sizing: border-box; 62 box-sizing: border-box;
63 inline-size: 100%; 63 inline-size: 100%;
64 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); 64 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
@@ -78,7 +78,7 @@
78 } 78 }
79 79
80 &:hover { 80 &:hover {
81 @include iro.bem-sibling-elem('bg') { 81 @include bem.sibling-elem('bg') {
82 border-color: props.get(vars.$hover--border-color); 82 border-color: props.get(vars.$hover--border-color);
83 } 83 }
84 } 84 }
@@ -86,7 +86,7 @@
86 &:focus { 86 &:focus {
87 outline: 0; 87 outline: 0;
88 88
89 @include iro.bem-sibling-elem('bg') { 89 @include bem.sibling-elem('bg') {
90 inset-block: $focus-border-offset; 90 inset-block: $focus-border-offset;
91 inset-inline: $focus-border-offset; 91 inset-inline: $focus-border-offset;
92 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); 92 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
@@ -104,24 +104,24 @@
104 } 104 }
105 } 105 }
106 106
107 @include iro.bem-modifier('extended') { 107 @include bem.modifier('extended') {
108 padding: props.get(vars.$extended--pad); 108 padding: props.get(vars.$extended--pad);
109 109
110 @include iro.bem-multi('&', 'elem' 'bg') { 110 @include bem.multi('&', 'elem' 'bg') {
111 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); 111 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
112 } 112 }
113 113
114 @include iro.bem-elem('native') { 114 @include bem.elem('native') {
115 &:focus { 115 &:focus {
116 @include iro.bem-sibling-elem('bg') { 116 @include bem.sibling-elem('bg') {
117 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); 117 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
118 } 118 }
119 } 119 }
120 } 120 }
121 } 121 }
122 122
123 @include iro.bem-is('invalid') { 123 @include bem.is('invalid') {
124 @include iro.bem-elem('native') { 124 @include bem.elem('native') {
125 @include -invalid; 125 @include -invalid;
126 126
127 &:focus-visible { 127 &:focus-visible {
@@ -130,10 +130,10 @@
130 } 130 }
131 } 131 }
132 132
133 @include iro.bem-is('disabled') { 133 @include bem.is('disabled') {
134 background-color: props.get(vars.$disabled--bg-color); 134 background-color: props.get(vars.$disabled--bg-color);
135 135
136 @include iro.bem-elem('native') { 136 @include bem.elem('native') {
137 color: props.get(vars.$disabled--text-color); 137 color: props.get(vars.$disabled--text-color);
138 138
139 &::placeholder { 139 &::placeholder {
@@ -141,21 +141,21 @@
141 } 141 }
142 } 142 }
143 143
144 @include iro.bem-elem('bg') { 144 @include bem.elem('bg') {
145 border-color: props.get(vars.$disabled--border-color); 145 border-color: props.get(vars.$disabled--border-color);
146 } 146 }
147 147
148 @include iro.bem-is('invalid') { 148 @include bem.is('invalid') {
149 @include iro.bem-elem('native') { 149 @include bem.elem('native') {
150 @include iro.bem-sibling-elem('bg') { 150 @include bem.sibling-elem('bg') {
151 border-color: props.get(vars.$disabled--border-color); 151 border-color: props.get(vars.$disabled--border-color);
152 } 152 }
153 } 153 }
154 } 154 }
155 155
156 @include iro.bem-elem('native') { 156 @include bem.elem('native') {
157 &:invalid { 157 &:invalid {
158 @include iro.bem-sibling-elem('bg') { 158 @include bem.sibling-elem('bg') {
159 border-color: props.get(vars.$disabled--border-color); 159 border-color: props.get(vars.$disabled--border-color);
160 } 160 }
161 } 161 }