source: trip-planner-front/node_modules/bootstrap/less/forms.less@ eed0bf8

Last change on this file since eed0bf8 was fa375fe, checked in by Ema <ema_spirova@…>, 3 years ago

adding new components

  • Property mode set to 100644
File size: 15.5 KB
Line 
1// stylelint-disable selector-no-qualifying-type, property-no-vendor-prefix, media-feature-name-no-vendor-prefix
2
3//
4// Forms
5// --------------------------------------------------
6
7
8// Normalize non-controls
9//
10// Restyle and baseline non-control form elements.
11
12fieldset {
13 // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
14 // so we reset that to ensure it behaves more like a standard block element.
15 // See https://github.com/twbs/bootstrap/issues/12359.
16 min-width: 0;
17 padding: 0;
18 margin: 0;
19 border: 0;
20}
21
22legend {
23 display: block;
24 width: 100%;
25 padding: 0;
26 margin-bottom: @line-height-computed;
27 font-size: (@font-size-base * 1.5);
28 line-height: inherit;
29 color: @legend-color;
30 border: 0;
31 border-bottom: 1px solid @legend-border-color;
32}
33
34label {
35 display: inline-block;
36 max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
37 margin-bottom: 5px;
38 font-weight: 700;
39}
40
41
42// Normalize form controls
43//
44// While most of our form styles require extra classes, some basic normalization
45// is required to ensure optimum display with or without those classes to better
46// address browser inconsistencies.
47
48input[type="search"] {
49 // Override content-box in Normalize (* isn't specific enough)
50 .box-sizing(border-box);
51
52 // Search inputs in iOS
53 //
54 // This overrides the extra rounded corners on search inputs in iOS so that our
55 // `.form-control` class can properly style them. Note that this cannot simply
56 // be added to `.form-control` as it's not specific enough. For details, see
57 // https://github.com/twbs/bootstrap/issues/11586.
58 -webkit-appearance: none;
59 appearance: none;
60}
61
62// Position radios and checkboxes better
63input[type="radio"],
64input[type="checkbox"] {
65 margin: 4px 0 0;
66 margin-top: 1px \9; // IE8-9
67 line-height: normal;
68
69 // Apply same disabled cursor tweak as for inputs
70 // Some special care is needed because <label>s don't inherit their parent's `cursor`.
71 //
72 // Note: Neither radios nor checkboxes can be readonly.
73 &[disabled],
74 &.disabled,
75 fieldset[disabled] & {
76 cursor: @cursor-disabled;
77 }
78}
79
80input[type="file"] {
81 display: block;
82}
83
84// Make range inputs behave like textual form controls
85input[type="range"] {
86 display: block;
87 width: 100%;
88}
89
90// Make multiple select elements height not fixed
91select[multiple],
92select[size] {
93 height: auto;
94}
95
96// Focus for file, radio, and checkbox
97input[type="file"]:focus,
98input[type="radio"]:focus,
99input[type="checkbox"]:focus {
100 .tab-focus();
101}
102
103// Adjust output element
104output {
105 display: block;
106 padding-top: (@padding-base-vertical + 1);
107 font-size: @font-size-base;
108 line-height: @line-height-base;
109 color: @input-color;
110}
111
112
113// Common form controls
114//
115// Shared size and type resets for form controls. Apply `.form-control` to any
116// of the following form controls:
117//
118// select
119// textarea
120// input[type="text"]
121// input[type="password"]
122// input[type="datetime"]
123// input[type="datetime-local"]
124// input[type="date"]
125// input[type="month"]
126// input[type="time"]
127// input[type="week"]
128// input[type="number"]
129// input[type="email"]
130// input[type="url"]
131// input[type="search"]
132// input[type="tel"]
133// input[type="color"]
134
135.form-control {
136 display: block;
137 width: 100%;
138 height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
139 padding: @padding-base-vertical @padding-base-horizontal;
140 font-size: @font-size-base;
141 line-height: @line-height-base;
142 color: @input-color;
143 background-color: @input-bg;
144 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
145 border: 1px solid @input-border;
146 border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
147 .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
148 .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
149
150 // Customize the `:focus` state to imitate native WebKit styles.
151 .form-control-focus();
152
153 // Placeholder
154 .placeholder();
155
156 // Unstyle the caret on `<select>`s in IE10+.
157 &::-ms-expand {
158 background-color: transparent;
159 border: 0;
160 }
161
162 // Disabled and read-only inputs
163 //
164 // HTML5 says that controls under a fieldset > legend:first-child won't be
165 // disabled if the fieldset is disabled. Due to implementation difficulty, we
166 // don't honor that edge case; we style them as disabled anyway.
167 &[disabled],
168 &[readonly],
169 fieldset[disabled] & {
170 background-color: @input-bg-disabled;
171 opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
172 }
173
174 &[disabled],
175 fieldset[disabled] & {
176 cursor: @cursor-disabled;
177 }
178
179 // Reset height for `textarea`s
180 textarea& {
181 height: auto;
182 }
183}
184
185
186// Special styles for iOS temporal inputs
187//
188// In Mobile Safari, setting `display: block` on temporal inputs causes the
189// text within the input to become vertically misaligned. As a workaround, we
190// set a pixel line-height that matches the given height of the input, but only
191// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
192//
193// Note that as of 9.3, iOS doesn't support `week`.
194
195@media screen and (-webkit-min-device-pixel-ratio: 0) {
196 input[type="date"],
197 input[type="time"],
198 input[type="datetime-local"],
199 input[type="month"] {
200 &.form-control {
201 line-height: @input-height-base;
202 }
203
204 &.input-sm,
205 .input-group-sm & {
206 line-height: @input-height-small;
207 }
208
209 &.input-lg,
210 .input-group-lg & {
211 line-height: @input-height-large;
212 }
213 }
214}
215
216
217// Form groups
218//
219// Designed to help with the organization and spacing of vertical forms. For
220// horizontal forms, use the predefined grid classes.
221
222.form-group {
223 margin-bottom: @form-group-margin-bottom;
224}
225
226
227// Checkboxes and radios
228//
229// Indent the labels to position radios/checkboxes as hanging controls.
230
231.radio,
232.checkbox {
233 position: relative;
234 display: block;
235 margin-top: 10px;
236 margin-bottom: 10px;
237
238 // These are used on elements with <label> descendants
239 &.disabled,
240 fieldset[disabled] & {
241 label {
242 cursor: @cursor-disabled;
243 }
244 }
245
246 label {
247 min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
248 padding-left: 20px;
249 margin-bottom: 0;
250 font-weight: 400;
251 cursor: pointer;
252 }
253}
254.radio input[type="radio"],
255.radio-inline input[type="radio"],
256.checkbox input[type="checkbox"],
257.checkbox-inline input[type="checkbox"] {
258 position: absolute;
259 margin-top: 4px \9;
260 margin-left: -20px;
261}
262
263.radio + .radio,
264.checkbox + .checkbox {
265 margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
266}
267
268// Radios and checkboxes on same line
269.radio-inline,
270.checkbox-inline {
271 position: relative;
272 display: inline-block;
273 padding-left: 20px;
274 margin-bottom: 0;
275 font-weight: 400;
276 vertical-align: middle;
277 cursor: pointer;
278
279 // These are used directly on <label>s
280 &.disabled,
281 fieldset[disabled] & {
282 cursor: @cursor-disabled;
283 }
284}
285.radio-inline + .radio-inline,
286.checkbox-inline + .checkbox-inline {
287 margin-top: 0;
288 margin-left: 10px; // space out consecutive inline controls
289}
290
291
292// Static form control text
293//
294// Apply class to a `p` element to make any string of text align with labels in
295// a horizontal form layout.
296
297.form-control-static {
298 min-height: (@line-height-computed + @font-size-base);
299 // Size it appropriately next to real form controls
300 padding-top: (@padding-base-vertical + 1);
301 padding-bottom: (@padding-base-vertical + 1);
302 // Remove default margin from `p`
303 margin-bottom: 0;
304
305 &.input-lg,
306 &.input-sm {
307 padding-right: 0;
308 padding-left: 0;
309 }
310}
311
312
313// Form control sizing
314//
315// Build on `.form-control` with modifier classes to decrease or increase the
316// height and font-size of form controls.
317//
318// The `.form-group-* form-control` variations are sadly duplicated to avoid the
319// issue documented in https://github.com/twbs/bootstrap/issues/15074.
320
321.input-sm {
322 .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
323}
324.form-group-sm {
325 .form-control {
326 height: @input-height-small;
327 padding: @padding-small-vertical @padding-small-horizontal;
328 font-size: @font-size-small;
329 line-height: @line-height-small;
330 border-radius: @input-border-radius-small;
331 }
332 select.form-control {
333 height: @input-height-small;
334 line-height: @input-height-small;
335 }
336 textarea.form-control,
337 select[multiple].form-control {
338 height: auto;
339 }
340 .form-control-static {
341 height: @input-height-small;
342 min-height: (@line-height-computed + @font-size-small);
343 padding: (@padding-small-vertical + 1) @padding-small-horizontal;
344 font-size: @font-size-small;
345 line-height: @line-height-small;
346 }
347}
348
349.input-lg {
350 .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
351}
352.form-group-lg {
353 .form-control {
354 height: @input-height-large;
355 padding: @padding-large-vertical @padding-large-horizontal;
356 font-size: @font-size-large;
357 line-height: @line-height-large;
358 border-radius: @input-border-radius-large;
359 }
360 select.form-control {
361 height: @input-height-large;
362 line-height: @input-height-large;
363 }
364 textarea.form-control,
365 select[multiple].form-control {
366 height: auto;
367 }
368 .form-control-static {
369 height: @input-height-large;
370 min-height: (@line-height-computed + @font-size-large);
371 padding: (@padding-large-vertical + 1) @padding-large-horizontal;
372 font-size: @font-size-large;
373 line-height: @line-height-large;
374 }
375}
376
377
378// Form control feedback states
379//
380// Apply contextual and semantic states to individual form controls.
381
382.has-feedback {
383 // Enable absolute positioning
384 position: relative;
385
386 // Ensure icons don't overlap text
387 .form-control {
388 padding-right: (@input-height-base * 1.25);
389 }
390}
391// Feedback icon (requires .glyphicon classes)
392.form-control-feedback {
393 position: absolute;
394 top: 0;
395 right: 0;
396 z-index: 2; // Ensure icon is above input groups
397 display: block;
398 width: @input-height-base;
399 height: @input-height-base;
400 line-height: @input-height-base;
401 text-align: center;
402 pointer-events: none;
403}
404.input-lg + .form-control-feedback,
405.input-group-lg + .form-control-feedback,
406.form-group-lg .form-control + .form-control-feedback {
407 width: @input-height-large;
408 height: @input-height-large;
409 line-height: @input-height-large;
410}
411.input-sm + .form-control-feedback,
412.input-group-sm + .form-control-feedback,
413.form-group-sm .form-control + .form-control-feedback {
414 width: @input-height-small;
415 height: @input-height-small;
416 line-height: @input-height-small;
417}
418
419// Feedback states
420.has-success {
421 .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
422}
423.has-warning {
424 .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
425}
426.has-error {
427 .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
428}
429
430// Reposition feedback icon if input has visible label above
431.has-feedback label {
432
433 & ~ .form-control-feedback {
434 top: (@line-height-computed + 5); // Height of the `label` and its margin
435 }
436 &.sr-only ~ .form-control-feedback {
437 top: 0;
438 }
439}
440
441
442// Help text
443//
444// Apply to any element you wish to create light text for placement immediately
445// below a form control. Use for general help, formatting, or instructional text.
446
447.help-block {
448 display: block; // account for any element using help-block
449 margin-top: 5px;
450 margin-bottom: 10px;
451 color: lighten(@text-color, 25%); // lighten the text some for contrast
452}
453
454
455// Inline forms
456//
457// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
458// forms begin stacked on extra small (mobile) devices and then go inline when
459// viewports reach <768px.
460//
461// Requires wrapping inputs and labels with `.form-group` for proper display of
462// default HTML form controls and our custom form controls (e.g., input groups).
463//
464// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
465
466.form-inline {
467
468 // Kick in the inline
469 @media (min-width: @screen-sm-min) {
470 // Inline-block all the things for "inline"
471 .form-group {
472 display: inline-block;
473 margin-bottom: 0;
474 vertical-align: middle;
475 }
476
477 // In navbar-form, allow folks to *not* use `.form-group`
478 .form-control {
479 display: inline-block;
480 width: auto; // Prevent labels from stacking above inputs in `.form-group`
481 vertical-align: middle;
482 }
483
484 // Make static controls behave like regular ones
485 .form-control-static {
486 display: inline-block;
487 }
488
489 .input-group {
490 display: inline-table;
491 vertical-align: middle;
492
493 .input-group-addon,
494 .input-group-btn,
495 .form-control {
496 width: auto;
497 }
498 }
499
500 // Input groups need that 100% width though
501 .input-group > .form-control {
502 width: 100%;
503 }
504
505 .control-label {
506 margin-bottom: 0;
507 vertical-align: middle;
508 }
509
510 // Remove default margin on radios/checkboxes that were used for stacking, and
511 // then undo the floating of radios and checkboxes to match.
512 .radio,
513 .checkbox {
514 display: inline-block;
515 margin-top: 0;
516 margin-bottom: 0;
517 vertical-align: middle;
518
519 label {
520 padding-left: 0;
521 }
522 }
523 .radio input[type="radio"],
524 .checkbox input[type="checkbox"] {
525 position: relative;
526 margin-left: 0;
527 }
528
529 // Re-override the feedback icon.
530 .has-feedback .form-control-feedback {
531 top: 0;
532 }
533 }
534}
535
536
537// Horizontal forms
538//
539// Horizontal forms are built on grid classes and allow you to create forms with
540// labels on the left and inputs on the right.
541
542.form-horizontal {
543
544 // Consistent vertical alignment of radios and checkboxes
545 //
546 // Labels also get some reset styles, but that is scoped to a media query below.
547 .radio,
548 .checkbox,
549 .radio-inline,
550 .checkbox-inline {
551 padding-top: (@padding-base-vertical + 1); // Default padding plus a border
552 margin-top: 0;
553 margin-bottom: 0;
554 }
555 // Account for padding we're adding to ensure the alignment and of help text
556 // and other content below items
557 .radio,
558 .checkbox {
559 min-height: (@line-height-computed + (@padding-base-vertical + 1));
560 }
561
562 // Make form groups behave like rows
563 .form-group {
564 .make-row();
565 }
566
567 // Reset spacing and right align labels, but scope to media queries so that
568 // labels on narrow viewports stack the same as a default form example.
569 @media (min-width: @screen-sm-min) {
570 .control-label {
571 padding-top: (@padding-base-vertical + 1); // Default padding plus a border
572 margin-bottom: 0;
573 text-align: right;
574 }
575 }
576
577 // Validation states
578 //
579 // Reposition the icon because it's now within a grid column and columns have
580 // `position: relative;` on them. Also accounts for the grid gutter padding.
581 .has-feedback .form-control-feedback {
582 right: floor((@grid-gutter-width / 2));
583 }
584
585 // Form group sizes
586 //
587 // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
588 // inputs and labels within a `.form-group`.
589 .form-group-lg {
590 @media (min-width: @screen-sm-min) {
591 .control-label {
592 padding-top: (@padding-large-vertical + 1);
593 font-size: @font-size-large;
594 }
595 }
596 }
597 .form-group-sm {
598 @media (min-width: @screen-sm-min) {
599 .control-label {
600 padding-top: (@padding-small-vertical + 1);
601 font-size: @font-size-small;
602 }
603 }
604 }
605}
Note: See TracBrowser for help on using the repository browser.