mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 16:50:00 +02:00
Code Issues Releases Wiki Activity

Floating labels: Fix max-width and background-color (#39720)

Browse Source 
* Fix `max-width`

* Fix label background color

* Add new visual test: floating label

* Fix `npm run docs`

---------

Co-authored-by: Julien Déramond <juderamond@gmail.com>
This commit is contained in:
Louis-Maxime Piton
2024-06-13 03:39:23 +02:00
committed by GitHub
parent 093276119d
commit b522441901
2 changed files with 353 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
scss/forms/_floating-labels.scss
View File

@@ -14,6 +14,7 @@
top: 0;
left: 0;
z-index: 2;
max-width: 100%;
height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden;
@@ -58,16 +59,6 @@
> .form-select {
~ label {
transform: $form-floating-label-transform;
&::after {
position: absolute;
inset: $form-floating-padding-y ($form-floating-padding-x * .5);
z-index: -1;
height: $form-floating-label-height;
content: "";
background-color: $input-bg;
@include border-radius($input-border-radius);
}
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
@@ -76,6 +67,21 @@
transform: $form-floating-label-transform;
}
}
> textarea:focus,
> textarea:not(:placeholder-shown) {
~ label::after {
position: absolute;
inset: $form-floating-padding-y ($form-floating-padding-x * .5);
z-index: -1;
height: $form-floating-label-height;
content: "";
background-color: $input-bg;
@include border-radius($input-border-radius);
}
}
> textarea:disabled ~ label::after {
background-color: $input-disabled-bg;
}
> .form-control-plaintext {
~ label {
@@ -86,9 +92,5 @@
> :disabled ~ label,
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
color: $form-floating-label-disabled-color;
&::after {
background-color: $input-disabled-bg;
}
}
}