playbook_ui 13.18.0.pre.alpha.useexactnodejsversionghactions2183 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_reset.scss +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +5 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +9 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +17 -11
  6. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +29 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +18 -4
  8. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +3 -4
  9. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +17 -7
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +84 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +58 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +5 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js +200 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +4 -1
  17. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +6 -1
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +49 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +68 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +1 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +3 -1
  24. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +3 -1
  25. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +4 -2
  26. data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +1 -1
  27. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +42 -0
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +83 -0
  29. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  30. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  32. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -1
  33. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +4 -0
  34. data/app/pb_kits/playbook/pb_form_group/form_group.rb +5 -1
  35. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  36. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +46 -0
  37. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  38. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  40. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  41. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  42. data/app/pb_kits/playbook/pb_table/styles/_div_support.scss +22 -0
  43. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  44. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  45. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  46. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  47. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  48. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  49. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  50. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  51. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  52. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +6 -6
  53. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  54. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  55. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  56. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  57. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  58. data/app/pb_kits/playbook/pb_table/table.html.erb +14 -2
  59. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  60. data/dist/menu.yml +1 -1
  61. data/dist/playbook-rails.js +3 -3
  62. data/lib/playbook/version.rb +2 -2
  63. metadata +13 -2
@@ -10,6 +10,7 @@ module Playbook
10
10
  values: %w[default single filter_only sort_only],
11
11
  default: "default"
12
12
  prop :background, type: Playbook::Props::Boolean, default: true
13
+ prop :max_height
13
14
  prop :min_width, default: "auto"
14
15
  prop :placement, type: Playbook::Props::Enum,
15
16
  values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
@@ -31,7 +32,7 @@ module Playbook
31
32
  end
32
33
 
33
34
  def wrapper(&block)
34
- if object.background
35
+ if background
35
36
  pb_rails("card", props: { padding: "none" }, &block)
36
37
  else
37
38
  capture(&block)
@@ -57,6 +57,10 @@
57
57
  margin-bottom: 16px;
58
58
  }
59
59
 
