less-rails-bootstrap 1.4.3 → 2.0.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 (59) hide show
  1. data/CHANGELOG.md +5 -0
  2. data/lib/less/rails/bootstrap/version.rb +1 -1
  3. data/test/cases/usage_css_spec.rb +2 -9
  4. data/test/cases/usage_js_spec.rb +5 -7
  5. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -8
  6. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +91 -0
  7. data/vendor/assets/javascripts/twitter/bootstrap/button.js +98 -0
  8. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +154 -0
  9. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +136 -0
  10. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +58 -21
  11. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +63 -114
  12. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +39 -30
  13. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +62 -44
  14. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +130 -0
  15. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +270 -0
  16. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +51 -0
  17. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +271 -0
  18. data/vendor/frameworks/twitter/bootstrap/accordion.less +28 -0
  19. data/vendor/frameworks/twitter/bootstrap/alerts.less +70 -0
  20. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +41 -5
  21. data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +22 -0
  22. data/vendor/frameworks/twitter/bootstrap/button-groups.less +147 -0
  23. data/vendor/frameworks/twitter/bootstrap/buttons.less +165 -0
  24. data/vendor/frameworks/twitter/bootstrap/carousel.less +121 -0
  25. data/vendor/frameworks/twitter/bootstrap/close.less +18 -0
  26. data/vendor/frameworks/twitter/bootstrap/code.less +44 -0
  27. data/vendor/frameworks/twitter/bootstrap/component-animations.less +18 -0
  28. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +131 -0
  29. data/vendor/frameworks/twitter/bootstrap/forms.less +336 -300
  30. data/vendor/frameworks/twitter/bootstrap/grid.less +8 -0
  31. data/vendor/frameworks/twitter/bootstrap/hero-unit.less +20 -0
  32. data/vendor/frameworks/twitter/bootstrap/labels.less +16 -0
  33. data/vendor/frameworks/twitter/bootstrap/layouts.less +17 -0
  34. data/vendor/frameworks/twitter/bootstrap/mixins.less +391 -76
  35. data/vendor/frameworks/twitter/bootstrap/modals.less +72 -0
  36. data/vendor/frameworks/twitter/bootstrap/navbar.less +292 -0
  37. data/vendor/frameworks/twitter/bootstrap/navs.less +343 -0
  38. data/vendor/frameworks/twitter/bootstrap/pager.less +30 -0
  39. data/vendor/frameworks/twitter/bootstrap/pagination.less +55 -0
  40. data/vendor/frameworks/twitter/bootstrap/patterns.less +5 -1052
  41. data/vendor/frameworks/twitter/bootstrap/popovers.less +49 -0
  42. data/vendor/frameworks/twitter/bootstrap/print.less +18 -0
  43. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +95 -0
  44. data/vendor/frameworks/twitter/bootstrap/reset.less +37 -52
  45. data/vendor/frameworks/twitter/bootstrap/responsive.less +323 -0
  46. data/vendor/frameworks/twitter/bootstrap/scaffolding.less +13 -121
  47. data/vendor/frameworks/twitter/bootstrap/sprites.less +156 -0
  48. data/vendor/frameworks/twitter/bootstrap/tables.less +75 -160
  49. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +35 -0
  50. data/vendor/frameworks/twitter/bootstrap/tooltip.less +35 -0
  51. data/vendor/frameworks/twitter/bootstrap/type.less +100 -70
  52. data/vendor/frameworks/twitter/bootstrap/utilities.less +23 -0
  53. data/vendor/frameworks/twitter/bootstrap/variables.less +94 -55
  54. data/vendor/frameworks/twitter/bootstrap/wells.less +17 -0
  55. metadata +44 -11
  56. data/vendor/assets/javascripts/twitter/bootstrap/alerts.js +0 -113
  57. data/vendor/assets/javascripts/twitter/bootstrap/buttons.js +0 -62
  58. data/vendor/assets/javascripts/twitter/bootstrap/tabs.js +0 -80
  59. data/vendor/assets/javascripts/twitter/bootstrap/twipsy.js +0 -310
