anjlab-bootstrap-rails 1.4.0.14 → 2.0.0.1

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 (59) hide show
  1. data/Rakefile +11 -15
  2. data/bootstrap-rails.gemspec +4 -4
  3. data/lib/bootstrap-rails/version.rb +1 -1
  4. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  5. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  6. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  7. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  8. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  9. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  10. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  11. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  12. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  13. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  14. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  15. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  16. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  17. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  18. data/vendor/assets/javascripts/bootstrap.js +8 -5
  19. data/vendor/assets/stylesheets/accordion.scss +28 -0
  20. data/vendor/assets/stylesheets/alerts.scss +70 -0
  21. data/vendor/assets/stylesheets/bootstrap.scss +44 -8
  22. data/vendor/assets/stylesheets/breadcrumbs.scss +22 -0
  23. data/vendor/assets/stylesheets/button-groups.scss +147 -0
  24. data/vendor/assets/stylesheets/buttons.scss +165 -0
  25. data/vendor/assets/stylesheets/carousel.scss +121 -0
  26. data/vendor/assets/stylesheets/close.scss +18 -0
  27. data/vendor/assets/stylesheets/code.scss +44 -0
  28. data/vendor/assets/stylesheets/component-animations.scss +18 -0
  29. data/vendor/assets/stylesheets/dropdowns.scss +131 -0
  30. data/vendor/assets/stylesheets/forms.scss +337 -287
  31. data/vendor/assets/stylesheets/grid.scss +8 -0
  32. data/vendor/assets/stylesheets/hero-unit.scss +20 -0
  33. data/vendor/assets/stylesheets/labels.scss +16 -0
  34. data/vendor/assets/stylesheets/layouts.scss +17 -0
  35. data/vendor/assets/stylesheets/mixins.scss +375 -111
  36. data/vendor/assets/stylesheets/modals.scss +72 -0
  37. data/vendor/assets/stylesheets/navbar.scss +292 -0
  38. data/vendor/assets/stylesheets/navs.scss +344 -0
  39. data/vendor/assets/stylesheets/pager.scss +30 -0
  40. data/vendor/assets/stylesheets/pagination.scss +55 -0
  41. data/vendor/assets/stylesheets/popovers.scss +49 -0
  42. data/vendor/assets/stylesheets/progress-bars.scss +95 -0
  43. data/vendor/assets/stylesheets/reset.scss +37 -52
  44. data/vendor/assets/stylesheets/responsive.scss +323 -0
  45. data/vendor/assets/stylesheets/scaffolding.scss +13 -96
  46. data/vendor/assets/stylesheets/sprites.scss +158 -0
  47. data/vendor/assets/stylesheets/tables.scss +68 -149
  48. data/vendor/assets/stylesheets/thumbnails.scss +35 -0
  49. data/vendor/assets/stylesheets/tooltip.scss +35 -0
  50. data/vendor/assets/stylesheets/type.scss +100 -70
  51. data/vendor/assets/stylesheets/utilities.scss +23 -0
  52. data/vendor/assets/stylesheets/variables.scss +94 -55
  53. data/vendor/assets/stylesheets/wells.scss +17 -0
  54. metadata +51 -30
  55. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  56. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  57. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  58. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
  59. data/vendor/assets/stylesheets/patterns.scss +0 -1060
@@ -1,112 +1,29 @@
1
- /*
2
- * Scaffolding
3
- * Basic and global styles for generating a grid system, structural layout, and page templates
4
- * ------------------------------------------------------------------------------------------- */
1
+ // Scaffolding
2
+ // Basic and global styles for generating a grid system, structural layout, and page templates
3
+ // -------------------------------------------------------------------------------------------
5
4
 
6
5
 
7
6
  // STRUCTURAL LAYOUT
8
7
  // -----------------
9
8
 
