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

Add an artificial background to floating labels (#37125)

Browse Source
This commit is contained in:
Louis-Maxime Piton 2022-10-06 08:12:00 +02:00 committed by GitHub
parent 5975ca65c5
commit bf6240dad9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_variables.scss
View File

@ -1002,6 +1002,7 @@ $form-floating-padding-x: $input-padding-x !default;
$form-floating-padding-y: 1rem !default;
$form-floating-input-padding-t: 1.625rem !default;
$form-floating-input-padding-b: .625rem !default;
$form-floating-label-height: 1.875em !default;
$form-floating-label-opacity: .65 !default;
$form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
$form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;

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

@ -1,6 +1,17 @@
.form-floating {
position: relative;
&::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-plaintext,
> .form-select {