kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Extended form validation states customization capabilities (#31757)

Browse source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Dmytro Yaremenko 2020-12-17 07:07:48 +02:00 committed by GitHub
parent b424650ab5
commit 8984255158
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
scss/forms/_validation.scss
View file

@ -7,6 +7,6 @@
// scss-docs-start form-validation-states-loop
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
@include form-validation-state($state, $data...);
}
// scss-docs-end form-validation-states-loop

19
scss/mixins/_forms.scss
View file

@ -13,7 +13,14 @@
}
}
@mixin form-validation-state($state, $color, $icon) {
@mixin form-validation-state(
$state,
$color,
$icon,
$tooltip-color: color-contrast($color),
$tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
$focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)
) {
.#{$state}-feedback {
display: none;
width: 100%;
@ -33,8 +40,8 @@
margin-top: .1rem;
@include font-size($form-feedback-tooltip-font-size);
line-height: $form-feedback-tooltip-line-height;
color: color-contrast($color);
background-color: rgba($color, $form-feedback-tooltip-opacity);
color: $tooltip-color;
background-color: $tooltip-bg-color;
@include border-radius($form-feedback-tooltip-border-radius);
}
@ -59,7 +66,7 @@
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity);
box-shadow: $focus-box-shadow;
}
}
}
@ -87,7 +94,7 @@
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
box-shadow: $focus-box-shadow;
}
}
}
@ -101,7 +108,7 @@
}
&:focus {
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
box-shadow: $focus-box-shadow;
}
~ .form-check-label {

4
site/content/docs/5.0/forms/validation.md
View file

@ -351,7 +351,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
## Customizing
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is looped over to generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color and icon. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Validation states can be customized via Sass with the `$form-validation-states` map. Located in our `_variables.scss` file, this Sass map is how we generate the default `valid`/`invalid` validation states. Included is a nested map for customizing each state's color, icon, tooltip color, and focus shadow. While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
@ -359,6 +359,8 @@ This is the Sass map from `_variables.scss`. Override this and recompile your Sa
{{< scss-docs name="form-validation-states" file="scss/_variables.scss" >}}
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
This is the loop from `forms/_validation.scss`. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop:
{{< scss-docs name="form-validation-states-loop" file="scss/forms/_validation.scss" >}}

1
site/content/docs/5.0/migration.md
View file

@ -12,6 +12,7 @@ toc: true
### Sass
- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757).
### JavaScript