1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-10-04 17:21:38 +02:00
This commit is contained in:
louismaxime.piton
2023-06-27 16:16:08 +02:00
committed by Julien Déramond
parent f0700c7c3c
commit 72ee1af96a
2 changed files with 37 additions and 21 deletions

View File

@@ -1,14 +1,3 @@
// 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() {
transform: $form-floating-label-transform;
}
.form-floating {
position: relative;
@@ -47,6 +36,10 @@
color: transparent;
}
&:focus::placeholder {
color: $input-placeholder-color;
}
&:focus,
&:not(:placeholder-shown) {
@include form-floating-active-input-styles();
@@ -69,6 +62,16 @@
> .form-select {
~ label {
@include form-floating-active-label-styles();
&::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
@@ -107,18 +110,19 @@
// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
.form-floating-always {
> .form-control {
&.form-floating,
.form-floating {
.form-control {
@include form-floating-active-input-styles();
&::placeholder {
color: $input-color;
}
&::placeholder,
&:focus::placeholder {
color: $input-placeholder-color;
}
}
> label {
label {
@include form-floating-active-label-styles();
}
}
}

View File

@@ -1,6 +1,18 @@
// This mixin uses an `if()` technique to be compatible with Dart Sass
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
// scss-docs-start form-floating-mixins
@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() {
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
transform: $form-floating-label-transform;
}
// scss-docs-end form-floating-mixins
// scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") {