diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index a47965994..cee014d5d 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -159,7 +159,7 @@ input:placeholder-shown + [part='notch'] [part='label'], :host([readonly]:not([outlined]):focus-within) { :not([part~='filled']) { - input:not(:placeholder-shown) + [part='notch'] [part='label'] { + input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] { translate: 0; font-size: initial; } @@ -408,15 +408,15 @@ input:placeholder-shown + [part='notch'] [part='label'], } } - &:has(input:placeholder-shown) { + [part~='filled'] + [part='notch'] { + @extend %floated-styles; + [part='label'] { align-self: start; } } - [part~='filled'] + [part='notch'] { - @extend %floated-styles; - + [part~='container']:has(input:placeholder-shown) { [part='label'] { align-self: start; } @@ -451,12 +451,13 @@ input:placeholder-shown + [part='notch'] [part='label'], :host(:not([type='search'])[readonly][outlined]:focus-within) { :not([part~='filled']) { - input:not(:placeholder-shown) + [part='notch'] [part='label'] { + input:has(:not(:placeholder-shown)) + [part='notch'] [part='label'] { translate: 0; font-size: initial; + align-self: center; } - input:not(:placeholder-shown) + [part='notch'] { + input:has(:not(:placeholder-shown)) + [part='notch'] { border: { width: $active-border-width; color: var-get($theme, 'focused-border-color'); @@ -563,7 +564,7 @@ input:placeholder-shown + [part='notch'] [part='label'], } :host(:not([type='search'])[readonly][outlined][invalid]:focus-within) { - input:not(:placeholder-shown) + [part='notch'] { + input:has(:not(:placeholder-shown)) + [part='notch'] { border: { width: $active-border-width; color: var-get($theme, 'error-secondary-color');