Skip to content

Commit

Permalink
Center step child and connector by align-items instead of margin
Browse files Browse the repository at this point in the history
  • Loading branch information
@kangaree
kangaree committed Jan 9, 2025
1 parent 0f83bb0 commit 7022aa6
Showing 1 changed file with 14 additions and 13 deletions.
27 changes: 14 additions & 13 deletions playbook/app/pb_kits/playbook/pb_timeline/_timeline.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,29 +68,26 @@ $gap_lg: $height_from_top + $space_lg;
flex-basis: 100%;
[class=pb_timeline_item_step] {
@include flex_wrapper(row);
align-items: center;
margin-top: $space_xs;
margin-bottom: $space_xs;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
}
}
}
&[class*=_dotted] {
flex-basis: 100%;
[class=pb_timeline_item_step] {
@include flex_wrapper(row);
align-items: center;
margin-top: $space_xs;
margin-bottom: $space_xs;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
}
}
}
[class=pb_timeline_item_step] {
> :first-child:not([class^=pb_icon_circle_kit]) {
margin-top: $space_xs;
}
}
}
&[class*=_with_date] {
@include flex_wrapper(row);
Expand Down Expand Up @@ -133,7 +130,7 @@ $gap_lg: $height_from_top + $space_lg;
margin-top: $space_xs;
margin-bottom: $space_xs;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
@include pb_timeline_line_solid($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
}
}
}
Expand All @@ -157,7 +154,7 @@ $gap_lg: $height_from_top + $space_lg;
margin-top: $space_xs;
margin-bottom: $space_xs;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
@include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, 0 $icon_margin 0 $icon_margin );
}
}
}
Expand All @@ -181,11 +178,12 @@ $gap_lg: $height_from_top + $space_lg;
flex-basis: 100%;
[class=pb_timeline_item_step] {
@include flex_wrapper(column);
align-items: center;
align-content: flex-start;
margin-right: $space_sm;
margin-left: $space_sm;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
}
}
[class=pb_timeline_item_left_block] {
Expand All @@ -201,10 +199,11 @@ $gap_lg: $height_from_top + $space_lg;
flex-basis: 100%;
[class=pb_timeline_item_step] {
@include flex_wrapper(column);
align-items: center;
margin-right: $space_sm;
margin-left: $space_sm;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
}
}
[class=pb_timeline_item_left_block] {
Expand Down Expand Up @@ -234,11 +233,12 @@ $gap_lg: $height_from_top + $space_lg;
flex-basis: 100%;
[class=pb_timeline_item_step] {
@include flex_wrapper(column);
align-items: center;
align-content: flex-start;
margin-right: $space_sm;
margin-left: $space_sm;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
@include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
}
}
[class=pb_timeline_item_left_block] {
Expand All @@ -254,10 +254,11 @@ $gap_lg: $height_from_top + $space_lg;
flex-basis: 100%;
[class=pb_timeline_item_step] {
@include flex_wrapper(column);
align-items: center;
margin-right: $space_sm;
margin-left: $space_sm;
[class=pb_timeline_item_connector] {
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
@include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin 0);
}
}
[class=pb_timeline_item_left_block] {
Expand Down

0 comments on commit 7022aa6

Please sign in to comment.