rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Add form-validation-states Sass map (#27999)

Browse Source
This commit is contained in:
Mark Otto 2019-01-11 11:16:50 -08:00 committed by XhmikosR
parent fd9dc1a0ca
commit deea117293
4 changed files with 52 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scss/_forms.scss
View File

@ -241,8 +241,9 @@ textarea.form-control {
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
@include form-validation-state("valid", $form-feedback-valid-color);
@include form-validation-state("invalid", $form-feedback-invalid-color);
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
// Inline forms
//

15
scss/_variables.scss
View File

@ -658,6 +658,21 @@ $form-feedback-icon-valid: str-replace(url("data:image/svg+xml,%3csvg x
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
$form-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
),
),
$form-validation-states
);
// Z-index master list
//

12
scss/mixins/_forms.scss
View File

@ -26,7 +26,7 @@
}
@mixin form-validation-state($state, $color) {
@mixin form-validation-state($state, $color, $icon) {
.#{$state}-feedback {
display: none;
width: 100%;
@ -57,15 +57,10 @@
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-image: $icon;
background-repeat: no-repeat;
background-position: center right calc(#{$input-height-inner} / 4);
background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
@if $state == "valid" {
background-image: $form-feedback-icon-valid;
} @else {
background-image: $form-feedback-icon-invalid;
}
}
&:focus {
@ -97,9 +92,8 @@
border-color: $color;
@if $enable-validation-icons {
$form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
padding-right: $custom-select-feedback-icon-padding-right;
background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
background: $custom-select-background, $icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
}
&:focus {

31
site/docs/4.2/components/forms.md
View File

@ -1107,6 +1107,37 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
{% endcapture %}
{% include example.html content=example %}
### 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.
Please note that we do not recommend customizing these values without also modifying the `form-validation-state` mixin.
{% highlight scss %}
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
),
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
{% endhighlight %}
## Custom forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They're built on top of semantic and accessible markup, so they're solid replacements for any default form control.