playbook_ui 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346 → 13.19.0.pre.alpha.PBNTR207tabledivsupport2245

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 (64) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +1 -6
  3. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -2
  4. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -30
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +4 -7
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
  12. data/app/pb_kits/playbook/pb_icon/_icon.tsx +16 -28
  13. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +11 -5
  14. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +18 -44
  15. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +8 -4
  16. data/app/pb_kits/playbook/pb_icon/icon.html.erb +4 -6
  17. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -27
  18. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +0 -4
  19. data/app/pb_kits/playbook/pb_table/_table.tsx +67 -86
  20. data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +26 -26
  21. data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +26 -27
  22. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -5
  23. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  24. data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
  25. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
  26. data/app/pb_kits/playbook/pb_table/styles/_div_support.scss +22 -0
  27. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
  28. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
  29. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
  30. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
  31. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
  32. data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
  33. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
  34. data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
  35. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
  36. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +8 -22
  37. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
  38. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
  39. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
  40. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
  41. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +3 -3
  42. data/app/pb_kits/playbook/pb_table/table.html.erb +3 -1
  43. data/app/pb_kits/playbook/pb_table/table_header.html.erb +39 -49
  44. data/app/pb_kits/playbook/pb_table/table_header.rb +1 -8
  45. data/app/pb_kits/playbook/pb_table/table_row.html.erb +7 -17
  46. data/app/pb_kits/playbook/pb_table/table_row.rb +1 -8
  47. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -9
  48. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx +0 -20
  49. data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md +1 -2
  50. data/app/pb_kits/playbook/pb_user/docs/example.yml +0 -1
  51. data/dist/playbook-rails.js +2 -2
  52. data/lib/playbook/version.rb +1 -1
  53. metadata +3 -13
  54. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.html.erb +0 -34
  55. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md +0 -7
  56. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +0 -34
  57. data/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.md +0 -3
  58. data/app/pb_kits/playbook/pb_table/table_body.html.erb +0 -17
  59. data/app/pb_kits/playbook/pb_table/table_body.rb +0 -15
  60. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +0 -17
  61. data/app/pb_kits/playbook/pb_table/table_cell.rb +0 -17
  62. data/app/pb_kits/playbook/pb_table/table_head.html.erb +0 -17
  63. data/app/pb_kits/playbook/pb_table/table_head.rb +0 -15
  64. data/app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md +0 -30
data/app/pb_kits/playbook/pb_table/_table.tsx CHANGED
@@ -5,60 +5,67 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
6
 
7
7
  type TableProps = {
8
- aria?: { [key: string]: string },
9
- children: React.ReactNode[] | React.ReactNode,
10
- className: string,
11
- collapse?: "sm" | "md" | "lg",
12
- container?: boolean,
13
- dark?: boolean,
14
- data?: { [key: string]: string },
15
- dataTable: boolean,
16
- disableHover?: boolean,
17
- htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
18
- id?: string,
19
- responsive?: "collapse" | "scroll" | "none",
20
- singleLine?: boolean,
21
- size?: "sm" | "md" | "lg",
22
- sticky?: boolean,
23
- striped?: boolean,
24
- tag?: "table" | "div",
25
- verticalBorder?: boolean,
8
+ aria?: { [key: string]: string },
9
+ children: React.ReactNode[] | React.ReactNode,
10
+ className: string,
11
+ collapse?: "sm" | "md" | "lg",
12
+ container?: boolean,
13
+ dark?: boolean,
14
+ data?: { [key: string]: string },
15
+ dataTable: boolean,
16
+ disableHover?: boolean,
17
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
+ id?: string,
19
+ responsive?: "collapse" | "scroll" | "none",
20
+ singleLine?: boolean,
21
+ size?: "sm" | "md" | "lg",
22
+ sticky?: boolean,
23
+ striped?: boolean,
24
+ verticalBorder?: boolean,
26
25
  } & GlobalProps
27
26
 
