|
0
|
1 // scss-lint:disable QualifyingElement, VendorPrefix
|
|
|
2
|
|
|
3 //
|
|
|
4 // Textual form controls
|
|
|
5 //
|
|
|
6
|
|
|
7 .form-control {
|
|
|
8 display: block;
|
|
|
9 width: 100%;
|
|
|
10 // // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
|
|
11 // height: $input-height;
|
|
|
12 padding: $input-btn-padding-y $input-btn-padding-x;
|
|
|
13 font-size: $font-size-base;
|
|
|
14 line-height: $input-btn-line-height;
|
|
|
15 color: $input-color;
|
|
|
16 background-color: $input-bg;
|
|
|
17 // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
|
|
18 background-image: none;
|
|
|
19 background-clip: padding-box;
|
|
|
20 border: $input-btn-border-width solid $input-border-color;
|
|
|
21
|
|
|
22 // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
|
|
23 @if $enable-rounded {
|
|
|
24 // Manually use the if/else instead of the mixin to account for iOS override
|
|
|
25 border-radius: $input-border-radius;
|
|
|
26 } @else {
|
|
|
27 // Otherwise undo the iOS default
|
|
|
28 border-radius: 0;
|
|
|
29 }
|
|
|
30
|
|
|
31 @include box-shadow($input-box-shadow);
|
|
|
32 @include transition($input-transition);
|
|
|
33
|
|
|
34 // Unstyle the caret on `<select>`s in IE10+.
|
|
|
35 &::-ms-expand {
|
|
|
36 background-color: transparent;
|
|
|
37 border: 0;
|
|
|
38 }
|
|
|
39
|
|
|
40 // Customize the `:focus` state to imitate native WebKit styles.
|
|
|
41 @include form-control-focus();
|
|
|
42
|
|
|
43 // Placeholder
|
|
|
44 &::placeholder {
|
|
|
45 color: $input-placeholder-color;
|
|
|
46 // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
|
|
47 opacity: 1;
|
|
|
48 }
|
|
|
49
|
|
|
50 // Disabled and read-only inputs
|
|
|
51 //
|
|
|
52 // HTML5 says that controls under a fieldset > legend:first-child won't be
|
|
|
53 // disabled if the fieldset is disabled. Due to implementation difficulty, we
|
|
|
54 // don't honor that edge case; we style them as disabled anyway.
|
|
|
55 &:disabled,
|
|
|
56 &[readonly] {
|
|
|
57 background-color: $input-disabled-bg;
|
|
|
58 // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
|
|
59 opacity: 1;
|
|
|
60 }
|
|
|
61 }
|
|
|
62
|
|
|
63 select.form-control {
|
|
|
64 &:not([size]):not([multiple]) {
|
|
|
65 height: $input-height;
|
|
|
66 }
|
|
|
67
|
|
|
68 &:focus::-ms-value {
|
|
|
69 // Suppress the nested default white text on blue background highlight given to
|
|
|
70 // the selected option text when the (still closed) <select> receives focus
|
|
|
71 // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
|
|
72 // match the appearance of the native widget.
|
|
|
73 // See https://github.com/twbs/bootstrap/issues/19398.
|
|
|
74 color: $input-color;
|
|
|
75 background-color: $input-bg;
|
|
|
76 }
|
|
|
77 }
|
|
|
78
|
|
|
79 // Make file inputs better match text inputs by forcing them to new lines.
|
|
|
80 .form-control-file,
|
|
|
81 .form-control-range {
|
|
|
82 display: block;
|
|
|
83 }
|
|
|
84
|
|
|
85
|
|
|
86 //
|
|
|
87 // Labels
|
|
|
88 //
|
|
|
89
|
|
|
90 // For use with horizontal and inline forms, when you need the label text to
|
|
|
91 // align with the form controls.
|
|
|
92 .col-form-label {
|
|
|
93 padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
|
|
94 padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2);
|
|
|
95 margin-bottom: 0; // Override the `<label>` default
|
|
|
96 }
|
|
|
97
|
|
|
98 .col-form-label-lg {
|
|
|
99 padding-top: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
|
|
100 padding-bottom: calc(#{$input-btn-padding-y-lg} - #{$input-btn-border-width} * 2);
|
|
|
101 font-size: $font-size-lg;
|
|
|
102 }
|
|
|
103
|
|
|
104 .col-form-label-sm {
|
|
|
105 padding-top: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
|
|
106 padding-bottom: calc(#{$input-btn-padding-y-sm} - #{$input-btn-border-width} * 2);
|
|
|
107 font-size: $font-size-sm;
|
|
|
108 }
|
|
|
109
|
|
|
110
|
|
|
111 //
|
|
|
112 // Legends
|
|
|
113 //
|
|
|
114
|
|
|
115 // For use with horizontal and inline forms, when you need the legend text to
|
|
|
116 // be the same size as regular labels, and to align with the form controls.
|
|
|
117 .col-form-legend {
|
|
|
118 padding-top: $input-btn-padding-y;
|
|
|
119 padding-bottom: $input-btn-padding-y;
|
|
|
120 margin-bottom: 0;
|
|
|
121 font-size: $font-size-base;
|
|
|
122 }
|
|
|
123
|
|
|
124
|
|
|
125 // Readonly controls as plain text
|
|
|
126 //
|
|
|
127 // Apply class to a readonly input to make it appear like regular plain
|
|
|
128 // text (without any border, background color, focus indicator)
|
|
|
129
|
|
|
130 .form-control-plaintext {
|
|
|
131 padding-top: $input-btn-padding-y;
|
|
|
132 padding-bottom: $input-btn-padding-y;
|
|
|
133 margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
|
|
134 line-height: $input-btn-line-height;
|
|
|
135 border: solid transparent;
|
|
|
136 border-width: $input-btn-border-width 0;
|
|
|
137
|
|
|
138 &.form-control-sm,
|
|
|
139 &.form-control-lg {
|
|
|
140 padding-right: 0;
|
|
|
141 padding-left: 0;
|
|
|
142 }
|
|
|
143 }
|
|
|
144
|
|
|
145
|
|
|
146 // Form control sizing
|
|
|
147 //
|
|
|
148 // Build on `.form-control` with modifier classes to decrease or increase the
|
|
|
149 // height and font-size of form controls.
|
|
|
150 //
|
|
|
151 // The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
|
|
152 // issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
|
|
153
|
|
|
154 .form-control-sm {
|
|
|
155 padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
|
|
156 font-size: $font-size-sm;
|
|
|
157 line-height: $input-btn-line-height-sm;
|
|
|
158 @include border-radius($input-border-radius-sm);
|
|
|
159 }
|
|
|
160
|
|
|
161 select.form-control-sm {
|
|
|
162 &:not([size]):not([multiple]) {
|
|
|
163 height: $input-height-sm;
|
|
|
164 }
|
|
|
165 }
|
|
|
166
|
|
|
167 .form-control-lg {
|
|
|
168 padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
|
|
169 font-size: $font-size-lg;
|
|
|
170 line-height: $input-btn-line-height-lg;
|
|
|
171 @include border-radius($input-border-radius-lg);
|
|
|
172 }
|
|
|
173
|
|
|
174 select.form-control-lg {
|
|
|
175 &:not([size]):not([multiple]) {
|
|
|
176 height: $input-height-lg;
|
|
|
177 }
|
|
|
178 }
|
|
|
179
|
|
|
180
|
|
|
181 // Form groups
|
|
|
182 //
|
|
|
183 // Designed to help with the organization and spacing of vertical forms. For
|
|
|
184 // horizontal forms, use the predefined grid classes.
|
|
|
185
|
|
|
186 .form-group {
|
|
|
187 margin-bottom: $form-group-margin-bottom;
|
|
|
188 }
|
|
|
189
|
|
|
190 .form-text {
|
|
|
191 display: block;
|
|
|
192 margin-top: $form-text-margin-top;
|
|
|
193 }
|
|
|
194
|
|
|
195
|
|
|
196 // Form grid
|
|
|
197 //
|
|
|
198 // Special replacement for our grid system's `.row` for tighter form layouts.
|
|
|
199
|
|
|
200 .form-row {
|
|
|
201 display: flex;
|
|
|
202 flex-wrap: wrap;
|
|
|
203 margin-right: -5px;
|
|
|
204 margin-left: -5px;
|
|
|
205
|
|
|
206 > .col,
|
|
|
207 > [class*="col-"] {
|
|
|
208 padding-right: 5px;
|
|
|
209 padding-left: 5px;
|
|
|
210 }
|
|
|
211 }
|
|
|
212
|
|
|
213
|
|
|
214 // Checkboxes and radios
|
|
|
215 //
|
|
|
216 // Indent the labels to position radios/checkboxes as hanging controls.
|
|
|
217
|
|
|
218 .form-check {
|
|
|
219 position: relative;
|
|
|
220 display: block;
|
|
|
221 margin-bottom: $form-check-margin-bottom;
|
|
|
222
|
|
|
223 &.disabled {
|
|
|
224 .form-check-label {
|
|
|
225 color: $text-muted;
|
|
|
226 }
|
|
|
227 }
|
|
|
228 }
|
|
|
229
|
|
|
230 .form-check-label {
|
|
|
231 padding-left: $form-check-input-gutter;
|
|
|
232 margin-bottom: 0; // Override default `<label>` bottom margin
|
|
|
233 }
|
|
|
234
|
|
|
235 .form-check-input {
|
|
|
236 position: absolute;
|
|
|
237 margin-top: $form-check-input-margin-y;
|
|
|
238 margin-left: -$form-check-input-gutter;
|
|
|
239
|
|
|
240 &:only-child {
|
|
|
241 position: static;
|
|
|
242 }
|
|
|
243 }
|
|
|
244
|
|
|
245 // Radios and checkboxes on same line
|
|
|
246 .form-check-inline {
|
|
|
247 display: inline-block;
|
|
|
248
|
|
|
249 .form-check-label {
|
|
|
250 vertical-align: middle;
|
|
|
251 }
|
|
|
252
|
|
|
253 + .form-check-inline {
|
|
|
254 margin-left: $form-check-inline-margin-x;
|
|
|
255 }
|
|
|
256 }
|
|
|
257
|
|
|
258
|
|
|
259 // Form validation
|
|
|
260 //
|
|
|
261 // Provide feedback to users when form field values are valid or invalid. Works
|
|
|
262 // primarily for client-side validation via scoped `:invalid` and `:valid`
|
|
|
263 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
|
|
264 // server side validation.
|
|
|
265
|
|
|
266 .invalid-feedback {
|
|
|
267 display: none;
|
|
|
268 margin-top: .25rem;
|
|
|
269 font-size: .875rem;
|
|
|
270 color: $form-feedback-invalid-color;
|
|
|
271 }
|
|
|
272
|
|
|
273 .invalid-tooltip {
|
|
|
274 position: absolute;
|
|
|
275 top: 100%;
|
|
|
276 z-index: 5;
|
|
|
277 display: none;
|
|
|
278 width: 250px;
|
|
|
279 padding: .5rem;
|
|
|
280 margin-top: .1rem;
|
|
|
281 font-size: .875rem;
|
|
|
282 line-height: 1;
|
|
|
283 color: #fff;
|
|
|
284 background-color: rgba($form-feedback-invalid-color,.8);
|
|
|
285 border-radius: .2rem;
|
|
|
286 }
|
|
|
287
|
|
|
288 @include form-validation-state("valid", $form-feedback-valid-color);
|
|
|
289 @include form-validation-state("invalid", $form-feedback-invalid-color);
|
|
|
290
|
|
|
291 // Inline forms
|
|
|
292 //
|
|
|
293 // Make forms appear inline(-block) by adding the `.form-inline` class. Inline
|
|
|
294 // forms begin stacked on extra small (mobile) devices and then go inline when
|
|
|
295 // viewports reach <768px.
|
|
|
296 //
|
|
|
297 // Requires wrapping inputs and labels with `.form-group` for proper display of
|
|
|
298 // default HTML form controls and our custom form controls (e.g., input groups).
|
|
|
299
|
|
|
300 .form-inline {
|
|
|
301 display: flex;
|
|
|
302 flex-flow: row wrap;
|
|
|
303 align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
|
|
|
304
|
|
|
305 // Because we use flex, the initial sizing of checkboxes is collapsed and
|
|
|
306 // doesn't occupy the full-width (which is what we want for xs grid tier),
|
|
|
307 // so we force that here.
|
|
|
308 .form-check {
|
|
|
309 width: 100%;
|
|
|
310 }
|
|
|
311
|
|
|
312 // Kick in the inline
|
|
|
313 @include media-breakpoint-up(sm) {
|
|
|
314 label {
|
|
|
315 display: flex;
|
|
|
316 align-items: center;
|
|
|
317 justify-content: center;
|
|
|
318 margin-bottom: 0;
|
|
|
319 }
|
|
|
320
|
|
|
321 // Inline-block all the things for "inline"
|
|
|
322 .form-group {
|
|
|
323 display: flex;
|
|
|
324 flex: 0 0 auto;
|
|
|
325 flex-flow: row wrap;
|
|
|
326 align-items: center;
|
|
|
327 margin-bottom: 0;
|
|
|
328 }
|
|
|
329
|
|
|
330 // Allow folks to *not* use `.form-group`
|
|
|
331 .form-control {
|
|
|
332 display: inline-block;
|
|
|
333 width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
|
|
334 vertical-align: middle;
|
|
|
335 }
|
|
|
336
|
|
|
337 // Make static controls behave like regular ones
|
|
|
338 .form-control-plaintext {
|
|
|
339 display: inline-block;
|
|
|
340 }
|
|
|
341
|
|
|
342 .input-group {
|
|
|
343 width: auto;
|
|
|
344 }
|
|
|
345
|
|
|
346 .form-control-label {
|
|
|
347 margin-bottom: 0;
|
|
|
348 vertical-align: middle;
|
|
|
349 }
|
|
|
350
|
|
|
351 // Remove default margin on radios/checkboxes that were used for stacking, and
|
|
|
352 // then undo the floating of radios and checkboxes to match.
|
|
|
353 .form-check {
|
|
|
354 display: flex;
|
|
|
355 align-items: center;
|
|
|
356 justify-content: center;
|
|
|
357 width: auto;
|
|
|
358 margin-top: 0;
|
|
|
359 margin-bottom: 0;
|
|
|
360 }
|
|
|
361 .form-check-label {
|
|
|
362 padding-left: 0;
|
|
|
363 }
|
|
|
364 .form-check-input {
|
|
|
365 position: relative;
|
|
|
366 margin-top: 0;
|
|
|
367 margin-right: $form-check-input-margin-x;
|
|
|
368 margin-left: 0;
|
|
|
369 }
|
|
|
370
|
|
|
371 // Custom form controls
|
|
|
372 .custom-control {
|
|
|
373 display: flex;
|
|
|
374 align-items: center;
|
|
|
375 justify-content: center;
|
|
|
376 padding-left: 0;
|
|
|
377 }
|
|
|
378 .custom-control-indicator {
|
|
|
379 position: static;
|
|
|
380 display: inline-block;
|
|
|
381 margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
|
|
|
382 vertical-align: text-bottom;
|
|
|
383 }
|
|
|
384
|
|
|
385 // Re-override the feedback icon.
|
|
|
386 .has-feedback .form-control-feedback {
|
|
|
387 top: 0;
|
|
|
388 }
|
|
|
389 }
|
|
|
390 }
|
