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;
}