28
27
  const Table = (props: TableProps) => {
29
- const {
30
- aria = {},
31
- children,
32
- className,
33
- collapse = 'sm',
34
- container = true,
35
- dark,
36
- data = {},
37
- dataTable = false,
38
- disableHover = false,
39
- htmlOptions = {},
40
- id,
41
- responsive = 'collapse',
42
- singleLine = false,
43
- size = 'sm',
44
- sticky = false,
45
- striped = false,
46
- tag = 'table',
47
- verticalBorder = false,
48
- } = props
28
+ const {
29
+ aria = {},
30
+ children,
31
+ className,
32
+ collapse = 'sm',
33
+ container = true,
34
+ dark,
35
+ data = {},
36
+ dataTable = false,
37
+ disableHover = false,
38
+ htmlOptions = {},
39
+ id,
40
+ responsive = 'collapse',
41
+ singleLine = false,
42
+ size = 'sm',
43
+ sticky = false,
44
+ striped = false,
45
+ verticalBorder = false,
46
+ } = props
49
47
 
50
- const ariaProps = buildAriaProps(aria)
51
- const dataProps = buildDataProps(data)
52
- const htmlProps = buildHtmlProps(htmlOptions)
53
- const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
54
- const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
55
- const isTableTag = tag === 'table'
48
+ const ariaProps = buildAriaProps(aria)
49
+ const dataProps = buildDataProps(data)
50
+ const htmlProps = buildHtmlProps(htmlOptions)
51
+ const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
52
+ const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
56
53
 
57
- const classNames = classnames(
58
- 'pb_table',
59
- `table-${size}`,
60
- `table-responsive-${responsive}`,
61
- {
54
+ useEffect(() => {
55
+ const instance = new PbTable()
56
+ instance.connect()
57
+ }, [])
58
+
59
+ return (
60
+ <table
61
+ {...ariaProps}
62
+ {...dataProps}
63
+ {...htmlProps}
64
+ className={classnames(
65
+ 'pb_table',
66
+ `table-${size}`,
67
+ `table-responsive-${responsive}`,
68
+ {
62
69
  'table-card': container,
63
70
  'table-dark': dark,
64
71
  'data_table': dataTable,
@@ -66,43 +73,17 @@ const Table = (props: TableProps) => {
66
73
  'no-hover': disableHover,
67
74
  'sticky-header': sticky,
68
75
  'striped': striped,
69
- },
70
- globalProps(props),
71
- tableCollapseCss,
72
- verticalBorderCss,
73
- className
74
- )
75
-
76
- useEffect(() => {
77
- const instance = new PbTable()
78
- instance.connect()
79
- }, [])
80
-
81
- return (
82
- <>
83
- {isTableTag ? (
84
- <table
85
- {...ariaProps}
86
- {...dataProps}
87
- {...htmlProps}
88
- className={classNames}
89
- id={id}
90
- >
91
- {children}
92
- </table>
93
- ) : (
94
- <div
95
- {...ariaProps}
96
- {...dataProps}
97
- {...htmlProps}
98
- className={classNames}
99
- id={id}
100
- >
101
- {children}
102
- </div>
103
- )}
104
- </>
105
- )
76
+ },
77
+ globalProps(props),
78
+ tableCollapseCss,
79
+ verticalBorderCss,
80
+ className
81
+ )}
82
+ id={id}
83
+ >
84
+ {children}
85
+ </table>
86
+ )
106
87
  }
107
88
 
108
89
  export default Table
data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb CHANGED
@@ -1,34 +1,34 @@
1
1
  <%= pb_rails("table", props: { size: "sm", tag: "div" }) do %>
2
- <div class="pb_table_thead">
3
- <div class="pb_table_tr">
4
- <div class="pb_table_th">Column 1</div>
5
- <div class="pb_table_th">Column 2</div>
6
- <div class="pb_table_th">Column 3</div>
7
- <div class="pb_table_th">Column 4</div>
8
- <div class="pb_table_th">Column 5</div>
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
9
  </div>
10
10
  </div>
11
- <div class="pb_table_tbody">
12
- <div class="pb_table_tr">
13
- <div class="pb_table_td">Value 1</div>
14
- <div class="pb_table_td">Value 2</div>
15
- <div class="pb_table_td">Value 3</div>
16
- <div class="pb_table_td">Value 4</div>
17
- <div class="pb_table_td">Value 5</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
18
  </div>
19
- <div class="pb_table_tr">
20
- <div class="pb_table_td">Value 1</div>
21
- <div class="pb_table_td">Value 2</div>
22
- <div class="pb_table_td">Value 3</div>
23
- <div class="pb_table_td">Value 4</div>
24
- <div class="pb_table_td">Value 5</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
25
  </div>
26
- <div class="pb_table_tr">
27
- <div class="pb_table_td">Value 1</div>
28
- <div class="pb_table_td">Value 2</div>
29
- <div class="pb_table_td">Value 3</div>
30
- <div class="pb_table_td">Value 4</div>
31
- <div class="pb_table_td">Value 5</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
32
  </div>
33
33
  </div>
34
34
  <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx CHANGED
@@ -5,39 +5,38 @@ const TableDiv = (props) => {
5
5
  return (
6
6
  <Table
7
7
  size="sm"
8
- tag="div"
9
8
  {...props}
10
9
  >
11
- <div className="pb_table_thead">
12
- <div className="pb_table_tr">
13
- <div className="pb_table_th">{'Column 1'}</div>
14
- <div className="pb_table_th">{'Column 2'}</div>
15
- <div className="pb_table_th">{'Column 3'}</div>
16
- <div className="pb_table_th">{'Column 4'}</div>
17
- <div className="pb_table_th">{'Column 5'}</div>
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>
18
17
  </div>
19
18
  </div>
20
- <div className="pb_table_tbody">
21
- <div className="pb_table_tr">
22
- <div className="pb_table_td">{'Value 1'}</div>
23
- <div className="pb_table_td">{'Value 2'}</div>
24
- <div className="pb_table_td">{'Value 3'}</div>
25
- <div className="pb_table_td">{'Value 4'}</div>
26
- <div className="pb_table_td">{'Value 5'}</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>
27
26
  </div>
28
- <div className="pb_table_tr">
29
- <div className="pb_table_td">{'Value 1'}</div>
30
- <div className="pb_table_td">{'Value 2'}</div>
31
- <div className="pb_table_td">{'Value 3'}</div>
32
- <div className="pb_table_td">{'Value 4'}</div>
33
- <div className="pb_table_td">{'Value 5'}</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>
34
33
  </div>
35
- <div className="pb_table_tr">
36
- <div className="pb_table_td">{'Value 1'}</div>
37
- <div className="pb_table_td">{'Value 2'}</div>
38
- <div className="pb_table_td">{'Value 3'}</div>
39
- <div className="pb_table_td">{'Value 4'}</div>
40
- <div className="pb_table_td">{'Value 5'}</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>
41
40
  </div>
42
41
  </div>
43
42
  </Table>
data/app/pb_kits/playbook/pb_table/docs/example.yml CHANGED
@@ -1,6 +1,6 @@
1
1
  examples:
2
2
  rails:
3
- # - table_div: Div
3
+ - table_div: Div
4
4
  - table_sm: Small
5
5
  - table_md: Medium
6
6
  - table_lg: Large
@@ -25,12 +25,9 @@ examples:
25
25
  - table_with_background_kit: Table With Background Kit
26
26
  - table_vertical_border: Vertical Borders
27
27
  - table_striped: Striped Table
28
- - table_with_subcomponents: Table with Sub Components (Table Elements)
29
- - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
30
-
31
28
 
32
29
  react:
33
- # - table_div: Div
30
+ - table_div: Div
34
31
  - table_sm: Small
35
32
  - table_md: Medium
36
33
  - table_lg: Large
data/app/pb_kits/playbook/pb_table/styles/_all.scss CHANGED
@@ -19,3 +19,4 @@
19
19
  @import "vertical_border";
20
20
  @import "table_header";
21
21
  @import "striped";
22
+ @import "div_support";
data/app/pb_kits/playbook/pb_table/styles/_content.scss CHANGED
@@ -2,9 +2,9 @@
2
2
  &.table-sm,
3
3
  &.table-md,
4
4
  &.table-lg {
5
- tbody, .pb_table_tbody {
6
- tr, .pb_table_tr {
7
- td, .pb_table_td {
5
+ tbody, .tbody {
6
+ tr, .tr {
7
+ td, .td {
8
8
  font-size: $default-font-size;
9
9
  }
10
10
  }
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, .pb_table_thead {
14
- tr, .pb_table_tr {
13
+ thead, .thead {
14
+ tr, .tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th, .pb_table_th {
19
+ th, .th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody, .pb_table_tbody {
26
- tr, .pb_table_tr {
27
- td, .pb_table_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, .pb_table_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, .pb_table_tbody {
78
- tr, .pb_table_tr {
79
- td, .pb_table_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, .pb_table_tbody {
102
- tr, .pb_table_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, .pb_table_tbody {
112
- tr, .pb_table_tr {
113
- td, .pb_table_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;
data/app/pb_kits/playbook/pb_table/styles/_div_support.scss ADDED
@@ -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
+ }
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, .pb_table_thead {
8
- tr, .pb_table_tr {
9
- th, .pb_table_th {
7
+ thead, .thead {
8
+ tr, .tr {
9
+ th, .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, .pb_table_tbody {
13
- tr, .pb_table_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, .pb_table_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, .pb_table_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, .pb_table_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, .pb_table_tbody {
61
- tr, .pb_table_tr {
62
- td, .pb_table_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, .pb_table_tbody {
76
- tr, .pb_table_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, .pb_table_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;
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, .pb_table_thead {
14
- tr, .pb_table_tr {
13
+ thead, .thead {
14
+ tr, .tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th, .pb_table_th {
19
+ th, .th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody, .pb_table_tbody {
26
- tr, .pb_table_tr {
27
- td, .pb_table_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, .pb_table_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, .pb_table_tbody {
78
- tr, .pb_table_tr {
79
- td, .pb_table_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, .pb_table_tbody {
102
- tr, .pb_table_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, .pb_table_tbody {
112
- tr, .pb_table_tr {
113
- td, .pb_table_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;
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, .pb_table_thead {
14
- tr, .pb_table_tr {
13
+ thead, .thead {
14
+ tr, .tr {
15
15
  left: $offscreen;
16
16
  position: absolute;
17
17
  top: $offscreen;
18
18
 
19
- th, .pb_table_th {
19
+ th, .th {
20
20
  display: block;
21
21
  visibility: visible;
22
22
  }
23
23
  }
24
24
  }
25
- tbody, .pb_table_tbody {
26
- tr, .pb_table_tr {
27
- td, .pb_table_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, .pb_table_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, .pb_table_tbody {
78
- tr, .pb_table_tr {
79
- td, .pb_table_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, .pb_table_tbody {
102
- tr, .pb_table_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, .pb_table_tbody {
112
- tr, .pb_table_tr {
113
- td, .pb_table_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;