rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases 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 {
display: none;
@ -264,104 +267,8 @@ select.form-control-lg {
border-radius: .2rem;
}
.was-validated {
//
// 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);
}
}
}
@include form-validation-state("valid", $form-feedback-valid-color);
@include form-validation-state("invalid", $form-feedback-invalid-color);
// Inline forms
//

60
scss/mixins/_forms.scss
View File

@ -19,3 +19,63 @@
@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);
}
}
}
}