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

Proposal

Browse Source
This commit is contained in:
louismaxime.piton 2023-06-27 16:16:08 +02:00
parent 654580bead
commit d2da6e5c1a
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,5 @@
// We use mixins instead of placeholders as placeholders would combine the selectors when @extend-ed // 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 { .form-floating {
position: relative; position: relative;
@ -46,6 +36,10 @@
color: transparent; color: transparent;
} }
&:focus::placeholder {
color: $input-placeholder-color;
}
&:focus, &:focus,
&:not(:placeholder-shown) { &:not(:placeholder-shown) {
@include form-floating-active-input-styles(); @include form-floating-active-input-styles();
@ -67,7 +61,6 @@
> .form-select { > .form-select {
~ label { ~ label {
@include form-floating-active-label-styles(); @include form-floating-active-label-styles();
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
&::after { &::after {
position: absolute; position: absolute;
@ -85,7 +78,6 @@
> .form-control:-webkit-autofill { > .form-control:-webkit-autofill {
~ label { ~ label {
@include form-floating-active-label-styles(); @include form-floating-active-label-styles();
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
} }
} }
@ -106,18 +98,19 @@
// Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS? // Todo in v6: Consider combining this with the .form-control-plaintext rules to reduce some CSS?
.form-floating-always { .form-floating-always {
> .form-control { &.form-floating,
@include form-floating-active-input-styles(); .form-floating {
.form-control {
@include form-floating-active-input-styles();
&::placeholder { &::placeholder,
color: $input-color; &:focus::placeholder {
color: $input-placeholder-color;
}
} }
&:focus::placeholder {
color: $input-placeholder-color;
}
}
> label { label {
@include form-floating-active-label-styles(); @include form-floating-active-label-styles();
}
} }
} }

12
scss/mixins/_forms.scss
View File

@ -1,6 +1,18 @@
// This mixin uses an `if()` technique to be compatible with Dart Sass // 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 // 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 // scss-docs-start form-validation-mixins
@mixin form-validation-state-selector($state) { @mixin form-validation-state-selector($state) {
@if ($state == "valid" or $state == "invalid") { @if ($state == "valid" or $state == "invalid") {