| 1 |
efrain |
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($ignore-warning: false) {
|
|
|
14 |
&:focus {
|
|
|
15 |
color: $input-focus-color;
|
|
|
16 |
background-color: $input-focus-bg;
|
|
|
17 |
border-color: $input-focus-border-color;
|
|
|
18 |
outline: 0;
|
|
|
19 |
@if $enable-shadows {
|
|
|
20 |
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
|
|
21 |
} @else {
|
|
|
22 |
// Avoid using mixin so we can pass custom focus shadow properly
|
|
|
23 |
box-shadow: $input-focus-box-shadow;
|
|
|
24 |
}
|
|
|
25 |
|
|
|
26 |
.theme-dark & {
|
|
|
27 |
color: $dm-input-focus-color;
|
|
|
28 |
background-color: $dm-input-focus-bg;
|
|
|
29 |
border-color: $dm-input-focus-border-color;
|
|
|
30 |
}
|
|
|
31 |
}
|
|
|
32 |
@include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
|
|
|
33 |
}
|
|
|
34 |
|
|
|
35 |
// This mixin uses an `if()` technique to be compatible with Dart Sass
|
|
|
36 |
// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
|
|
|
37 |
@mixin form-validation-state-selector($state) {
|
|
|
38 |
@if ($state == "valid" or $state == "invalid") {
|
|
|
39 |
.was-validated #{if(&, "&", "")}:#{$state},
|
|
|
40 |
#{if(&, "&", "")}.is-#{$state} {
|
|
|
41 |
@content;
|
|
|
42 |
}
|
|
|
43 |
} @else {
|
|
|
44 |
#{if(&, "&", "")}.is-#{$state} {
|
|
|
45 |
@content;
|
|
|
46 |
}
|
|
|
47 |
}
|
|
|
48 |
}
|
|
|
49 |
|
|
|
50 |
@mixin form-validation-state($state, $color, $icon) {
|
|
|
51 |
.#{$state}-feedback {
|
|
|
52 |
display: none;
|
|
|
53 |
width: 100%;
|
|
|
54 |
margin-top: $form-feedback-margin-top;
|
|
|
55 |
@include font-size($form-feedback-font-size);
|
|
|
56 |
color: $color;
|
|
|
57 |
}
|
|
|
58 |
|
|
|
59 |
.#{$state}-tooltip {
|
|
|
60 |
position: absolute;
|
|
|
61 |
top: 100%;
|
|
|
62 |
left: 0;
|
|
|
63 |
z-index: 5;
|
|
|
64 |
display: none;
|
|
|
65 |
max-width: 100%; // Contain to parent when possible
|
|
|
66 |
padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
|
|
|
67 |
margin-top: .1rem;
|
|
|
68 |
@include font-size($form-feedback-tooltip-font-size);
|
|
|
69 |
line-height: $form-feedback-tooltip-line-height;
|
|
|
70 |
color: color-yiq($color);
|
|
|
71 |
background-color: rgba($color, $form-feedback-tooltip-opacity);
|
|
|
72 |
@include border-radius($form-feedback-tooltip-border-radius);
|
|
|
73 |
|
|
|
74 |
// See https://github.com/twbs/bootstrap/pull/31557
|
|
|
75 |
// Align tooltip to form elements
|
|
|
76 |
.form-row > .col > &,
|
|
|
77 |
.form-row > [class*="col-"] > & {
|
|
|
78 |
left: $form-grid-gutter-width * .5;
|
|
|
79 |
}
|
|
|
80 |
}
|
|
|
81 |
|
|
|
82 |
@include form-validation-state-selector($state) {
|
|
|
83 |
~ .#{$state}-feedback,
|
|
|
84 |
~ .#{$state}-tooltip {
|
|
|
85 |
display: block;
|
|
|
86 |
}
|
|
|
87 |
}
|
|
|
88 |
|
|
|
89 |
.form-control {
|
|
|
90 |
@include form-validation-state-selector($state) {
|
|
|
91 |
border-color: $color;
|
|
|
92 |
|
|
|
93 |
@if $enable-validation-icons {
|
|
|
94 |
padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
|
|
|
95 |
background-image: escape-svg($icon);
|
|
|
96 |
background-repeat: no-repeat;
|
|
|
97 |
background-position: right $input-height-inner-quarter center;
|
|
|
98 |
background-size: $input-height-inner-half $input-height-inner-half;
|
|
|
99 |
}
|
|
|
100 |
|
|
|
101 |
&:focus {
|
|
|
102 |
border-color: $color;
|
|
|
103 |
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
|
104 |
}
|
|
|
105 |
}
|
|
|
106 |
}
|
|
|
107 |
|
|
|
108 |
// stylelint-disable-next-line selector-no-qualifying-type
|
|
|
109 |
select.form-control {
|
|
|
110 |
@include form-validation-state-selector($state) {
|
|
|
111 |
@if $enable-validation-icons {
|
|
|
112 |
padding-right: $input-padding-x * 4 !important; // stylelint-disable-line declaration-no-important
|
|
|
113 |
background-position: right $input-padding-x * 2 center;
|
|
|
114 |
}
|
|
|
115 |
}
|
|
|
116 |
}
|
|
|
117 |
|
|
|
118 |
// stylelint-disable-next-line selector-no-qualifying-type
|
|
|
119 |
textarea.form-control {
|
|
|
120 |
@include form-validation-state-selector($state) {
|
|
|
121 |
@if $enable-validation-icons {
|
|
|
122 |
padding-right: $input-height-inner;
|
|
|
123 |
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
|
|
|
124 |
}
|
|
|
125 |
}
|
|
|
126 |
}
|
|
|
127 |
|
|
|
128 |
.custom-select {
|
|
|
129 |
@include form-validation-state-selector($state) {
|
|
|
130 |
border-color: $color;
|
|
|
131 |
|
|
|
132 |
@if $enable-validation-icons {
|
|
|
133 |
padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
|
|
|
134 |
background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
|
|
|
135 |
}
|
|
|
136 |
|
|
|
137 |
&:focus {
|
|
|
138 |
border-color: $color;
|
|
|
139 |
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
|
140 |
}
|
|
|
141 |
}
|
|
|
142 |
}
|
|
|
143 |
|
|
|
144 |
.form-check-input {
|
|
|
145 |
@include form-validation-state-selector($state) {
|
|
|
146 |
~ .form-check-label {
|
|
|
147 |
color: $color;
|
|
|
148 |
}
|
|
|
149 |
|
|
|
150 |
~ .#{$state}-feedback,
|
|
|
151 |
~ .#{$state}-tooltip {
|
|
|
152 |
display: block;
|
|
|
153 |
}
|
|
|
154 |
}
|
|
|
155 |
}
|
|
|
156 |
|
|
|
157 |
.custom-control-input {
|
|
|
158 |
@include form-validation-state-selector($state) {
|
|
|
159 |
~ .custom-control-label {
|
|
|
160 |
color: $color;
|
|
|
161 |
|
|
|
162 |
&::before {
|
|
|
163 |
border-color: $color;
|
|
|
164 |
}
|
|
|
165 |
}
|
|
|
166 |
|
|
|
167 |
&:checked {
|
|
|
168 |
~ .custom-control-label::before {
|
|
|
169 |
border-color: lighten($color, 10%);
|
|
|
170 |
@include gradient-bg(lighten($color, 10%));
|
|
|
171 |
}
|
|
|
172 |
}
|
|
|
173 |
|
|
|
174 |
&:focus {
|
|
|
175 |
~ .custom-control-label::before {
|
|
|
176 |
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
|
177 |
}
|
|
|
178 |
|
|
|
179 |
&:not(:checked) ~ .custom-control-label::before {
|
|
|
180 |
border-color: $color;
|
|
|
181 |
}
|
|
|
182 |
}
|
|
|
183 |
}
|
|
|
184 |
}
|
|
|
185 |
|
|
|
186 |
// custom file
|
|
|
187 |
.custom-file-input {
|
|
|
188 |
@include form-validation-state-selector($state) {
|
|
|
189 |
~ .custom-file-label {
|
|
|
190 |
border-color: $color;
|
|
|
191 |
}
|
|
|
192 |
|
|
|
193 |
&:focus {
|
|
|
194 |
~ .custom-file-label {
|
|
|
195 |
border-color: $color;
|
|
|
196 |
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
|
|
197 |
}
|
|
|
198 |
}
|
|
|
199 |
}
|
|
|
200 |
}
|
|
|
201 |
}
|