diff options
Diffstat (limited to 'vendor/twbs/bootstrap/scss/forms')
5 files changed, 58 insertions, 13 deletions
diff --git a/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss b/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss index 6e5c9a75f..aaed53845 100644 --- a/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss +++ b/vendor/twbs/bootstrap/scss/forms/_floating-labels.scss @@ -1,6 +1,17 @@ .form-floating { position: relative; + &::before:not(.form-control:disabled) { + 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 { @@ -72,4 +83,8 @@ border-width: $input-border-width 0; // Required to properly position label text - as explained above } } + + > .form-control:disabled ~ label { + color: $form-floating-label-disabled-color; + } } diff --git a/vendor/twbs/bootstrap/scss/forms/_form-check.scss b/vendor/twbs/bootstrap/scss/forms/_form-check.scss index 42a2a9607..83aacba2e 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-check.scss +++ b/vendor/twbs/bootstrap/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/vendor/twbs/bootstrap/scss/forms/_form-control.scss b/vendor/twbs/bootstrap/scss/forms/_form-control.scss index e707c57ea..c81e3b4ea 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-control.scss +++ b/vendor/twbs/bootstrap/scss/forms/_form-control.scss @@ -52,6 +52,13 @@ height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height); } + // Prevent excessive date input height in Webkit + // https://github.com/twbs/bootstrap/issues/34433 + &::-webkit-datetime-edit { + display: block; + padding: 0; + } + // Placeholder &::placeholder { color: $input-placeholder-color; diff --git a/vendor/twbs/bootstrap/scss/forms/_form-select.scss b/vendor/twbs/bootstrap/scss/forms/_form-select.scss index 78c34b8fd..45b0b2686 100644 --- a/vendor/twbs/bootstrap/scss/forms/_form-select.scss +++ b/vendor/twbs/bootstrap/scss/forms/_form-select.scss @@ -4,6 +4,8 @@ // 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; @@ -14,7 +16,7 @@ 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 +71,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/vendor/twbs/bootstrap/scss/forms/_input-group.scss b/vendor/twbs/bootstrap/scss/forms/_input-group.scss index 247f74a7a..d6370ed7f 100644 --- a/vendor/twbs/bootstrap/scss/forms/_input-group.scss +++ b/vendor/twbs/bootstrap/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); } |