atlas_assets 0.0.17 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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 {