From 0853778eba886a8ba7be09153df30e677402e69c Mon Sep 17 00:00:00 2001 From: Sebastian Podjasek Date: Tue, 8 Feb 2022 21:38:29 +0100 Subject: Support floating labels on `.form-control-plaintext` (#32840) * Support floating labels on `.form-control-plaintext` * Update floating-labels.md * Apply suggestions from code review Co-authored-by: XhmikosR Co-authored-by: Mark Otto --- scss/forms/_floating-labels.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'scss/forms') diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 2f4295480..4f9fd194b 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -2,6 +2,7 @@ position: relative; > .form-control, + > .form-control-plaintext, > .form-select { height: $form-floating-height; line-height: $form-floating-line-height; @@ -19,8 +20,8 @@ @include transition($form-floating-transition); } - // stylelint-disable no-duplicate-selectors - > .form-control { + > .form-control, + > .form-control-plaintext { padding: $form-floating-padding-y $form-floating-padding-x; &::placeholder { @@ -46,6 +47,7 @@ > .form-control:focus, > .form-control:not(:placeholder-shown), + > .form-control-plaintext, > .form-select { ~ label { opacity: $form-floating-label-opacity; @@ -59,5 +61,10 @@ transform: $form-floating-label-transform; } } - // stylelint-enable no-duplicate-selectors + + > .form-control-plaintext { + ~ label { + border-width: $input-border-width 0; // Required to properly position label text - as explained above + } + } } -- cgit v1.2.3