rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 18:54:30 +01:00
Code Issues Actions Packages Releases Activity

Another pass at fixing floating labels disabled colors (#38313)

Browse Source 
* Another pass at fixing floating labels disabled colors

* Fix height for textareas

* Fix disabled background

* Move from full width to an inline-block-ish approach

---------

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto 2023-03-29 12:46:09 -05:00 committed by GitHub
parent 7a7fc1ad34
commit 3aabfc70c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_variables.scss
View File

@ -1068,7 +1068,7 @@ $form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default; $form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default; $form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: .625rem !default; $form-floating-input-padding-b: .625rem !default;
$form-floating-label-height: 1.875em !default; $form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: .65 !default; $form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-label-disabled-color: $gray-600 !default; $form-floating-label-disabled-color: $gray-600 !default;

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

@ -1,17 +1,6 @@
.form-floating { .form-floating {
position: relative; position: relative;
&:not(.form-control:disabled)::before {
position: absolute;
top: $input-border-width;
left: $input-border-width;
width: subtract(100%, add($input-height-inner-quarter, $input-height-inner-half));
height: $form-floating-label-height;
content: "";
background-color: $input-bg;
@include border-radius($input-border-radius);
}
> .form-control, > .form-control,
> .form-control-plaintext, > .form-control-plaintext,
> .form-select { > .form-select {
@ -23,7 +12,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; z-index: 2;
height: 100%; // allow textareas height: 100%; // allow textareas
padding: $form-floating-padding-y $form-floating-padding-x; padding: $form-floating-padding-y $form-floating-padding-x;
overflow: hidden; overflow: hidden;
@ -66,14 +55,24 @@
> .form-control-plaintext, > .form-control-plaintext,
> .form-select { > .form-select {
~ label { ~ label {
opacity: $form-floating-label-opacity; color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform; 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 // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill { > .form-control:-webkit-autofill {
~ label { ~ label {
opacity: $form-floating-label-opacity; color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform; transform: $form-floating-label-transform;
} }
} }
@ -84,7 +83,11 @@
} }
} }
> .form-control:disabled ~ label { > :disabled ~ label {
color: $form-floating-label-disabled-color; color: $form-floating-label-disabled-color;
&::after {
background-color: $input-disabled-bg;
}
} }
} }