source: spip-zone/_plugins_/bootstrap/trunk/bootstrap/css/forms.less @ 90741

Last change on this file since 90741 was 90741, checked in by cedric@…, 4 years ago

BS 3.3.5 dans la place, work in progress
le plugin passe en v3 dev
On s'occupera de la couche de compat BSv2 dans un second temps

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