60
+ &[class*=rails] > [class^=pb_date_picker_kit] {
61
+ margin-bottom: 0px;
62
+ }
63
+
60
64
  & > [class^=pb_date_picker_kit]:not(:last-child) {
61
65
  .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
62
66
  border-bottom-right-radius: 0;
@@ -7,7 +7,7 @@ module Playbook
7
7
  default: false
8
8
 
9
9
  def classname
10
- generate_classname("pb_form_group_kit", full_width_class)
10
+ generate_classname("pb_form_group_kit", full_width_class) + form_group_rails
11
11
  end
12
12
 
13
13
  private
@@ -15,6 +15,10 @@ module Playbook
15
15
  def full_width_class
16
16
  full_width ? "full" : nil
17
17
  end
18
+
19
+ def form_group_rails
20
+ " rails"
21
+ end
18
22
  end
19
23
  end
20
24
  end
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
2
+ <div class="thead">
3
+ <div class="tr">
4
+ <div class="th">Column 1</div>
5
+ <div class="th">Column 2</div>
6
+ <div class="th">Column 3</div>
7
+ <div class="th">Column 4</div>
8
+ <div class="th">Column 5</div>
9
+ </div>
10
+ </div>
11
+ <div class="tbody">
12
+ <div class="tr">
13
+ <div class="td">Value 1</div>
14
+ <div class="td">Value 2</div>
15
+ <div class="td">Value 3</div>
16
+ <div class="td">Value 4</div>
17
+ <div class="td">Value 5</div>
18
+ </div>
19
+ <div class="tr">
20
+ <div class="td">Value 1</div>
21
+ <div class="td">Value 2</div>
22
+ <div class="td">Value 3</div>
23
+ <div class="td">Value 4</div>
24
+ <div class="td">Value 5</div>
25
+ </div>
26
+ <div class="tr">
27
+ <div class="td">Value 1</div>
28
+ <div class="td">Value 2</div>
29
+ <div class="td">Value 3</div>
30
+ <div class="td">Value 4</div>
31
+ <div class="td">Value 5</div>
32
+ </div>
33
+ </div>
34
+ <% end %>
@@ -0,0 +1,46 @@
1
+ import React from 'react'
2
+ import Table from '../_table'
3
+
4
+ const TableDiv = (props) => {
5
+ return (
6
+ <Table
7
+ size="sm"
8
+ {...props}
9
+ >
10
+ <div className="thead">
11
+ <div className="tr">
12
+ <div className="th">{'Column 1'}</div>
13
+ <div className="th">{'Column 2'}</div>
14
+ <div className="th">{'Column 3'}</div>
15
+ <div className="th">{'Column 4'}</div>
16
+ <div className="th">{'Column 5'}</div>
17
+ </div>
18
+ </div>
19
+ <div className="tbody">
20
+ <div className="tr">
21
+ <div className="td">{'Value 1'}</div>
22
+ <div className="td">{'Value 2'}</div>
23
+ <div className="td">{'Value 3'}</div>
24
+ <div className="td">{'Value 4'}</div>
25
+ <div className="td">{'Value 5'}</div>
26
+ </div>
27
+ <div className="tr">
28
+ <div className="td">{'Value 1'}</div>
29
+ <div className="td">{'Value 2'}</div>
30
+ <div className="td">{'Value 3'}</div>
31
+ <div className="td">{'Value 4'}</div>
32
+ <div className="td">{'Value 5'}</div>
33
+ </div>
34
+ <div className="tr">
35
+ <div className="td">{'Value 1'}</div>
36
+ <div className="td">{'Value 2'}</div>
37
+ <div className="td">{'Value 3'}</div>
38
+ <div className="td">{'Value 4'}</div>
39
+ <div className="td">{'Value 5'}</div>
40
+ </div>
41
+ </div>
42
+ </Table>
43
+ )
44
+ }
45
+
46
+ export default TableDiv
@@ -1,5 +1,6 @@
1
1
  examples:
2
2
  rails:
3
+ - table_div: Div
3
4
  - table_sm: Small
4
5
  - table_md: Medium
5
6
  - table_lg: Large
@@ -26,6 +27,7 @@ examples:
26
27
  - table_striped: Striped Table
27
28
 
28
29
  react:
30
+ - table_div: Div
29
31
  - table_sm: Small
30
32
  - table_md: Medium
31
33
  - table_lg: Large
@@ -21,3 +21,4 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
21
21
  export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
22
22
  export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
23
23
  export { default as TableStriped } from './_table_striped.jsx'
24
+ export { default as TableDiv } from './_table_div.jsx'
@@ -19,3 +19,4 @@
19
19
  @import "vertical_border";
20
20
  @import "table_header";
21
21
  @import "striped";
22
+ @import "div_support";
@@ -2,9 +2,9 @@
2
2
  &.table-sm,
3
3
  &.table-md,
4
4
  &.table-lg {
5
- tbody {
6
- tr {
7
- td {
5
+ tbody, .tbody {
6
+ tr, .tr {
7
+ td, .td {
8
8
  font-size: $default-font-size;
9
9
  }
10
10
  }
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .thead {
14
+ tr, .tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .tbody {
26
+ tr, .tr {
27
+ td, .td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .tbody {
78
+ tr, .tr {
79
+ td, .td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .tbody {
102
+ tr, .tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .tbody {
112
+ tr, .tr {
113
+ td, .td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -0,0 +1,22 @@
1
+ [class^=pb_table] {
2
+ .div-table {
3
+ display: table;
4
+ width: 100%;
5
+ }
6
+
7
+ .thead {
8
+ display: table-header-group;
9
+ }
10
+
11
+ .tbody {
12
+ display: table-row-group;
13
+ }
14
+
15
+ .tr {
16
+ display: table-row;
17
+ }
18
+
19
+ .th, .td {
20
+ display: table-cell;
21
+ }
22
+ }
@@ -4,9 +4,9 @@
4
4
  &.table-sm,
5
5
  &.table-md,
6
6
  &.table-lg {
7
- thead {
8
- tr {
9
- th {
7
+ thead, .thead {
8
+ tr, .tr {
9
+ th, .th {
10
10
  @include caption;
11
11
  border-bottom: 1px solid $border_light;
12
12
  }
@@ -9,17 +9,17 @@ $border_hover_color_dark: lighten($border_dark, 5%);
9
9
  &.table-lg {
10
10
  &:not(.no-hover) {
11
11
  border-collapse: collapse;
12
- tbody {
13
- tr {
12
+ tbody, .tbody {
13
+ tr, .tr {
14
14
  box-shadow: 0 0 0 $white;
15
15
  transition: box-shadow $transition-speed ease;
16
- td {
16
+ td, .td {
17
17
  border-top-color: transparent;
18
18
  border-top-width: 0;
19
19
  transition: all $transition-speed ease;
20
20
  }
21
21
  @media (hover:hover) {
22
- td {
22
+ td, .td {
23
23
  position: relative;
24
24
  &:after {
25
25
  transition: background-color $transition-speed ease, height $transition-speed ease;
@@ -41,7 +41,7 @@ $border_hover_color_dark: lighten($border_dark, 5%);
41
41
  }
42
42
  &:hover {
43
43
  box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
44
- td {
44
+ td, .td {
45
45
  border-color: darken($border_light, 10%);
46
46
  border-top-width: 0;
47
47
  border-top-color: transparent;
@@ -57,9 +57,9 @@ $border_hover_color_dark: lighten($border_dark, 5%);
57
57
  }
58
58
  &.table-card {
59
59
  border-collapse: separate;
60
- tbody {
61
- tr {
62
- td {
60
+ tbody, .tbody {
61
+ tr, .tr {
62
+ td, .td {
63
63
  &:first-child {
64
64
  border-left-width: 1px;
65
65
  }
@@ -72,12 +72,12 @@ $border_hover_color_dark: lighten($border_dark, 5%);
72
72
  }
73
73
 
74
74
  &.dark {
75
- tbody {
76
- tr {
75
+ tbody, .tbody {
76
+ tr, .tr {
77
77
  @media (hover:hover) {
78
78
  &:hover {
79
79
  box-shadow: 0 2px 10px 0 $shadow_dark;
80
- td {
80
+ td, .td {
81
81
  border-top-width: 0;
82
82
  border-top-color: transparent;
83
83
  border-color: $border_hover_color_dark !important;
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .thead {
14
+ tr, .tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .tbody {
26
+ tr, .tr {
27
+ td, .td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .tbody {
78
+ tr, .tr {
79
+ td, .td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .tbody {
102
+ tr, .tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .tbody {
112
+ tr, .tr {
113
+ td, .td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .thead {
14
+ tr, .tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .tbody {
26
+ tr, .tr {
27
+ td, .td {
28
28
  display: block;
29
29
  visibility: visible;
30
30
  border-left-width: 1px !important;
@@ -63,7 +63,7 @@
63
63
  }
64
64
 
65
65
  &:first-child {
66
- td {
66
+ td, .td {
67
67
  &:first-child {
68
68
  margin-top: $space-xs !important;
69
69
  }
@@ -74,9 +74,9 @@
74
74
  &.table-card {
75
75
  background: none !important;
76
76
 
77
- tbody {
78
- tr {
79
- td {
77
+ tbody, .tbody {
78
+ tr, .tr {
79
+ td, .td {
80
80
  background: $white !important;
81
81
  border-left-width: 1px !important;
82
82
  border-right-width: 1px !important;
@@ -98,8 +98,8 @@
98
98
  }
99
99
  @media (hover:hover) {
100
100
  &:hover {
101
- tbody {
102
- tr {
101
+ tbody, .tbody {
102
+ tr, .tr {
103
103
  box-shadow: 0 0 0 $white !important;
104
104
  }
105
105
  }
@@ -108,9 +108,9 @@
108
108
  // reset the first and last to normalize
109
109
  @each $name, $value in $cell-pad-list {
110
110
  &.#{$name} {
111
- tbody {
112
- tr {
113
- td {
111
+ tbody, .tbody {
112
+ tr, .tr {
113
+ td, .td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
@@ -6,9 +6,9 @@
6
6
  background-color: unset;
7
7
  background: unset;
8
8
 
9
- thead {
10
- tr {
11
- th {
9
+ thead, .thead {
10
+ tr, .tr {
11
+ th, .th {
12
12
  text-align: left;
13
13
  }
14
14
  }
@@ -8,11 +8,11 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
8
8
  }
9
9
 
10
10
  [class^=pb_table] {
11
- tbody {
11
+ tbody, .tbody {
12
12
  [class^=pb_table_row_kit] {
13
13
  @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
14
14
  &[class*=_side_highlight_#{$color_name}] {
15
- td {
15
+ td, .td {
16
16
  &:first-child {
17
17
  @include pb_table_row_kit_side_highlight($color_value);
18
18
  }
@@ -4,9 +4,9 @@
4
4
  max-width: 100vw;
5
5
  table-layout: fixed;
6
6
 
7
- tbody {
8
- tr {
9
- td {
7
+ tbody, .tbody {
8
+ tr, .tr {
9
+ td, .td {
10
10
  white-space: nowrap;
11
11
  text-overflow: ellipsis;
12
12
 
@@ -20,7 +20,7 @@
20
20
  display: block !important;
21
21
  }
22
22
 
23
- br {
23
+ br, .br {
24
24
  content:' ' !important;
25
25
 
26
26
  &::after {
@@ -2,7 +2,7 @@
2
2
 
3
3
  [class^="pb_table"] {
4
4
  &.sticky-header {
5
- thead {
5
+ thead, .thead {
6
6
  background: $white;
7
7
  position: sticky;
8
8
  top: 0;
@@ -12,7 +12,7 @@
12
12
 
13
13
  &.dark {
14
14
  &.sticky-header {
15
- thead {
15
+ thead, .thead {
16
16
  background: $bg_dark;
17
17
  position: sticky;
18
18
  top: 0;
@@ -1,7 +1,7 @@
1
1
  [class^=pb_table] {
2
2
  &.striped {
3
- tbody {
4
- tr:nth-child(odd) {
3
+ tbody, .tbody {
4
+ tr:nth-child(odd), .tr:nth-child(odd) {
5
5
  background-color: $bg_light;
6
6
  }
7
7
  }
@@ -9,8 +9,8 @@
9
9
 
10
10
  &.dark {
11
11
  &.striped {
12
- tbody {
13
- tr:nth-child(odd) {
12
+ tbody, .tbody {
13
+ tr:nth-child(odd), .tr:nth-child(odd) {
14
14
  background-color: $bg_dark;
15
15
  }
16
16
  }
@@ -4,9 +4,9 @@
4
4
  @each $name, $value in $cell-pad-list {
5
5
  &.#{$name} {
6
6
  width: 100%;
7
- thead {
8
- tr {
9
- th {
7
+ thead, .thead {
8
+ tr, .tr {
9
+ th, .th {
10
10
  padding: $cell-pad-md $cell-gutter;
11
11
 
12
12
  &:first-child {
@@ -18,9 +18,9 @@
18
18
  }
19
19
  }
20
20
  }
21
- tbody {
22
- tr {
23
- td {
21
+ tbody, .tbody {
22
+ tr, .tr {
23
+ td, .td {
24
24
  border-color: $border_light;
25
25
  border-style: solid;
26
26
  border-width: 0 0 1px;
@@ -7,9 +7,9 @@
7
7
  border-spacing: 0;
8
8
  background: $white;
9
9
 
10
- thead {
11
- tr {
12
- th {
10
+ thead, .thead {
11
+ tr, .tr {
12
+ th, .th {
13
13
  border-color: $border_light;
14
14
  border-style: solid;
15
15
  border-width: 1px 0 1px 0;
@@ -26,9 +26,9 @@
26
26
  }
27
27
  }
28
28
 
29
- tbody {
30
- tr {
31
- td {
29
+ tbody, .tbody {
30
+ tr, .tr {
31
+ td, .td {
32
32
  border-color: $border_light;
33
33
  border-style: solid;
34
34
  border-width: 0 0 1px 0;
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  &:last-child {
45
- td {
45
+ td, .td {
46
46
  border-width: 0 0 1px 0;
47
47
 
48
48
  &:first-child {