10
9
  body {
11
- background-color: $white;
12
10
  margin: 0;
13
- @include font-sans-serif(normal,$basefont,$baseline);
14
- color: $grayDark;
15
- }
16
-
17
- // Container (centered, fixed-width layouts)
18
- .container {
19
- @include fixed-container;
20
- }
21
-
22
- // Fluid layouts (left aligned, with sidebar, min- & max-width content)
23
- .container-fluid {
24
- position: relative;
25
- min-width: 940px;
26
- padding-left: 20px;
27
- padding-right: 20px;
28
- @include clearfix;
29
- > .sidebar {
30
- position: absolute;
31
- top: 0;
32
- left: 20px;
33
- width: 220px;
34
- }
35
- // TODO in v2: rename this and .popover .content to be more specific
36
- > .content {
37
- margin-left: 240px;
38
- }
11
+ font-family: $baseFontFamily;
12
+ font-size: $baseFontSize;
13
+ line-height: $baseLineHeight;
14
+ color: $textColor;
15
+ background-color: $white;
39
16
  }
40
17
 
41
18
 
42
- // BASE STYLES
43
- // -----------
19
+ // LINKS
20
+ // -----
44
21
 
45
- // Links
46
22
  a {
47
23
  color: $linkColor;
48
24
  text-decoration: none;
49
- line-height: inherit;
50
- font-weight: inherit;
51
- &:hover {
52
- color: $linkColorHover;
53
- text-decoration: underline;
54
- }
55
25
  }
