Mercurial > wikked

comparison static/bootstrap/less/forms.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 //
2 // Forms
3 // --------------------------------------------------
4
5
6 // GENERAL STYLES
7 // --------------
8
9 // Make all forms have space below them
10 form {
11 margin: 0 0 @baseLineHeight;
12 }
13
14 fieldset {
15 padding: 0;
16 margin: 0;
17 border: 0;
18 }
19
20 // Groups of fields with labels on top (legends)
21 legend {
22 display: block;
23 width: 100%;
24 padding: 0;
25 margin-bottom: @baseLineHeight;
26 font-size: @baseFontSize * 1.5;
27 line-height: @baseLineHeight * 2;
28 color: @grayDark;
29 border: 0;
30 border-bottom: 1px solid #e5e5e5;
31
32 // Small
33 small {
34 font-size: @baseLineHeight * .75;
35 color: @grayLight;
36 }
37 }
38
39 // Set font for forms
40 label,
41 input,
42 button,
43 select,
44 textarea {
45 #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
46 }
47 input,
48 button,
49 select,
50 textarea {
51 font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
52 }
53
54 // Identify controls by their labels
55 label {
56 display: block;
57 margin-bottom: 5px;
58 }
59
60 // Form controls
61 // -------------------------
62
63 // Shared size and type resets
64 select,
65 textarea,
66 input[type="text"],
67 input[type="password"],
68 input[type="datetime"],
69 input[type="datetime-local"],
70 input[type="date"],
71 input[type="month"],
72 input[type="time"],
73 input[type="week"],
74 input[type="number"],
75 input[type="email"],
76 input[type="url"],
77 input[type="search"],
78 input[type="tel"],
79 input[type="color"],
80 .uneditable-input {
81 display: inline-block;
82 height: @baseLineHeight;
83 padding: 4px 6px;
84 margin-bottom: @baseLineHeight / 2;
85 font-size: @baseFontSize;
86 line-height: @baseLineHeight;
87 color: @gray;
88 .border-radius(@inputBorderRadius);
89 vertical-align: middle;
90 }
91
92 // Reset appearance properties for textual inputs and textarea
93 // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
94 input,
95 textarea,
96 .uneditable-input {
97 width: 206px; // plus 12px padding and 2px border
98 }
99 // Reset height since textareas have rows
100 textarea {
101 height: auto;
102 }
103 // Everything else
104 textarea,
105 input[type="text"],
106 input[type="password"],
107 input[type="datetime"],
108 input[type="datetime-local"],
109 input[type="date"],
110 input[type="month"],
111 input[type="time"],
112 input[type="week"],
113 input[type="number"],
114 input[type="email"],
115 input[type="url"],
116 input[type="search"],
117 input[type="tel"],
118 input[type="color"],
119 .uneditable-input {
120 background-color: @inputBackground;
121 border: 1px solid @inputBorder;
122 .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
123 .transition(~"border linear .2s, box-shadow linear .2s");
124
125 // Focus state
126 &:focus {
127 border-color: rgba(82,168,236,.8);
128 outline: 0;
129 outline: thin dotted \9; /* IE6-9 */
130 .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
131 }
132 }
133
134 // Position radios and checkboxes better
135 input[type="radio"],
136 input[type="checkbox"] {
137 margin: 4px 0 0;
138 *margin-top: 0; /* IE7 */
139 margin-top: 1px \9; /* IE8-9 */
140 line-height: normal;
141 }
142
143 // Reset width of input images, buttons, radios, checkboxes
144 input[type="file"],
145 input[type="image"],
146 input[type="submit"],
147 input[type="reset"],
148 input[type="button"],
149 input[type="radio"],
150 input[type="checkbox"] {
151 width: auto; // Override of generic input selector
152 }
153
154 // Set the height of select and file controls to match text inputs
155 select,
156 input[type="file"] {
157 height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
158 *margin-top: 4px; /* For IE7, add top margin to align select with labels */
159 line-height: @inputHeight;
160 }
161
162 // Make select elements obey height by applying a border
163 select {
164 width: 220px; // default input width + 10px of padding that doesn't get applied
165 border: 1px solid @inputBorder;
166 background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
167 }
168
169 // Make multiple select elements height not fixed
170 select[multiple],
171 select[size] {
172 height: auto;
173 }
174
175 // Focus for select, file, radio, and checkbox
176 select:focus,
177 input[type="file"]:focus,
178 input[type="radio"]:focus,
179 input[type="checkbox"]:focus {
180 .tab-focus();
181 }
182
183
184 // Uneditable inputs
185 // -------------------------
186
187 // Make uneditable inputs look inactive
188 .uneditable-input,
189 .uneditable-textarea {
190 color: @grayLight;
191 background-color: darken(@inputBackground, 1%);
192 border-color: @inputBorder;
193 .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
194 cursor: not-allowed;
195 }
196
197 // For text that needs to appear as an input but should not be an input
198 .uneditable-input {
199 overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
200 white-space: nowrap;
201 }
202
203 // Make uneditable textareas behave like a textarea
204 .uneditable-textarea {
205 width: auto;
206 height: auto;
207 }
208
209
210 // Placeholder
211 // -------------------------
212
213 // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
214 input,
215 textarea {
216 .placeholder();
217 }
218
219
220 // CHECKBOXES & RADIOS
221 // -------------------
222
223 // Indent the labels to position radios/checkboxes as hanging
224 .radio,
225 .checkbox {
226 min-height: @baseLineHeight; // clear the floating input if there is no label text
227 padding-left: 20px;
228 }
229 .radio input[type="radio"],
230 .checkbox input[type="checkbox"] {
231 float: left;
232 margin-left: -20px;
233 }
234
235 // Move the options list down to align with labels
236 .controls > .radio:first-child,
237 .controls > .checkbox:first-child {
238 padding-top: 5px; // has to be padding because margin collaspes
239 }
240
241 // Radios and checkboxes on same line
242 // TODO v3: Convert .inline to .control-inline
243 .radio.inline,
244 .checkbox.inline {
245 display: inline-block;
246 padding-top: 5px;
247 margin-bottom: 0;
248 vertical-align: middle;
249 }
250 .radio.inline + .radio.inline,
251 .checkbox.inline + .checkbox.inline {
252 margin-left: 10px; // space out consecutive inline controls
253 }
254
255
256
257 // INPUT SIZES
258 // -----------
259
260 // General classes for quick sizes
261 .input-mini { width: 60px; }
262 .input-small { width: 90px; }
263 .input-medium { width: 150px; }
264 .input-large { width: 210px; }
265 .input-xlarge { width: 270px; }
266 .input-xxlarge { width: 530px; }
267
268 // Grid style input sizes
269 input[class*="span"],
270 select[class*="span"],
271 textarea[class*="span"],
272 .uneditable-input[class*="span"],
273 // Redeclare since the fluid row class is more specific
274 .row-fluid input[class*="span"],
275 .row-fluid select[class*="span"],
276 .row-fluid textarea[class*="span"],
277 .row-fluid .uneditable-input[class*="span"] {
278 float: none;
279 margin-left: 0;
280 }
281 // Ensure input-prepend/append never wraps
282 .input-append input[class*="span"],
283 .input-append .uneditable-input[class*="span"],
284 .input-prepend input[class*="span"],
285 .input-prepend .uneditable-input[class*="span"],
286 .row-fluid input[class*="span"],
287 .row-fluid select[class*="span"],
288 .row-fluid textarea[class*="span"],
289 .row-fluid .uneditable-input[class*="span"],
290 .row-fluid .input-prepend [class*="span"],
291 .row-fluid .input-append [class*="span"] {
292 display: inline-block;
293 }
294
295
296
297 // GRID SIZING FOR INPUTS
298 // ----------------------
299
300 // Grid sizes
301 #grid > .input(@gridColumnWidth, @gridGutterWidth);
302
303 // Control row for multiple inputs per line
304 .controls-row {
305 .clearfix(); // Clear the float from controls
306 }
307
308 // Float to collapse white-space for proper grid alignment
309 .controls-row [class*="span"],
310 // Redeclare the fluid grid collapse since we undo the float for inputs
311 .row-fluid .controls-row [class*="span"] {
312 float: left;
313 }
314 // Explicity set top padding on all checkboxes/radios, not just first-child
315 .controls-row .checkbox[class*="span"],
316 .controls-row .radio[class*="span"] {
317 padding-top: 5px;
318 }
319
320
321
322
323 // DISABLED STATE
324 // --------------
325
326 // Disabled and read-only inputs
327 input[disabled],
328 select[disabled],
329 textarea[disabled],
330 input[readonly],
331 select[readonly],
332 textarea[readonly] {
333 cursor: not-allowed;
334 background-color: @inputDisabledBackground;
335 }
336 // Explicitly reset the colors here
337 input[type="radio"][disabled],
338 input[type="checkbox"][disabled],
339 input[type="radio"][readonly],
340 input[type="checkbox"][readonly] {
341 background-color: transparent;
342 }
343
344
345
346
347 // FORM FIELD FEEDBACK STATES
348 // --------------------------
349
350 // Warning
351 .control-group.warning {
352 .formFieldState(@warningText, @warningText, @warningBackground);
353 }
354 // Error
355 .control-group.error {
356 .formFieldState(@errorText, @errorText, @errorBackground);
357 }
358 // Success
359 .control-group.success {
360 .formFieldState(@successText, @successText, @successBackground);
361 }
362 // Success
363 .control-group.info {
364 .formFieldState(@infoText, @infoText, @infoBackground);
365 }
366
367 // HTML5 invalid states
368 // Shares styles with the .control-group.error above
369 input:focus:invalid,
370 textarea:focus:invalid,
371 select:focus:invalid {
372 color: #b94a48;
373 border-color: #ee5f5b;
374 &:focus {
375 border-color: darken(#ee5f5b, 10%);
376 @shadow: 0 0 6px lighten(#ee5f5b, 20%);
377 .box-shadow(@shadow);
378 }
379 }
380
381
382
383 // FORM ACTIONS
384 // ------------
385
386 .form-actions {
387 padding: (@baseLineHeight - 1) 20px @baseLineHeight;
388 margin-top: @baseLineHeight;
389 margin-bottom: @baseLineHeight;
390 background-color: @formActionsBackground;
391 border-top: 1px solid #e5e5e5;
392 .clearfix(); // Adding clearfix to allow for .pull-right button containers
393 }
394
395
396
397 // HELP TEXT
398 // ---------
399
400 .help-block,
401 .help-inline {
402 color: lighten(@textColor, 15%); // lighten the text some for contrast
403 }
404
405 .help-block {
406 display: block; // account for any element using help-block
407 margin-bottom: @baseLineHeight / 2;
408 }
409
410 .help-inline {
411 display: inline-block;
412 .ie7-inline-block();
413 vertical-align: middle;
414 padding-left: 5px;
415 }
416
417
418
419 // INPUT GROUPS
420 // ------------
421
422 // Allow us to put symbols and text within the input field for a cleaner look
423 .input-append,
424 .input-prepend {
425 margin-bottom: 5px;
426 font-size: 0; // white space collapse hack
427 white-space: nowrap; // Prevent span and input from separating
428
429 // Reset the white space collapse hack
430 input,
431 select,
432 .uneditable-input,
433 .dropdown-menu {
434 font-size: @baseFontSize;
435 }
436
437 input,
438 select,
439 .uneditable-input {
440 position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
441 margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
442 *margin-left: 0;
443 vertical-align: top;
444 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
445 // Make input on top when focused so blue border and shadow always show
446 &:focus {
447 z-index: 2;
448 }
449 }
450 .add-on {
451 display: inline-block;
452 width: auto;
453 height: @baseLineHeight;
454 min-width: 16px;
455 padding: 4px 5px;
456 font-size: @baseFontSize;
457 font-weight: normal;
458 line-height: @baseLineHeight;
459 text-align: center;
460 text-shadow: 0 1px 0 @white;
461 background-color: @grayLighter;
462 border: 1px solid #ccc;
463 }
464 .add-on,
465 .btn,
466 .btn-group > .dropdown-toggle {
467 vertical-align: top;
468 .border-radius(0);
469 }
470 .active {
471 background-color: lighten(@green, 30);
472 border-color: @green;
473 }
474 }
475
476 .input-prepend {
477 .add-on,
478 .btn {
479 margin-right: -1px;
480 }
481 .add-on:first-child,
482 .btn:first-child {
483 // FYI, `.btn:first-child` accounts for a button group that's prepended
484 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
485 }
486 }
487
488 .input-append {
489 input,
490 select,
491 .uneditable-input {
492 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
493 + .btn-group .btn:last-child {
494 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
495 }
496 }
497 .add-on,
498 .btn,
499 .btn-group {
500 margin-left: -1px;
501 }
502 .add-on:last-child,
503 .btn:last-child,
504 .btn-group:last-child > .dropdown-toggle {
505 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
506 }
507 }
508
509 // Remove all border-radius for inputs with both prepend and append
510 .input-prepend.input-append {
511 input,
512 select,
513 .uneditable-input {
514 .border-radius(0);
515 + .btn-group .btn {
516 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
517 }
518 }
519 .add-on:first-child,
520 .btn:first-child {
521 margin-right: -1px;
522 .border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
523 }
524 .add-on:last-child,
525 .btn:last-child {
526 margin-left: -1px;
527 .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
528 }
529 .btn-group:first-child {
530 margin-left: 0;
531 }
532 }
533
534
535
536
537 // SEARCH FORM
538 // -----------
539
540 input.search-query {
541 padding-right: 14px;
542 padding-right: 4px \9;
543 padding-left: 14px;
544 padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
545 margin-bottom: 0; // Remove the default margin on all inputs
546 .border-radius(15px);
547 }
548
549 /* Allow for input prepend/append in search forms */
550 .form-search .input-append .search-query,
551 .form-search .input-prepend .search-query {
552 .border-radius(0); // Override due to specificity
553 }
554 .form-search .input-append .search-query {
555 .border-radius(14px 0 0 14px);
556 }
557 .form-search .input-append .btn {
558 .border-radius(0 14px 14px 0);
559 }
560 .form-search .input-prepend .search-query {
561 .border-radius(0 14px 14px 0);
562 }
563 .form-search .input-prepend .btn {
564 .border-radius(14px 0 0 14px);
565 }
566
567
568
569
570 // HORIZONTAL & VERTICAL FORMS
571 // ---------------------------
572
573 // Common properties
574 // -----------------
575
576 .form-search,
577 .form-inline,
578 .form-horizontal {
579 input,
580 textarea,
581 select,
582 .help-inline,
583 .uneditable-input,
584 .input-prepend,
585 .input-append {
586 display: inline-block;
587 .ie7-inline-block();
588 margin-bottom: 0;
589 vertical-align: middle;
590 }
591 // Re-hide hidden elements due to specifity
592 .hide {
593 display: none;
594 }
595 }
596 .form-search label,
597 .form-inline label,
598 .form-search .btn-group,
599 .form-inline .btn-group {
600 display: inline-block;
601 }
602 // Remove margin for input-prepend/-append
603 .form-search .input-append,
604 .form-inline .input-append,
605 .form-search .input-prepend,
606 .form-inline .input-prepend {
607 margin-bottom: 0;
608 }
609 // Inline checkbox/radio labels (remove padding on left)
610 .form-search .radio,
611 .form-search .checkbox,
612 .form-inline .radio,
613 .form-inline .checkbox {
614 padding-left: 0;
615 margin-bottom: 0;
616 vertical-align: middle;
617 }
618 // Remove float and margin, set to inline-block
619 .form-search .radio input[type="radio"],
620 .form-search .checkbox input[type="checkbox"],
621 .form-inline .radio input[type="radio"],
622 .form-inline .checkbox input[type="checkbox"] {
623 float: left;
624 margin-right: 3px;
625 margin-left: 0;
626 }
627
628
629 // Margin to space out fieldsets
630 .control-group {
631 margin-bottom: @baseLineHeight / 2;
632 }
633
634 // Legend collapses margin, so next element is responsible for spacing
635 legend + .control-group {
636 margin-top: @baseLineHeight;
637 -webkit-margin-top-collapse: separate;
638 }
639
640 // Horizontal-specific styles
641 // --------------------------
642
643 .form-horizontal {
644 // Increase spacing between groups
645 .control-group {
646 margin-bottom: @baseLineHeight;
647 .clearfix();
648 }
649 // Float the labels left
650 .control-label {
651 float: left;
652 width: @horizontalComponentOffset - 20;
653 padding-top: 5px;
654 text-align: right;
655 }
656 // Move over all input controls and content
657 .controls {
658 // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
659 // don't inherit the margin of the parent, in this case .controls
660 *display: inline-block;
661 *padding-left: 20px;
662 margin-left: @horizontalComponentOffset;
663 *margin-left: 0;
664 &:first-child {
665 *padding-left: @horizontalComponentOffset;
666 }
667 }
668 // Remove bottom margin on block level help text since that's accounted for on .control-group
669 .help-block {
670 margin-bottom: 0;
671 }
672 // And apply it only to .help-block instances that follow a form control
673 input,
674 select,
675 textarea,
676 .uneditable-input,
677 .input-prepend,
678 .input-append {
679 + .help-block {
680 margin-top: @baseLineHeight / 2;
681 }
682 }
683 // Move over buttons in .form-actions to align with .controls
684 .form-actions {
685 padding-left: @horizontalComponentOffset;
686 }
687 }