@@ -1,137 +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
- #font > .sans-serif(normal,@basefont,@baseline);
14
- color: @grayDark;
15
- }
16
-
17
- // Container (centered, fixed-width layouts)
18
- .container {
19
- .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
- .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
- }
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
25
  }
69
- .show {
70
- display: block;
26
+ a:hover {
27
+ color: @linkColorHover;
28
+ text-decoration: underline;
71
29
  }
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
- .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
- .gridColumn();
87
- }
88
-
89
- // Default columns
90
- .span1 { .columns(1); }
91
- .span2 { .columns(2); }
92
- .span3 { .columns(3); }
93
- .span4 { .columns(4); }
94
- .span5 { .columns(5); }
95
- .span6 { .columns(6); }
96
- .span7 { .columns(7); }
97
- .span8 { .columns(8); }
98
- .span9 { .columns(9); }
99
- .span10 { .columns(10); }
100
- .span11 { .columns(11); }
101
- .span12 { .columns(12); }
102
- .span13 { .columns(13); }
103
- .span14 { .columns(14); }
104
- .span15 { .columns(15); }
105
- .span16 { .columns(16); }
106
-
107
- // For optional 24-column grid
108
- .span17 { .columns(17); }
109
- .span18 { .columns(18); }
110
- .span19 { .columns(19); }
111
- .span20 { .columns(20); }
112
- .span21 { .columns(21); }
113
- .span22 { .columns(22); }
114
- .span23 { .columns(23); }
115
- .span24 { .columns(24); }
116
-
117
- // Offset column options
118
- .row {
119
- > .offset1 { .offset(1); }
120
- > .offset2 { .offset(2); }
121
- > .offset3 { .offset(3); }
122
- > .offset4 { .offset(4); }
123
- > .offset5 { .offset(5); }
124
- > .offset6 { .offset(6); }
125
- > .offset7 { .offset(7); }
126
- > .offset8 { .offset(8); }
127
- > .offset9 { .offset(9); }
128
- > .offset10 { .offset(10); }
129
- > .offset11 { .offset(11); }
130
- > .offset12 { .offset(12); }
131
- }
132
-
133
- // Unique column sizes for 16-column grid
134
- .span-one-third { width: 300px; }
135
- .span-two-thirds { width: 620px; }
136
- .offset-one-third { margin-left: 340px; }
137
- .offset-two-thirds { margin-left: 660px; }
@@ -0,0 +1,156 @@
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
+ background-image: url(../img/glyphicons-halflings.png);
23
+ background-position: 14px 14px;
24
+ background-repeat: no-repeat;
25
+
26
+ .ie7-restore-right-whitespace();
27
+ }
28
+ .icon-white {
29
+ background-image: url(../img/glyphicons-halflings-white.png);
30
+ }
31
+
32
+ .icon-glass { background-position: 0 0; }
33
+ .icon-music { background-position: -24px 0; }
34
+ .icon-search { background-position: -48px 0; }
35
+ .icon-envelope { background-position: -72px 0; }
36
+ .icon-heart { background-position: -96px 0; }
37
+ .icon-star { background-position: -120px 0; }
38
+ .icon-star-empty { background-position: -144px 0; }
39
+ .icon-user { background-position: -168px 0; }
40
+ .icon-film { background-position: -192px 0; }
41
+ .icon-th-large { background-position: -216px 0; }
42
+ .icon-th { background-position: -240px 0; }
43
+ .icon-th-list { background-position: -264px 0; }
44
+ .icon-ok { background-position: -288px 0; }
45
+ .icon-remove { background-position: -312px 0; }
46
+ .icon-zoom-in { background-position: -336px 0; }
47
+ .icon-zoom-out { background-position: -360px 0; }
48
+ .icon-off { background-position: -384px 0; }
49
+ .icon-signal { background-position: -408px 0; }
50
+ .icon-cog { background-position: -432px 0; }
51
+ .icon-trash { background-position: -456px 0; }
52
+
53
+ .icon-home { background-position: 0 -24px; }
54
+ .icon-file { background-position: -24px -24px; }
55
+ .icon-time { background-position: -48px -24px; }
56
+ .icon-road { background-position: -72px -24px; }
57
+ .icon-download-alt { background-position: -96px -24px; }
58
+ .icon-download { background-position: -120px -24px; }
59
+ .icon-upload { background-position: -144px -24px; }
60
+ .icon-inbox { background-position: -168px -24px; }
61
+ .icon-play-circle { background-position: -192px -24px; }
62
+ .icon-repeat { background-position: -216px -24px; }
63
+ .icon-refresh { background-position: -240px -24px; }
64
+ .icon-list-alt { background-position: -264px -24px; }
65
+ .icon-lock { background-position: -287px -24px; } // 1px off
66
+ .icon-flag { background-position: -312px -24px; }
67
+ .icon-headphones { background-position: -336px -24px; }
68
+ .icon-volume-off { background-position: -360px -24px; }
69
+ .icon-volume-down { background-position: -384px -24px; }
70
+ .icon-volume-up { background-position: -408px -24px; }
71
+ .icon-qrcode { background-position: -432px -24px; }
72
+ .icon-barcode { background-position: -456px -24px; }
73
+
74
+ .icon-tag { background-position: 0 -48px; }
75
+ .icon-tags { background-position: -25px -48px; } // 1px off
76
+ .icon-book { background-position: -48px -48px; }
77
+ .icon-bookmark { background-position: -72px -48px; }
78
+ .icon-print { background-position: -96px -48px; }
79
+ .icon-camera { background-position: -120px -48px; }
80
+ .icon-font { background-position: -144px -48px; }
81
+ .icon-bold { background-position: -167px -48px; } // 1px off
82
+ .icon-italic { background-position: -192px -48px; }
83
+ .icon-text-height { background-position: -216px -48px; }
84
+ .icon-text-width { background-position: -240px -48px; }
85
+ .icon-align-left { background-position: -264px -48px; }
86
+ .icon-align-center { background-position: -288px -48px; }
87
+ .icon-align-right { background-position: -312px -48px; }
88
+ .icon-align-justify { background-position: -336px -48px; }
89
+ .icon-list { background-position: -360px -48px; }
90
+ .icon-indent-left { background-position: -384px -48px; }
91
+ .icon-indent-right { background-position: -408px -48px; }
92
+ .icon-facetime-video { background-position: -432px -48px; }
93
+ .icon-picture { background-position: -456px -48px; }
94
+
95
+ .icon-pencil { background-position: 0 -72px; }
96
+ .icon-map-marker { background-position: -24px -72px; }
97
+ .icon-adjust { background-position: -48px -72px; }
98
+ .icon-tint { background-position: -72px -72px; }
99
+ .icon-edit { background-position: -96px -72px; }
100
+ .icon-share { background-position: -120px -72px; }
101
+ .icon-check { background-position: -144px -72px; }
102
+ .icon-move { background-position: -168px -72px; }
103
+ .icon-step-backward { background-position: -192px -72px; }
104
+ .icon-fast-backward { background-position: -216px -72px; }
105
+ .icon-backward { background-position: -240px -72px; }
106
+ .icon-play { background-position: -264px -72px; }
107
+ .icon-pause { background-position: -288px -72px; }
108
+ .icon-stop { background-position: -312px -72px; }
109
+ .icon-forward { background-position: -336px -72px; }
110
+ .icon-fast-forward { background-position: -360px -72px; }
111
+ .icon-step-forward { background-position: -384px -72px; }
112
+ .icon-eject { background-position: -408px -72px; }
113
+ .icon-chevron-left { background-position: -432px -72px; }
114
+ .icon-chevron-right { background-position: -456px -72px; }
115
+
116
+ .icon-plus-sign { background-position: 0 -96px; }
117
+ .icon-minus-sign { background-position: -24px -96px; }
118
+ .icon-remove-sign { background-position: -48px -96px; }
119
+ .icon-ok-sign { background-position: -72px -96px; }
120
+ .icon-question-sign { background-position: -96px -96px; }
121
+ .icon-info-sign { background-position: -120px -96px; }
122
+ .icon-screenshot { background-position: -144px -96px; }
123
+ .icon-remove-circle { background-position: -168px -96px; }
124
+ .icon-ok-circle { background-position: -192px -96px; }
125
+ .icon-ban-circle { background-position: -216px -96px; }
126
+ .icon-arrow-left { background-position: -240px -96px; }
127
+ .icon-arrow-right { background-position: -264px -96px; }
128
+ .icon-arrow-up { background-position: -289px -96px; } // 1px off
129
+ .icon-arrow-down { background-position: -312px -96px; }
130
+ .icon-share-alt { background-position: -336px -96px; }
131
+ .icon-resize-full { background-position: -360px -96px; }
132
+ .icon-resize-small { background-position: -384px -96px; }
133
+ .icon-plus { background-position: -408px -96px; }
134
+ .icon-minus { background-position: -433px -96px; }
135
+ .icon-asterisk { background-position: -456px -96px; }
136
+
137
+ .icon-exclamation-sign { background-position: 0 -120px; }
138
+ .icon-gift { background-position: -24px -120px; }
139
+ .icon-leaf { background-position: -48px -120px; }
140
+ .icon-fire { background-position: -72px -120px; }
141
+ .icon-eye-open { background-position: -96px -120px; }
142
+ .icon-eye-close { background-position: -120px -120px; }
143
+ .icon-warning-sign { background-position: -144px -120px; }
144
+ .icon-plane { background-position: -168px -120px; }
145
+ .icon-calendar { background-position: -192px -120px; }
146
+ .icon-random { background-position: -216px -120px; }
147
+ .icon-comment { background-position: -240px -120px; }
148
+ .icon-magnet { background-position: -264px -120px; }
149
+ .icon-chevron-up { background-position: -288px -120px; }
150
+ .icon-chevron-down { background-position: -313px -119px; } // 1px off
151
+ .icon-retweet { background-position: -336px -120px; }
152
+ .icon-shopping-cart { background-position: -360px -120px; }
153
+ .icon-folder-close { background-position: -384px -120px; }
154
+ .icon-folder-open { background-position: -408px -120px; }
155
+ .icon-resize-vertical { background-position: -432px -119px; }
156
+ .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,42 +61,69 @@ 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
  .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
  .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
  .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
  .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
  .border-radius(0 0 4px 0);
