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

trying out new validation styles

Browse Source
This commit is contained in:
Mark Otto 2017-06-01 08:06:17 -07:00
parent f13eb51940
commit 4a554e5ff5
3 changed files with 79 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/4.0/components/forms.md
View File

@ -897,6 +897,34 @@ Those same states can also be used with horizontal forms.
</div>
{% endexample %}
### Validate with grid
And in more complex grids.
{% example html %}
<div class="container">
<form>
<div class="form-group has-danger">
<label for="inputHorizontalDnger" class="form-control-label">Mailing address</label>
<input type="text" class="form-control mb-2" placeholder="Street address">
<div class="row gutters-sm">
<div class="col-7">
<input type="text" class="form-control is-validated" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control is-validated" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
<div class="form-control-feedback">Something's not right with that field. Try again?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</form>
</div>
{% endexample %}
Checkboxes and radios are also supported.
{% example html %}

20
scss/_forms.scss
View File

@ -255,11 +255,21 @@ select.form-control-lg {
background-size: ($input-height-inner / 2) ($input-height-inner / 2);
}
.form-control-validated,
.is-validated {
padding-right: ($input-btn-padding-x * 3);
background-repeat: no-repeat;
background-position: center right ($input-height-inner / 4);
background-size: ($input-height-inner / 2) ($input-height-inner / 2);
}
// Form validation states
.has-success {
@include form-control-validation($brand-success);
.form-control-success {
.form-control-success,
.form-control-validated,
.is-validated {
background-image: $form-icon-success;
}
}
@ -267,7 +277,9 @@ select.form-control-lg {
.has-warning {
@include form-control-validation($brand-warning);
.form-control-warning {
.form-control-warning,
.form-control-validated,
.is-validated {
background-image: $form-icon-warning;
}
}
@ -275,7 +287,9 @@ select.form-control-lg {
.has-danger {
@include form-control-validation($brand-danger);
.form-control-danger {
.form-control-danger,
.form-control-validated,
.is-validated {
background-image: $form-icon-danger;
}
}

46
scss/mixins/_forms.scss
View File

@ -14,22 +14,44 @@
}
// Set the border and box shadow on specific inputs to match
.form-control,
.custom-select,
.custom-file-control {
border-color: $color;
// .form-control-validated,
// .is-validated,
// .custom-select,
// .custom-file-control {
// border-color: $color;
//
// &:focus {
// @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
// }
// }
&:focus {
@include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
.is-validated {
// Textual inputs
&.form-control,
&.custom-select,
&.custom-file-control {
border-color: $color;
&:focus {
@include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
}
}
&.input-group {
.input-group-addon {
color: $color;
background-color: lighten($color, 40%);
border-color: $color;
}
}
}
// Set validation states also for addons
.input-group-addon {
color: $color;
background-color: lighten($color, 40%);
border-color: $color;
}
// // Set validation states also for addons
// .input-group-addon {
// color: $color;
// background-color: lighten($color, 40%);
// border-color: $color;
// }
}
// Form control focus state