UNPKG

3.2 kBSCSSView Raw
1// Form control focus state
2//
3// Generate a customized focus state and for any input with the specified color,
4// which defaults to the `$input-focus-border-color` variable.
5//
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.
10//
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() {
14 &:focus {
15 color: $input-focus-color;
16 background-color: $input-focus-bg;
17 border-color: $input-focus-border-color;
18 outline: 0;
19 // Avoid using mixin so we can pass custom focus shadow properly
20 @if $enable-shadows {
21 box-shadow: $input-box-shadow, $input-focus-box-shadow;
22 } @else {
23 box-shadow: $input-focus-box-shadow;
24 }
25 }
26}
27
28
29@mixin form-validation-state($state, $color) {
30 .#{$state}-feedback {
31 display: none;
32 width: 100%;
33 margin-top: $form-feedback-margin-top;
34 font-size: $form-feedback-font-size;
35 color: $color;
36 }
37
38 .#{$state}-tooltip {
39 position: absolute;
40 top: 100%;
41 z-index: 5;
42 display: none;
43 max-width: 100%; // Contain to parent when possible
44 padding: .5rem;
45 margin-top: .1rem;
46 font-size: .875rem;
47 line-height: 1;
48 color: $white;
49 background-color: rgba($color, .8);
50 border-radius: .2rem;
51 }
52
53 .form-control,
54 .custom-select {
55 .was-validated &:#{$state},
56 &.is-#{$state} {
57 border-color: $color;
58
59 &:focus {
60 border-color: $color;
61 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
62 }
63
64 ~ .#{$state}-feedback,
65 ~ .#{$state}-tooltip {
66 display: block;
67 }
68 }
69 }
70
71 .form-check-input {
72 .was-validated &:#{$state},
73 &.is-#{$state} {
74 ~ .form-check-label {
75 color: $color;
76 }
77
78 ~ .#{$state}-feedback,
79 ~ .#{$state}-tooltip {
80 display: block;
81 }
82 }
83 }
84
85 .custom-control-input {
86 .was-validated &:#{$state},
87 &.is-#{$state} {
88 ~ .custom-control-label {
89 color: $color;
90
91 &::before {
92 background-color: lighten($color, 25%);
93 }
94 }
95
96 ~ .#{$state}-feedback,
97 ~ .#{$state}-tooltip {
98 display: block;
99 }
100
101 &:checked {
102 ~ .custom-control-label::before {
103 @include gradient-bg(lighten($color, 10%));
104 }
105 }
106
107 &:focus {
108 ~ .custom-control-label::before {
109 box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
110 }
111 }
112 }
113 }
114
115 // custom file
116 .custom-file-input {
117 .was-validated &:#{$state},
118 &.is-#{$state} {
119 ~ .custom-file-label {
120 border-color: $color;
121
122 &::before { border-color: inherit; }
123 }
124
125 ~ .#{$state}-feedback,
126 ~ .#{$state}-tooltip {
127 display: block;
128 }
129
130 &:focus {
131 ~ .custom-file-label {
132 box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
133 }
134 }
135 }
136 }
137}