@element-plus/nightly 0.0.20260106 → 0.0.20260108

package/theme-chalk/src/timeline-item.scss

@@ -1,19 +1,25 @@
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
+@mixin alternate-tail-node-center {
+  @include e((tail, node)) {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
 @include b(timeline-item) {
   position: relative;
   padding-bottom: 20px;
 
   @include e(wrapper) {
+    box-sizing: content-box;
     position: relative;
-    padding-left: 28px;
     top: -3px;
   }
 
   @include e(tail) {
     position: absolute;
-    left: 4px;
     height: 100%;
     border-left: 2px solid getCssVar('timeline-node-color');
   }
@@ -34,12 +40,10 @@
     align-items: center;
 
     @include m(normal) {
-      left: -1px;
       width: getCssVar('timeline-node-size-normal');
       height: getCssVar('timeline-node-size-normal');
     }
     @include m(large) {
-      left: -2px;
       width: getCssVar('timeline-node-size-large');
       height: getCssVar('timeline-node-size-large');
     }
@@ -81,4 +85,51 @@
       margin-top: 8px;
     }
   }
+
+  @include when(start) {
+    @include e(wrapper) {
+      padding-left: 28px;
+    }
+
+    @include e(tail) {
+      left: 4px;
+    }
+
+    @include e(node) {
+      @include m(normal) {
+        left: -1px;
+      }
+      @include m(large) {
+        left: -2px;
+      }
+    }
+  }
+
+  @include when(end) {
+    @include e(wrapper) {
+      padding-right: 28px;
+      text-align: right;
+    }
+
+    @include e(tail) {
+      right: 4px;
+    }
+
+    @include e(node) {
+      @include m(normal) {
+        right: -1px;
+      }
+      @include m(large) {
+        right: -2px;
+      }
+    }
+  }
+
+  @include when(alternate) {
+    @include alternate-tail-node-center;
+  }
+
+  @include when(alternate-reverse) {
+    @include alternate-tail-node-center;
+  }
 }

package/theme-chalk/src/timeline.scss

@@ -2,6 +2,27 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+@mixin alternate-padding {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+@mixin alternate-wrapper-start {
+  .#{$namespace}-timeline-item__wrapper {
+    width: calc(50% - 28px);
+    left: calc(50% - getCssVar('timeline-node-size-large') / 2);
+    padding-left: 28px;
+  }
+}
+
+@mixin alternate-wrapper-end {
+  .#{$namespace}-timeline-item__wrapper {
+    width: calc(50% - 28px + getCssVar('timeline-node-size-large') / 2);
+    text-align: right;
+    padding-right: 28px;
+  }
+}
+
 @include b(timeline) {
   @include set-component-css-var('timeline', $timeline);
 }
@@ -43,4 +64,38 @@
       height: calc(50% - 10px);
     }
   }
+
+  @include when(start) {
+    padding-left: 40px;
+    padding-right: 0;
+  }
+
+  @include when(end) {
+    padding-left: 0;
+    padding-right: 40px;
+  }
+
+  @include when(alternate) {
+    @include alternate-padding;
+
+    .#{$namespace}-timeline-item:nth-child(2n + 1) {
+      @include alternate-wrapper-start;
+    }
+
+    .#{$namespace}-timeline-item:nth-child(2n) {
+      @include alternate-wrapper-end;
+    }
+  }
+
+  @include when(alternate-reverse) {
+    @include alternate-padding;
+
+    .#{$namespace}-timeline-item:nth-child(2n + 1) {
+      @include alternate-wrapper-end;
+    }
+
+    .#{$namespace}-timeline-item:nth-child(2n) {
+      @include alternate-wrapper-start;
+    }
+  }
 }