mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 17:11:48 +02:00
Code Issues Releases Wiki Activity

Restore feedback icons on validated form fields

Browse Source 
- Only applies to textual inputs and textareas with `.form-control` and selects with `.custom-select`
- Wrap the feedback icons in a Sass variable option, $enable-validation-icons, so folks who theme can disable
- Update docs to summarize styles, mention the icons, include a textarea demo, and add mention of the Sass variable option to the Theming section
This commit is contained in:
Mark Otto
2018-07-08 15:31:18 -07:00
parent cfc9c85b32
commit 8d8d3ef82a
5 changed files with 75 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
scss/mixins/_forms.scss
View File

@@ -50,12 +50,24 @@
border-radius: .2rem;
}
.form-control,
.custom-select {
.form-control {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
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 {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
@@ -68,6 +80,44 @@
}
}
textarea.form-control {
.was-validated &:#{$state},
&.is-#{$state} {
@if $enable-validation-icons {
padding-right: $input-height-inner;
background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
}
}
}
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
@if $enable-validation-icons {
padding-right: $input-height-inner;
@if $state == "valid" {
background: $custom-select-background, $form-feedback-icon-valid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
} @else {
background: $custom-select-background, $form-feedback-icon-invalid no-repeat center right ($input-height-inner * .9) / calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
}
}
&:focus {
border-color: $color;
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
}
}
.form-control-file {
.was-validated &:#{$state},
&.is-#{$state} {