From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- scss/forms/_floating-labels.scss | 25 ++++++++++++++++++++++--- scss/forms/_form-check.scss | 35 ++++++++++++++++++++++++----------- scss/forms/_form-control.scss | 26 +++++++++++++++++++++++--- scss/forms/_form-select.scss | 13 +++++++++++-- scss/forms/_input-group.scss | 2 +- 5 files changed, 81 insertions(+), 20 deletions(-) (limited to 'scss/forms') diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 6e5c9a7..3ca4264 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -5,6 +5,7 @@ > .form-control-plaintext, > .form-select { height: $form-floating-height; + min-height: $form-floating-height; line-height: $form-floating-line-height; } @@ -12,7 +13,7 @@ position: absolute; top: 0; left: 0; - width: 100%; + z-index: 2; height: 100%; // allow textareas padding: $form-floating-padding-y $form-floating-padding-x; overflow: hidden; @@ -55,14 +56,24 @@ > .form-control-plaintext, > .form-select { ~ label { - opacity: $form-floating-label-opacity; + color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); 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 > .form-control:-webkit-autofill { ~ label { - opacity: $form-floating-label-opacity; + color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity}); transform: $form-floating-label-transform; } } @@ -72,4 +83,12 @@ border-width: $input-border-width 0; // Required to properly position label text - as explained above } } + + > :disabled ~ label { + color: $form-floating-label-disabled-color; + + &::after { + background-color: $input-disabled-bg; + } + } } diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss index 42a2a96..83aacba 100644 --- a/scss/forms/_form-check.scss +++ b/scss/forms/_form-check.scss @@ -27,11 +27,14 @@ } .form-check-input { + --#{$prefix}form-check-bg: #{$form-check-input-bg}; + width: $form-check-input-width; height: $form-check-input-width; margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height vertical-align: top; - background-color: $form-check-input-bg; + background-color: var(--#{$prefix}form-check-bg); + background-image: var(--#{$prefix}form-check-bg-image); background-repeat: no-repeat; background-position: center; background-size: contain; @@ -65,17 +68,17 @@ &[type="checkbox"] { @if $enable-gradients { - background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient); + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient); } @else { - background-image: escape-svg($form-check-input-checked-bg-image); + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}; } } &[type="radio"] { @if $enable-gradients { - background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$prefix}gradient); + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient); } @else { - background-image: escape-svg($form-check-radio-checked-bg-image); + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}; } } } @@ -85,9 +88,9 @@ border-color: $form-check-input-indeterminate-border-color; @if $enable-gradients { - background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$prefix}gradient); + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient); } @else { - background-image: escape-svg($form-check-input-indeterminate-bg-image); + --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}; } } @@ -121,24 +124,26 @@ padding-left: $form-switch-padding-start; .form-check-input { + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)}; + width: $form-switch-width; margin-left: $form-switch-padding-start * -1; - background-image: escape-svg($form-switch-bg-image); + background-image: var(--#{$prefix}form-switch-bg); background-position: left center; @include border-radius($form-switch-border-radius); @include transition($form-switch-transition); &:focus { - background-image: escape-svg($form-switch-focus-bg-image); + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)}; } &:checked { background-position: $form-switch-checked-bg-position; @if $enable-gradients { - background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient); + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient); } @else { - background-image: escape-svg($form-switch-checked-bg-image); + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}; } } } @@ -173,3 +178,11 @@ } } } + +@if $enable-dark-mode { + @include color-mode(dark) { + .form-switch .form-check-input:not(:checked):not(:focus) { + --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)}; + } + } +} diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss index e707c57..ca2a7df 100644 --- a/scss/forms/_form-control.scss +++ b/scss/forms/_form-control.scss @@ -44,12 +44,31 @@ } } - // Add some height to date inputs on iOS - // https://github.com/twbs/bootstrap/issues/23307 - // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved &::-webkit-date-and-time-value { + // On Android Chrome, form-control's "width: 100%" makes the input width too small + // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109 + // + // On iOS Safari, form-control's "appearance: none" + "width: 100%" makes the input width too small + // Tested under iOS 16.2 / Safari 16.2 + min-width: 85px; // Seems to be a good minimum safe width + + // Add some height to date inputs on iOS + // https://github.com/twbs/bootstrap/issues/23307 + // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved // Multiply line-height by 1em if it has no unit height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); + + // Android Chrome type="date" is taller than the other inputs + // because of "margin: 1px 24px 1px 4px" inside the shadow DOM + // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109 + margin: 0; + } + + // Prevent excessive date input height in Webkit + // https://github.com/twbs/bootstrap/issues/34433 + &::-webkit-datetime-edit { + display: block; + padding: 0; } // Placeholder @@ -186,6 +205,7 @@ textarea { } &::-webkit-color-swatch { + border: 0 !important; // stylelint-disable-line declaration-no-important @include border-radius($input-border-radius); } diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 78c34b8..0b26323 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -4,17 +4,18 @@ // https://primer.github.io/. .form-select { + --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)}; + display: block; width: 100%; padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x; - -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636 font-family: $form-select-font-family; @include font-size($form-select-font-size); font-weight: $form-select-font-weight; line-height: $form-select-line-height; color: $form-select-color; background-color: $form-select-bg; - background-image: escape-svg($form-select-indicator); + background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none); background-repeat: no-repeat; background-position: $form-select-bg-position; background-size: $form-select-bg-size; @@ -69,3 +70,11 @@ @include font-size($form-select-font-size-lg); @include border-radius($form-select-border-radius-lg); } + +@if $enable-dark-mode { + @include color-mode(dark) { + .form-select { + --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)}; + } + } +} diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss index 247f74a..58e4d40 100644 --- a/scss/forms/_input-group.scss +++ b/scss/forms/_input-group.scss @@ -121,7 +121,7 @@ } > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { - margin-left: -$input-border-width; + margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list @include border-start-radius(0); } -- cgit v1.2.3