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.scss286
1 files changed, 143 insertions, 143 deletions
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index a52050c..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -7,181 +7,181 @@
7@use 'text-field.vars' as vars; 7@use 'text-field.vars' as vars;
8 8
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 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);
16 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 16 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
17 } 17 }
18 18
19 &:hover { 19 &:hover {
20 @include 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 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 bem.sibling-elem('bg') { 33 @include bem.sibling-elem('bg') {
34 border-color: props.get(vars.$key-focus--border-color); 34 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); 35 border-color: props.get(vars.$key-focus--border-color);
36 //outline-offset: props.get(vars.$focus --border); 36 //outline-offset: props.get(vars.$focus --border);
37 } 37 }
38} 38}
39 39
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 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;
47 min-inline-size: 0; 47 min-inline-size: 0;
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 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;
55 display: block; 55 display: block;
56 pointer-events: none; 56 pointer-events: none;
57 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 57 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
58 border-radius: props.get(vars.$rounding); 58 border-radius: props.get(vars.$rounding);
59 } 59 }
60 60
61 @include 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));
65 padding-inline: props.get(vars.$pad-i); 65 padding-inline: props.get(vars.$pad-i);
66 font: inherit; 66 font: inherit;
67 line-height: props.get(vars.$line-height); 67 line-height: props.get(vars.$line-height);
68 color: props.get(vars.$text-color); 68 color: props.get(vars.$text-color);
69 appearance: none; 69 appearance: none;
70 resize: none; 70 resize: none;
71 background-color: transparent; 71 background-color: transparent;
72 border: 1px solid transparent; 72 border: 1px solid transparent;
73 73
74 &::placeholder { 74 &::placeholder {
75 font-style: italic; 75 font-style: italic;
76 color: props.get(vars.$placeholder-color); 76 color: props.get(vars.$placeholder-color);
77 opacity: 1; 77 opacity: 1;
78 } 78 }
79 79
80 &:hover { 80 &:hover {
81 @include 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 }
85 85
86 &:focus { 86 &:focus {
87 outline: 0; 87 outline: 0;
88 88
89 @include 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);
93 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 93 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
94 } 94 }
95 } 95 }
96 96
97 &:invalid { 97 &:invalid {
98 @include -invalid; 98 @include -invalid;
99 } 99 }
100 100
101 &:focus-visible, 101 &:focus-visible,
102 &:invalid:focus-visible { 102 &:invalid:focus-visible {
103 @include -keyboard-focus; 103 @include -keyboard-focus;
104 } 104 }
105 } 105 }
106 106
107 @include 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 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 bem.elem('native') { 114 @include bem.elem('native') {
115 &:focus { 115 &:focus {
116 @include 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 bem.modifier('pill') { 123 @include bem.modifier('pill') {
124 @include bem.multi('&', 'elem' 'bg') { 124 @include bem.multi('&', 'elem' 'bg') {
125 border-radius: 100em; 125 border-radius: 100em;
126 } 126 }
127 127
128 @include bem.elem('native') { 128 @include bem.elem('native') {
129 padding-inline: props.get(vars.$pad-i-pill); 129 padding-inline: props.get(vars.$pad-i-pill);
130 130
131 &:focus { 131 &:focus {
132 @include bem.sibling-elem('bg') { 132 @include bem.sibling-elem('bg') {
133 border-radius: 100em; 133 border-radius: 100em;
134 } 134 }
135 } 135 }
136 } 136 }
137 137
138 @include bem.modifier('extended') { 138 @include bem.modifier('extended') {
139 @include bem.elem('native') { 139 @include bem.elem('native') {
140 padding-inline: props.get(vars.$pad-i); 140 padding-inline: props.get(vars.$pad-i);
141 } 141 }
142 } 142 }
143 } 143 }
144 144
145 @include bem.is('invalid') { 145 @include bem.is('invalid') {
146 @include bem.elem('native') { 146 @include bem.elem('native') {
147 @include -invalid; 147 @include -invalid;
148 148
149 &:focus-visible { 149 &:focus-visible {
150 @include -keyboard-focus; 150 @include -keyboard-focus;
151 } 151 }
152 } 152 }
153 } 153 }
154 154
155 @include bem.is('disabled') { 155 @include bem.is('disabled') {
156 background-color: props.get(vars.$disabled--bg-color); 156 background-color: props.get(vars.$disabled--bg-color);
157 157
158 @include bem.elem('native') { 158 @include bem.elem('native') {
159 color: props.get(vars.$disabled--text-color); 159 color: props.get(vars.$disabled--text-color);
160 160
161 &::placeholder { 161 &::placeholder {
162 color: props.get(vars.$disabled--placeholder-color); 162 color: props.get(vars.$disabled--placeholder-color);
163 } 163 }
164 } 164 }
165 165
166 @include bem.elem('bg') { 166 @include bem.elem('bg') {
167 border-color: props.get(vars.$disabled--border-color); 167 border-color: props.get(vars.$disabled--border-color);
168 } 168 }
169 169
170 @include bem.is('invalid') { 170 @include bem.is('invalid') {
171 @include bem.elem('native') { 171 @include bem.elem('native') {
172 @include bem.sibling-elem('bg') { 172 @include bem.sibling-elem('bg') {
173 border-color: props.get(vars.$disabled--border-color); 173 border-color: props.get(vars.$disabled--border-color);
174 } 174 }
175 } 175 }
176 } 176 }
177 177
178 @include bem.elem('native') { 178 @include bem.elem('native') {
179 &:invalid { 179 &:invalid {
180 @include bem.sibling-elem('bg') { 180 @include bem.sibling-elem('bg') {
181 border-color: props.get(vars.$disabled--border-color); 181 border-color: props.get(vars.$disabled--border-color);
182 } 182 }
183 } 183 }
184 } 184 }
185 } 185 }
186 } 186 }
187} 187}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 02:40:01 +0000