56
-
57
- // Quick floats
58
- .pull-right {
59
- float: right;
60
- }
61
- .pull-left {
62
- float: left;
63
- }
64
-
65
- // Toggling content
66
- .hide {
67
- display: none;
68
- }
69
- .show {
70
- display: block;
71
- }
72
-
73
-
74
- // GRID SYSTEM
75
- // -----------
76
- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
77
-
78
- .row {
79
- @include clearfix;
80
- margin-left: -$gridGutterWidth;
81
- }
82
-
83
- // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
84
- // Credit to @dhg for the idea
85
- .row > [class*="span"] {
86
- @include gridColumn;
87
- }
88
-
89
- // Default columns
90
- @for $i from 1 through 16 {
91
- .span#{$i} { @include columns($i); }
92
- }
93
-
94
- // For optional 24-column grid
95
- @for $i from 17 through 24 {
96
- .span#{$i} { @include columns($i); }
97
- }
98
-
99
- // Offset column options
100
- .row {
101
- @for $i from 1 through 12 {
102
- > .offset#{$i} { @include offset($i); }
103
- }
104
- }
105
-
106
- // Unique column sizes for 16-column grid
107
- .span-one-third { width: 300px; }
108
- .span-two-thirds { width: 620px; }
109
- .row {
110
- > .offset-one-third { margin-left: 340px; }
111
- > .offset-two-thirds { margin-left: 660px; }
26
+ a:hover {
27
+ color: $linkColorHover;
28
+ text-decoration: underline;
112
29
  }
@@ -0,0 +1,158 @@
1
+ // SPRITES
2
+ // Glyphs and icons for buttons, nav, and more
3
+ // -------------------------------------------
4
+
5
+
6
+ // ICONS
7
+ // -----
8
+
9
+ // All icons receive the styles of the <i> tag with a base class
10
+ // of .i and are then given a unique class to add width, height,
11
+ // and background-position. Your resulting HTML will look like
12
+ // <i class="i icon-inbox"></i>.
13
+
14
+ // For the white version of the icons, just add the .icon-white class:
15
+ // <i class="i icon-inbox icon-white"></i>
16
+
17
+ [class^="icon-"] {
18
+ display: inline-block;
19
+ width: 14px;
20
+ height: 14px;
21
+ vertical-align: text-top;
22
+ // TODO: check for rails pipeline
23
+ background-image: image-url("glyphicons-halflings.png");
24
+ background-position: 14px 14px;
25
+ background-repeat: no-repeat;
26
+
27
+ @include ie7-restore-right-whitespace();
28
+ }
29
+ .icon-white {
30
+ // TODO: check for rails pipeline
31
+ background-image: image-url("glyphicons-halflings-white.png");
32
+ }
33
+
34
+ .icon-glass { background-position: 0 0; }
35
+ .icon-music { background-position: -24px 0; }
36
+ .icon-search { background-position: -48px 0; }
37
+ .icon-envelope { background-position: -72px 0; }
38
+ .icon-heart { background-position: -96px 0; }
39
+ .icon-star { background-position: -120px 0; }
40
+ .icon-star-empty { background-position: -144px 0; }
41
+ .icon-user { background-position: -168px 0; }
42
+ .icon-film { background-position: -192px 0; }
43
+ .icon-th-large { background-position: -216px 0; }
44
+ .icon-th { background-position: -240px 0; }
45
+ .icon-th-list { background-position: -264px 0; }
46
+ .icon-ok { background-position: -288px 0; }
47
+ .icon-remove { background-position: -312px 0; }
48
+ .icon-zoom-in { background-position: -336px 0; }
49
+ .icon-zoom-out { background-position: -360px 0; }
50
+ .icon-off { background-position: -384px 0; }
51
+ .icon-signal { background-position: -408px 0; }
52
+ .icon-cog { background-position: -432px 0; }
53
+ .icon-trash { background-position: -456px 0; }
54
+
55
+ .icon-home { background-position: 0 -24px; }
56
+ .icon-file { background-position: -24px -24px; }
57
+ .icon-time { background-position: -48px -24px; }
58
+ .icon-road { background-position: -72px -24px; }
59
+ .icon-download-alt { background-position: -96px -24px; }
60
+ .icon-download { background-position: -120px -24px; }
61
+ .icon-upload { background-position: -144px -24px; }
62
+ .icon-inbox { background-position: -168px -24px; }
63
+ .icon-play-circle { background-position: -192px -24px; }
64
+ .icon-repeat { background-position: -216px -24px; }
65
+ .icon-refresh { background-position: -240px -24px; }
66
+ .icon-list-alt { background-position: -264px -24px; }
67
+ .icon-lock { background-position: -287px -24px; } // 1px off
68
+ .icon-flag { background-position: -312px -24px; }
69
+ .icon-headphones { background-position: -336px -24px; }
70
+ .icon-volume-off { background-position: -360px -24px; }
71
+ .icon-volume-down { background-position: -384px -24px; }
72
+ .icon-volume-up { background-position: -408px -24px; }
73
+ .icon-qrcode { background-position: -432px -24px; }
74
+ .icon-barcode { background-position: -456px -24px; }
75
+
76
+ .icon-tag { background-position: 0 -48px; }
77
+ .icon-tags { background-position: -25px -48px; } // 1px off
78
+ .icon-book { background-position: -48px -48px; }
79
+ .icon-bookmark { background-position: -72px -48px; }
80
+ .icon-print { background-position: -96px -48px; }
81
+ .icon-camera { background-position: -120px -48px; }
82
+ .icon-font { background-position: -144px -48px; }
83
+ .icon-bold { background-position: -167px -48px; } // 1px off
84
+ .icon-italic { background-position: -192px -48px; }
85
+ .icon-text-height { background-position: -216px -48px; }
86
+ .icon-text-width { background-position: -240px -48px; }
87
+ .icon-align-left { background-position: -264px -48px; }
88
+ .icon-align-center { background-position: -288px -48px; }
89
+ .icon-align-right { background-position: -312px -48px; }
90
+ .icon-align-justify { background-position: -336px -48px; }
91
+ .icon-list { background-position: -360px -48px; }
92
+ .icon-indent-left { background-position: -384px -48px; }
93
+ .icon-indent-right { background-position: -408px -48px; }
94
+ .icon-facetime-video { background-position: -432px -48px; }
95
+ .icon-picture { background-position: -456px -48px; }
96
+
97
+ .icon-pencil { background-position: 0 -72px; }
98
+ .icon-map-marker { background-position: -24px -72px; }
99
+ .icon-adjust { background-position: -48px -72px; }
100
+ .icon-tint { background-position: -72px -72px; }
101
+ .icon-edit { background-position: -96px -72px; }
102
+ .icon-share { background-position: -120px -72px; }
103
+ .icon-check { background-position: -144px -72px; }
104
+ .icon-move { background-position: -168px -72px; }
105
+ .icon-step-backward { background-position: -192px -72px; }
106
+ .icon-fast-backward { background-position: -216px -72px; }
107
+ .icon-backward { background-position: -240px -72px; }
108
+ .icon-play { background-position: -264px -72px; }
109
+ .icon-pause { background-position: -288px -72px; }
110
+ .icon-stop { background-position: -312px -72px; }
111
+ .icon-forward { background-position: -336px -72px; }
112
+ .icon-fast-forward { background-position: -360px -72px; }
113
+ .icon-step-forward { background-position: -384px -72px; }
114
+ .icon-eject { background-position: -408px -72px; }
115
+ .icon-chevron-left { background-position: -432px -72px; }
116
+ .icon-chevron-right { background-position: -456px -72px; }
117
+
118
+ .icon-plus-sign { background-position: 0 -96px; }
119
+ .icon-minus-sign { background-position: -24px -96px; }
120
+ .icon-remove-sign { background-position: -48px -96px; }
121
+ .icon-ok-sign { background-position: -72px -96px; }
122
+ .icon-question-sign { background-position: -96px -96px; }
123
+ .icon-info-sign { background-position: -120px -96px; }
124
+ .icon-screenshot { background-position: -144px -96px; }
125
+ .icon-remove-circle { background-position: -168px -96px; }
126
+ .icon-ok-circle { background-position: -192px -96px; }
127
+ .icon-ban-circle { background-position: -216px -96px; }
128
+ .icon-arrow-left { background-position: -240px -96px; }
129
+ .icon-arrow-right { background-position: -264px -96px; }
130
+ .icon-arrow-up { background-position: -289px -96px; } // 1px off
131
+ .icon-arrow-down { background-position: -312px -96px; }
132
+ .icon-share-alt { background-position: -336px -96px; }
133
+ .icon-resize-full { background-position: -360px -96px; }
134
+ .icon-resize-small { background-position: -384px -96px; }
135
+ .icon-plus { background-position: -408px -96px; }
136
+ .icon-minus { background-position: -433px -96px; }
137
+ .icon-asterisk { background-position: -456px -96px; }
138
+
139
+ .icon-exclamation-sign { background-position: 0 -120px; }
140
+ .icon-gift { background-position: -24px -120px; }
141
+ .icon-leaf { background-position: -48px -120px; }
142
+ .icon-fire { background-position: -72px -120px; }
143
+ .icon-eye-open { background-position: -96px -120px; }
144
+ .icon-eye-close { background-position: -120px -120px; }
145
+ .icon-warning-sign { background-position: -144px -120px; }
146
+ .icon-plane { background-position: -168px -120px; }
147
+ .icon-calendar { background-position: -192px -120px; }
148
+ .icon-random { background-position: -216px -120px; }
149
+ .icon-comment { background-position: -240px -120px; }
150
+ .icon-magnet { background-position: -264px -120px; }
151
+ .icon-chevron-up { background-position: -288px -120px; }
152
+ .icon-chevron-down { background-position: -313px -119px; } // 1px off
153
+ .icon-retweet { background-position: -336px -120px; }
154
+ .icon-shopping-cart { background-position: -360px -120px; }
155
+ .icon-folder-close { background-position: -384px -120px; }
156
+ .icon-folder-open { background-position: -408px -120px; }
157
+ .icon-resize-vertical { background-position: -432px -119px; }
158
+ .icon-resize-horizontal { background-position: -456px -118px; }
@@ -1,47 +1,59 @@
1
- /*
2
- * Tables.less
3
- * Tables for, you guessed it, tabular data
4
- * ---------------------------------------- */
1
+ //
2
+ // Tables.less
3
+ // Tables for, you guessed it, tabular data
4
+ // ----------------------------------------
5
5
 
6
6
 
7
+ // BASE TABLES
8
+ // -----------------
9
+
10
+ table {
11
+ max-width: 100%;
12
+ border-collapse: collapse;
13
+ border-spacing: 0;
14
+ }
15
+
7
16
  // BASELINE STYLES
8
17
  // ---------------
9
18
 
10
- table {
19
+ .table {
11
20
  width: 100%;
12
- margin-bottom: $baseline;
13
- padding: 0;
14
- font-size: $basefont;
15
- border-collapse: collapse;
21
+ margin-bottom: $baseLineHeight;
22
+ // Cells
16
23
  th,
17
24
  td {
18
- padding: 10px 10px 9px;
19
- line-height: $baseline;
25
+ padding: 8px;
26
+ line-height: $baseLineHeight;
20
27
  text-align: left;
28
+ border-top: 1px solid #ddd;
21
29
  }
22
30
  th {
23
- padding-top: 9px;
24
31
  font-weight: bold;
25
- vertical-align: middle;
32
+ vertical-align: bottom;
26
33
  }
27
34
  td {
28
35
  vertical-align: top;
29
- border-top: 1px solid #ddd;
30
36
  }
31
- // When scoped to row, fix th in tbody
32
- tbody th {
33
- border-top: 1px solid #ddd;
34
- vertical-align: top;
37
+ // Remove top border from thead by default
38
+ thead:first-child tr th,
39
+ thead:first-child tr td {
40
+ border-top: 0;
41
+ }
42
+ // Account for multiple tbody instances
43
+ tbody + tbody {
44
+ border-top: 2px solid #ddd;
35
45
  }
36
46
  }
37
47
 
38
48
 
39
- // CONDENSED VERSION
40
- // -----------------
41
- .condensed-table {
49
+
50
+ // CONDENSED TABLE W/ HALF PADDING
51
+ // -------------------------------
52
+
53
+ .table-condensed {
42
54
  th,
43
55
  td {
44
- padding: 5px 5px 4px;
56
+ padding: 4px 5px;
45
57
  }
46
58
  }
47
59
 
@@ -49,163 +61,70 @@ table {
49
61
  // BORDERED VERSION
50
62
  // ----------------
51
63
 
52
- .bordered-table {
64
+ .table-bordered {
53
65
  border: 1px solid #ddd;
54
66
  border-collapse: separate; // Done so we can round those corners!
55
- *border-collapse: collapse; /* IE7, collapse table to remove spacing */
67
+ *border-collapse: collapsed; // IE7 can't round corners anyway
56
68
  @include border-radius(4px);
57
69
  th + th,
58
70
  td + td,
59
- th + td {
71
+ th + td,
72
+ td + th {
60
73
  border-left: 1px solid #ddd;
61
74
  }
62
- thead tr:first-child th:first-child,
63
- tbody tr:first-child td:first-child {
75
+ // Prevent a double border
76
+ thead:first-child tr:first-child th,
77
+ tbody:first-child tr:first-child th,
78
+ tbody:first-child tr:first-child td {
79
+ border-top: 0;
80
+ }
81
+ // For first th or td in the first row in the first thead or tbody
82
+ thead:first-child tr:first-child th:first-child,
83
+ tbody:first-child tr:first-child td:first-child {
64
84
  @include border-radius(4px 0 0 0);
65
85
  }
66
- thead tr:first-child th:last-child,
67
- tbody tr:first-child td:last-child {
86
+ thead:first-child tr:first-child th:last-child,
87
+ tbody:first-child tr:first-child td:last-child {
68
88
  @include border-radius(0 4px 0 0);
69
89
  }
70
- tbody tr:last-child td:first-child {
90
+ // For first th or td in the first row in the first thead or tbody
91
+ thead:last-child tr:last-child th:first-child,
92
+ tbody:last-child tr:last-child td:first-child {
71
93
  @include border-radius(0 0 0 4px);
72
94
  }
73
- tbody tr:last-child td:last-child {
95
+ thead:last-child tr:last-child th:last-child,
96
+ tbody:last-child tr:last-child td:last-child {
74
97
  @include border-radius(0 0 4px 0);
75
98
  }
76
99
  }
77
100
 
78
101
 
79
- // TABLE CELL SIZES
80
- // ----------------
81
-
82
- // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
83
- @mixin tableColumns($columnSpan: 1) {
84
- width: (($gridColumnWidth - 20) * $columnSpan) + (($gridColumnWidth - 20) * ($columnSpan - 1));
85
- }
86
- table {
87
- // Default columns
88
- @for $i from 1 through 16 {
89
- .span#{$i} { @include tableColumns($i); }
90
- }
91
- }
92
-
93
-
94
102
  // ZEBRA-STRIPING
95
103
  // --------------
96
104
 
97
105
  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
98
- .zebra-striped {
106
+ .table-striped {
99
107
  tbody {
100
108
  tr:nth-child(odd) td,
101
109
  tr:nth-child(odd) th {
102
110
  background-color: #f9f9f9;
103
111
  }
104
- tr:hover td,
105
- tr:hover th {
106
- background-color: #f5f5f5;
107
- }
108
112
  }
109
113
  }
110
114
 
115
+
116
+
117
+ // TABLE CELL SIZING
118
+ // -----------------
119
+
120
+ // Change the columns
121
+ @mixin table-columns($columnSpan: 1) {
122
+ float: none;
123
+ width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16;
124
+ margin-left: 0;
125
+ }
111
126
  table {
112
- // Tablesorting styles w/ jQuery plugin
113
- .header {
114
- cursor: pointer;
115
- &:after {
116
- content: "";
117
- float: right;
118
- margin-top: 7px;
119
- border-width: 0 4px 4px;
120
- border-style: solid;
121
- border-color: #000 transparent;
122
- visibility: hidden;
123
- }
124
- }
125
- // Style the sorted column headers (THs)
126
- .headerSortUp,
127
- .headerSortDown {
128
- background-color: rgba(141,192,219,.25);
129
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
130
- }
131
- // Style the ascending (reverse alphabetical) column header
132
- .header:hover {
133
- &:after {
134
- visibility:visible;
135
- }
136
- }
137
- // Style the descending (alphabetical) column header
138
- .headerSortDown,
139
- .headerSortDown:hover {
140
- &:after {
141
- visibility:visible;
142
- @include opacity(60);
143
- }
144
- }
145
- // Style the ascending (reverse alphabetical) column header
146
- .headerSortUp {
147
- &:after {
148
- border-bottom: none;
149
- border-left: 4px solid transparent;
150
- border-right: 4px solid transparent;
151
- border-top: 4px solid #000;
152
- visibility:visible;
153
- @include box-shadow(none); //can't add boxshadow to downward facing arrow :(
154
- @include opacity(60);
155
- }
156
- }
157
- // Blue Table Headings
158
- .blue {
159
- color: $blue;
160
- border-bottom-color: $blue;
161
- }
162
- .headerSortUp.blue,
163
- .headerSortDown.blue {
164
- background-color: lighten($blue, 40%);
165
- }
166
- // Green Table Headings
167
- .green {
168
- color: $green;
169
- border-bottom-color: $green;
170
- }
171
- .headerSortUp.green,
172
- .headerSortDown.green {
173
- background-color: lighten($green, 40%);
174
- }
175
- // Red Table Headings
176
- .red {
177
- color: $red;
178
- border-bottom-color: $red;
179
- }
180
- .headerSortUp.red,
181
- .headerSortDown.red {
182
- background-color: lighten($red, 50%);
183
- }
184
- // Yellow Table Headings
185
- .yellow {
186
- color: $yellow;
187
- border-bottom-color: $yellow;
188
- }
189
- .headerSortUp.yellow,
190
- .headerSortDown.yellow {
191
- background-color: lighten($yellow, 40%);
192
- }
193
- // Orange Table Headings
194
- .orange {
195
- color: $orange;
196
- border-bottom-color: $orange;
197
- }
198
- .headerSortUp.orange,
199
- .headerSortDown.orange {
200
- background-color: lighten($orange, 40%);
201
- }
202
- // Purple Table Headings
203
- .purple {
204
- color: $purple;
205
- border-bottom-color: $purple;
206
- }
207
- .headerSortUp.purple,
208
- .headerSortDown.purple {
209
- background-color: lighten($purple, 40%);
127
+ @for $i from 1 through 12 {
128
+ .span#{$i} { @include table-columns($i); }
210
129
  }
211
130
  }