Floating labels improvements (#30966)

* docs(example): floating-labels' better Edge fallback * docs(example): refactor floating-labels' CSS
twbs · Jun 24, 2020 · 04dbb6c · 04dbb6c
1 parent 5a9fc29
commit 04dbb6c
Showing 1 changed file with 28 additions and 8 deletions.
diff --git a/site/docs/4.5/examples/floating-labels/floating-labels.css b/site/docs/4.5/examples/floating-labels/floating-labels.css
@@ -25,13 +25,13 @@ body {
   margin-bottom: 1rem;
 }
 
-.form-label-group > input,
-.form-label-group > label {
+.form-label-group input,
+.form-label-group label {
   height: 3.125rem;
   padding: .75rem;
 }
 
-.form-label-group > label {
+.form-label-group label {
   position: absolute;
   top: 0;
   left: 0;
@@ -51,22 +51,27 @@ body {
   color: transparent;
 }
 
-.form-label-group input:-ms-input-placeholder {
+.form-label-group input::-moz-placeholder {
   color: transparent;
 }
 
-.form-label-group input::-ms-input-placeholder {
+.form-label-group input:-ms-input-placeholder {
   color: transparent;
 }
 
-.form-label-group input::-moz-placeholder {
+.form-label-group input::-ms-input-placeholder {
   color: transparent;
 }
 
 .form-label-group input::placeholder {
   color: transparent;
 }
 
+.form-label-group input:not(:-moz-placeholder-shown) {
+  padding-top: 1.25rem;
+  padding-bottom: .25rem;
+}
+
 .form-label-group input:not(:-ms-input-placeholder) {
   padding-top: 1.25rem;
   padding-bottom: .25rem;
@@ -77,6 +82,13 @@ body {
   padding-bottom: .25rem;
 }
 
+.form-label-group input:not(:-moz-placeholder-shown) ~ label {
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+  font-size: 12px;
+  color: #777;
+}
+
 .form-label-group input:not(:-ms-input-placeholder) ~ label {
   padding-top: .25rem;
   padding-bottom: .25rem;
@@ -94,9 +106,17 @@ body {
 /* Fallback for Edge
 -------------------------------------------------- */
 @supports (-ms-ime-align: auto) {
-  .form-label-group > label {
-    display: none;
+  .form-label-group {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+  }
+
+  .form-label-group label {
+    position: static;
   }
+
   .form-label-group input::-ms-input-placeholder {
     color: #777;
   }