atlas_assets 0.0.17 → 0.1.0

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 (29) hide show
  1. data/Gemfile.lock +1 -1
  2. data/README.md +2 -0
  3. data/docs/_layouts/default.html +14 -0
  4. data/docs/_posts/2013-05-17-grid.md +0 -18
  5. data/lib/assets/stylesheets/atlas_assets/_boxes.scss +21 -0
  6. data/lib/assets/stylesheets/{buttons.css.scss → atlas_assets/_buttons.scss} +8 -7
  7. data/lib/assets/stylesheets/atlas_assets/_code.scss +7 -0
  8. data/lib/assets/stylesheets/{flash.css.scss → atlas_assets/_flash.scss} +10 -6
  9. data/lib/assets/stylesheets/{fonts.css.scss → atlas_assets/_fonts.scss} +8 -12
  10. data/lib/assets/stylesheets/atlas_assets/_forms.scss +546 -0
  11. data/lib/assets/stylesheets/atlas_assets/_grid.scss +30 -0
  12. data/lib/assets/stylesheets/{icons.css.scss → atlas_assets/_icons.scss} +0 -0
  13. data/lib/assets/stylesheets/{lists.css.scss → atlas_assets/_lists.scss} +6 -14
  14. data/lib/assets/stylesheets/atlas_assets/_mixins.scss +356 -0
  15. data/lib/assets/stylesheets/{navbar.css.scss → atlas_assets/_navbar.scss} +8 -8
  16. data/lib/assets/stylesheets/atlas_assets/_reset.scss +213 -0
  17. data/lib/assets/stylesheets/atlas_assets/_responsive-767.scss +74 -0
  18. data/lib/assets/stylesheets/atlas_assets/_responsive-768-979.scss +5 -0
  19. data/lib/assets/stylesheets/atlas_assets/_responsive-utilities.scss +49 -0
  20. data/lib/assets/stylesheets/{helpers.css.scss → atlas_assets/_utilities.scss} +52 -10
  21. data/lib/assets/stylesheets/atlas_assets/_variables.scss +70 -0
  22. data/lib/assets/stylesheets/atlas_assets.scss +18 -0
  23. data/lib/atlas_assets/version.rb +1 -1
  24. metadata +19 -13
  25. data/lib/assets/stylesheets/atlas_assets.css +0 -11
  26. data/lib/assets/stylesheets/boxes.css.scss +0 -23
  27. data/lib/assets/stylesheets/forms.css.scss +0 -861
  28. data/lib/assets/stylesheets/grid.css.scss +0 -762
  29. data/lib/assets/stylesheets/pre.css.scss +0 -7
