playbook_ui 13.19.0 → 13.20.0.pre.alpha.PLAY12572402

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +6 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +2 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +45 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +7 -4
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  13. data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md +26 -6
  14. data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md +27 -8
  15. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  16. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  17. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  18. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
  19. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  20. data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
  21. data/app/pb_kits/playbook/pb_message/docs/_description.md +1 -1
  22. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +4 -0
  23. data/app/pb_kits/playbook/pb_table/_table.tsx +99 -67
  24. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +34 -0
  25. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +47 -0
  26. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +24 -25
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx +47 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +7 -0
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +34 -0
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.jsx +48 -0
  31. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +3 -0
  32. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.html.erb +34 -0
  33. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_rails.md +7 -0
  34. data/app/pb_kits/playbook/pb_table/docs/example.yml +6 -0
  35. data/app/pb_kits/playbook/pb_table/docs/index.js +3 -0
  36. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  37. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  38. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  39. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  40. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  41. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  42. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  43. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  44. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  45. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  46. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  47. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +22 -8
  48. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  49. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  50. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  51. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  52. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -4
  53. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +64 -0
  54. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +66 -0
  55. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +64 -0
  56. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +66 -0
  57. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +74 -0
  58. data/app/pb_kits/playbook/pb_table/subcomponents/index.tsx +5 -0
  59. data/app/pb_kits/playbook/pb_table/table.html.erb +12 -2
  60. data/app/pb_kits/playbook/pb_table/table.rb +3 -0
  61. data/app/pb_kits/playbook/pb_table/table.test.js +142 -1
  62. data/app/pb_kits/playbook/pb_table/table_body.html.erb +17 -0
  63. data/app/pb_kits/playbook/pb_table/table_body.rb +15 -0
  64. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +17 -0
  65. data/app/pb_kits/playbook/pb_table/table_cell.rb +17 -0
  66. data/app/pb_kits/playbook/pb_table/table_head.html.erb +17 -0
  67. data/app/pb_kits/playbook/pb_table/table_head.rb +15 -0
  68. data/app/pb_kits/playbook/pb_table/table_header.html.erb +49 -39
  69. data/app/pb_kits/playbook/pb_table/table_header.rb +8 -1
  70. data/app/pb_kits/playbook/pb_table/table_row.html.erb +17 -7
  71. data/app/pb_kits/playbook/pb_table/table_row.rb +8 -1
  72. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +9 -5
  73. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +20 -0
  74. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +30 -0
  75. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +2 -1
  76. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -0
  77. data/app/pb_kits/playbook/utilities/_positioning.scss +48 -7
  78. data/app/pb_kits/playbook/utilities/globalProps.ts +23 -1
  79. data/dist/playbook-rails.js +6 -6
  80. data/lib/playbook/bottom.rb +33 -0
  81. data/lib/playbook/classnames.rb +4 -0
  82. data/lib/playbook/kit_base.rb +8 -0
  83. data/lib/playbook/left.rb +33 -0
  84. data/lib/playbook/right.rb +33 -0
  85. data/lib/playbook/top.rb +33 -0
  86. data/lib/playbook/version.rb +2 -2
  87. metadata +32 -7
  88. data/app/pb_kits/playbook/pb_table/_table_row.tsx +0 -47
