1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-10 23:54:08 +02:00

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 <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
This commit is contained in:
Sebastian Podjasek
2022-02-08 21:38:29 +01:00
committed by GitHub
parent 4308b67e59
commit 0853778eba
2 changed files with 25 additions and 3 deletions

View File

@@ -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
}
}
}