@@ -0,0 +1,546 @@
1
+ form {
2
+ margin: 0 0 $baseLineHeight;
3
+ }
4
+
5
+ fieldset {
6
+ padding: 0;
7
+ margin: 0;
8
+ border: 0;
9
+ }
10
+
11
+ legend {
12
+ display: block;
13
+ width: 100%;
14
+ padding: 0;
15
+ margin-bottom: $baseLineHeight;
16
+ font-size: $baseFontSize * 1.5;
17
+ line-height: $baseLineHeight * 2;
18
+ border: 0;
19
+ }
20
+
21
+ /* Fonts
22
+ ------------------------------------------------------ */
23
+
24
+ label,
25
+ input,
26
+ button,
27
+ select,
28
+ textarea {
29
+ font-size: $baseFontSize;
30
+ font-weight: normal;
31
+ line-height: $baseLineHeight;
32
+ }
33
+
34
+ input,
35
+ button,
36
+ select,
37
+ textarea {
38
+ font-family: $sansFontFamily;
39
+ }
40
+
41
+ label {
42
+ display: block;
43
+ margin-bottom: 5px;
44
+ }
45
+
46
+ /* Elements
47
+ ------------------------------------------------------ */
48
+
49
+ select,
50
+ textarea,
51
+ input[type="text"],
52
+ input[type="password"],
53
+ input[type="datetime"],
54
+ input[type="datetime-local"],
55
+ input[type="date"],
56
+ input[type="month"],
57
+ input[type="time"],
58
+ input[type="week"],
59
+ input[type="number"],
60
+ input[type="email"],
61
+ input[type="url"],
62
+ input[type="search"],
63
+ input[type="tel"],
64
+ input[type="color"],
65
+ .uneditable-input {
66
+ display: inline-block;
67
+ height: $baseLineHeight;
68
+ padding: 4px 6px;
69
+ margin-bottom: $baseLineHeight / 2;;
70
+ font-size: $baseFontSize;
71
+ line-height: $baseLineHeight;
72
+ color: $gray;
73
+ @include border-radius($inputBorderRadius);
74
+ vertical-align: middle;
75
+ }
76
+
77
+ input,
78
+ textarea,
79
+ .uneditable-input {
80
+ width: 206px; // plus 12px padding and 2px border
81
+ }
82
+
83
+ textarea {
84
+ height: auto;
85
+ }
86
+
87
+ textarea,
88
+ input[type="text"],
89
+ input[type="password"],
90
+ input[type="datetime"],
91
+ input[type="datetime-local"],
92
+ input[type="date"],
93
+ input[type="month"],
94
+ input[type="time"],
95
+ input[type="week"],
96
+ input[type="number"],
97
+ input[type="email"],
98
+ input[type="url"],
99
+ input[type="search"],
100
+ input[type="tel"],
101
+ input[type="color"],
102
+ .uneditable-input {
103
+ background-color: $inputBackground;
104
+ border: 2px solid $inputBorder;
105
+ &:focus {
106
+ border-color: $lighter_blue;
107
+ outline: 0;
108
+ }
109
+ }
110
+
111
+ // Position radios and checkboxes better
112
+ input[type="radio"],
113
+ input[type="checkbox"] {
114
+ margin: 4px 0 0;
115
+ *margin-top: 0; /* IE7 */
116
+ margin-top: 1px \9; /* IE8-9 */
117
+ line-height: normal;
118
+ }
119
+
120
+ // Reset width of input images, buttons, radios, checkboxes
121
+ input[type="file"],
122
+ input[type="image"],
123
+ input[type="submit"],
124
+ input[type="reset"],
125
+ input[type="button"],
126
+ input[type="radio"],
127
+ input[type="checkbox"] {
128
+ width: auto; // Override of generic input selector
129
+ }
130
+
131
+ // Set the height of select and file controls to match text inputs
132
+ select,
133
+ input[type="file"] {
134
+ height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
135
+ *margin-top: 4px; /* For IE7, add top margin to align select with labels */
136
+ line-height: $inputHeight;
137
+ }
138
+
139
+ // Make select elements obey height by applying a border
140
+ select {
141
+ width: 220px; // default input width + 10px of padding that doesn't get applied
142
+ border: 1px solid $inputBorder;
143
+ background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
144
+ }
145
+
146
+ // Make multiple select elements height not fixed
147
+ select[multiple],
148
+ select[size] {
149
+ height: auto;
150
+ }
151
+
152
+ /* Uneditable
153
+ ------------------------------------------------------ */
154
+
155
+ // Make uneditable inputs look inactive
156
+ .uneditable-input,
157
+ .uneditable-textarea {
158
+ color: $medium_gray;
159
+ background-color: $light_gray;
160
+ border-color: $light_gray;
161
+ cursor: not-allowed;
162
+ }
163
+
164
+ // For text that needs to appear as an input but should not be an input
165
+ .uneditable-input {
166
+ overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
167
+ white-space: nowrap;
168
+ }
169
+
170
+ // Make uneditable textareas behave like a textarea
171
+ .uneditable-textarea {
172
+ width: auto;
173
+ height: auto;
174
+ }
175
+
176
+
177
+ // Placeholder
178
+ // -------------------------
179
+
180
+ // Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
181
+ input,
182
+ textarea {
183
+ @include placeholder();
184
+ }
185
+
186
+ /* Checkboxes and Radios
187
+ ------------------------------------------------------ */
188
+
189
+ // Indent the labels to position radios/checkboxes as hanging
190
+ .radio,
191
+ .checkbox {
192
+ min-height: $baseLineHeight; // clear the floating input if there is no label text
193
+ padding-left: 20px;
194
+ }
195
+ .radio input[type="radio"],
196
+ .checkbox input[type="checkbox"] {
197
+ float: left;
198
+ margin-left: -20px;
199
+ }
200
+
201
+ // Move the options list down to align with labels
202
+ .controls > .radio:first-child,
203
+ .controls > .checkbox:first-child {
204
+ padding-top: 5px; // has to be padding because margin collaspes
205
+ }
206
+
207
+ // Radios and checkboxes on same line
208
+ // TODO v3: Convert .inline to .control-inline
209
+ .radio.inline,
210
+ .checkbox.inline {
211
+ display: inline-block;
212
+ padding-top: 5px;
213
+ margin-bottom: 0;
214
+ vertical-align: middle;
215
+ }
216
+ .radio.inline + .radio.inline,
217
+ .checkbox.inline + .checkbox.inline {
218
+ margin-left: 10px; // space out consecutive inline controls
219
+ }
220
+
221
+ /* Relative Sizes
222
+ ------------------------------------------------------ */
223
+
224
+ // General classes for quick sizes
225
+ .input-mini { width: 60px; }
226
+ .input-small { width: 90px; }
227
+ .input-medium { width: 150px; }
228
+ .input-large { width: 210px; }
229
+ .input-xlarge { width: 270px; }
230
+ .input-xxlarge { width: 530px; }
231
+
232
+ // Grid style input sizes
233
+ input[class*="span"],
234
+ select[class*="span"],
235
+ textarea[class*="span"],
236
+ .uneditable-input[class*="span"],
237
+ // Redeclare since the fluid row class is more specific
238
+ .row-fluid input[class*="span"],
239
+ .row-fluid select[class*="span"],
240
+ .row-fluid textarea[class*="span"],
241
+ .row-fluid .uneditable-input[class*="span"] {
242
+ float: none;
243
+ margin-left: 0;
244
+ }
245
+ // Ensure input-prepend/append never wraps
246
+ .input-append input[class*="span"],
247
+ .input-append .uneditable-input[class*="span"],
248
+ .input-prepend input[class*="span"],
249
+ .input-prepend .uneditable-input[class*="span"],
250
+ .row-fluid input[class*="span"],
251
+ .row-fluid select[class*="span"],
252
+ .row-fluid textarea[class*="span"],
253
+ .row-fluid .uneditable-input[class*="span"],
254
+ .row-fluid .input-prepend [class*="span"],
255
+ .row-fluid .input-append [class*="span"] {
256
+ display: inline-block;
257
+ }
258
+
259
+
260
+ /* Grid Sizes
261
+ ------------------------------------------------------ */
262
+
263
+ // Grid sizes
264
+ @include grid-input($gridColumnWidth, $gridGutterWidth);
265
+
266
+ // Control row for multiple inputs per line
267
+ .controls-row {
268
+ @include clearfix(); // Clear the float from controls
269
+ }
270
+
271
+ // Float to collapse white-space for proper grid alignment
272
+ .controls-row [class*="span"],
273
+ // Redeclare the fluid grid collapse since we undo the float for inputs
274
+ .row-fluid .controls-row [class*="span"] {
275
+ float: left;
276
+ }
277
+ // Explicity set top padding on all checkboxes/radios, not just first-child
278
+ .controls-row .checkbox[class*="span"],
279
+ .controls-row .radio[class*="span"] {
280
+ padding-top: 5px;
281
+ }
282
+
283
+ /* Grid Sizes
284
+ ------------------------------------------------------ */
285
+
286
+ // Disabled and read-only inputs
287
+ input[disabled],
288
+ select[disabled],
289
+ textarea[disabled],
290
+ input[readonly],
291
+ select[readonly],
292
+ textarea[readonly] {
293
+ cursor: not-allowed;
294
+ background-color: $light_gray;
295
+ border-color: $light_gray;
296
+ }
297
+
298
+ // Explicitly reset the colors here
299
+ input[type="radio"][disabled],
300
+ input[type="checkbox"][disabled],
301
+ input[type="radio"][readonly],
302
+ input[type="checkbox"][readonly] {
303
+ background-color: transparent;
304
+ }
305
+
306
+ /* Help Text
307
+ ------------------------------------------------------ */
308
+
309
+ .help-block,
310
+ .help-inline {
311
+ color: $medium_gray;
312
+ }
313
+
314
+ .help-block {
315
+ display: block;
316
+ margin-bottom: $baseLineHeight / 2;
317
+ }
318
+
319
+ .help-inline {
320
+ display: inline-block;
321
+ @include ie7-inline-block();
322
+ vertical-align: middle;
323
+ padding-left: 5px;
324
+ }
325
+
326
+ /* Prepend / Append
327
+ ------------------------------------------------------ */
328
+
329
+ // Allow us to put symbols and text within the input field for a cleaner look
330
+ .input-append,
331
+ .input-prepend {
332
+ display: inline-block;
333
+ margin-bottom: $baseLineHeight / 2;
334
+ vertical-align: middle;
335
+ font-size: 0; // white space collapse hack
336
+ white-space: nowrap; // Prevent span and input from separating
337
+ color: $dark_gray;
338
+
339
+ // Reset the white space collapse hack
340
+ input,
341
+ select,
342
+ .uneditable-input,
343
+ .dropdown-menu,
344
+ .popover {
345
+ font-size: $baseFontSize;
346
+ }
347
+
348
+ input,
349
+ select,
350
+ .uneditable-input {
351
+ 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
352
+ margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
353
+ *margin-left: 0;
354
+ vertical-align: top;
355
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
356
+ &:focus {
357
+ z-index: 2;
358
+ }
359
+ }
360
+ .add-on {
361
+ display: inline-block;
362
+ width: auto;
363
+ height: $baseLineHeight;
364
+ min-width: 16px;
365
+ padding: 4px 5px;
366
+ font-size: $baseFontSize;
367
+ font-weight: normal;
368
+ line-height: $baseLineHeight;
369
+ text-align: center;
370
+ background-color: $light_gray;
371
+ border: 2px solid $light_gray;
372
+ }
373
+ .add-on,
374
+ .btn,
375
+ .btn-group > .dropdown-toggle {
376
+ vertical-align: top;
377
+ @include border-radius(0);
378
+ }
379
+ }
380
+
381
+ .input-append .btn,
382
+ .input-prepend .btn {
383
+ background-color: $light_gray;
384
+ border: 2px solid $light_gray;
385
+ color: $dark_gray;
386
+ margin: 0;
387
+ border-left: 0;
388
+ }
389
+
390
+ .input-prepend {
391
+ .add-on,
392
+ .btn {
393
+ margin-right: -1px;
394
+ }
395
+ .add-on:first-child,
396
+ .btn:first-child {
397
+ // FYI, `.btn:first-child` accounts for a button group that's prepended
398
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
399
+ }
400
+ }
401
+
402
+ .input-append {
403
+ input,
404
+ select,
405
+ .uneditable-input {
406
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
407
+ + .btn-group .btn:last-child {
408
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
409
+ }
410
+ }
411
+ .add-on,
412
+ .btn,
413
+ .btn-group {
414
+ margin-left: -1px;
415
+ }
416
+ .add-on:last-child,
417
+ .btn:last-child,
418
+ .btn-group:last-child > .dropdown-toggle {
419
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
420
+ }
421
+ }
422
+
423
+ // Remove all border-radius for inputs with both prepend and append
424
+ .input-prepend.input-append {
425
+ input,
426
+ select,
427
+ .uneditable-input {
428
+ @include border-radius(0);
429
+ + .btn-group .btn {
430
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
431
+ }
432
+ }
433
+ .add-on:first-child,
434
+ .btn:first-child {
435
+ margin-right: -1px;
436
+ @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
437
+ }
438
+ .add-on:last-child,
439
+ .btn:last-child {
440
+ margin-left: -1px;
441
+ @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
442
+ }
443
+ .btn-group:first-child {
444
+ margin-left: 0;
445
+ }
446
+ }
447
+
448
+ /* Horizontal / Vertical / Inline
449
+ ------------------------------------------------------ */
450
+
451
+ .form-inline,
452
+ .form-horizontal {
453
+ input,
454
+ textarea,
455
+ select,
456
+ .help-inline,
457
+ .uneditable-input,
458
+ .input-prepend,
459
+ .input-append {
460
+ display: inline-block;
461
+ @include ie7-inline-block();
462
+ margin-bottom: 0;
463
+ vertical-align: middle;
464
+ }
465
+ // Re-hide hidden elements due to specifity
466
+ .hide {
467
+ display: none;
468
+ }
469
+ }
470
+
471
+ .form-inline label,
472
+ .form-inline .btn-group {
473
+ display: inline-block;
474
+ }
475
+ // Remove margin for input-prepend/-append
476
+ .form-inline .input-append,
477
+ .form-inline .input-prepend {
478
+ margin-bottom: 0;
479
+ }
480
+ // Inline checkbox/radio labels (remove padding on left)
481
+ .form-inline .radio,
482
+ .form-inline .checkbox {
483
+ padding-left: 0;
484
+ margin-bottom: 0;
485
+ vertical-align: middle;
486
+ }
487
+ // Remove float and margin, set to inline-block
488
+ .form-inline .radio input[type="radio"],
489
+ .form-inline .checkbox input[type="checkbox"] {
490
+ float: left;
491
+ margin-right: 3px;
492
+ margin-left: 0;
493
+ }
494
+
495
+ // Margin to space out fieldsets
496
+ .control-group {
497
+ margin-bottom: $baseLineHeight / 2;
498
+ }
499
+
500
+ // Legend collapses margin, so next element is responsible for spacing
501
+ legend + .control-group {
502
+ margin-top: $baseLineHeight;
503
+ -webkit-margin-top-collapse: separate;
504
+ }
505
+
506
+ .form-horizontal {
507
+ // Increase spacing between groups
508
+ .control-group {
509
+ margin-bottom: $baseLineHeight;
510
+ @include clearfix();
511
+ }
512
+ // Float the labels left
513
+ .control-label {
514
+ float: left;
515
+ width: $horizontalComponentOffset - 20;
516
+ padding-top: 5px;
517
+ text-align: right;
518
+ }
519
+ // Move over all input controls and content
520
+ .controls {
521
+ // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
522
+ // don't inherit the margin of the parent, in this case .controls
523
+ *display: inline-block;
524
+ *padding-left: 20px;
525
+ margin-left: $horizontalComponentOffset;
526
+ *margin-left: 0;
527
+ &:first-child {
528
+ *padding-left: $horizontalComponentOffset;
529
+ }
530
+ }
531
+ // Remove bottom margin on block level help text since that's accounted for on .control-group
532
+ .help-block {
533
+ margin-bottom: 0;
534
+ }
535
+ // And apply it only to .help-block instances that follow a form control
536
+ input,
537
+ select,
538
+ textarea,
539
+ .uneditable-input,
540
+ .input-prepend,
541
+ .input-append {
542
+ + .help-block {
543
+ margin-top: $baseLineHeight / 2;
544
+ }
545
+ }
546
+ }
@@ -0,0 +1,30 @@
1
+ /* Grid
2
+ ----------------------------------------------------- */
3
+
4
+ @include grid-core($gridColumnWidth, $gridGutterWidth);
5
+ @include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
6
+
7
+ // Reset utility classes due to specificity
8
+ [class*="span"].hide,
9
+ .row-fluid [class*="span"].hide {
10
+ display: none;
11
+ }
12
+
13
+ [class*="span"].pull-right,
14
+ .row-fluid [class*="span"].pull-right {
15
+ float: right;
16
+ }
17
+
18
+ /* Container
19
+ ----------------------------------------------------- */
20
+
21
+ .container {
22
+ @include container-fixed();
23
+ }
24
+
25
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
26
+ .container-fluid {
27
+ padding-right: $gridGutterWidth;
28
+ padding-left: $gridGutterWidth;
29
+ @include clearfix();
30
+ }
@@ -2,41 +2,33 @@
2
2
  list-style: none;
