less-rails-bootstrap 2.3.3 → 3.0.0.rc1

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 (72) hide show
  1. data/.gitignore +1 -0
  2. data/CHANGELOG.md +4 -0
  3. data/README.md +7 -11
  4. data/lib/less/rails/bootstrap/version.rb +1 -1
  5. data/scripts/update_bootstrap.sh +37 -8
  6. data/test/cases/usage_css_spec.rb +15 -12
  7. data/test/cases/usage_js_spec.rb +4 -4
  8. data/test/dummy_app/app/assets/stylesheets/fonts.css.less +2 -0
  9. data/test/dummy_app/app/assets/stylesheets/framework.css.less +4 -2
  10. data/test/dummy_app/app/assets/stylesheets/individual.css.less +2 -2
  11. data/test/spec_helper.rb +1 -2
  12. data/vendor/assets/javascripts/twitter/bootstrap.js +0 -1
  13. data/vendor/assets/javascripts/twitter/bootstrap/affix.js +58 -49
  14. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +36 -37
  15. data/vendor/assets/javascripts/twitter/bootstrap/button.js +41 -39
  16. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +131 -125
  17. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +108 -96
  18. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +72 -87
  19. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +149 -155
  20. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +60 -59
  21. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +103 -107
  22. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +73 -82
  23. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +258 -255
  24. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +34 -38
  25. data/vendor/frameworks/twitter/bootstrap/accordion.less +9 -12
  26. data/vendor/frameworks/twitter/bootstrap/alerts.less +43 -53
  27. data/vendor/frameworks/twitter/bootstrap/bootstrap.less +21 -21
  28. data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +7 -8
  29. data/vendor/frameworks/twitter/bootstrap/button-groups.less +93 -151
  30. data/vendor/frameworks/twitter/bootstrap/buttons.less +93 -164
  31. data/vendor/frameworks/twitter/bootstrap/carousel.less +110 -63
  32. data/vendor/frameworks/twitter/bootstrap/close.less +18 -17
  33. data/vendor/frameworks/twitter/bootstrap/code.less +14 -20
  34. data/vendor/frameworks/twitter/bootstrap/component-animations.less +10 -3
  35. data/vendor/frameworks/twitter/bootstrap/dropdowns.less +66 -143
  36. data/vendor/frameworks/twitter/bootstrap/forms.less +281 -548
  37. data/vendor/frameworks/twitter/bootstrap/grid.less +194 -11
  38. data/vendor/frameworks/twitter/bootstrap/media.less +8 -7
  39. data/vendor/frameworks/twitter/bootstrap/mixins.less +290 -446
  40. data/vendor/frameworks/twitter/bootstrap/modals.less +92 -51
  41. data/vendor/frameworks/twitter/bootstrap/navbar.less +285 -402
  42. data/vendor/frameworks/twitter/bootstrap/navs.less +176 -348
  43. data/vendor/frameworks/twitter/bootstrap/pager.less +45 -33
  44. data/vendor/frameworks/twitter/bootstrap/pagination.less +89 -104
  45. data/vendor/frameworks/twitter/bootstrap/popovers.less +53 -51
  46. data/vendor/frameworks/twitter/bootstrap/progress-bars.less +28 -45
  47. data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +92 -32
  48. data/vendor/frameworks/twitter/bootstrap/scaffolding.less +60 -18
  49. data/vendor/frameworks/twitter/bootstrap/tables.less +131 -164
  50. data/vendor/frameworks/twitter/bootstrap/thumbnails.less +20 -31
  51. data/vendor/frameworks/twitter/bootstrap/tooltip.less +45 -20
  52. data/vendor/frameworks/twitter/bootstrap/type.less +84 -99
  53. data/vendor/frameworks/twitter/bootstrap/utilities.less +17 -5
  54. data/vendor/frameworks/twitter/bootstrap/variables.less +446 -179
  55. data/vendor/frameworks/twitter/bootstrap/wells.less +5 -5
  56. metadata +41 -44
  57. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  58. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  59. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +0 -335
  60. data/vendor/assets/stylesheets/twitter/bootstrap-responsive.css.less +0 -1
  61. data/vendor/assets/stylesheets/twitter/bootstrap.css.less +0 -1
  62. data/vendor/frameworks/twitter/bootstrap.less +0 -1
  63. data/vendor/frameworks/twitter/bootstrap/hero-unit.less +0 -25
  64. data/vendor/frameworks/twitter/bootstrap/labels-badges.less +0 -84
  65. data/vendor/frameworks/twitter/bootstrap/layouts.less +0 -16
  66. data/vendor/frameworks/twitter/bootstrap/reset.less +0 -216
  67. data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +0 -28
  68. data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +0 -193
  69. data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +0 -19
  70. data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +0 -189
  71. data/vendor/frameworks/twitter/bootstrap/responsive.less +0 -48
  72. data/vendor/frameworks/twitter/bootstrap/sprites.less +0 -197
