diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 857b50fe4..6ec2fa931 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -145,6 +145,8 @@ input:placeholder-shown + [part='notch'] [part='label'], :host(:not([readonly]):focus-within) { [part='label'] { @include type-style('caption'); + + translate: 0 -73%; } } @@ -256,8 +258,12 @@ input:placeholder-shown + [part='notch'] [part='label'], opacity: 1; } } +} +:host(:not([outlined],[aria-haspopup='dialog'],[role='combobox'])[readonly]:focus-within) { [part='label'] { + @include type-style('caption'); + translate: 0 -73%; } } @@ -496,6 +502,14 @@ input:placeholder-shown + [part='notch'] [part='label'], } [part='notch'] { + border: { + width: $active-border-width; + color: var-get($theme, 'focused-border-color'); + } + } + + input:placeholder-shown + [part='notch'], + [part~='filled'] + [part='notch'] { border: { width: $active-border-width; color: var-get($theme, 'focused-border-color'); @@ -524,6 +538,16 @@ input:placeholder-shown + [part='notch'] [part='label'], } } +:host(:not([type='search'],[aria-haspopup='dialog'],[role='combobox'])[outlined]:focus-within) { + [part='notch'] { + border: { + width: $active-border-width; + color: var-get($theme, 'focused-border-color'); + top: $idle-border-width solid transparent; + } + } +} + :host(:not([type='search'])[outlined]:focus), :host(:not([type='search'])[outlined]:focus-within) { [part='suffix'] {