playbook_ui 13.19.0.pre.alpha.PBNTR207tabledivsupport2245 → 13.19.0.pre.alpha.play1141iconkitusinglibrary2264
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +4 -8
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
- data/app/pb_kits/playbook/pb_icon/icon.rb +27 -10
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -1
- data/app/pb_kits/playbook/pb_table/styles/_content.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +11 -11
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_reset.scss +3 -3
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_sticky_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +6 -6
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +7 -7
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +14 -14
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +15 -15
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +4 -3
- data/app/pb_kits/playbook/pb_table/table.html.erb +2 -14
- data/app/pb_kits/playbook/pb_table/table.rb +0 -3
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +2 -5
- data/app/pb_kits/playbook/pb_table/docs/_table_div.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_div.jsx +0 -46
- data/app/pb_kits/playbook/pb_table/styles/_div_support.scss +0 -22
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
background: none !important;
|
|
12
12
|
|
|
13
|
-
thead
|
|
14
|
-
tr
|
|
13
|
+
thead {
|
|
14
|
+
tr {
|
|
15
15
|
left: $offscreen;
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: $offscreen;
|
|
18
18
|
|
|
19
|
-
th
|
|
19
|
+
th {
|
|
20
20
|
display: block;
|
|
21
21
|
visibility: visible;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
tbody
|
|
26
|
-
tr
|
|
27
|
-
td
|
|
25
|
+
tbody {
|
|
26
|
+
tr {
|
|
27
|
+
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 {
|
|
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 {
|
|
78
|
+
tr {
|
|
79
|
+
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 {
|
|
102
|
+
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 {
|
|
112
|
+
tr {
|
|
113
|
+
td {
|
|
114
114
|
&:first-child,
|
|
115
115
|
&:last-child {
|
|
116
116
|
padding: $value $cell-gutter !important;
|
|
@@ -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 {
|
|
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 {
|
|
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 {
|
|
8
|
+
tr {
|
|
9
|
+
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
4
|
+
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 {
|
|
13
|
+
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 {
|
|
8
|
+
tr {
|
|
9
|
+
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 {
|
|
22
|
+
tr {
|
|
23
|
+
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 {
|
|
11
|
+
tr {
|
|
12
|
+
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 {
|
|
30
|
+
tr {
|
|
31
|
+
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 {
|
|
46
46
|
border-width: 0 0 1px 0;
|
|
47
47
|
|
|
48
48
|
&:first-child {
|
|
@@ -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 {
|
|
11
|
+
tr {
|
|
12
12
|
border-color: $border_dark !important;
|
|
13
13
|
|
|
14
|
-
th
|
|
14
|
+
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 {
|
|
21
|
+
tr {
|
|
22
22
|
border-color: $border_dark;
|
|
23
23
|
transition: none !important;
|
|
24
24
|
|
|
25
|
-
td
|
|
25
|
+
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 {
|
|
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 {
|
|
58
|
+
tr {
|
|
59
|
+
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 {
|
|
68
|
+
tr {
|
|
69
|
+
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 {
|
|
76
76
|
border-top-width: 1px !important;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
@@ -10,7 +10,7 @@ $text_align_values: (
|
|
|
10
10
|
);
|
|
11
11
|
|
|
12
12
|
[class^=pb_table] {
|
|
13
|
-
thead
|
|
13
|
+
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 {
|
|
36
36
|
[class^=pb_th_active] {
|
|
37
37
|
color: $primary !important;
|
|
38
38
|
}
|
|
@@ -10,21 +10,21 @@
|
|
|
10
10
|
width: 100%;
|
|
11
11
|
background: none !important;
|
|
12
12
|
|
|
13
|
-
thead
|
|
14
|
-
tr
|
|
13
|
+
thead {
|
|
14
|
+
tr {
|
|
15
15
|
left: $offscreen;
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: $offscreen;
|
|
18
18
|
|
|
19
|
-
th
|
|
19
|
+
th {
|
|
20
20
|
display: block;
|
|
21
21
|
visibility: visible;
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
|
-
tbody
|
|
26
|
-
tr
|
|
27
|
-
td
|
|
25
|
+
tbody {
|
|
26
|
+
tr {
|
|
27
|
+
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 {
|
|
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 {
|
|
78
|
+
tr {
|
|
79
|
+
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 {
|
|
102
|
+
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 {
|
|
112
|
+
tr {
|
|
113
|
+
td {
|
|
114
114
|
&:first-child,
|
|
115
115
|
&:last-child {
|
|
116
116
|
padding: $value $cell-gutter !important;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
[class^=pb_table] {
|
|
2
2
|
&.vertical-border {
|
|
3
|
-
td,
|
|
3
|
+
td,
|
|
4
|
+
th {
|
|
4
5
|
border-right: 1px solid $border_light !important;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
8
|
@media screen and (min-width: $screen-xs-min) {
|
|
8
|
-
tr:hover
|
|
9
|
-
td:last-child
|
|
9
|
+
tr:hover {
|
|
10
|
+
td:last-child {
|
|
10
11
|
border-right-color: darken($border_light, 10%) !important;
|
|
11
12
|
}
|
|
12
13
|
}
|
|
@@ -1,21 +1,9 @@
|
|
|
1
1
|
<%= content_tag(:div) do %>
|
|
2
|
-
|
|
3
|
-
<%= content_tag(:table,
|
|
2
|
+
<%= content_tag(:table,
|
|
4
3
|
aria: object.aria,
|
|
5
4
|
class: object.classname,
|
|
6
5
|
data: object.data,
|
|
7
6
|
id: object.id) do %>
|
|
8
|
-
|
|
9
|
-
<% end %>
|
|
10
|
-
<% else %>
|
|
11
|
-
<%= content_tag(:div,
|
|
12
|
-
aria: object.aria,
|
|
13
|
-
class: object.classname,
|
|
14
|
-
data: object.data,
|
|
15
|
-
id: object.id) do %>
|
|
16
|
-
<%= content_tag(:div, class: "div-table") do %>
|
|
17
|
-
<%= content.presence %>
|
|
18
|
-
<% end %>
|
|
19
|
-
<% end %>
|
|
7
|
+
<%= content.presence %>
|
|
20
8
|
<% end %>
|
|
21
9
|
<% end %>
|