@@ -3,8 +3,8 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // ANIMATIONS
7
- // ----------
6
+ // Bar animations
7
+ // -------------------------
8
8
 
9
9
  // Webkit
10
10
  @-webkit-keyframes progress-bar-stripes {
@@ -38,45 +38,40 @@
38
38
 
39
39
 
40
40
 
41
- // THE BARS
42
- // --------
41
+ // Bar itself
42
+ // -------------------------
43
43
 
44
44
  // Outer container
45
45
  .progress {
46
46
  overflow: hidden;
47
- height: @baseLineHeight;
48
- margin-bottom: @baseLineHeight;
49
- #gradient > .vertical(#f5f5f5, #f9f9f9);
47
+ height: @line-height-computed;
48
+ margin-bottom: @line-height-computed;
49
+ background-color: @progress-bg;
50
+ border-radius: @border-radius-base;
50
51
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
51
- .border-radius(@baseBorderRadius);
52
52
  }
53
53
 
54
54
  // Bar of progress
55
- .progress .bar {
55
+ .progress-bar {
56
+ float: left;
56
57
  width: 0%;
57
58
  height: 100%;
58
- color: @white;
59
- float: left;
60
- font-size: 12px;
59
+ font-size: @font-size-small;
60
+ color: @progress-bar-color;
61
61
  text-align: center;
62
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
63
- #gradient > .vertical(#149bdf, #0480be);
62
+ background-color: @progress-bar-bg;
64
63
  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
65
- .box-sizing(border-box);
66
64
  .transition(width .6s ease);
67
65
  }
68
- .progress .bar + .bar {
69
- .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
70
- }
71
66
 
72
67
  // Striped bars
73
- .progress-striped .bar {
74
- #gradient > .striped(#149bdf);
68
+ .progress-striped .progress-bar {
69
+ #gradient > .striped(@progress-bar-bg);
75
70
  .background-size(40px 40px);
76
71
  }
77
72
 
78
73
  // Call animation for the active one
79
- .progress.active .bar {
74
+ .progress.active .progress-bar {
80
75
  -webkit-animation: progress-bar-stripes 2s linear infinite;
81
76
  -moz-animation: progress-bar-stripes 2s linear infinite;
82
77
  -ms-animation: progress-bar-stripes 2s linear infinite;
@@ -86,37 +81,25 @@
86
81
 
87
82
 
88
83
 
89
- // COLORS
90
- // ------
84
+ // Variations
85
+ // -------------------------
91
86
 
92
87
  // Danger (red)
93
- .progress-danger .bar, .progress .bar-danger {
94
- #gradient > .vertical(#ee5f5b, #c43c35);
95
- }
96
- .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
97
- #gradient > .striped(#ee5f5b);
88
+ .progress-bar-danger {
89
+ .progress-bar-variant(@progress-bar-danger-bg);
98
90
  }
99
91
 
100
92
  // Success (green)
101
- .progress-success .bar, .progress .bar-success {
102
- #gradient > .vertical(#62c462, #57a957);
103
- }
104
- .progress-success.progress-striped .bar, .progress-striped .bar-success {
105
- #gradient > .striped(#62c462);
106
- }
107
-
108
- // Info (teal)
109
- .progress-info .bar, .progress .bar-info {
110
- #gradient > .vertical(#5bc0de, #339bb9);
111
- }
112
- .progress-info.progress-striped .bar, .progress-striped .bar-info {
113
- #gradient > .striped(#5bc0de);
93
+ .progress-bar-success {
94
+ .progress-bar-variant(@progress-bar-success-bg);
114
95
  }
115
96
 
116
97
  // Warning (orange)
117
- .progress-warning .bar, .progress .bar-warning {
118
- #gradient > .vertical(lighten(@orange, 15%), @orange);
98
+ .progress-bar-warning {
99
+ .progress-bar-variant(@progress-bar-warning-bg);
119
100
  }
120
- .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
121
- #gradient > .striped(lighten(@orange, 15%));
101
+
102
+ // Info (teal)
103
+ .progress-bar-info {
104
+ .progress-bar-variant(@progress-bar-info-bg);
122
105
  }
@@ -5,55 +5,115 @@
5
5
 
6
6
  // IE10 Metro responsive
7
7
  // Required for Windows 8 Metro split-screen snapping with IE10
8
+ //
8
9
  // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
9
10
  @-ms-viewport{
10
11
  width: device-width;
11
12
  }
12
13
 
14
+ // IE10 on Windows Phone 8
15
+ // IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
16
+ // other words, say on a Lumia, you'll get 768px as the device width,
17
+ // meaning users will see the tablet styles and not phone styles.
18
+ //
19
+ // Alternatively you can override this with JS (see source below), but
20
+ // we won't be doing that here given our limited scope.
21
+ //
22
+ // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
23
+ @media screen and (max-width: 400px) {
24
+ @-ms-viewport{
25
+ width: 320px;
26
+ }
27
+ }
28
+
13
29
  // Hide from screenreaders and browsers
14
30
  // Credit: HTML5 Boilerplate
15
31
  .hidden {
16
- display: none;
17
- visibility: hidden;
32
+ display: none !important;
33
+ visibility: hidden !important;
18
34
  }
19
35
 
20
36
  // Visibility utilities
21
37
 
22
- // For desktops
23
- .visible-phone { display: none !important; }
24
- .visible-tablet { display: none !important; }
25
- .hidden-phone { }
26
- .hidden-tablet { }
27
- .hidden-desktop { display: none !important; }
28
- .visible-desktop { display: inherit !important; }
38
+ // For Phones
39
+ .visible-sm {
40
+ .responsive-visibility();
41
+ }
42
+ .visible-md {
43
+ .responsive-invisibility();
44
+ }
45
+ .visible-lg {
46
+ .responsive-invisibility();
47
+ }
48
+
49
+ .hidden-sm {
50
+ .responsive-invisibility();
51
+ }
52
+ .hidden-md {
53
+ .responsive-visibility();
54
+ }
55
+ .hidden-lg {
56
+ .responsive-visibility();
57
+ }
58
+
29
59
 
30
60
  // Tablets & small desktops only
31
- @media (min-width: 768px) and (max-width: 979px) {
32
- // Hide everything else
33
- .hidden-desktop { display: inherit !important; }
34
- .visible-desktop { display: none !important ; }
35
- // Show
36
- .visible-tablet { display: inherit !important; }
37
- // Hide
38
- .hidden-tablet { display: none !important; }
39
- }
40
-
41
- // Phones only
42
- @media (max-width: 767px) {
43
- // Hide everything else
44
- .hidden-desktop { display: inherit !important; }
45
- .visible-desktop { display: none !important; }
46
- // Show
47
- .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
48
- // Hide
49
- .hidden-phone { display: none !important; }
61
+ @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
62
+ .visible-sm {
63
+ .responsive-invisibility();
64
+ }
65
+ .visible-md {
66
+ .responsive-visibility();
67
+ }
68
+ .visible-lg {
69
+ .responsive-invisibility();
70
+ }
71
+
72
+ .hidden-sm {
73
+ .responsive-visibility();
74
+ }
75
+ .hidden-md {
76
+ .responsive-invisibility();
77
+ }
78
+ .hidden-lg {
79
+ .responsive-visibility();
80
+ }
81
+ }
82
+
83
+ // For desktops
84
+ @media (min-width: @screen-desktop) {
85
+ .visible-sm {
86
+ .responsive-invisibility();
87
+ }
88
+ .visible-md {
89
+ .responsive-invisibility();
90
+ }
91
+ .visible-lg {
92
+ .responsive-visibility();
93
+ }
94
+
95
+ .hidden-sm {
96
+ .responsive-visibility();
97
+ }
98
+ .hidden-md {
99
+ .responsive-visibility();
100
+ }
101
+ .hidden-lg {
102
+ .responsive-invisibility();
103
+ }
50
104
  }
51
105
 
52
106
  // Print utilities
53
- .visible-print { display: none !important; }
54
- .hidden-print { }
107
+ .visible-print {
108
+ .responsive-invisibility();
109
+ }
110
+ .hidden-print { }
55
111
 
56
112
  @media print {
57
- .visible-print { display: inherit !important; }
58
- .hidden-print { display: none !important; }
113
+ .visible-print {
114
+ .responsive-visibility();
115
+ }
116
+ .hidden-print {
117
+ .responsive-invisibility();
118
+ }
59
119
  }
@@ -3,16 +3,38 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
+ // Reset the box-sizing
7
+ // -------------------------
8
+
9
+ * {
10
+ .box-sizing(border-box);
11
+ }
12
+
13
+
6
14
  // Body reset
7
15
  // -------------------------
8
16
 
17
+ html {
18
+ font-size: 62.5%;
19
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
20
+ }
21
+
9
22
  body {
10
- margin: 0;
11
- font-family: @baseFontFamily;
12
- font-size: @baseFontSize;
13
- line-height: @baseLineHeight;
14
- color: @textColor;
15
- background-color: @bodyBackground;
23
+ font-family: @font-family-base;
24
+ font-size: @font-size-base;
25
+ line-height: @line-height-base;
26
+ color: @text-color;
27
+ background-color: @body-bg;
28
+ }
29
+
30
+ // Reset fonts for relevant elements
31
+ input,
32
+ button,
33
+ select,
34
+ textarea {
35
+ font-family: inherit;
36
+ font-size: inherit;
37
+ line-height: inherit;
16
38
  }
17
39
 
18
40
 
@@ -20,34 +42,54 @@ body {
20
42
  // -------------------------
21
43
 
22
44
  a {
23
- color: @linkColor;
45
+ color: @link-color;
24
46
  text-decoration: none;
25
47
  }
26
48
  a:hover,
27
49
  a:focus {
28
- color: @linkColorHover;
50
+ color: @link-hover-color;
29
51
  text-decoration: underline;
30
52
  }
53
+ a:focus {
54
+ .tab-focus();
55
+ }
31
56
 
32
57
 
33
58
  // Images
34
59
  // -------------------------
35
60
 
61
+ img {
62
+ vertical-align: middle;
63
+ }
64
+
65
+ // Responsive images (ensure images don't scale beyond their parents)
66
+ .img-responsive {
67
+ display: inline-block;
68
+ max-width: 100%; // Part 1: Set a maximum relative to the parent
69
+ height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
70
+ }
71
+
36
72
  // Rounded corners
37
73
  .img-rounded {
38
- .border-radius(6px);
74
+ border-radius: @border-radius-large;
39
75
  }
40
76
 
41
- // Add polaroid-esque trim
42
- .img-polaroid {
43
- padding: 4px;
44
- background-color: #fff;
45
- border: 1px solid #ccc;
46
- border: 1px solid rgba(0,0,0,.2);
47
- .box-shadow(0 1px 3px rgba(0,0,0,.1));
48
- }
77
+ // Image thumbnails
78
+ // See thumbnails.less for `.img-thumbnail`
49
79
 
50
80
  // Perfect circle
51
81
  .img-circle {
52
- .border-radius(500px); // crank the border-radius so it works with most reasonably sized images
82
+ border-radius: 500px; // crank the border-radius so it works with most reasonably sized images
53
83
  }
84
+
85
+
86
+ // Horizontal rules
87
+ // -------------------------
88
+
89
+ hr {
90
+ margin-top: @line-height-computed;
91
+ margin-bottom: @line-height-computed;
92
+ border: 0;
93
+ border-top: 1px solid @hr-border;
94
+ }
95
+
@@ -3,242 +3,209 @@
3
3
  // --------------------------------------------------
4
4
 
5
5
 
6
- // BASE TABLES
7
- // -----------------
8
-
9
6
  table {
10
7
  max-width: 100%;
11
- background-color: @tableBackground;
12
- border-collapse: collapse;
13
- border-spacing: 0;
8
+ background-color: @table-bg;
14
9
  }
10
+ th {
11
+ text-align: left;
12
+ }
13
+
15
14
 
16
- // BASELINE STYLES
15
+ // Baseline styles
17
16
  // ---------------
18
17
 
19
18
  .table {
20
19
  width: 100%;
21
- margin-bottom: @baseLineHeight;
20
+ margin-bottom: @line-height-computed;
22
21
  // Cells
23
- th,
24
- td {
25
- padding: 8px;
26
- line-height: @baseLineHeight;
27
- text-align: left;
28
- vertical-align: top;
29
- border-top: 1px solid @tableBorder;
30
- }
31
- th {
32
- font-weight: bold;
22
+ thead,
23
+ tbody,
24
+ tfoot {
25
+ > tr {
26
+ > th,
27
+ > td {
28
+ padding: @table-cell-padding;
29
+ line-height: @line-height-base;
30
+ vertical-align: top;
31
+ border-top: 1px solid @table-border-color;
32
+ }
33
+ }
33
34
  }
34
35
  // Bottom align for column headings
35
- thead th {
36
+ thead > tr > th {
36
37
  vertical-align: bottom;
37
38
  }
38
39
  // Remove top border from thead by default
39
- caption + thead tr:first-child th,
40
- caption + thead tr:first-child td,
41
- colgroup + thead tr:first-child th,
42
- colgroup + thead tr:first-child td,
43
- thead:first-child tr:first-child th,
44
- thead:first-child tr:first-child td {
45
- border-top: 0;
40
+ caption + thead,
41
+ colgroup + thead,
42
+ thead:first-child {
43
+ tr:first-child {
44
+ th, td {
45
+ border-top: 0;
46
+ }
47
+ }
46
48
  }
47
49
  // Account for multiple tbody instances
48
50
  tbody + tbody {
49
- border-top: 2px solid @tableBorder;
51
+ border-top: 2px solid @table-border-color;
50
52
  }
51
53
 
52
54
  // Nesting
53
55
  .table {
54
- background-color: @bodyBackground;
56
+ background-color: @body-bg;
55
57
  }
56
58
  }
57
59
 
58
60
 
59
61
 
60
- // CONDENSED TABLE W/ HALF PADDING
62
+ // Condensed table w/ half padding
61
63
  // -------------------------------
62
64
 
63
65
  .table-condensed {
64
- th,
65
- td {
66
- padding: 4px 5px;
66
+ thead,
67
+ tbody,
68
+ tfoot {
69
+ > tr {
70
+ > th,
71
+ > td {
72
+ padding: @table-condensed-cell-padding;
73
+ }
74
+ }
67
75
  }
68
76
  }
69
77
 
70
78
 
71
- // BORDERED VERSION
79
+
80
+ // Bordered version
72
81
  // ----------------
73
82
 
74
83
  .table-bordered {
75
- border: 1px solid @tableBorder;
76
- border-collapse: separate; // Done so we can round those corners!
77
- *border-collapse: collapse; // IE7 can't round corners anyway
78
- border-left: 0;
79
- .border-radius(@baseBorderRadius);
80
- th,
81
- td {
82
- border-left: 1px solid @tableBorder;
83
- }
84
- // Prevent a double border
85
- caption + thead tr:first-child th,
86
- caption + tbody tr:first-child th,
87
- caption + tbody tr:first-child td,
88
- colgroup + thead tr:first-child th,
89
- colgroup + tbody tr:first-child th,
90
- colgroup + tbody tr:first-child td,
91
- thead:first-child tr:first-child th,
92
- tbody:first-child tr:first-child th,
93
- tbody:first-child tr:first-child td {
94
- border-top: 0;
95
- }
96
- // For first th/td in the first row in the first thead or tbody
97
- thead:first-child tr:first-child > th:first-child,
98
- tbody:first-child tr:first-child > td:first-child,
99
- tbody:first-child tr:first-child > th:first-child {
100
- .border-top-left-radius(@baseBorderRadius);
101
- }
102
- // For last th/td in the first row in the first thead or tbody
103
- thead:first-child tr:first-child > th:last-child,
104
- tbody:first-child tr:first-child > td:last-child,
105
- tbody:first-child tr:first-child > th:last-child {
106
- .border-top-right-radius(@baseBorderRadius);
107
- }
108
- // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot
109
- thead:last-child tr:last-child > th:first-child,
110
- tbody:last-child tr:last-child > td:first-child,
111
- tbody:last-child tr:last-child > th:first-child,
112
- tfoot:last-child tr:last-child > td:first-child,
113
- tfoot:last-child tr:last-child > th:first-child {
114
- .border-bottom-left-radius(@baseBorderRadius);
115
- }
116
- // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot
117
- thead:last-child tr:last-child > th:last-child,
118
- tbody:last-child tr:last-child > td:last-child,
119
- tbody:last-child tr:last-child > th:last-child,
120
- tfoot:last-child tr:last-child > td:last-child,
121
- tfoot:last-child tr:last-child > th:last-child {
122
- .border-bottom-right-radius(@baseBorderRadius);
123
- }
124
-
125
- // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot
126
- tfoot + tbody:last-child tr:last-child td:first-child {
127
- .border-bottom-left-radius(0);
128
- }
129
- tfoot + tbody:last-child tr:last-child td:last-child {
130
- .border-bottom-right-radius(0);
131
- }
132
-
133
- // Special fixes to round the left border on the first td/th
134
- caption + thead tr:first-child th:first-child,
135
- caption + tbody tr:first-child td:first-child,
136
- colgroup + thead tr:first-child th:first-child,
137
- colgroup + tbody tr:first-child td:first-child {
138
- .border-top-left-radius(@baseBorderRadius);
139
- }
140
- caption + thead tr:first-child th:last-child,
141
- caption + tbody tr:first-child td:last-child,
142
- colgroup + thead tr:first-child th:last-child,
143
- colgroup + tbody tr:first-child td:last-child {
144
- .border-top-right-radius(@baseBorderRadius);
84
+ border: 1px solid @table-border-color;
85
+ > thead,
86
+ > tbody,
87
+ > tfoot {
88
+ > tr {
89
+ > th,
90
+ > td {
91
+ border: 1px solid @table-border-color;
92
+ }
93
+ }
145
94
  }
146
-
147
95
  }
148
96
 
149
97
 
150
98
 
151
-
152
- // ZEBRA-STRIPING
99
+ // Zebra-striping
153
100
  // --------------
154
101
 
155
102
  // Default zebra-stripe styles (alternating gray and transparent backgrounds)
156
103
  .table-striped {
157
- tbody {
158
- > tr:nth-child(odd) > td,
159
- > tr:nth-child(odd) > th {
160
- background-color: @tableBackgroundAccent;
104
+ > tbody {
105
+ > tr:nth-child(odd) {
106
+ > td,
107
+ > th {
108
+ background-color: @table-bg-accent;
109
+ }
161
110
  }
162
111
  }
163
112
  }
164
113
 
165
114
 
166
- // HOVER EFFECT
115
+
116
+ // Hover effect
167
117
  // ------------
118
+
168
119
  // Placed here since it has to come after the potential zebra striping
169
120
  .table-hover {
170
- tbody {
171
- tr:hover > td,
172
- tr:hover > th {
173
- background-color: @tableBackgroundHover;
121
+ > tbody {
122
+ > tr:hover {
123
+ > td,
124
+ > th {
125
+ background-color: @table-bg-hover;
126
+ }
174
127
  }
175
128
  }
176
129
  }
177
130
 
178
131
 
179
- // TABLE CELL SIZING
132
+
133
+ // Table cell sizing
180
134
  // -----------------
181
135
 
182
- // Reset default grid behavior
183
- table td[class*="span"],
184
- table th[class*="span"],
185
- .row-fluid table td[class*="span"],
186
- .row-fluid table th[class*="span"] {
187
- display: table-cell;
188
- float: none; // undo default grid column styles
189
- margin-left: 0; // undo default grid column styles
136
+ // Reset default table behavior
137
+ table col[class^="col-"] {
138
+ float: none;
139
+ display: table-column;
190
140
  }
191
-
192
- // Change the column widths to account for td/th padding
193
- .table td,
194
- .table th {
195
- &.span1 { .tableColumns(1); }
196
- &.span2 { .tableColumns(2); }
197
- &.span3 { .tableColumns(3); }
198
- &.span4 { .tableColumns(4); }
199
- &.span5 { .tableColumns(5); }
200
- &.span6 { .tableColumns(6); }
201
- &.span7 { .tableColumns(7); }
202
- &.span8 { .tableColumns(8); }
203
- &.span9 { .tableColumns(9); }
204
- &.span10 { .tableColumns(10); }
205
- &.span11 { .tableColumns(11); }
206
- &.span12 { .tableColumns(12); }
141
+ table {
142
+ td,
143
+ th {
144
+ &[class^="col-"] {
145
+ float: none;
146
+ display: table-cell;
147
+ }
148
+ }
207
149
  }
208
150
 
209
151
 
210
152
 
211
- // TABLE BACKGROUNDS
153
+ // Table backgrounds
212
154
  // -----------------
213
- // Exact selectors below required to override .table-striped
214
-
215
- .table tbody tr {
216
- &.success > td {
217
- background-color: @successBackground;
218
- }
219
- &.error > td {
220
- background-color: @errorBackground;
221
- }
222
- &.warning > td {
223
- background-color: @warningBackground;
224
- }
225
- &.info > td {
226
- background-color: @infoBackground;
155
+ // Exact selectors below required to override `.table-striped` and prevent
156
+ // inheritance to nested tables.
157
+
158
+ .table > thead > tr,
159
+ .table > tbody > tr,
160
+ .table > tfoot > tr {
161
+ > td.active,
162
+ > th.active,
163
+ &.active > td,
164
+ &.active > th {
165
+ background-color: @table-bg-hover;
166
+ }
167
+ > td.success,
168
+ > th.success,
169
+ &.success > td,
170
+ &.success > th {
171
+ background-color: @state-success-bg;
172
+ border-color: @state-success-border;
173
+ }
174
+ > td.danger,
175
+ > th.danger,
176
+ &.danger > td,
177
+ &.danger > th {
178
+ background-color: @state-danger-bg;
179
+ border-color: @state-danger-border;
180
+ }
181
+ > td.warning,
182
+ > th.warning,
183
+ &.warning > td,
184
+ &.warning > th {
185
+ background-color: @state-warning-bg;
186
+ border-color: @state-warning-border;
227
187
  }
228
188
  }
229
189
 
230
- // Hover states for .table-hover
231
- .table-hover tbody tr {
190
+ // Hover states for `.table-hover`
191
+ // Note: this is not available for cells or rows within `thead` or `tfoot`.
192
+ .table-hover > tbody > tr {
193
+ > td.success:hover,
194
+ > th.success:hover,
232
195
  &.success:hover > td {
233
- background-color: darken(@successBackground, 5%);
196
+ background-color: darken(@state-success-bg, 5%);
197
+ border-color: darken(@state-success-border, 5%);
234
198
  }
235
- &.error:hover > td {
236
- background-color: darken(@errorBackground, 5%);
199
+ > td.danger:hover,
200
+ > th.danger:hover,
201
+ &.danger:hover > td {
202
+ background-color: darken(@state-danger-bg, 5%);
203
+ border-color: darken(@state-danger-border, 5%);
237
204
  }
205
+ > td.warning:hover,
206
+ > th.warning:hover,
238
207
  &.warning:hover > td {
239
- background-color: darken(@warningBackground, 5%);
240
- }
241
- &.info:hover > td {
242
- background-color: darken(@infoBackground, 5%);
208
+ background-color: darken(@state-warning-bg, 5%);
209
+ border-color: darken(@state-warning-border, 5%);
243
210
  }
244
211
  }