From: Gaël Poupard <ffoodd@users.noreply.github.com>
Date: Wed, 24 Jun 2020 11:11:20 +0000 (+0200)
Subject: Floating labels improvements (#30966)
X-Git-Tag: v5.0.0-alpha2~233
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9c320df6529e27a0fe358fdaf18adc02d36d1ba4;p=thirdparty%2Fbootstrap.git

Floating labels improvements (#30966)

* docs(example): floating-labels' better Edge fallback

* docs(example): refactor floating-labels' CSS
---

diff --git a/site/content/docs/5.0/examples/floating-labels/floating-labels.css b/site/content/docs/5.0/examples/floating-labels/floating-labels.css
index 30daef63ee..9092659d06 100644
--- a/site/content/docs/5.0/examples/floating-labels/floating-labels.css
+++ b/site/content/docs/5.0/examples/floating-labels/floating-labels.css
@@ -23,13 +23,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;
@@ -47,11 +47,11 @@ body {
   color: transparent;
 }
 
-.form-label-group input::-ms-input-placeholder {
+.form-label-group input::-moz-placeholder {
   color: transparent;
 }
 
-.form-label-group input::-moz-placeholder {
+.form-label-group input::-ms-input-placeholder {
   color: transparent;
 }
 
@@ -86,9 +86,15 @@ body {
 /* Fallback for Edge
 -------------------------------------------------- */
 @supports (-ms-ime-align: auto) {
-  .form-label-group > label {
-    display: none;
+  .form-label-group {
+    display: flex;
+    flex-direction: column-reverse;
   }
+
+  .form-label-group label {
+    position: static;
+  }
+
   .form-label-group input::-ms-input-placeholder {
     color: #777;
   }