playbook_ui 14.11.1.pre.alpha.PBNTR769sticky5359 → 14.11.1.pre.alpha.PBNTR798datepickerturbo5537
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/_advanced_table.scss +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +24 -16
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames.html.erb +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_turbo_frames_rails.md +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +3 -9
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +38 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +3 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -12
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +9 -14
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +6 -11
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +8 -14
- data/app/pb_kits/playbook/pb_list/item.html.erb +30 -8
- data/app/pb_kits/playbook/pb_list/item.rb +7 -0
- data/app/pb_kits/playbook/pb_list/list.html.erb +31 -11
- data/app/pb_kits/playbook/pb_list/list.rb +4 -0
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +6 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +30 -12
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +24 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +20 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +12 -8
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +8 -3
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +17 -3
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +3 -0
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +11 -4
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +3 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +74 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +74 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +3 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/index.ts +93 -34
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +6 -5
- data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_table/table.rb +17 -2
- data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts +22 -0
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +30 -30
- data/dist/chunks/{_typeahead-BNULwihE.js → _typeahead-TN5aDUj9.js} +2 -2
- data/dist/chunks/_weekday_stacked-BcnpLG66.js +45 -0
- data/dist/chunks/{lib-B7sgJtGS.js → lib-OFT985dg.js} +2 -2
- data/dist/chunks/{pb_form_validation-C5Cc0-1v.js → pb_form_validation-CrsXd1-Y.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +33 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_responsive.jsx +0 -52
- data/dist/chunks/_weekday_stacked-BKWemDAe.js +0 -45
|
@@ -1,73 +1,67 @@
|
|
|
1
1
|
import PbEnhancedElement from '../pb_enhanced_element'
|
|
2
2
|
|
|
3
|
+
const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
|
|
4
|
+
|
|
3
5
|
export default class PbTable extends PbEnhancedElement {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
+
stickyLeftColumns: string[] = [];
|
|
7
|
+
stickyRightColumns: string[] = [];
|
|
8
|
+
stickyRightColumnsReversed: string[] = [];
|
|
6
9
|
|
|
7
10
|
static get selector(): string {
|
|
8
|
-
return
|
|
11
|
+
return TABLE_WRAPPER_SELECTOR;
|
|
9
12
|
}
|
|
10
13
|
|
|
11
|
-
connect()
|
|
12
|
-
|
|
13
|
-
// Each Table
|
|
14
|
-
[].forEach.call(tables, (table: HTMLTableElement) => {
|
|
15
|
-
// Header Titles
|
|
14
|
+
connect() {
|
|
15
|
+
if (this.element.classList.contains('table-responsive-collapse')) {
|
|
16
16
|
const headers: string[] = [];
|
|
17
|
-
|
|
17
|
+
|
|
18
|
+
[].forEach.call(this.element.querySelectorAll('th'), (header: HTMLTableCellElement) => {
|
|
18
19
|
const colSpan = header.colSpan
|
|
19
20
|
for (let i = 0; i < colSpan; i++) {
|
|
20
21
|
headers.push(header.textContent.replace(/\r?\n|\r/, ''));
|
|
21
22
|
}
|
|
22
23
|
});
|
|
23
|
-
|
|
24
|
-
[].forEach.call(
|
|
25
|
-
// for each cell
|
|
24
|
+
|
|
25
|
+
[].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
|
|
26
26
|
[].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
|
|
27
|
-
// apply the attribute
|
|
28
27
|
cell.setAttribute('data-title', headers[headerIndex])
|
|
29
28
|
})
|
|
30
29
|
})
|
|
31
|
-
}
|
|
30
|
+
}
|
|
32
31
|
|
|
33
|
-
// New sticky columns logic
|
|
34
32
|
this.initStickyLeftColumns();
|
|
33
|
+
this.initStickyRightColumns();
|
|
35
34
|
}
|
|
36
35
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const tables = document.querySelectorAll('.sticky-left-column');
|
|
36
|
+
initStickyLeftColumns() {
|
|
37
|
+
const table = this.element.querySelector('.sticky-left-column');
|
|
40
38
|
|
|
41
|
-
|
|
42
|
-
// Extract sticky left column IDs by looking at the component's class
|
|
39
|
+
if (table) {
|
|
43
40
|
const classList = Array.from(table.classList);
|
|
41
|
+
const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-left-columns-ids-'));
|
|
44
42
|
|
|
45
|
-
// Look for classes in the format sticky-left-column-{ids}
|
|
46
|
-
const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
|
|
47
43
|
if (stickyColumnClass) {
|
|
48
|
-
// Extract the IDs from the class name
|
|
49
44
|
this.stickyLeftColumns = stickyColumnClass
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
.replace('sticky-left-columns-ids-', '')
|
|
46
|
+
.split('-');
|
|
52
47
|
|
|
53
48
|
if (this.stickyLeftColumns.length > 0) {
|
|
54
49
|
setTimeout(() => {
|
|
55
|
-
this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
|
|
56
50
|
this.handleStickyLeftColumns();
|
|
57
|
-
window.addEventListener('resize', this.
|
|
51
|
+
window.addEventListener('resize', () => this.handleStickyLeftColumns());
|
|
58
52
|
}, 10);
|
|
59
53
|
}
|
|
60
54
|
}
|
|
61
|
-
}
|
|
55
|
+
}
|
|
62
56
|
}
|
|
63
57
|
|
|
64
|
-
|
|
58
|
+
handleStickyLeftColumns() {
|
|
65
59
|
let accumulatedWidth = 0;
|
|
66
60
|
|
|
67
61
|
this.stickyLeftColumns.forEach((colId, index) => {
|
|
68
62
|
const isLastColumn = index === this.stickyLeftColumns.length - 1;
|
|
69
|
-
const header =
|
|
70
|
-
const cells =
|
|
63
|
+
const header = this.element.querySelector(`th[id="${colId}"]`);
|
|
64
|
+
const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
|
|
71
65
|
|
|
72
66
|
if (header) {
|
|
73
67
|
header.classList.add('sticky');
|
|
@@ -99,10 +93,75 @@ export default class PbTable extends PbEnhancedElement {
|
|
|
99
93
|
});
|
|
100
94
|
}
|
|
101
95
|
|
|
96
|
+
initStickyRightColumns() {
|
|
97
|
+
const table = this.element.querySelector('.sticky-right-column');
|
|
98
|
+
|
|
99
|
+
if (table) {
|
|
100
|
+
const classList = Array.from(table.classList);
|
|
101
|
+
const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-right-columns-ids-'));
|
|
102
|
+
|
|
103
|
+
if (stickyColumnClass) {
|
|
104
|
+
this.stickyRightColumns = stickyColumnClass
|
|
105
|
+
.replace('sticky-right-columns-ids-', '')
|
|
106
|
+
.split('-');
|
|
107
|
+
this.stickyRightColumnsReversed = this.stickyRightColumns.reverse();
|
|
108
|
+
|
|
109
|
+
if (this.stickyRightColumns.length > 0) {
|
|
110
|
+
setTimeout(() => {
|
|
111
|
+
this.handleStickyRightColumns();
|
|
112
|
+
window.addEventListener('resize', () => this.handleStickyRightColumns());
|
|
113
|
+
}, 10);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
handleStickyRightColumns() {
|
|
120
|
+
let accumulatedWidth = 0;
|
|
121
|
+
|
|
122
|
+
this.stickyRightColumnsReversed.forEach((colId, index) => {
|
|
123
|
+
const isLastColumn = index === this.stickyRightColumns.length - 1;
|
|
124
|
+
const header = this.element.querySelector(`th[id="${colId}"]`);
|
|
125
|
+
const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
|
|
126
|
+
|
|
127
|
+
if (header) {
|
|
128
|
+
header.classList.add('sticky');
|
|
129
|
+
(header as HTMLElement).style.right = `${accumulatedWidth}px`;
|
|
130
|
+
|
|
131
|
+
if (!isLastColumn) {
|
|
132
|
+
header.classList.add('with-border-left');
|
|
133
|
+
header.classList.remove('sticky-right-shadow');
|
|
134
|
+
} else {
|
|
135
|
+
header.classList.remove('with-border-right');
|
|
136
|
+
header.classList.add('sticky-right-shadow');
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
accumulatedWidth += (header as HTMLElement).offsetWidth;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
cells.forEach((cell) => {
|
|
143
|
+
cell.classList.add('sticky');
|
|
144
|
+
(cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
|
|
145
|
+
|
|
146
|
+
if (!isLastColumn) {
|
|
147
|
+
cell.classList.add('with-border-left');
|
|
148
|
+
cell.classList.remove('sticky-right-shadow');
|
|
149
|
+
} else {
|
|
150
|
+
cell.classList.remove('with-border-left');
|
|
151
|
+
cell.classList.add('sticky-right-shadow');
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
|
|
102
157
|
// Cleanup method to remove event listener
|
|
103
|
-
disconnect()
|
|
104
|
-
if (this.
|
|
105
|
-
window.removeEventListener('resize', this.
|
|
158
|
+
disconnect() {
|
|
159
|
+
if (this.stickyLeftColumns.length > 0) {
|
|
160
|
+
window.removeEventListener('resize', () => this.handleStickyLeftColumns());
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
if (this.stickyRightColumns.length > 0) {
|
|
164
|
+
window.removeEventListener('resize', () => this.handleStickyRightColumns());
|
|
106
165
|
}
|
|
107
166
|
}
|
|
108
167
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@import "../../tokens/screen_sizes";
|
|
2
|
+
@import "../../tokens/border_radius";
|
|
2
3
|
|
|
3
4
|
.table-responsive-scroll {
|
|
4
|
-
display: block;
|
|
5
5
|
overflow-x: scroll;
|
|
6
6
|
|
|
7
7
|
// hides duplicate scroll bar for those that see two (byproduct of repeated table-responsive-scroll class
|
|
@@ -27,11 +27,12 @@
|
|
|
27
27
|
// Responsive Styles
|
|
28
28
|
@media (max-width: 1600px) {
|
|
29
29
|
&[class*="table-responsive-scroll"] {
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
&:has(> table.table-card) {
|
|
31
|
+
border-radius: $border_rad_light;
|
|
32
|
+
box-shadow: 1px 0 0 0px $border_light,
|
|
32
33
|
-1px 0 0 0px $border_light
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
}
|
|
35
|
+
}
|
|
35
36
|
&[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
|
36
37
|
&[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
|
37
38
|
border-left-width: 0px;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<% responsive_class = nil %>
|
|
5
5
|
<% end %>
|
|
6
6
|
|
|
7
|
-
<%= content_tag(:div, class: responsive_class) do %>
|
|
7
|
+
<%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
|
|
8
8
|
<% if object.tag == "table" %>
|
|
9
9
|
<%= content_tag(:table,
|
|
10
10
|
aria: object.aria,
|
|
@@ -25,6 +25,8 @@ module Playbook
|
|
|
25
25
|
default: false
|
|
26
26
|
prop :sticky_left_column, type: Playbook::Props::Array,
|
|
27
27
|
default: []
|
|
28
|
+
prop :sticky_right_column, type: Playbook::Props::Array,
|
|
29
|
+
default: []
|
|
28
30
|
prop :vertical_border, type: Playbook::Props::Boolean,
|
|
29
31
|
default: false
|
|
30
32
|
prop :striped, type: Playbook::Props::Boolean,
|
|
@@ -40,7 +42,7 @@ module Playbook
|
|
|
40
42
|
generate_classname(
|
|
41
43
|
"pb_table", "table-#{size}", single_line_class, dark_class,
|
|
42
44
|
disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
|
|
43
|
-
collapse_class, vertical_border_class, striped_class, outer_padding_class,
|
|
45
|
+
sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
|
|
44
46
|
"table-responsive-#{responsive}", separator: " "
|
|
45
47
|
)
|
|
46
48
|
end
|
|
@@ -83,7 +85,7 @@ module Playbook
|
|
|
83
85
|
if sticky_left_column.empty?
|
|
84
86
|
nil
|
|
85
87
|
else
|
|
86
|
-
sticky_col_classname = "sticky-left-column sticky-columns"
|
|
88
|
+
sticky_col_classname = "sticky-left-column sticky-left-columns-ids"
|
|
87
89
|
sticky_left_column.each do |id|
|
|
88
90
|
sticky_col_classname += "-#{id}"
|
|
89
91
|
end
|
|
@@ -92,6 +94,19 @@ module Playbook
|
|
|
92
94
|
end
|
|
93
95
|
end
|
|
94
96
|
|
|
97
|
+
def sticky_right_column_class
|
|
98
|
+
if sticky_right_column.empty?
|
|
99
|
+
nil
|
|
100
|
+
else
|
|
101
|
+
sticky_col_classname = "sticky-right-column sticky-right-columns-ids"
|
|
102
|
+
sticky_right_column.each do |id|
|
|
103
|
+
sticky_col_classname += "-#{id}"
|
|
104
|
+
end
|
|
105
|
+
|
|
106
|
+
sticky_col_classname
|
|
107
|
+
end
|
|
108
|
+
end
|
|
109
|
+
|
|
95
110
|
def striped_class
|
|
96
111
|
striped ? "striped" : nil
|
|
97
112
|
end
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export const addDataTitle = () => {
|
|
2
|
+
const tables = document.querySelectorAll('.table-responsive-collapse');
|
|
3
|
+
// Each Table
|
|
4
|
+
[].forEach.call(tables, (table: HTMLTableElement) => {
|
|
5
|
+
// Header Titles
|
|
6
|
+
const headers: string[] = [];
|
|
7
|
+
[].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
|
|
8
|
+
const colSpan = header.colSpan
|
|
9
|
+
for (let i = 0; i < colSpan; i++) {
|
|
10
|
+
headers.push(header.textContent.replace(/\r?\n|\r/, ''));
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
// for each row in tbody
|
|
14
|
+
[].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
|
|
15
|
+
// for each cell
|
|
16
|
+
[].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
|
|
17
|
+
// apply the attribute
|
|
18
|
+
cell.setAttribute('data-title', headers[headerIndex])
|
|
19
|
+
})
|
|
20
|
+
})
|
|
21
|
+
});
|
|
22
|
+
}
|
|
@@ -50,7 +50,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
50
50
|
>div {
|
|
51
51
|
&:last-child {
|
|
52
52
|
flex-basis: auto !important;
|
|
53
|
-
[class
|
|
53
|
+
[class^=pb_timeline_item_step] {
|
|
54
54
|
[class=pb_timeline_item_connector] {
|
|
55
55
|
opacity: 0;
|
|
56
56
|
}
|
|
@@ -66,29 +66,25 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
66
66
|
[class*=pb_timeline_item_kit] {
|
|
67
67
|
&[class*=_solid] {
|
|
68
68
|
flex-basis: 100%;
|
|
69
|
-
[class
|
|
70
|
-
height: 0px;
|
|
71
|
-
}
|
|
72
|
-
[class=pb_timeline_item_step] {
|
|
69
|
+
[class^=pb_timeline_item_step] {
|
|
73
70
|
@include flex_wrapper(row);
|
|
71
|
+
align-items: center;
|
|
74
72
|
margin-top: $space_xs;
|
|
75
73
|
margin-bottom: $space_xs;
|
|
76
74
|
[class=pb_timeline_item_connector] {
|
|
77
|
-
@include pb_timeline_line_solid($connector_width, $connector_width,
|
|
75
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
78
76
|
}
|
|
79
77
|
}
|
|
80
78
|
}
|
|
81
79
|
&[class*=_dotted] {
|
|
82
80
|
flex-basis: 100%;
|
|
83
|
-
[class
|
|
84
|
-
height: 0;
|
|
85
|
-
}
|
|
86
|
-
[class=pb_timeline_item_step] {
|
|
81
|
+
[class^=pb_timeline_item_step] {
|
|
87
82
|
@include flex_wrapper(row);
|
|
83
|
+
align-items: center;
|
|
88
84
|
margin-top: $space_xs;
|
|
89
85
|
margin-bottom: $space_xs;
|
|
90
86
|
[class=pb_timeline_item_connector] {
|
|
91
|
-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width,
|
|
87
|
+
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
92
88
|
}
|
|
93
89
|
}
|
|
94
90
|
}
|
|
@@ -99,7 +95,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
99
95
|
>div {
|
|
100
96
|
&:last-child {
|
|
101
97
|
flex-basis: auto !important;
|
|
102
|
-
[class
|
|
98
|
+
[class^=pb_timeline_item_step] {
|
|
103
99
|
[class=pb_timeline_item_connector] {
|
|
104
100
|
opacity: 0;
|
|
105
101
|
}
|
|
@@ -129,12 +125,12 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
129
125
|
}
|
|
130
126
|
}
|
|
131
127
|
}
|
|
132
|
-
[class
|
|
128
|
+
[class^=pb_timeline_item_step] {
|
|
133
129
|
@include flex_wrapper(row);
|
|
134
130
|
margin-top: $space_xs;
|
|
135
131
|
margin-bottom: $space_xs;
|
|
136
132
|
[class=pb_timeline_item_connector] {
|
|
137
|
-
@include pb_timeline_line_solid($connector_width, $connector_width,
|
|
133
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
138
134
|
}
|
|
139
135
|
}
|
|
140
136
|
}
|
|
@@ -153,12 +149,12 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
153
149
|
}
|
|
154
150
|
}
|
|
155
151
|
}
|
|
156
|
-
[class
|
|
152
|
+
[class^=pb_timeline_item_step] {
|
|
157
153
|
@include flex_wrapper(row);
|
|
158
154
|
margin-top: $space_xs;
|
|
159
155
|
margin-bottom: $space_xs;
|
|
160
156
|
[class=pb_timeline_item_connector] {
|
|
161
|
-
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width,
|
|
157
|
+
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
|
|
162
158
|
}
|
|
163
159
|
}
|
|
164
160
|
}
|
|
@@ -170,7 +166,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
170
166
|
align-items: flex-start;
|
|
171
167
|
align-self: auto;
|
|
172
168
|
>div:last-child {
|
|
173
|
-
[class
|
|
169
|
+
[class^=pb_timeline_item_step] {
|
|
174
170
|
[class=pb_timeline_item_connector] {
|
|
175
171
|
opacity: 0;
|
|
176
172
|
}
|
|
@@ -180,13 +176,14 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
180
176
|
@include flex_wrapper(row);
|
|
181
177
|
&[class*=_solid] {
|
|
182
178
|
flex-basis: 100%;
|
|
183
|
-
[class
|
|
179
|
+
[class^=pb_timeline_item_step] {
|
|
184
180
|
@include flex_wrapper(column);
|
|
181
|
+
align-items: center;
|
|
185
182
|
align-content: flex-start;
|
|
186
183
|
margin-right: $space_sm;
|
|
187
184
|
margin-left: $space_sm;
|
|
188
185
|
[class=pb_timeline_item_connector] {
|
|
189
|
-
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
186
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
190
187
|
}
|
|
191
188
|
}
|
|
192
189
|
[class=pb_timeline_item_left_block] {
|
|
@@ -200,12 +197,13 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
200
197
|
}
|
|
201
198
|
&[class*=_dotted] {
|
|
202
199
|
flex-basis: 100%;
|
|
203
|
-
[class
|
|
200
|
+
[class^=pb_timeline_item_step] {
|
|
204
201
|
@include flex_wrapper(column);
|
|
202
|
+
align-items: center;
|
|
205
203
|
margin-right: $space_sm;
|
|
206
204
|
margin-left: $space_sm;
|
|
207
205
|
[class=pb_timeline_item_connector] {
|
|
208
|
-
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
206
|
+
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
209
207
|
}
|
|
210
208
|
}
|
|
211
209
|
[class=pb_timeline_item_left_block] {
|
|
@@ -223,7 +221,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
223
221
|
align-items: flex-start;
|
|
224
222
|
align-self: auto;
|
|
225
223
|
>div:last-child {
|
|
226
|
-
[class
|
|
224
|
+
[class^=pb_timeline_item_step] {
|
|
227
225
|
[class=pb_timeline_item_connector] {
|
|
228
226
|
opacity: 0;
|
|
229
227
|
}
|
|
@@ -233,13 +231,14 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
233
231
|
@include flex_wrapper(row);
|
|
234
232
|
&[class*=_solid] {
|
|
235
233
|
flex-basis: 100%;
|
|
236
|
-
[class
|
|
234
|
+
[class^=pb_timeline_item_step] {
|
|
237
235
|
@include flex_wrapper(column);
|
|
236
|
+
align-items: center;
|
|
238
237
|
align-content: flex-start;
|
|
239
238
|
margin-right: $space_sm;
|
|
240
239
|
margin-left: $space_sm;
|
|
241
240
|
[class=pb_timeline_item_connector] {
|
|
242
|
-
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
241
|
+
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
243
242
|
}
|
|
244
243
|
}
|
|
245
244
|
[class=pb_timeline_item_left_block] {
|
|
@@ -253,12 +252,13 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
253
252
|
}
|
|
254
253
|
&[class*=_dotted] {
|
|
255
254
|
flex-basis: 100%;
|
|
256
|
-
[class
|
|
255
|
+
[class^=pb_timeline_item_step] {
|
|
257
256
|
@include flex_wrapper(column);
|
|
257
|
+
align-items: center;
|
|
258
258
|
margin-right: $space_sm;
|
|
259
259
|
margin-left: $space_sm;
|
|
260
260
|
[class=pb_timeline_item_connector] {
|
|
261
|
-
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin
|
|
261
|
+
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
|
|
262
262
|
}
|
|
263
263
|
}
|
|
264
264
|
[class=pb_timeline_item_left_block] {
|
|
@@ -274,7 +274,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
274
274
|
}
|
|
275
275
|
&[class*=_gap_xs] {
|
|
276
276
|
[class*=pb_timeline_item_kit] {
|
|
277
|
-
[class
|
|
277
|
+
[class^=pb_timeline_item_step] {
|
|
278
278
|
[class=pb_timeline_item_connector] {
|
|
279
279
|
height: $gap_xs !important;
|
|
280
280
|
}
|
|
@@ -283,7 +283,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
283
283
|
}
|
|
284
284
|
&[class*=_gap_sm] {
|
|
285
285
|
[class*=pb_timeline_item_kit] {
|
|
286
|
-
[class
|
|
286
|
+
[class^=pb_timeline_item_step] {
|
|
287
287
|
[class=pb_timeline_item_connector] {
|
|
288
288
|
height: $gap_sm !important;
|
|
289
289
|
}
|
|
@@ -292,7 +292,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
292
292
|
}
|
|
293
293
|
&[class*=_gap_md] {
|
|
294
294
|
[class*=pb_timeline_item_kit] {
|
|
295
|
-
[class
|
|
295
|
+
[class^=pb_timeline_item_step] {
|
|
296
296
|
[class=pb_timeline_item_connector] {
|
|
297
297
|
height: $gap_md !important;
|
|
298
298
|
}
|
|
@@ -301,7 +301,7 @@ $gap_lg: $height_from_top + $space_lg;
|
|
|
301
301
|
}
|
|
302
302
|
&[class*=_gap_lg] {
|
|
303
303
|
[class*=pb_timeline_item_kit] {
|
|
304
|
-
[class
|
|
304
|
+
[class^=pb_timeline_item_step] {
|
|
305
305
|
[class=pb_timeline_item_connector] {
|
|
306
306
|
height: $gap_lg !important;
|
|
307
307
|
}
|