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.
Files changed (53) hide show
  1. data/.gitignore +20 -0
  2. data/Gemfile +4 -0
  3. data/LICENCE +19 -0
  4. data/README.md +5 -0
  5. data/Rakefile +1 -0
  6. data/lib/prelude/version.rb +3 -0
  7. data/lib/prelude-framework.rb +8 -0
  8. data/prelude.gemspec +23 -0
  9. data/scss/prelude/_abstractions.scss +21 -0
  10. data/scss/prelude/_all.scss +6 -0
  11. data/scss/prelude/_base.scss +6 -0
  12. data/scss/prelude/_core.scss +13 -0
  13. data/scss/prelude/_debug-mode.scss +125 -0
  14. data/scss/prelude/_defaults.scss +159 -0
  15. data/scss/prelude/_functions.scss +8 -0
  16. data/scss/prelude/_images.scss +9 -0
  17. data/scss/prelude/_mixins.scss +9 -0
  18. data/scss/prelude/_modules.scss +7 -0
  19. data/scss/prelude/_typography.scss +15 -0
  20. data/scss/prelude/abstractions/_flag.scss +67 -0
  21. data/scss/prelude/abstractions/_flexbox.scss +29 -0
  22. data/scss/prelude/abstractions/_island.scss +53 -0
  23. data/scss/prelude/abstractions/_media.scss +61 -0
  24. data/scss/prelude/abstractions/_nav.scss +110 -0
  25. data/scss/prelude/abstractions/_split.scss +26 -0
  26. data/scss/prelude/base/_border-box.scss +7 -0
  27. data/scss/prelude/base/_helpers.scss +167 -0
  28. data/scss/prelude/functions/_contrasty.scss +24 -0
  29. data/scss/prelude/functions/_is-saturated.scss +14 -0
  30. data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
  31. data/scss/prelude/images/_base.scss +36 -0
  32. data/scss/prelude/images/_cover-image.scss +16 -0
  33. data/scss/prelude/images/_thumbnails.scss +47 -0
  34. data/scss/prelude/mixins/_button-style.scss +40 -0
  35. data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
  36. data/scss/prelude/mixins/_gradients.scss +12 -0
  37. data/scss/prelude/mixins/_rem.scss +31 -0
  38. data/scss/prelude/mixins/_set-font-size.scss +26 -0
  39. data/scss/prelude/modules/_buttons.scss +126 -0
  40. data/scss/prelude/modules/_forms.scss +634 -0
  41. data/scss/prelude/modules/_tables.scss +160 -0
  42. data/scss/prelude/typography/_base.scss +16 -0
  43. data/scss/prelude/typography/_brand.scss +19 -0
  44. data/scss/prelude/typography/_links.scss +14 -0
  45. data/scss/prelude/typography/_paragraphs.scss +9 -0
  46. data/scss/prelude/typography/_quotes.scss +31 -0
  47. data/scss/prelude/typography/_sizes.scss +63 -0
  48. data/scss/prelude.scss +53 -0
  49. data/test/config.rb +9 -0
  50. data/test/index.html +381 -0
  51. data/test/scss/_prelude-settings.scss +159 -0
  52. data/test/scss/style.scss +55 -0
  53. 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
+ }