|
29 | 29 |
|
30 | 30 | .ui.input {
|
31 | 31 | position: relative;
|
32 |
| - font-weight: normal; |
| 32 | + font-weight: @normal; |
33 | 33 | font-style: normal;
|
34 | 34 | display: inline-flex;
|
35 | 35 | color: @inputColor;
|
36 | 36 | }
|
37 |
| -.ui.input input { |
| 37 | +.ui.input > input { |
38 | 38 | margin: 0em;
|
39 | 39 | max-width: 100%;
|
40 | 40 | flex: 1 0 auto;
|
|
62 | 62 |
|
63 | 63 | /* browsers require these rules separate */
|
64 | 64 |
|
65 |
| -.ui.input input::-webkit-input-placeholder { |
| 65 | +.ui.input > input::-webkit-input-placeholder { |
66 | 66 | color: @placeholderColor;
|
67 | 67 | }
|
68 |
| -.ui.input input::-moz-placeholder { |
| 68 | +.ui.input > input::-moz-placeholder { |
69 | 69 | color: @placeholderColor;
|
70 | 70 | }
|
71 |
| -.ui.input input:-ms-input-placeholder { |
| 71 | +.ui.input > input:-ms-input-placeholder { |
72 | 72 | color: @placeholderColor;
|
73 | 73 | }
|
74 | 74 |
|
|
86 | 86 | opacity: @disabledOpacity;
|
87 | 87 | }
|
88 | 88 |
|
89 |
| -.ui.disabled.input input, |
| 89 | +.ui.disabled.input > input, |
90 | 90 | .ui.input:not(.disabled) input[disabled] {
|
91 | 91 | pointer-events: none;
|
92 | 92 | }
|
|
95 | 95 | Active
|
96 | 96 | ---------------------*/
|
97 | 97 |
|
98 |
| -.ui.input input:active, |
| 98 | +.ui.input > input:active, |
99 | 99 | .ui.input.down input {
|
100 | 100 | border-color: @downBorderColor;
|
101 | 101 | background: @downBackground;
|
|
147 | 147 | Focus
|
148 | 148 | ---------------------*/
|
149 | 149 |
|
150 |
| -.ui.input.focus input, |
151 |
| -.ui.input input:focus { |
| 150 | +.ui.input.focus > input, |
| 151 | +.ui.input > input:focus { |
152 | 152 | border-color: @focusBorderColor;
|
153 | 153 | background: @focusBackground;
|
154 | 154 | color: @focusColor;
|
155 | 155 | box-shadow: @focusBoxShadow;
|
156 | 156 | }
|
157 |
| -.ui.input.focus input::-webkit-input-placeholder, |
158 |
| -.ui.input input:focus::-webkit-input-placeholder { |
| 157 | +.ui.input.focus > input::-webkit-input-placeholder, |
| 158 | +.ui.input > input:focus::-webkit-input-placeholder { |
159 | 159 | color: @placeholderFocusColor;
|
160 | 160 | }
|
161 |
| -.ui.input.focus input::-moz-placeholder, |
162 |
| -.ui.input input:focus::-moz-placeholder { |
| 161 | +.ui.input.focus > input::-moz-placeholder, |
| 162 | +.ui.input > input:focus::-moz-placeholder { |
163 | 163 | color: @placeholderFocusColor;
|
164 | 164 | }
|
165 |
| -.ui.input.focus input:-ms-input-placeholder, |
166 |
| -.ui.input input:focus:-ms-input-placeholder { |
| 165 | +.ui.input.focus > input:-ms-input-placeholder, |
| 166 | +.ui.input > input:focus:-ms-input-placeholder { |
167 | 167 | color: @placeholderFocusColor;
|
168 | 168 | }
|
169 | 169 |
|
|
173 | 173 | Error
|
174 | 174 | ---------------------*/
|
175 | 175 |
|
176 |
| -.ui.input.error input { |
| 176 | +.ui.input.error > input { |
177 | 177 | background-color: @errorBackground;
|
178 | 178 | border-color: @errorBorder;
|
179 | 179 | color: @errorColor;
|
180 | 180 | box-shadow: @errorBoxShadow;
|
181 | 181 | }
|
182 | 182 |
|
183 | 183 | /* Error Placeholder */
|
184 |
| -.ui.input.error input::-webkit-input-placeholder { |
| 184 | +.ui.input.error > input::-webkit-input-placeholder { |
185 | 185 | color: @placeholderErrorColor;
|
186 | 186 | }
|
187 |
| -.ui.input.error input::-moz-placeholder { |
| 187 | +.ui.input.error > input::-moz-placeholder { |
188 | 188 | color: @placeholderErrorColor;
|
189 | 189 | }
|
190 |
| -.ui.input.error input:-ms-input-placeholder { |
| 190 | +.ui.input.error > input:-ms-input-placeholder { |
191 | 191 | color: @placeholderErrorColor !important;
|
192 | 192 | }
|
193 | 193 |
|
194 | 194 | /* Focused Error Placeholder */
|
195 |
| -.ui.input.error input:focus::-webkit-input-placeholder { |
| 195 | +.ui.input.error > input:focus::-webkit-input-placeholder { |
196 | 196 | color: @placeholderErrorFocusColor;
|
197 | 197 | }
|
198 |
| -.ui.input.error input:focus::-moz-placeholder { |
| 198 | +.ui.input.error > input:focus::-moz-placeholder { |
199 | 199 | color: @placeholderErrorFocusColor;
|
200 | 200 | }
|
201 |
| -.ui.input.error input:focus:-ms-input-placeholder { |
| 201 | +.ui.input.error > input:focus:-ms-input-placeholder { |
202 | 202 | color: @placeholderErrorFocusColor !important;
|
203 | 203 | }
|
204 | 204 |
|
|
211 | 211 | ---------------------*/
|
212 | 212 |
|
213 | 213 |
|
214 |
| -.ui.transparent.input input { |
| 214 | +.ui.transparent.input > input { |
215 | 215 | border-color: transparent !important;
|
216 | 216 | background-color: transparent !important;
|
217 | 217 | padding: 0em !important;
|
|
236 | 236 | .ui.transparent.inverted.input {
|
237 | 237 | color: @transparentInvertedColor;
|
238 | 238 | }
|
239 |
| -.ui.transparent.inverted.input input { |
| 239 | +.ui.transparent.inverted.input > input { |
240 | 240 | color: inherit;
|
241 | 241 | }
|
242 | 242 |
|
243 |
| -.ui.transparent.inverted.input input::-webkit-input-placeholder { |
| 243 | +.ui.transparent.inverted.input > input::-webkit-input-placeholder { |
244 | 244 | color: @transparentInvertedPlaceholderColor;
|
245 | 245 | }
|
246 |
| -.ui.transparent.inverted.input input::-moz-placeholder { |
| 246 | +.ui.transparent.inverted.input > input::-moz-placeholder { |
247 | 247 | color: @transparentInvertedPlaceholderColor;
|
248 | 248 | }
|
249 |
| -.ui.transparent.inverted.input input:-ms-input-placeholder { |
| 249 | +.ui.transparent.inverted.input > input:-ms-input-placeholder { |
250 | 250 | color: @transparentInvertedPlaceholderColor;
|
251 | 251 | }
|
252 | 252 |
|
|
273 | 273 | .ui.icon.input > i.icon:not(.link) {
|
274 | 274 | pointer-events: none;
|
275 | 275 | }
|
276 |
| -.ui.icon.input input { |
| 276 | +.ui.icon.input > input { |
277 | 277 | padding-right: @iconMargin !important;
|
278 | 278 | }
|
279 | 279 |
|
|
344 | 344 | }
|
345 | 345 |
|
346 | 346 | /* Regular Label on Right */
|
347 |
| -.ui[class*="right labeled"].input input { |
| 347 | +.ui[class*="right labeled"].input > input { |
348 | 348 | border-top-right-radius: 0px !important;
|
349 | 349 | border-bottom-right-radius: 0px !important;
|
350 | 350 | border-right-color: transparent !important;
|
351 | 351 | }
|
352 |
| -.ui[class*="right labeled"].input input + .label { |
| 352 | +.ui[class*="right labeled"].input > input + .label { |
353 | 353 | border-top-left-radius: 0px;
|
354 | 354 | border-bottom-left-radius: 0px;
|
355 | 355 | }
|
356 | 356 |
|
357 |
| -.ui[class*="right labeled"].input input:focus { |
| 357 | +.ui[class*="right labeled"].input > input:focus { |
358 | 358 | border-right-color: @focusBorderColor !important;
|
359 | 359 | }
|
360 | 360 |
|
|
367 | 367 | }
|
368 | 368 |
|
369 | 369 | /* Spacing with corner label */
|
370 |
| -.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input { |
| 370 | +.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { |
371 | 371 | padding-right: @labeledMargin !important;
|
372 | 372 | }
|
373 | 373 | .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
|
|
378 | 378 | }
|
379 | 379 |
|
380 | 380 | /* Left Labeled */
|
381 |
| -.ui[class*="left corner labeled"].labeled.input input { |
| 381 | +.ui[class*="left corner labeled"].labeled.input > input { |
382 | 382 | padding-left: @labeledMargin !important;
|
383 | 383 | }
|
384 | 384 | .ui[class*="left corner labeled"].icon.input > input {
|
|
434 | 434 | }
|
435 | 435 |
|
436 | 436 | /* Input Focus */
|
437 |
| -.ui.action.input:not([class*="left action"]) input:focus { |
| 437 | +.ui.action.input:not([class*="left action"]) > input:focus { |
438 | 438 | border-right-color: @focusBorderColor !important;
|
439 | 439 | }
|
440 | 440 |
|
|
464 | 464 | ---------------------*/
|
465 | 465 |
|
466 | 466 | /* Standard */
|
467 |
| -.ui.inverted.input input { |
| 467 | +.ui.inverted.input > input { |
468 | 468 | border: none;
|
469 | 469 | }
|
470 | 470 |
|
|
0 commit comments