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

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

Mise a jour de BS v3.3.6 : attention le fichier variables.less comprend une variable supplementaire qu'il faut ajouter dans son fichier personalise le cas echeant

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