1 // Form control focus state
3 // Generate a customized focus state and for any input with the specified color,
4 // which defaults to the `$input-focus-border-color` variable.
6 // We highly encourage you to not customize the default value, but instead use
7 // this to tweak colors on an as-needed basis. This aesthetic change is based on
8 // WebKit's default styles, but applicable to a wider range of browsers. Its
9 // usability and accessibility should be taken into account with any change.
11 // Example usage: change the default blue border and shadow to white for better
12 // contrast against a dark gray background.
13 @mixin form-control-focus() {
15 color: $input-focus-color;
16 background-color: $input-focus-bg;
17 border-color: $input-focus-border-color;
19 // Avoid using mixin so we can pass custom focus shadow properly
21 box-shadow: $input-box-shadow, $input-focus-box-shadow;
23 box-shadow: $input-focus-box-shadow;
29 @mixin form-validation-state($state, $color) {
33 margin-top: $form-feedback-margin-top;
34 font-size: $form-feedback-font-size;
43 max-width: 100%; // Contain to parent when possible
44 padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
46 font-size: $form-feedback-tooltip-font-size;
47 line-height: $form-feedback-tooltip-line-height;
48 color: color-yiq($color);
49 background-color: rgba($color, $form-feedback-tooltip-opacity);
50 @include border-radius($form-feedback-tooltip-border-radius);
54 .was-validated &:#{$state},
58 @if $enable-validation-icons {
59 padding-right: $input-height-inner;
60 background-repeat: no-repeat;
61 background-position: center right calc(#{$input-height-inner} / 4);
62 background-size: calc(#{$input-height-inner} / 2) calc(#{$input-height-inner} / 2);
64 @if $state == "valid" {
65 background-image: $form-feedback-icon-valid;
67 background-image: $form-feedback-icon-invalid;
73 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
76 ~ .#{$state}-feedback,
77 ~ .#{$state}-tooltip {
83 // stylelint-disable-next-line selector-no-qualifying-type
84 textarea.form-control {
85 .was-validated &:#{$state},
87 @if $enable-validation-icons {
88 padding-right: $input-height-inner;
89 background-position: top calc(#{$input-height-inner} / 4) right calc(#{$input-height-inner} / 4);
95 .was-validated &:#{$state},
99 @if $enable-validation-icons {
100 $form-feedback-icon: if($state == "valid", $form-feedback-icon-valid, $form-feedback-icon-invalid);
101 padding-right: $custom-select-feedback-icon-padding-right;
102 background: $custom-select-background, $form-feedback-icon no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;
106 border-color: $color;
107 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
110 ~ .#{$state}-feedback,
111 ~ .#{$state}-tooltip {
119 .was-validated &:#{$state},
121 ~ .#{$state}-feedback,
122 ~ .#{$state}-tooltip {
129 .was-validated &:#{$state},
131 ~ .form-check-label {
135 ~ .#{$state}-feedback,
136 ~ .#{$state}-tooltip {
142 .custom-control-input {
143 .was-validated &:#{$state},
145 ~ .custom-control-label {
149 border-color: $color;
153 ~ .#{$state}-feedback,
154 ~ .#{$state}-tooltip {
159 ~ .custom-control-label::before {
160 border-color: lighten($color, 10%);
161 @include gradient-bg(lighten($color, 10%));
166 ~ .custom-control-label::before {
167 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
170 &:not(:checked) ~ .custom-control-label::before {
171 border-color: $color;
179 .was-validated &:#{$state},
181 ~ .custom-file-label {
182 border-color: $color;
185 ~ .#{$state}-feedback,
186 ~ .#{$state}-tooltip {
191 ~ .custom-file-label {
192 border-color: $color;
193 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);