From 5729057dfbb85eb9d1ca104e25f2e7e5528ef11e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 4 Jun 2020 11:27:59 +0200 Subject: [PATCH 1/2] docs(example): floating-labels's better Edge fallback --- .../5.0/examples/floating-labels/floating-labels.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 30daef63eeb3..355981fec091 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 @@ -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; } From d9c1ba1c89ff650e6870727d840041a38ed47ea1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Thu, 4 Jun 2020 11:28:44 +0200 Subject: [PATCH 2/2] docs(example): refactor floating-labes's CSS --- .../5.0/examples/floating-labels/floating-labels.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 355981fec091..9092659d0632 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; }