diff --git a/docs/components/forms.md b/docs/components/forms.md index a2d59d9208..99f0d9a632 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -710,19 +710,19 @@ Ensure that an alternative indication of state is also provided. For instance, y {% example html %}
- +
Success! You've done it.
Example help text that remains unchanged.
- +
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.
- +
Sorry, that username's taken. Try another?
Example help text that remains unchanged. diff --git a/scss/_variables.scss b/scss/_variables.scss index d375f91c5b..ed0dee39fd 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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; diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 698e7dc12d..39851b8f8d 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -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