/sass/bootstrap/_forms.scss
Sass | 482 lines | 325 code | 73 blank | 84 comment | 0 complexity | f8e73a8befa8593d7a962e27ed7bbec7 MD5 | raw file
1// Forms.less
2// Base styles for various input types, form layouts, and states
3// -------------------------------------------------------------
4
5
6// GENERAL STYLES
7// --------------
8
9// Make all forms have space below them
10form {
11 margin: 0 0 $baseLineHeight;
12}
13
14fieldset {
15 padding: 0;
16 margin: 0;
17 border: 0;
18}
19
20// Groups of fields with labels on top (legends)
21legend {
22 display: block;
23 width: 100%;
24 padding: 0;
25 margin-bottom: $baseLineHeight * 1.5;
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
40label, input, button, select, textarea {
41 @include font-shorthand($baseFontSize, normal, $baseLineHeight); // Set size, weight, line-height here
42}
43input, button, select, textarea {
44 font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
45}
46
47// Identify controls by their labels
48label {
49 display: block;
50 margin-bottom: 5px;
51}
52
53// Form controls
54// -------------------------
55
56// Shared size and type resets
57select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
58input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"],
59input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
60 display: inline-block;
61 height: $baseLineHeight;
62 padding: 4px;
63 margin-bottom: 9px;
64 font-size: $baseFontSize;
65 line-height: $baseLineHeight;
66 color: $gray;
67}
68
69// Reset appearance properties for textual inputs and textarea
70// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
71input, textarea {
72 width: 210px;
73}
74// Reset height since textareas have rows
75textarea {
76 height: auto;
77}
78// Everything else
79textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
80input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"],
81input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
82 background-color: $inputBackground;
83 border: 1px solid $inputBorder;
84 @include border-radius($inputBorderRadius);
85 @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
86 @include transition(#{border linear .2s, box-shadow linear .2s});
87
88 // Focus state
89 &:focus {
90 border-color: rgba(119,90,78,.8);
91 outline: 0;
92 outline: thin dotted \9; /* IE6-9 */
93 @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(119,90,78,.6)});
94 }
95}
96// 0 0 8px rgba(82,168,236,.6)});
97// Position radios and checkboxes better
98input[type="radio"], input[type="checkbox"] {
99 margin: 3px 0;
100 *margin-top: 0; /* IE7 */
101 line-height: normal;
102 cursor: pointer;
103}
104
105// Reset width of input buttons, radios, checkboxes
106input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] {
107 width: auto; // Override of generic input selector
108}
109
110// Make uneditable textareas behave like a textarea
111.uneditable-textarea {
112 width: auto;
113 height: auto;
114}
115
116// Set the height of select and file controls to match text inputs
117select, input[type="file"] {
118 height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
119 *margin-top: 4px; /* For IE7, add top margin to align select with labels */
120 line-height: 28px;
121}
122
123// Make select elements obey height by applying a border
124select {
125 width: 220px; // default input width + 10px of padding that doesn't get applied
126 border: 1px solid #bbb;
127}
128
129// Make multiple select elements height not fixed
130select[multiple], select[size] {
131 height: auto;
132}
133
134// Focus for select, file, radio, and checkbox
135select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
136 @include tab-focus();
137}
138
139
140
141// CHECKBOXES & RADIOS
142// -------------------
143
144// Indent the labels to position radios/checkboxes as hanging
145.radio, .checkbox {
146 min-height: 18px; // clear the floating input if there is no label text
147 padding-left: 18px;
148}
149.radio input[type="radio"], .checkbox input[type="checkbox"] {
150 float: left;
151 margin-left: -18px;
152}
153
154// Move the options list down to align with labels
155.controls > .radio:first-child, .controls > .checkbox:first-child {
156 padding-top: 5px; // has to be padding because margin collaspes
157}
158
159// Radios and checkboxes on same line
160// TODO v3: Convert .inline to .control-inline
161.radio.inline, .checkbox.inline {
162 display: inline-block;
163 padding-top: 5px;
164 margin-bottom: 0;
165 vertical-align: middle;
166}
167.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
168 margin-left: 10px; // space out consecutive inline controls
169}
170
171
172
173// INPUT SIZES
174// -----------
175
176// General classes for quick sizes
177.input-mini { width: 60px; }
178.input-small { width: 90px; }
179.input-medium { width: 150px; }
180.input-large { width: 210px; }
181.input-xlarge { width: 270px; }
182.input-xxlarge { width: 530px; }
183
184// Grid style input sizes
185input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
186// Redeclare since the fluid row class is more specific
187.row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {
188 float: none;
189 margin-left: 0;
190}
191// Ensure input-prepend/append never wraps
192.input-append input[class*="span"], .input-append .uneditable-input[class*="span"], .input-prepend input[class*="span"],
193.input-prepend .uneditable-input[class*="span"], .row-fluid .input-prepend [class*="span"], .row-fluid .input-append [class*="span"] {
194 display: inline-block;
195}
196
197
198
199// GRID SIZING FOR INPUTS
200// ----------------------
201
202@include gridInput($gridColumnWidth, $gridGutterWidth);
203
204
205
206// DISABLED STATE
207// --------------
208
209// Disabled and read-only inputs
210input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
211 cursor: not-allowed;
212 background-color: $inputDisabledBackground;
213 border-color: #ddd;
214}
215// Explicitly reset the colors here
216input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] {
217 background-color: transparent;
218}
219
220
221
222
223// FORM FIELD FEEDBACK STATES
224// --------------------------
225
226// Warning
227.control-group.warning {
228 @include formFieldState($warningText, $warningText, $warningBackground);
229}
230// Error
231.control-group.error {
232 @include formFieldState($errorText, $errorText, $errorBackground);
233}
234// Success
235.control-group.success {
236 @include formFieldState($successText, $successText, $successBackground);
237}
238
239// HTML5 invalid states
240// Shares styles with the .control-group.error above
241input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
242 color: #b94a48;
243 border-color: #ee5f5b;
244 &:focus {
245 border-color: darken(#ee5f5b, 10%);
246 @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
247 }
248}
249
250
251
252// FORM ACTIONS
253// ------------
254
255.form-actions {
256 padding: ($baseLineHeight - 1) 20px $baseLineHeight;
257 margin-top: $baseLineHeight;
258 margin-bottom: $baseLineHeight;
259 background-color: $formActionsBackground;
260 border-top: 1px solid #e5e5e5;
261 @include clearfix(); // Adding clearfix to allow for .pull-right button containers
262}
263
264// For text that needs to appear as an input but should not be an input
265.uneditable-input {
266 overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
267 white-space: nowrap;
268 cursor: not-allowed;
269 background-color: $inputBackground;
270 border-color: #eee;
271 @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
272}
273
274// Placeholder text gets special styles; can't be bundled together though for some reason
275// (sass-edit) - need special mixin
276@include rootPlaceholder();
277
278
279
280// HELP TEXT
281// ---------
282
283.help-block, .help-inline {
284 color: $gray; // lighten the text some for contrast
285}
286
287.help-block {
288 display: block; // account for any element using help-block
289 margin-bottom: $baseLineHeight / 2;
290}
291
292.help-inline {
293 display: inline-block;
294 @include ie7-inline-block();
295 vertical-align: middle;
296 padding-left: 5px;
297}
298
299
300
301// INPUT GROUPS
302// ------------
303
304// Allow us to put symbols and text within the input field for a cleaner look
305.input-prepend, .input-append {
306 margin-bottom: 5px;
307 input, select, .uneditable-input {
308 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
309 margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
310 *margin-left: 0;
311 vertical-align: middle;
312 @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
313 // Make input on top when focused so blue border and shadow always show
314 &:focus {
315 z-index: 2;
316 }
317 }
318 .uneditable-input {
319 border-left-color: #ccc;
320 }
321 .add-on {
322 display: inline-block;
323 width: auto;
324 height: $baseLineHeight;
325 min-width: 16px;
326 padding: 4px 5px;
327 font-weight: normal;
328 line-height: $baseLineHeight;
329 text-align: center;
330 text-shadow: 0 1px 0 $white;
331 vertical-align: middle;
332 background-color: $grayLighter;
333 border: 1px solid #ccc;
334 }
335 .add-on, .btn {
336 margin-left: -1px;
337 @include border-radius(0);
338 }
339 .active {
340 background-color: lighten($green, 30);
341 border-color: $green;
342 }
343}
344.input-prepend {
345 .add-on, .btn {
346 margin-right: -1px;
347 }
348 .add-on:first-child, .btn:first-child {
349 @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
350 }
351}
352.input-append {
353 input, select, .uneditable-input {
354 @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
355 }
356 .uneditable-input {
357 border-right-color: #ccc;
358 border-left-color: #eee;
359 }
360 .add-on:last-child, .btn:last-child {
361 @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
362 }
363}
364// Remove all border-radius for inputs with both prepend and append
365.input-prepend.input-append {
366 input, select, .uneditable-input {
367 @include border-radius(0);
368 }
369 .add-on:first-child, .btn:first-child {
370 margin-right: -1px;
371 @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
372 }
373 .add-on:last-child, .btn:last-child {
374 margin-left: -1px;
375 @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
376 }
377}
378
379
380
381// SEARCH FORM
382// -----------
383
384.search-query {
385 padding-right: 14px;
386 padding-right: 4px \9;
387 padding-left: 14px;
388 padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
389 margin-bottom: 0; // remove the default margin on all inputs
390 @include border-radius(14px);
391}
392
393
394
395// HORIZONTAL & VERTICAL FORMS
396// ---------------------------
397
398// Common properties
399// -----------------
400
401.form-search, .form-inline, .form-horizontal {
402 input, textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
403 display: inline-block;
404 @include ie7-inline-block();
405 margin-bottom: 0;
406 }
407 // Re-hide hidden elements due to specifity
408 .hide {
409 display: none;
410 }
411}
412.form-search label, .form-inline label {
413 display: inline-block;
414}
415// Remove margin for input-prepend/-append
416.form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend {
417 margin-bottom: 0;
418}
419// Inline checkbox/radio labels (remove padding on left)
420.form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox {
421 padding-left: 0;
422 margin-bottom: 0;
423 vertical-align: middle;
424}
425// Remove float and margin, set to inline-block
426.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"],
427.form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
428 float: left;
429 margin-right: 3px;
430 margin-left: 0;
431}
432
433
434// Margin to space out fieldsets
435.control-group {
436 margin-bottom: $baseLineHeight / 2;
437}
438
439// Legend collapses margin, so next element is responsible for spacing
440legend + .control-group {
441 margin-top: $baseLineHeight;
442 -webkit-margin-top-collapse: separate;
443}
444
445// Horizontal-specific styles
446// --------------------------
447
448.form-horizontal {
449 // Increase spacing between groups
450 .control-group {
451 margin-bottom: $baseLineHeight;
452 @include clearfix();
453 }
454 // Float the labels left
455 .control-label {
456 float: left;
457 width: 140px;
458 padding-top: 5px;
459 text-align: right;
460 }
461 // Move over all input controls and content
462 .controls {
463 // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
464 // don't inherit the margin of the parent, in this case .controls
465 *display: inline-block;
466 *padding-left: 20px;
467 margin-left: 160px;
468 *margin-left: 0;
469 &:first-child {
470 *padding-left: 160px;
471 }
472 }
473 // Remove bottom margin on block level help text since that's accounted for on .control-group
474 .help-block {
475 margin-top: $baseLineHeight / 2;
476 margin-bottom: 0;
477 }
478 // Move over buttons in .form-actions to align with .controls
479 .form-actions {
480 padding-left: 160px;
481 }
482}