mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Merge pull request #20872 from twbs/validation-fixes
Form validation fixes
This commit is contained in:
commit
29f196936f
@ -710,19 +710,19 @@ Ensure that an alternative indication of state is also provided. For instance, y
|
||||
|
||||
{% example html %}
|
||||
<div class="form-group has-success">
|
||||
<label class="col-form-label" for="inputSuccess1">Input with success</label>
|
||||
<label class="form-control-label" for="inputSuccess1">Input with success</label>
|
||||
<input type="text" class="form-control form-control-success" id="inputSuccess1">
|
||||
<div class="form-control-feedback">Success! You've done it.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="col-form-label" for="inputWarning1">Input with warning</label>
|
||||
<label class="form-control-label" for="inputWarning1">Input with warning</label>
|
||||
<input type="text" class="form-control form-control-warning" id="inputWarning1">
|
||||
<div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
</div>
|
||||
<div class="form-group has-danger">
|
||||
<label class="col-form-label" for="inputDanger1">Input with danger</label>
|
||||
<label class="form-control-label" for="inputDanger1">Input with danger</label>
|
||||
<input type="text" class="form-control form-control-danger" id="inputDanger1">
|
||||
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
|
||||
<small class="form-text text-muted">Example help text that remains unchanged.</small>
|
||||
|
@ -436,7 +436,7 @@ $custom-file-text: (
|
||||
|
||||
// Form validation icons
|
||||
$form-icon-success-color: $brand-success !default;
|
||||
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='$form-icon-success-color' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
|
||||
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
|
||||
|
||||
$form-icon-warning-color: $brand-warning !default;
|
||||
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
|
||||
|
@ -12,15 +12,15 @@
|
||||
.custom-control {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// Set the border and box shadow on specific inputs to match
|
||||
.form-control {
|
||||
border-color: $color;
|
||||
// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
||||
|
||||
&:focus {
|
||||
// border-color: darken($border-color, 10%);
|
||||
// $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
|
||||
// @include box-shadow($shadow);
|
||||
@if $enable-rounded {
|
||||
&:focus {
|
||||
box-shadow: $input-box-shadow, 0 0 6px lighten($color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,10 +30,6 @@
|
||||
border-color: $color;
|
||||
background-color: lighten($color, 40%);
|
||||
}
|
||||
// Optional feedback icon
|
||||
.form-control-feedback {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Form control focus state
|
||||
|
Loading…
x
Reference in New Issue
Block a user