Skip to content

Commit 5cc5a27

Browse files
fix(input): adjust placeholder-shown styles and label alignment in material theme (#1792)
* fix(input): adjust placeholder-shown styles and label alignment in material theme * fix(input): use :has selector to fix the behavior in firefox --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 9474dfc commit 5cc5a27

File tree

1 file changed

+9
-8
lines changed

1 file changed

+9
-8
lines changed

src/components/input/themes/shared/input.material.scss

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
159159

160160
:host([readonly]:not([outlined]):focus-within) {
161161
:not([part~='filled']) {
162-
input:not(:placeholder-shown) + [part='notch'] [part='label'] {
162+
input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
163163
translate: 0;
164164
font-size: initial;
165165
}
@@ -408,15 +408,15 @@ input:placeholder-shown + [part='notch'] [part='label'],
408408
}
409409
}
410410

411-
&:has(input:placeholder-shown) {
411+
[part~='filled'] + [part='notch'] {
412+
@extend %floated-styles;
413+
412414
[part='label'] {
413415
align-self: start;
414416
}
415417
}
416418

417-
[part~='filled'] + [part='notch'] {
418-
@extend %floated-styles;
419-
419+
[part~='container']:has(input:placeholder-shown) {
420420
[part='label'] {
421421
align-self: start;
422422
}
@@ -451,12 +451,13 @@ input:placeholder-shown + [part='notch'] [part='label'],
451451

452452
:host(:not([type='search'])[readonly][outlined]:focus-within) {
453453
:not([part~='filled']) {
454-
input:not(:placeholder-shown) + [part='notch'] [part='label'] {
454+
input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] {
455455
translate: 0;
456456
font-size: initial;
457+
align-self: center;
457458
}
458459

459-
input:not(:placeholder-shown) + [part='notch'] {
460+
input:has(:not(:placeholder-shown)) + [part='notch'] {
460461
border: {
461462
width: $active-border-width;
462463
color: var-get($theme, 'focused-border-color');
@@ -563,7 +564,7 @@ input:placeholder-shown + [part='notch'] [part='label'],
563564
}
564565

565566
:host(:not([type='search'])[readonly][outlined][invalid]:focus-within) {
566-
input:not(:placeholder-shown) + [part='notch'] {
567+
input:has(:not(:placeholder-shown)) + [part='notch'] {
567568
border: {
568569
width: $active-border-width;
569570
color: var-get($theme, 'error-secondary-color');

0 commit comments

Comments
 (0)