playbook_ui 14.11.1.pre.alpha.PBNTR769sticky5359 → 14.11.1.pre.alpha.PBNTR798datepickerturbo5537
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.
- 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
|
}
|