From 66e440c1ad2a7c18b87424323f9ed84d1dad596c Mon Sep 17 00:00:00 2001 From: Martin Havala Date: Tue, 11 Jan 2022 07:30:19 +0100 Subject: [PATCH] fix(material/form-field) : correct placeholder-shown pseudo class fix(material/form-field) : correct placeholder-shown pseudo class Replace an invalid pseudo class `:label-shown` for a valid `:placeholder-shown` to correct styles of a form-field label Fixes #24181 --- src/material/form-field/_form-field-fill-theme.scss | 2 +- src/material/form-field/_form-field-legacy-theme.scss | 4 ++-- src/material/form-field/_form-field-outline-theme.scss | 2 +- src/material/form-field/_form-field-theme.scss | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss index 7d619573e04b..c36f4307cc87 100644 --- a/src/material/form-field/_form-field-fill-theme.scss +++ b/src/material/form-field/_form-field-fill-theme.scss @@ -97,7 +97,7 @@ $fill-dedupe: 0; // Server-side rendered matInput with a label attribute but label not shown // (used as a pure CSS stand-in for mat-form-field-should-float). - .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper + .mat-input-server[label]:not(:placeholder-shown) + .mat-form-field-label-wrapper .mat-form-field-label { @include _label-floating( $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset, diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss index 77af421bc5fb..cab75c7b24c2 100644 --- a/src/material/form-field/_form-field-legacy-theme.scss +++ b/src/material/form-field/_form-field-legacy-theme.scss @@ -119,7 +119,7 @@ $legacy-dedupe: 0; // Server-side rendered matInput with a label attribute but label not shown // (used as a pure CSS stand-in for mat-form-field-should-float). - .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper + .mat-input-server[label]:not(:placeholder-shown) + .mat-form-field-label-wrapper .mat-form-field-label { @include _label-floating( $subscript-font-scale, $infix-padding, $infix-margin-top); @@ -165,7 +165,7 @@ $legacy-dedupe: 0; // Server-side rendered matInput with a label attribute but label not shown // (used as a pure CSS stand-in for mat-form-field-should-float). - .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper + .mat-input-server[label]:not(:placeholder-shown) + .mat-form-field-label-wrapper .mat-form-field-label { @include _label-floating-print( $subscript-font-scale, $infix-padding, $infix-margin-top); diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss index 2a53929b0145..4f8644e2d579 100644 --- a/src/material/form-field/_form-field-outline-theme.scss +++ b/src/material/form-field/_form-field-outline-theme.scss @@ -127,7 +127,7 @@ $outline-dedupe: 0; // Server-side rendered matInput with a label attribute but label not shown // (used as a pure CSS stand-in for mat-form-field-should-float). - .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper + .mat-input-server[label]:not(:placeholder-shown) + .mat-form-field-label-wrapper .mat-form-field-label { @include _label-floating( $subscript-font-scale, $infix-padding + $outline-appearance-label-offset, diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 772e7168ff54..1db245334865 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -206,7 +206,7 @@ $dedupe: 0; // Server-side rendered matInput with a label attribute but label not shown // (used as a pure CSS stand-in for mat-form-field-should-float). - .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper + .mat-input-server[label]:not(:placeholder-shown) + .mat-form-field-label-wrapper .mat-form-field-label { @include _label-floating( $subscript-font-scale, $infix-padding, $infix-margin-top);