less-rails-bootstrap 2.3.3 → 3.0.0.rc1

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