3
3
  margin: 0;
4
4
  padding: 0;
5
-
6
- -webkit-border-bottom-right-radius: 10px;
7
- -webkit-border-bottom-left-radius: 10px;
8
- -moz-border-radius-bottomright: 10px;
9
- -moz-border-radius-bottomleft: 10px;
10
- border-bottom-right-radius: 10px;
11
- border-bottom-left-radius: 10px;
12
5
  }
13
6
 
14
7
  .list .list-item {
15
- border-bottom: 1px solid #dde1e4;
8
+ border-bottom: 1px solid $light_gray;
16
9
  margin: 0;
17
10
  padding: 0;
18
11
 
19
12
  a {
20
13
  display: block;
21
14
  padding: 13px 10px;
22
- color: #3b4247;
15
+ color: $dark_gray;
23
16
 
24
17
  i.icon-arrow-right-2 {
25
18
  float: right;
26
- color: #cecece;
19
+ color: $gray;
27
20
  }
28
21
  }
29
22
 
30
23
  a:hover {
31
- color: #445e74;
32
-
24
+ color: $blue;
33
25
  i.icon-arrow-right-2 {
34
- color: #3b4247;
26
+ color: $dark_gray;
35
27
  }
36
28
  }
37
29
 
38
30
  &:nth-child(even) {
39
- background-color: #f6f6f6;
31
+ background-color: $lightest_gray;
40
32
  }
41
33
 
42
34
  &:last-child {