fix(VTimeline): alignment consistency (#20876)

vuetifyjs · Feb 6, 2025 · 2d3ddd5 · 2d3ddd5
1 parent ff0a982
commit 2d3ddd5
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VTimeline/VTimeline.sass b/packages/vuetify/src/components/VTimeline/VTimeline.sass
@@ -28,23 +28,25 @@
       &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-row: 3
+          align-self: flex-start
           padding-block-start: $timeline-item-padding
 
         .v-timeline-item__opposite
           grid-row: 1
-          padding-block-end: $timeline-item-padding
           align-self: flex-end
+          padding-block-end: $timeline-item-padding
 
       .v-timeline--side-start > .v-timeline-item,
       &:not(.v-timeline--side-end) > .v-timeline-item--side-start,
       &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-row: 1
-          padding-block-end: $timeline-item-padding
           align-self: flex-end
+          padding-block-end: $timeline-item-padding
 
         .v-timeline-item__opposite
           grid-row: 3
+          align-self: flex-start
           padding-block-start: $timeline-item-padding
 
     @include vertical(true)
@@ -62,17 +64,20 @@
       &:not(.v-timeline--side-end) > .v-timeline-item:nth-child(2n):not(.v-timeline-item--side-end)
         .v-timeline-item__body
           grid-column: 1
+          justify-self: flex-end
           padding-inline-end: $timeline-item-padding
 
         .v-timeline-item__opposite
           grid-column: 3
+          justify-self: flex-start
           padding-inline-start: $timeline-item-padding
 
       .v-timeline--side-end > .v-timeline-item,
       &:not(.v-timeline--side-start) > .v-timeline-item--side-end,
       &:not(.v-timeline--side-start) > .v-timeline-item:nth-child(2n+1):not(.v-timeline-item--side-start)
         .v-timeline-item__body
           grid-column: 3
+          justify-self: flex-start
           padding-inline-start: $timeline-item-padding
 
         .v-timeline-item__opposite
@@ -268,20 +273,22 @@
       @include horizontal(true)
         .v-timeline-item__body
           grid-row: 3
+          align-self: flex-start
           padding-block-end: initial
           padding-block-start: $timeline-item-padding
 
         .v-timeline-item__opposite
           grid-row: 1
+          align-self: flex-end
           padding-block-end: $timeline-item-padding
           padding-block-start: initial
 
       @include vertical(true)
         .v-timeline-item__body
           grid-column: 3
+          justify-self: flex-start
           padding-inline-start: $timeline-item-padding
           padding-inline-end: initial
-          justify-self: flex-start
 
         .v-timeline-item__opposite
           grid-column: 1
@@ -294,11 +301,13 @@
       @include horizontal(true)
         .v-timeline-item__body
           grid-row: 1
+          align-self: flex-end
           padding-block-end: $timeline-item-padding
           padding-block-start: initial
 
         .v-timeline-item__opposite
           grid-row: 3
+          align-self: flex-start
           padding-block-end: initial
           padding-block-start: $timeline-item-padding
 
@@ -310,8 +319,8 @@
 
         .v-timeline-item__opposite
           grid-column: 3
-          padding-inline-start: $timeline-item-padding
           justify-self: flex-start
+          padding-inline-start: $timeline-item-padding
 
   // Fill dot
   .v-timeline-divider--fill-dot