75
98
  }
76
99
  }
77
100
 
78
101
 
79
- // TABLE CELL SIZES
80
- // ----------------
102
+ // ZEBRA-STRIPING
103
+ // --------------
81
104
 
82
- // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
105
+ // Default zebra-stripe styles (alternating gray and transparent backgrounds)
106
+ .table-striped {
107
+ tbody {
108
+ tr:nth-child(odd) td,
109
+ tr:nth-child(odd) th {
110
+ background-color: #f9f9f9;
111
+ }
112
+ }
113
+ }
114
+
115
+
116
+
117
+ // TABLE CELL SIZING
118
+ // -----------------
119
+
120
+ // Change the columns
83
121
  .tableColumns(@columnSpan: 1) {
84
- width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
122
+ float: none;
123
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
124
+ margin-left: 0;
85
125
  }
86
126
  table {
87
- // Default columns
88
127
  .span1 { .tableColumns(1); }
89
128
  .span2 { .tableColumns(2); }
90
129
  .span3 { .tableColumns(3); }
@@ -97,128 +136,4 @@ table {
97
136
  .span10 { .tableColumns(10); }
98
137
  .span11 { .tableColumns(11); }
99
138
  .span12 { .tableColumns(12); }
100
- .span13 { .tableColumns(13); }
101
- .span14 { .tableColumns(14); }
102
- .span15 { .tableColumns(15); }
103
- .span16 { .tableColumns(16); }
104
- }
105
-
106
-
107
- // ZEBRA-STRIPING
108
- // --------------
109
-
110
- // Default zebra-stripe styles (alternating gray and transparent backgrounds)
111
- .zebra-striped {
112
- tbody {
113
- tr:nth-child(odd) td,
114
- tr:nth-child(odd) th {
115
- background-color: #f9f9f9;
116
- }
117
- tr:hover td,
118
- tr:hover th {
119
- background-color: #f5f5f5;
120
- }
121
- }
122
139
  }
123
-
124
- table {
125
- // Tablesorting styles w/ jQuery plugin
126
- .header {
127
- cursor: pointer;
128
- &:after {
129
- content: "";
130
- float: right;
131
- margin-top: 7px;
132
- border-width: 0 4px 4px;
133
- border-style: solid;
134
- border-color: #000 transparent;
135
- visibility: hidden;
136
- }
137
- }
138
- // Style the sorted column headers (THs)
139
- .headerSortUp,
140
- .headerSortDown {
141
- background-color: rgba(141,192,219,.25);
142
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
143
- }
144
- // Style the ascending (reverse alphabetical) column header
145
- .header:hover {
146
- &:after {
147
- visibility:visible;
148
- }
149
- }
150
- // Style the descending (alphabetical) column header
151
- .headerSortDown,
152
- .headerSortDown:hover {
153
- &:after {
154
- visibility:visible;
155
- .opacity(60);
156
- }
157
- }
158
- // Style the ascending (reverse alphabetical) column header
159
- .headerSortUp {
160
- &:after {
161
- border-bottom: none;
162
- border-left: 4px solid transparent;
163
- border-right: 4px solid transparent;
164
- border-top: 4px solid #000;
165
- visibility:visible;
166
- .box-shadow(none); //can't add boxshadow to downward facing arrow :(
167
- .opacity(60);
168
- }
169
- }
170
- // Blue Table Headings
171
- .blue {
172
- color: @blue;
173
- border-bottom-color: @blue;
174
- }
175
- .headerSortUp.blue,
176
- .headerSortDown.blue {
177
- background-color: lighten(@blue, 40%);
178
- }
179
- // Green Table Headings
180
- .green {
181
- color: @green;
182
- border-bottom-color: @green;
183
- }
184
- .headerSortUp.green,
185
- .headerSortDown.green {
186
- background-color: lighten(@green, 40%);
187
- }
188
- // Red Table Headings
189
- .red {
190
- color: @red;
191
- border-bottom-color: @red;
192
- }
193
- .headerSortUp.red,
194
- .headerSortDown.red {
195
- background-color: lighten(@red, 50%);
196
- }
197
- // Yellow Table Headings
198
- .yellow {
199
- color: @yellow;
200
- border-bottom-color: @yellow;
201
- }
202
- .headerSortUp.yellow,
203
- .headerSortDown.yellow {
204
- background-color: lighten(@yellow, 40%);
205
- }
206
- // Orange Table Headings
207
- .orange {
208
- color: @orange;
209
- border-bottom-color: @orange;
210
- }
211
- .headerSortUp.orange,
212
- .headerSortDown.orange {
213
- background-color: lighten(@orange, 40%);
214
- }
215
- // Purple Table Headings
216
- .purple {
217
- color: @purple;
218
- border-bottom-color: @purple;
219
- }
220
- .headerSortUp.purple,
221
- .headerSortDown.purple {
222
- background-color: lighten(@purple, 40%);
223
- }
224
- }