assets/stylesheets/bootstrap/mixins/_forms.scss in bootstrap-5.2.3 vs assets/stylesheets/bootstrap/mixins/_forms.scss in bootstrap-5.3.0.alpha3

- old
+ new

@@ -19,11 +19,12 @@ $state, $color, $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), - $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) + $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity), + $border-color: $color ) { .#{$state}-feedback { display: none; width: 100%; margin-top: $form-feedback-margin-top; @@ -54,22 +55,22 @@ } } .form-control { @include form-validation-state-selector($state) { - border-color: $color; + border-color: $border-color; @if $enable-validation-icons { padding-right: $input-height-inner; background-image: escape-svg($icon); background-repeat: no-repeat; background-position: right $input-height-inner-quarter center; background-size: $input-height-inner-half $input-height-inner-half; } &:focus { - border-color: $color; + border-color: $border-color; box-shadow: $focus-box-shadow; } } } @@ -83,24 +84,24 @@ } } .form-select { @include form-validation-state-selector($state) { - border-color: $color; + border-color: $border-color; @if $enable-validation-icons { &:not([multiple]):not([size]), &:not([multiple])[size="1"] { + --#{$prefix}form-select-bg-icon: #{escape-svg($icon)}; padding-right: $form-select-feedback-icon-padding-end; - background-image: escape-svg($form-select-indicator), escape-svg($icon); background-position: $form-select-bg-position, $form-select-feedback-icon-position; background-size: $form-select-bg-size, $form-select-feedback-icon-size; } } &:focus { - border-color: $color; + border-color: $border-color; box-shadow: $focus-box-shadow; } } } @@ -112,10 +113,10 @@ } } .form-check-input { @include form-validation-state-selector($state) { - border-color: $color; + border-color: $border-color; &:checked { background-color: $color; }