playbook_ui 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346 → 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 (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;