mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 09:41:11 +00:00
Code Issues Projects Releases Wiki Activity

move to mixin so we can repeat it easier and allow folks to extend to custom states

Browse Source
This commit is contained in:
Mark Otto 2017-06-10 16:30:26 -07:00
parent 280eaf132c
commit 94ed0d901b
2 changed files with 67 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
scss/_forms.scss
View File

@ -238,9 +238,12 @@ select.form-control-lg {
} }
// Form control feedback states // Form validation
// //
// Apply contextual and semantic states to individual form controls. // Provide feedback to users when form field values are valid or invalid. Works
// primarily for client-side validation via scoped `:invalid` and `:valid`
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
// server side validation.
.invalid-feedback { .invalid-feedback {
display: none; display: none;
@ -264,104 +267,8 @@ select.form-control-lg {
border-radius: .2rem; border-radius: .2rem;
} }
.was-validated { @include form-validation-state("valid", $form-feedback-valid-color);
// @include form-validation-state("invalid", $form-feedback-invalid-color);
// Valid state
//
.form-control:valid,
.custom-select:valid {
border-color: $form-feedback-valid-color;
&:focus {
box-shadow: 0 0 0 .2rem rgba($form-feedback-valid-color,.25);
}
~ .invalid-feedback,
~ .invalid-tooltip {
display: block;
}
}
// TODO: redo check markup lol crap
.form-check-input:valid {
+ .form-check-label {
color: $form-feedback-valid-color;
}
}
// custom radios and checks
.custom-control-input:valid {
~ .custom-control-indicator {
background-color: rgba($form-feedback-valid-color, .25);
}
~ .custom-control-description {
color: $form-feedback-valid-color;
}
}
// custom file
.custom-file-input:valid {
~ .custom-file-control {
border-color: $form-feedback-valid-color;
&::before { border-color: inherit; }
}
&:focus {
box-shadow: 0 0 0 .2rem rgba($form-feedback-valid-color,.25);
}
}
//
// Invalid state
//
// input, textarea, select, and custom select
.form-control:invalid,
.custom-select:invalid {
border-color: $form-feedback-invalid-color;
&:focus {
box-shadow: 0 0 0 .2rem rgba($form-feedback-invalid-color,.25);
}
~ .invalid-feedback,
~ .invalid-tooltip {
display: block;
}
}
// TODO: redo check markup lol crap
.form-check-input:invalid {
+ .form-check-label {
color: $form-feedback-invalid-color;
}
}
// custom radios and checks
.custom-control-input:invalid {
~ .custom-control-indicator {
background-color: rgba($form-feedback-invalid-color, .25);
}
~ .custom-control-description {
color: $form-feedback-invalid-color;
}
}
// custom file
.custom-file-input:invalid {
~ .custom-file-control {
border-color: $form-feedback-invalid-color;
&::before { border-color: inherit; }
}
&:focus {
box-shadow: 0 0 0 .2rem rgba($form-feedback-invalid-color,.25);
}
}
}
// Inline forms // Inline forms
// //

60
scss/mixins/_forms.scss
View File

@ -19,3 +19,63 @@
@include box-shadow($input-box-shadow-focus); @include box-shadow($input-box-shadow-focus);
} }
} }
@mixin form-validation-state($state, $color) {
.form-control,
.custom-select {
.was-validated &:#{$state},
&.is-#{$state} {
border-color: $color;
&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
}
~ .invalid-feedback,
~ .invalid-tooltip {
display: block;
}
}
}
// TODO: redo check markup lol crap
.form-check-input {
.was-validated &:#{$state},
&.is-#{$state} {
+ .form-check-label {
color: $color;
}
}
}
// custom radios and checks
.custom-control-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-control-indicator {
background-color: rgba($color, .25);
}
~ .custom-control-description {
color: $color;
}
}
}
// custom file
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-file-control {
border-color: $color;
&::before { border-color: inherit; }
}
&:focus {
box-shadow: 0 0 0 .2rem rgba($color,.25);
}
}
}
}