mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

Add option for always visible floating labels

Browse Source
This commit is contained in:
Mark Otto
2022-04-01 15:13:01 -07:00
parent 33992b7d5b
commit 36ee50fa84
2 changed files with 52 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/forms/_floating-labels.scss
+37 -10
View File
@@ -1,3 +1,15 @@
// We use mixins instead of placeholders as placeholders would combine the selectors when @extend-ed
@mixin form-floating-active-input-styles() {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}
@mixin form-floating-active-label-styles() {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
}
.form-floating {
position: relative;
@@ -30,19 +42,17 @@
&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
@include form-floating-active-input-styles();
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
@include form-floating-active-input-styles();
}
}
> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
@include form-floating-active-input-styles();
}
> .form-control:focus,
@@ -50,15 +60,14 @@
> .form-control-plaintext,
> .form-select {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
@include form-floating-active-label-styles();
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
opacity: $form-floating-label-opacity;
transform: $form-floating-label-transform;
@include form-floating-active-label-styles();
}
}
@@ -68,3 +77,21 @@
}
}
}
// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
.form-floating-always {
> .form-control {
@include form-floating-active-input-styles();
&::placeholder {
color: $input-color;
}
&:focus::placeholder {
color: $input-placeholder-color;
}
}
> label {
@include form-floating-active-label-styles();
}
}