prelude-framework 0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +20 -0
- data/Gemfile +4 -0
- data/LICENCE +19 -0
- data/README.md +5 -0
- data/Rakefile +1 -0
- data/lib/prelude/version.rb +3 -0
- data/lib/prelude-framework.rb +8 -0
- data/prelude.gemspec +23 -0
- data/scss/prelude/_abstractions.scss +21 -0
- data/scss/prelude/_all.scss +6 -0
- data/scss/prelude/_base.scss +6 -0
- data/scss/prelude/_core.scss +13 -0
- data/scss/prelude/_debug-mode.scss +125 -0
- data/scss/prelude/_defaults.scss +159 -0
- data/scss/prelude/_functions.scss +8 -0
- data/scss/prelude/_images.scss +9 -0
- data/scss/prelude/_mixins.scss +9 -0
- data/scss/prelude/_modules.scss +7 -0
- data/scss/prelude/_typography.scss +15 -0
- data/scss/prelude/abstractions/_flag.scss +67 -0
- data/scss/prelude/abstractions/_flexbox.scss +29 -0
- data/scss/prelude/abstractions/_island.scss +53 -0
- data/scss/prelude/abstractions/_media.scss +61 -0
- data/scss/prelude/abstractions/_nav.scss +110 -0
- data/scss/prelude/abstractions/_split.scss +26 -0
- data/scss/prelude/base/_border-box.scss +7 -0
- data/scss/prelude/base/_helpers.scss +167 -0
- data/scss/prelude/functions/_contrasty.scss +24 -0
- data/scss/prelude/functions/_is-saturated.scss +14 -0
- data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
- data/scss/prelude/images/_base.scss +36 -0
- data/scss/prelude/images/_cover-image.scss +16 -0
- data/scss/prelude/images/_thumbnails.scss +47 -0
- data/scss/prelude/mixins/_button-style.scss +40 -0
- data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
- data/scss/prelude/mixins/_gradients.scss +12 -0
- data/scss/prelude/mixins/_rem.scss +31 -0
- data/scss/prelude/mixins/_set-font-size.scss +26 -0
- data/scss/prelude/modules/_buttons.scss +126 -0
- data/scss/prelude/modules/_forms.scss +634 -0
- data/scss/prelude/modules/_tables.scss +160 -0
- data/scss/prelude/typography/_base.scss +16 -0
- data/scss/prelude/typography/_brand.scss +19 -0
- data/scss/prelude/typography/_links.scss +14 -0
- data/scss/prelude/typography/_paragraphs.scss +9 -0
- data/scss/prelude/typography/_quotes.scss +31 -0
- data/scss/prelude/typography/_sizes.scss +63 -0
- data/scss/prelude.scss +53 -0
- data/test/config.rb +9 -0
- data/test/index.html +381 -0
- data/test/scss/_prelude-settings.scss +159 -0
- data/test/scss/style.scss +55 -0
- metadata +164 -0
@@ -0,0 +1,634 @@
|
|
1
|
+
// =============================================================================
|
2
|
+
// Forms
|
3
|
+
//
|
4
|
+
// Base styles for various input types, form layouts, and states
|
5
|
+
//
|
6
|
+
// Table of contents:
|
7
|
+
// 1. General styles
|
8
|
+
// 2. Form controls
|
9
|
+
// 3. Checkboxes & radios
|
10
|
+
// 4. Input sizes
|
11
|
+
// 5. States
|
12
|
+
// 6. Form actions
|
13
|
+
// 7. Help text
|
14
|
+
// 8. Input groups
|
15
|
+
// 9. Search form
|
16
|
+
// 10. Horizontal & vertical forms
|
17
|
+
//
|
18
|
+
// =============================================================================
|
19
|
+
|
20
|
+
|
21
|
+
// Form states and alerts
|
22
|
+
// =============================================================================
|
23
|
+
|
24
|
+
@mixin formFieldState($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
|
25
|
+
// Set the text color
|
26
|
+
> label,
|
27
|
+
.help-block,
|
28
|
+
.help-inline {
|
29
|
+
color: $text-color;
|
30
|
+
}
|
31
|
+
// Style inputs accordingly
|
32
|
+
.checkbox,
|
33
|
+
.radio,
|
34
|
+
input,
|
35
|
+
select,
|
36
|
+
textarea {
|
37
|
+
color: $text-color;
|
38
|
+
border-color: $border-color;
|
39
|
+
&:focus {
|
40
|
+
border-color: darken($border-color, 10%);
|
41
|
+
@include box-shadow(0 0 6px lighten($border-color, 20%));
|
42
|
+
}
|
43
|
+
}
|
44
|
+
// Give a small background color for input--prepend/-append
|
45
|
+
.input--prepend .add-on,
|
46
|
+
.input--append .add-on {
|
47
|
+
color: $text-color;
|
48
|
+
background-color: $background-color;
|
49
|
+
border-color: $text-color;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
|
54
|
+
// =============================================================================
|
55
|
+
// 1. General styles
|
56
|
+
// =============================================================================
|
57
|
+
|
58
|
+
// Make all forms have space below them
|
59
|
+
form {
|
60
|
+
margin: 0 0 $base-line-height;
|
61
|
+
}
|
62
|
+
|
63
|
+
fieldset {
|
64
|
+
padding: 0;
|
65
|
+
margin: 0;
|
66
|
+
border: 0;
|
67
|
+
}
|
68
|
+
|
69
|
+
// Groups of fields with labels on top (legends)
|
70
|
+
legend {
|
71
|
+
display: block;
|
72
|
+
width: 100%;
|
73
|
+
padding: 0;
|
74
|
+
margin-bottom: $base-line-height * 1.5;
|
75
|
+
font-size: $base-font-size * 1.5;
|
76
|
+
line-height: $base-line-height * 2;
|
77
|
+
color: $gray-dark;
|
78
|
+
border: 0;
|
79
|
+
border-bottom: 1px solid #e5e5e5;
|
80
|
+
|
81
|
+
// Small
|
82
|
+
small {
|
83
|
+
font-size: $base-line-height * .75;
|
84
|
+
color: $gray-light;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
88
|
+
// Set font for forms
|
89
|
+
label,
|
90
|
+
input,
|
91
|
+
button,
|
92
|
+
select,
|
93
|
+
textarea {
|
94
|
+
@extend .milli !optional;
|
95
|
+
font-weight: normal;
|
96
|
+
line-height: $base-line-height;
|
97
|
+
}
|
98
|
+
|
99
|
+
input,
|
100
|
+
button,
|
101
|
+
select,
|
102
|
+
textarea {
|
103
|
+
font-family: $base-font-family; // And only set font-family here for those that need it (note the missing label element)
|
104
|
+
}
|
105
|
+
|
106
|
+
// Identify controls by their labels
|
107
|
+
label {
|
108
|
+
display: block;
|
109
|
+
margin-bottom: 5px;
|
110
|
+
}
|
111
|
+
|
112
|
+
|
113
|
+
// =============================================================================
|
114
|
+
// 2. Form controls
|
115
|
+
// =============================================================================
|
116
|
+
|
117
|
+
// Shared size and type resets
|
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
|
+
.input--uneditable {
|
135
|
+
display: inline-block;
|
136
|
+
height: 37px; // @was: $base-line-height
|
137
|
+
padding: 4px .5em; // @was: 4px
|
138
|
+
margin-bottom: 9px;
|
139
|
+
@extend .milli !optional;
|
140
|
+
line-height: $base-line-height;
|
141
|
+
color: $gray;
|
142
|
+
}
|
143
|
+
|
144
|
+
// Reset appearance properties for textual inputs and textarea
|
145
|
+
// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
|
146
|
+
input,
|
147
|
+
textarea {
|
148
|
+
width: 210px;
|
149
|
+
}
|
150
|
+
|
151
|
+
// Reset height since textareas have rows
|
152
|
+
textarea {
|
153
|
+
height: auto;
|
154
|
+
}
|
155
|
+
|
156
|
+
// Everything else
|
157
|
+
textarea,
|
158
|
+
input[type="text"],
|
159
|
+
input[type="password"],
|
160
|
+
input[type="datetime"],
|
161
|
+
input[type="datetime-local"],
|
162
|
+
input[type="date"],
|
163
|
+
input[type="month"],
|
164
|
+
input[type="time"],
|
165
|
+
input[type="week"],
|
166
|
+
input[type="number"],
|
167
|
+
input[type="email"],
|
168
|
+
input[type="url"],
|
169
|
+
input[type="search"],
|
170
|
+
input[type="tel"],
|
171
|
+
input[type="color"],
|
172
|
+
.input--uneditable {
|
173
|
+
border-radius: $input-border-radius;
|
174
|
+
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
|
175
|
+
@include transition(border linear .2s, box-shadow linear .2s);
|
176
|
+
background-color: $input-background;
|
177
|
+
border: 1px solid $input-border;
|
178
|
+
|
179
|
+
// Focus state
|
180
|
+
&:focus {
|
181
|
+
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
|
182
|
+
border-color: rgba(82,168,236,.8);
|
183
|
+
outline: 0;
|
184
|
+
outline: thin dotted \9; /* IE6-9 */
|
185
|
+
}
|
186
|
+
}
|
187
|
+
|
188
|
+
// Position radios and checkboxes better
|
189
|
+
input[type="radio"],
|
190
|
+
input[type="checkbox"] {
|
191
|
+
margin: 5px 0;
|
192
|
+
line-height: normal;
|
193
|
+
cursor: pointer;
|
194
|
+
}
|
195
|
+
|
196
|
+
// Reset width of input buttons, radios, checkboxes
|
197
|
+
input[type="submit"],
|
198
|
+
input[type="reset"],
|
199
|
+
input[type="button"],
|
200
|
+
input[type="radio"],
|
201
|
+
input[type="checkbox"] {
|
202
|
+
width: auto; // Override of generic input selector
|
203
|
+
}
|
204
|
+
|
205
|
+
// Make uneditable textareas behave like a textarea
|
206
|
+
.uneditable-textarea {
|
207
|
+
width: auto;
|
208
|
+
height: auto;
|
209
|
+
}
|
210
|
+
|
211
|
+
// Set the height of select and file controls to match text inputs
|
212
|
+
select,
|
213
|
+
input[type="file"] {
|
214
|
+
line-height: 28px;
|
215
|
+
}
|
216
|
+
|
217
|
+
// Make select elements obey height by applying a border
|
218
|
+
select {
|
219
|
+
width: 220px; // default input width + 10px of padding that doesn't get applied
|
220
|
+
border: 1px solid #bbb;
|
221
|
+
}
|
222
|
+
|
223
|
+
// Make multiple select elements height not fixed
|
224
|
+
select[multiple],
|
225
|
+
select[size] {
|
226
|
+
height: auto;
|
227
|
+
}
|
228
|
+
|
229
|
+
// Focus for select, file, radio, and checkbox
|
230
|
+
select:focus,
|
231
|
+
input[type="file"]:focus,
|
232
|
+
input[type="radio"]:focus,
|
233
|
+
input[type="checkbox"]:focus {
|
234
|
+
//.tab-focus();
|
235
|
+
}
|
236
|
+
|
237
|
+
|
238
|
+
// =============================================================================
|
239
|
+
// 3. Checkboxes & radios
|
240
|
+
// =============================================================================
|
241
|
+
|
242
|
+
// Indent the labels to position radios/checkboxes as hanging
|
243
|
+
.radio,
|
244
|
+
.checkbox {
|
245
|
+
min-height: 18px; // clear the floating input if there is no label text
|
246
|
+
padding-left: 18px;
|
247
|
+
}
|
248
|
+
|
249
|
+
.radio input[type="radio"],
|
250
|
+
.checkbox input[type="checkbox"] {
|
251
|
+
float: left;
|
252
|
+
margin-left: -18px;
|
253
|
+
}
|
254
|
+
|
255
|
+
// Move the options list down to align with labels
|
256
|
+
.controls > .radio:first-child,
|
257
|
+
.controls > .checkbox:first-child {
|
258
|
+
padding-top: 5px; // has to be padding because margin collaspes
|
259
|
+
}
|
260
|
+
|
261
|
+
// Radios and checkboxes on same line
|
262
|
+
// TODO v3: Convert .inline to .control-inline
|
263
|
+
.radio.inline,
|
264
|
+
.checkbox.inline {
|
265
|
+
display: inline-block;
|
266
|
+
padding-top: 5px;
|
267
|
+
margin-bottom: 0;
|
268
|
+
vertical-align: middle;
|
269
|
+
}
|
270
|
+
|
271
|
+
.radio.inline + .radio.inline,
|
272
|
+
.checkbox.inline + .checkbox.inline {
|
273
|
+
margin-left: 10px; // space out consecutive inline controls
|
274
|
+
}
|
275
|
+
|
276
|
+
|
277
|
+
// =============================================================================
|
278
|
+
// 4. Input sizes
|
279
|
+
// =============================================================================
|
280
|
+
|
281
|
+
// General classes for quick sizes
|
282
|
+
.input--mini { width: 60px; }
|
283
|
+
.input--small { width: 90px; }
|
284
|
+
.input--medium { width: 150px; }
|
285
|
+
.input--large { width: 210px; }
|
286
|
+
.input--xlarge { width: 270px; }
|
287
|
+
.input--xxlarge { width: 530px; }
|
288
|
+
.input--expand { width: 100%; }
|
289
|
+
|
290
|
+
// Grid style input sizes
|
291
|
+
input[class*="span"],
|
292
|
+
select[class*="span"],
|
293
|
+
textarea[class*="span"],
|
294
|
+
.input--uneditable[class*="span"],
|
295
|
+
// Redeclare since the fluid row class is more specific
|
296
|
+
.row-fluid input[class*="span"],
|
297
|
+
.row-fluid select[class*="span"],
|
298
|
+
.row-fluid textarea[class*="span"],
|
299
|
+
.row-fluid .input--uneditable[class*="span"] {
|
300
|
+
float: none;
|
301
|
+
margin-left: 0;
|
302
|
+
}
|
303
|
+
|
304
|
+
// Ensure input--prepend/append never wraps
|
305
|
+
.input--append input[class*="span"],
|
306
|
+
.input--append .input--uneditable[class*="span"],
|
307
|
+
.input--prepend input[class*="span"],
|
308
|
+
.input--prepend .input--uneditable[class*="span"],
|
309
|
+
.row-fluid .input--prepend [class*="span"],
|
310
|
+
.row-fluid .input--append [class*="span"] {
|
311
|
+
display: inline-block;
|
312
|
+
}
|
313
|
+
|
314
|
+
|
315
|
+
// =============================================================================
|
316
|
+
// 5. States
|
317
|
+
// =============================================================================
|
318
|
+
|
319
|
+
|
320
|
+
// Disabled states
|
321
|
+
// =============================================================================
|
322
|
+
|
323
|
+
// Disabled and read-only inputs
|
324
|
+
input[disabled],
|
325
|
+
select[disabled],
|
326
|
+
textarea[disabled],
|
327
|
+
input[readonly],
|
328
|
+
select[readonly],
|
329
|
+
textarea[readonly] {
|
330
|
+
cursor: not-allowed;
|
331
|
+
background-color: $input-disabled-background;
|
332
|
+
border-color: #ddd;
|
333
|
+
}
|
334
|
+
|
335
|
+
// Explicitly reset the colors here
|
336
|
+
input[type="radio"][disabled],
|
337
|
+
input[type="checkbox"][disabled],
|
338
|
+
input[type="radio"][readonly],
|
339
|
+
input[type="checkbox"][readonly] {
|
340
|
+
background-color: transparent;
|
341
|
+
}
|
342
|
+
|
343
|
+
|
344
|
+
// Form field feedback states
|
345
|
+
// =============================================================================
|
346
|
+
|
347
|
+
// Warning
|
348
|
+
.control-group.warning {
|
349
|
+
@include formFieldState($warning-text, $warning-text, $warning-background);
|
350
|
+
}
|
351
|
+
|
352
|
+
// Error
|
353
|
+
.control-group.error {
|
354
|
+
@include formFieldState($error-text, $error-text, $error-background);
|
355
|
+
}
|
356
|
+
|
357
|
+
// Success
|
358
|
+
.control-group.success {
|
359
|
+
@include formFieldState($success-text, $success-text, $success-background);
|
360
|
+
}
|
361
|
+
|
362
|
+
// HTML5 invalid states
|
363
|
+
// Shares styles with the .control-group.error above
|
364
|
+
input:focus:required:invalid,
|
365
|
+
textarea:focus:required:invalid,
|
366
|
+
select:focus:required:invalid {
|
367
|
+
color: #b94a48;
|
368
|
+
border-color: #ee5f5b;
|
369
|
+
&:focus {
|
370
|
+
border-color: darken(#ee5f5b, 10%);
|
371
|
+
@include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
|
372
|
+
}
|
373
|
+
}
|
374
|
+
|
375
|
+
|
376
|
+
// =============================================================================
|
377
|
+
// 6. Form actions
|
378
|
+
// =============================================================================
|
379
|
+
|
380
|
+
.form-actions {
|
381
|
+
@include pie-clearfix; // Adding clearfix to allow for .pull-right button containers
|
382
|
+
padding: ($base-line-height - 1) 20px $base-line-height;
|
383
|
+
margin-top: $base-line-height;
|
384
|
+
margin-bottom: $base-line-height;
|
385
|
+
background-color: $form-actions-background;
|
386
|
+
border-top: 1px solid #e5e5e5;
|
387
|
+
}
|
388
|
+
|
389
|
+
// For text that needs to appear as an input but should not be an input
|
390
|
+
.input--uneditable {
|
391
|
+
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
|
392
|
+
overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
|
393
|
+
white-space: nowrap;
|
394
|
+
cursor: not-allowed;
|
395
|
+
background-color: ·inputBackground;
|
396
|
+
border-color: #eee;
|
397
|
+
}
|
398
|
+
|
399
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
400
|
+
// --> .placeholder();
|
401
|
+
|
402
|
+
|
403
|
+
// =============================================================================
|
404
|
+
// 7. Help text
|
405
|
+
// =============================================================================
|
406
|
+
|
407
|
+
.help-block,
|
408
|
+
.help-inline {
|
409
|
+
color: $gray; // lighten the text some for contrast
|
410
|
+
}
|
411
|
+
|
412
|
+
.help-block {
|
413
|
+
display: block; // account for any element using help-block
|
414
|
+
margin-bottom: $base-line-height / 2;
|
415
|
+
}
|
416
|
+
|
417
|
+
.help-inline {
|
418
|
+
display: inline-block;
|
419
|
+
vertical-align: middle;
|
420
|
+
padding-left: 5px;
|
421
|
+
}
|
422
|
+
|
423
|
+
|
424
|
+
// =============================================================================
|
425
|
+
// 8. Input groups
|
426
|
+
// =============================================================================
|
427
|
+
|
428
|
+
// Allow us to put symbols and text within the input field for a cleaner look
|
429
|
+
.input--prepend,
|
430
|
+
.input--append {
|
431
|
+
margin-bottom: 5px;
|
432
|
+
input,
|
433
|
+
select,
|
434
|
+
.input--uneditable {
|
435
|
+
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
|
436
|
+
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
|
437
|
+
vertical-align: middle;
|
438
|
+
border-radius: 0 $input-border-radius $input-border-radius 0;
|
439
|
+
// Make input on top when focused so blue border and shadow always show
|
440
|
+
&:focus {
|
441
|
+
z-index: 2;
|
442
|
+
}
|
443
|
+
}
|
444
|
+
.input--uneditable {
|
445
|
+
border-left-color: #ccc;
|
446
|
+
}
|
447
|
+
.add-on {
|
448
|
+
display: inline-block;
|
449
|
+
width: auto;
|
450
|
+
height: 36px; // @was: $base-line-height
|
451
|
+
min-width: 16px;
|
452
|
+
padding: 4px 5px;
|
453
|
+
font-weight: normal;
|
454
|
+
line-height: $base-line-height;
|
455
|
+
text-align: center;
|
456
|
+
text-shadow: 0 1px 0 $white;
|
457
|
+
vertical-align: middle;
|
458
|
+
background-color: $gray-lighter;
|
459
|
+
border: 1px solid #ccc;
|
460
|
+
}
|
461
|
+
.add-on,
|
462
|
+
.btn {
|
463
|
+
border-radius: 0;
|
464
|
+
margin-left: -1px;
|
465
|
+
}
|
466
|
+
.active {
|
467
|
+
background-color: lighten($green, 30);
|
468
|
+
border-color: $green;
|
469
|
+
}
|
470
|
+
}
|
471
|
+
.input--prepend {
|
472
|
+
.add-on,
|
473
|
+
.btn {
|
474
|
+
margin-right: -1px;
|
475
|
+
}
|
476
|
+
.add-on:first-child,
|
477
|
+
.btn:first-child {
|
478
|
+
border-radius: $input-border-radius 0 0 $input-border-radius;
|
479
|
+
}
|
480
|
+
}
|
481
|
+
|
482
|
+
.input--append {
|
483
|
+
input,
|
484
|
+
select,
|
485
|
+
.input--uneditable {
|
486
|
+
border-radius: $input-border-radius 0 0 $input-border-radius;
|
487
|
+
}
|
488
|
+
.input--uneditable {
|
489
|
+
border-right-color: #ccc;
|
490
|
+
border-left-color: #eee;
|
491
|
+
}
|
492
|
+
.add-on:last-child,
|
493
|
+
.btn:last-child {
|
494
|
+
border-radius: 0 $input-border-radius $input-border-radius 0;
|
495
|
+
}
|
496
|
+
}
|
497
|
+
// Remove all border-radius for inputs with both prepend and append
|
498
|
+
.input--prepend.input--append {
|
499
|
+
input,
|
500
|
+
select,
|
501
|
+
.input--uneditable {
|
502
|
+
border-radius: 0;
|
503
|
+
}
|
504
|
+
.add-on:first-child,
|
505
|
+
.btn:first-child {
|
506
|
+
margin-right: -1px;
|
507
|
+
border-radius: $input-border-radius 0 0 $input-border-radius;
|
508
|
+
}
|
509
|
+
.add-on:last-child,
|
510
|
+
.btn:last-child {
|
511
|
+
margin-left: -1px;
|
512
|
+
border-radius: 0 $input-border-radius $input-border-radius 0;
|
513
|
+
}
|
514
|
+
}
|
515
|
+
|
516
|
+
// =============================================================================
|
517
|
+
// 9. Search form
|
518
|
+
// =============================================================================
|
519
|
+
|
520
|
+
.search-query {
|
521
|
+
border-radius: 14px;
|
522
|
+
padding-right: 14px;
|
523
|
+
padding-right: 4px \9;
|
524
|
+
padding-left: 14px;
|
525
|
+
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
|
526
|
+
margin-bottom: 0; // remove the default margin on all inputs
|
527
|
+
}
|
528
|
+
|
529
|
+
|
530
|
+
// =============================================================================
|
531
|
+
// 10. Horizontal & vertical forms
|
532
|
+
// =============================================================================
|
533
|
+
|
534
|
+
// Common properties
|
535
|
+
// =============================================================================
|
536
|
+
|
537
|
+
.form--search,
|
538
|
+
.form--inline,
|
539
|
+
.form--horizontal {
|
540
|
+
input,
|
541
|
+
textarea,
|
542
|
+
select,
|
543
|
+
.help-inline,
|
544
|
+
.input--uneditable,
|
545
|
+
.input--prepend,
|
546
|
+
.input--append {
|
547
|
+
display: inline-block;
|
548
|
+
margin-bottom: 0;
|
549
|
+
}
|
550
|
+
// Re-hide hidden elements due to specifity
|
551
|
+
.hide {
|
552
|
+
display: none;
|
553
|
+
}
|
554
|
+
}
|
555
|
+
|
556
|
+
.form--search label,
|
557
|
+
.form--inline label {
|
558
|
+
display: inline-block;
|
559
|
+
}
|
560
|
+
|
561
|
+
// Remove margin for input--prepend/-append
|
562
|
+
.form--search .input--append,
|
563
|
+
.form--inline .input--append,
|
564
|
+
.form--search .input--prepend,
|
565
|
+
.form--inline .input--prepend {
|
566
|
+
margin-bottom: 0;
|
567
|
+
}
|
568
|
+
|
569
|
+
// Inline checkbox/radio labels (remove padding on left)
|
570
|
+
.form--search .radio,
|
571
|
+
.form--search .checkbox,
|
572
|
+
.form--inline .radio,
|
573
|
+
.form--inline .checkbox {
|
574
|
+
padding-left: 0;
|
575
|
+
margin-bottom: 0;
|
576
|
+
vertical-align: middle;
|
577
|
+
}
|
578
|
+
|
579
|
+
// Remove float and margin, set to inline-block
|
580
|
+
.form--search .radio input[type="radio"],
|
581
|
+
.form--search .checkbox input[type="checkbox"],
|
582
|
+
.form--inline .radio input[type="radio"],
|
583
|
+
.form--inline .checkbox input[type="checkbox"] {
|
584
|
+
float: left;
|
585
|
+
margin-right: 3px;
|
586
|
+
margin-left: 0;
|
587
|
+
}
|
588
|
+
|
589
|
+
// Margin to space out fieldsets
|
590
|
+
.control-group {
|
591
|
+
margin-bottom: $base-line-height / 2;
|
592
|
+
}
|
593
|
+
|
594
|
+
// Legend collapses margin, so next element is responsible for spacing
|
595
|
+
legend + .control-group {
|
596
|
+
margin-top: $base-line-height;
|
597
|
+
-webkit-margin-top-collapse: separate;
|
598
|
+
}
|
599
|
+
|
600
|
+
|
601
|
+
// Horizontal-specific styles
|
602
|
+
// =============================================================================
|
603
|
+
|
604
|
+
.form--horizontal {
|
605
|
+
// Increase spacing between groups
|
606
|
+
.control-group {
|
607
|
+
@include pie-clearfix;
|
608
|
+
margin-bottom: $base-line-height;
|
609
|
+
}
|
610
|
+
|
611
|
+
// Float the labels left
|
612
|
+
.control-label {
|
613
|
+
float: left;
|
614
|
+
width: 140px;
|
615
|
+
padding-top: 5px;
|
616
|
+
text-align: right;
|
617
|
+
}
|
618
|
+
|
619
|
+
// Move over all input controls and content
|
620
|
+
.controls {
|
621
|
+
margin-left: 160px;
|
622
|
+
}
|
623
|
+
|
624
|
+
// Remove bottom margin on block level help text since that's accounted for on .control-group
|
625
|
+
.help-block {
|
626
|
+
margin-top: $base-line-height / 2;
|
627
|
+
margin-bottom: 0;
|
628
|
+
}
|
629
|
+
|
630
|
+
// Move over buttons in .form-actions to align with .controls
|
631
|
+
.form-actions {
|
632
|
+
padding-left: 160px;
|
633
|
+
}
|
634
|
+
}
|