data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss CHANGED
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_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, .pb_table_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, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_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, .pb_table_tbody {
102
+ tr, .pb_table_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, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
data/app/pb_kits/playbook/pb_table/styles/_headers.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  &.table-sm,
5
5
  &.table-md,
6
6
  &.table-lg {
7
- thead {
8
- tr {
9
- th {
7
+ thead, .pb_table_thead {
8
+ tr, .pb_table_tr {
9
+ th, .pb_table_th {
10
10
  @include caption;
11
11
  border-bottom: 1px solid $border_light;
12
12
  }
data/app/pb_kits/playbook/pb_table/styles/_hover.scss CHANGED
@@ -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, .pb_table_tbody {
13
+ tr, .pb_table_tr {
14
14
  box-shadow: 0 0 0 $white;
15
15
  transition: box-shadow $transition-speed ease;
16
- td {
16
+ td, .pb_table_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, .pb_table_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, .pb_table_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, .pb_table_tbody {
61
+ tr, .pb_table_tr {
62
+ td, .pb_table_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, .pb_table_tbody {
76
+ tr, .pb_table_tr {
77
77
  @media (hover:hover) {
78
78
  &:hover {
79
79
  box-shadow: 0 2px 10px 0 $shadow_dark;
80
- td {
80
+ td, .pb_table_td {
81
81
  border-top-width: 0;
82
82
  border-top-color: transparent;
83
83
  border-color: $border_hover_color_dark !important;
data/app/pb_kits/playbook/pb_table/styles/_mobile.scss CHANGED
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_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, .pb_table_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, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_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, .pb_table_tbody {
102
+ tr, .pb_table_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, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss CHANGED
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_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, .pb_table_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, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_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, .pb_table_tbody {
102
+ tr, .pb_table_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, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
data/app/pb_kits/playbook/pb_table/styles/_reset.scss CHANGED
@@ -6,9 +6,9 @@
6
6
  background-color: unset;
7
7
  background: unset;
8
8
 
9
- thead {
10
- tr {
11
- th {
9
+ thead, .pb_table_thead {
10
+ tr, .pb_table_tr {
11
+ th, .pb_table_th {
12
12
  text-align: left;
13
13
  }
14
14
  }
data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss CHANGED
@@ -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, .pb_table_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, .pb_table_td {
16
16
  &:first-child {
17
17
  @include pb_table_row_kit_side_highlight($color_value);
18
18
  }
data/app/pb_kits/playbook/pb_table/styles/_single-line.scss CHANGED
@@ -4,9 +4,9 @@
4
4
  max-width: 100vw;
5
5
  table-layout: fixed;
6
6
 
7
- tbody {
8
- tr {
9
- td {
7
+ tbody, .pb_table_tbody {
8
+ tr, .pb_table_tr {
9
+ td, .pb_table_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, .pb_table_br {
24
24
  content:' ' !important;
25
25
 
26
26
  &::after {
data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  [class^="pb_table"] {
4
4
  &.sticky-header {
5
- thead {
5
+ thead, .pb_table_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, .pb_table_thead {
16
16
  background: $bg_dark;
17
17
  position: sticky;
18
18
  top: 0;
data/app/pb_kits/playbook/pb_table/styles/_striped.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  [class^=pb_table] {
2
2
  &.striped {
3
- tbody {
4
- tr:nth-child(odd) {
3
+ tbody, .pb_table_tbody {
4
+ tr:nth-child(odd), .pb_table_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, .pb_table_tbody {
13
+ tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
14
14
  background-color: $bg_dark;
15
15
  }
16
16
  }
data/app/pb_kits/playbook/pb_table/styles/_structure.scss CHANGED
@@ -1,12 +1,19 @@
1
1
  @import "../../tokens/colors";
2
2
 
3
3
  [class^=pb_table] {
4
+ display: table;
5
+
4
6
  @each $name, $value in $cell-pad-list {
5
7
  &.#{$name} {
6
8
  width: 100%;
7
- thead {
8
- tr {
9
- th {
9
+ thead, .pb_table_thead {
10
+ display: table-header-group;
11
+
12
+ tr, .pb_table_tr {
13
+ display: table-row;
14
+
15
+ th, .pb_table_th {
16
+ display: table-cell;
10
17
  padding: $cell-pad-md $cell-gutter;
11
18
 
12
19
  &:first-child {
@@ -18,9 +25,14 @@
18
25
  }
19
26
  }
20
27
  }
21
- tbody {
22
- tr {
23
- td {
28
+ tbody, .pb_table_tbody {
29
+ display: table-row-group;
30
+
31
+ tr, .pb_table_tr {
32
+ display: table-row;
33
+
34
+ td, .pb_table_td {
35
+ display: table-cell;
24
36
  border-color: $border_light;
25
37
  border-style: solid;
26
38
  border-width: 0 0 1px;
@@ -36,7 +48,8 @@
36
48
  }
37
49
  }
38
50
  &.data_table {
39
- thead tr th {
51
+ thead tr th,
52
+ .pb_table_thead .pb_table_tr .pb_table_th {
40
53
  padding-top: $cell-pad-sm;
41
54
  padding-bottom: $cell-pad-sm;
42
55
  &:first-child {
@@ -46,7 +59,8 @@
46
59
  padding-right: $cell-pad-sm;
47
60
  }
48
61
  }
49
- tbody tr td {
62
+ tbody tr td,
63
+ .pb_table_tbody .pb_table_tr .pb_table_td {
50
64
  padding-top: $cell-pad-sm;
51
65
  padding-bottom: $cell-pad-sm;
52
66
  &:first-child {
data/app/pb_kits/playbook/pb_table/styles/_table-card.scss CHANGED
@@ -7,9 +7,9 @@
7
7
  border-spacing: 0;
8
8
  background: $white;
9
9
 
10
- thead {
11
- tr {
12
- th {
10
+ thead, .pb_table_thead {
11
+ tr, .pb_table_tr {
12
+ th, .pb_table_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, .pb_table_tbody {
30
+ tr, .pb_table_tr {
31
+ td, .pb_table_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, .pb_table_td {
46
46
  border-width: 0 0 1px 0;
47
47
 
48
48
  &:first-child {
data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss CHANGED
@@ -7,22 +7,22 @@ $table-dark-card-bg: $card_dark;
7
7
  &.table-md,
8
8
  &.table-lg {
9
9
  &.table-dark {
10
- thead {
11
- tr {
10
+ thead, .pb_table_thead {
11
+ tr, .pb_table_tr {
12
12
  border-color: $border_dark !important;
13
13
 
14
- th {
14
+ th, .pb_table_th {
15
15
  border-color: $border_dark !important;
16
16
  color: $text_dk_light;
17
17
  }
18
18
  }
19
19
  }
20
- tbody {
21
- tr {
20
+ tbody, .pb_table_tbody {
21
+ tr, .pb_table_tr {
22
22
  border-color: $border_dark;
23
23
  transition: none !important;
24
24
 
25
- td {
25
+ td, .pb_table_td {
26
26
  border-color: $border_dark !important;
27
27
  color: $white;
28
28
 
@@ -31,7 +31,7 @@ $table-dark-card-bg: $card_dark;
31
31
  }
32
32
  }
33
33
  &:first-child {
34
- td {
34
+ td, .pb_table_td {
35
35
  border-top-width: 0 !important;
36
36
  }
37
37
  }
@@ -54,9 +54,9 @@ $table-dark-card-bg: $card_dark;
54
54
  &.table-dark {
55
55
  background: none !important;
56
56
 
57
- tbody {
58
- tr {
59
- td {
57
+ tbody, .pb_table_tbody {
58
+ tr, .pb_table_tr {
59
+ td, .pb_table_td {
60
60
  background: $table-dark-card-bg !important;
61
61
  }
62
62
  }
@@ -64,15 +64,15 @@ $table-dark-card-bg: $card_dark;
64
64
  }
65
65
  }
66
66
  &.table-dark {
67
- tbody {
68
- tr {
69
- td {
67
+ tbody, .pb_table_tbody {
68
+ tr, .pb_table_tr {
69
+ td, .pb_table_td {
70
70
  &:first-child {
71
71
  border-top-color: $border_dark !important;
72
72
  }
73
73
  }
74
74
  &:first-child {
75
- td {
75
+ td, .pb_table_td {
76
76
  border-top-width: 1px !important;
77
77
  }
78
78
  }
data/app/pb_kits/playbook/pb_table/styles/_table_header.scss CHANGED
@@ -10,7 +10,7 @@ $text_align_values: (
10
10
  );
11
11
 
12
12
  [class^=pb_table] {
13
- thead {
13
+ thead, .pb_table_thead {
14
14
  [class^=pb_table_header_kit] {
15
15
  @each $align_name, $align_value in $text_align_values {
16
16
  &[class*=_align_#{$align_name}] {
@@ -32,7 +32,7 @@ $text_align_values: (
32
32
  }
33
33
 
34
34
  [class^=pb_table] {
35
- thead {
35
+ thead, .pb_table_thead {
36
36
  [class^=pb_th_active] {
37
37
  color: $primary !important;
38
38
  }
data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss CHANGED
@@ -10,21 +10,21 @@
10
10
  width: 100%;
11
11
  background: none !important;
12
12
 
13
- thead {
14
- tr {
13
+ thead, .pb_table_thead {
14
+ tr, .pb_table_tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th {
19
+ th, .pb_table_th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody {
26
- tr {
27
- td {
25
+ tbody, .pb_table_tbody {
26
+ tr, .pb_table_tr {
27
+ td, .pb_table_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, .pb_table_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, .pb_table_tbody {
78
+ tr, .pb_table_tr {
79
+ td, .pb_table_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, .pb_table_tbody {
102
+ tr, .pb_table_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, .pb_table_tbody {
112
+ tr, .pb_table_tr {
113
+ td, .pb_table_td {
114
114
  &:first-child,
115
115
  &:last-child {
116
116
  padding: $value $cell-gutter !important;
data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss CHANGED
@@ -1,13 +1,12 @@
1
1
  [class^=pb_table] {
2
2
  &.vertical-border {
3
- td,
4
- th {
3
+ td, th, .pb_table_td, .pb_table_th {
5
4
  border-right: 1px solid $border_light !important;
6
5
  }
7
6
 
8
7
  @media screen and (min-width: $screen-xs-min) {
9
- tr:hover {
10
- td:last-child {
8
+ tr:hover, .pb_table_tr:hover {
9
+ td:last-child, .pb_table_td:last-child {
11
10
  border-right-color: darken($border_light, 10%) !important;
12
11
  }
13
12
  }