@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/es/time-picker/index.d.ts

@@ -86,8 +86,8 @@ declare const TimePicker: {
         "onUpdate:popupVisible"?: ((visible: boolean) => any) | undefined;
         onClear?: (() => any) | undefined;
         onSelect?: ((timeString: string | (string | undefined)[], time: Date | (Date | undefined)[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
         onChange?: ((timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
         "onPopup-visible-change"?: ((visible: boolean) => any) | undefined;
     }>, {
         refInput: import("vue").Ref<any, any>;
@@ -137,9 +137,9 @@ declare const TimePicker: {
         position: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
         disabled: boolean;
         unmountOnClose: boolean;
+        type: "time" | "time-range";
         error: boolean;
         readonly: boolean;
-        type: "time" | "time-range";
         allowClear: boolean;
         format: string;
         disableConfirm: boolean;
@@ -755,7 +755,7 @@ declare const TimePicker: {
         }, {}, {}, {
             focus(): void;
             blur(): void;
-        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "blur" | "press-enter" | "change")[], "clear" | "blur" | "press-enter" | "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "change" | "press-enter" | "blur")[], "clear" | "change" | "press-enter" | "blur", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             size: {
                 type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
             };
@@ -794,8 +794,8 @@ declare const TimePicker: {
             "onPress-enter"?: ((...args: any[]) => any) | undefined;
         }>, {
             disabled: boolean;
-            error: boolean;
             focused: boolean;
+            error: boolean;
             readonly: boolean;
             allowClear: boolean;
         }, {}, {
@@ -910,7 +910,7 @@ declare const TimePicker: {
         }, {}, {}, {
             focus(index?: number | undefined): void;
             blur(): void;
-        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "press-enter" | "change" | "focused-index-change" | "update:focusedIndex")[], "clear" | "press-enter" | "change" | "focused-index-change" | "update:focusedIndex", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focused-index-change" | "update:focusedIndex" | "change" | "press-enter")[], "clear" | "focused-index-change" | "update:focusedIndex" | "change" | "press-enter", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             size: {
                 type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
             };
@@ -951,16 +951,16 @@ declare const TimePicker: {
         }>> & Readonly<{
             onChange?: ((...args: any[]) => any) | undefined;
             onClear?: ((...args: any[]) => any) | undefined;
-            "onPress-enter"?: ((...args: any[]) => any) | undefined;
             "onFocused-index-change"?: ((...args: any[]) => any) | undefined;
             "onUpdate:focusedIndex"?: ((...args: any[]) => any) | undefined;
+            "onPress-enter"?: ((...args: any[]) => any) | undefined;
         }>, {
             disabled: boolean | boolean[];
-            placeholder: string[];
-            error: boolean;
             focused: boolean;
+            error: boolean;
             readonly: boolean;
             allowClear: boolean;
+            placeholder: string[];
             value: (import("dayjs").Dayjs | undefined)[];
         }, {}, {
             IconHover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -2116,8 +2116,8 @@ declare const TimePicker: {
         "onUpdate:popupVisible"?: ((visible: boolean) => any) | undefined;
         onClear?: (() => any) | undefined;
         onSelect?: ((timeString: string | (string | undefined)[], time: Date | (Date | undefined)[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
         onChange?: ((timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any) | undefined;
+        "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
         "onPopup-visible-change"?: ((visible: boolean) => any) | undefined;
     }>, {
         refInput: import("vue").Ref<any, any>;
@@ -2160,9 +2160,9 @@ declare const TimePicker: {
         position: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
         disabled: boolean;
         unmountOnClose: boolean;
+        type: "time" | "time-range";
         error: boolean;
         readonly: boolean;
-        type: "time" | "time-range";
         allowClear: boolean;
         format: string;
         disableConfirm: boolean;
@@ -2256,8 +2256,8 @@ declare const TimePicker: {
     "onUpdate:popupVisible"?: ((visible: boolean) => any) | undefined;
     onClear?: (() => any) | undefined;
     onSelect?: ((timeString: string | (string | undefined)[], time: Date | (Date | undefined)[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
     onChange?: ((timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
     "onPopup-visible-change"?: ((visible: boolean) => any) | undefined;
 }>, {
     refInput: import("vue").Ref<any, any>;
@@ -2307,9 +2307,9 @@ declare const TimePicker: {
     position: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
     disabled: boolean;
     unmountOnClose: boolean;
+    type: "time" | "time-range";
     error: boolean;
     readonly: boolean;
-    type: "time" | "time-range";
     allowClear: boolean;
     format: string;
     disableConfirm: boolean;
@@ -2925,7 +2925,7 @@ declare const TimePicker: {
     }, {}, {}, {
         focus(): void;
         blur(): void;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "blur" | "press-enter" | "change")[], "clear" | "blur" | "press-enter" | "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "change" | "press-enter" | "blur")[], "clear" | "change" | "press-enter" | "blur", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         size: {
             type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
         };
@@ -2964,8 +2964,8 @@ declare const TimePicker: {
         "onPress-enter"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean;
-        error: boolean;
         focused: boolean;
+        error: boolean;
         readonly: boolean;
         allowClear: boolean;
     }, {}, {
@@ -3080,7 +3080,7 @@ declare const TimePicker: {
     }, {}, {}, {
         focus(index?: number | undefined): void;
         blur(): void;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "press-enter" | "change" | "focused-index-change" | "update:focusedIndex")[], "clear" | "press-enter" | "change" | "focused-index-change" | "update:focusedIndex", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focused-index-change" | "update:focusedIndex" | "change" | "press-enter")[], "clear" | "focused-index-change" | "update:focusedIndex" | "change" | "press-enter", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         size: {
             type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
         };
@@ -3121,16 +3121,16 @@ declare const TimePicker: {
     }>> & Readonly<{
         onChange?: ((...args: any[]) => any) | undefined;
         onClear?: ((...args: any[]) => any) | undefined;
-        "onPress-enter"?: ((...args: any[]) => any) | undefined;
         "onFocused-index-change"?: ((...args: any[]) => any) | undefined;
         "onUpdate:focusedIndex"?: ((...args: any[]) => any) | undefined;
+        "onPress-enter"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean | boolean[];
-        placeholder: string[];
-        error: boolean;
         focused: boolean;
+        error: boolean;
         readonly: boolean;
         allowClear: boolean;
+        placeholder: string[];
         value: (import("dayjs").Dayjs | undefined)[];
     }, {}, {
         IconHover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/es/time-picker/style/index.less

@@ -1,94 +1,94 @@
-@import './token.less';
-
-@time-picker-prefix-cls: ~'@{prefix}-timepicker';
-
-.@{time-picker-prefix-cls} {
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  padding: 0;
-
-  &-container {
-    overflow: hidden;
-    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
-    border: 1px solid @timepicker-color-border;
-    border-radius: @timepicker-wrapper-border-radius;
-    box-shadow: @popup-box-shadow-base;
-  }
-
-  &-column {
-    box-sizing: border-box;
-    width: @timepicker-column-width;
-    height: @timepicker-column-height;
-    overflow: hidden;
-
-    &:not(:last-child) {
-      border-right: 1px solid @timepicker-color-border;
-    }
-
-    &:hover {
-      overflow-y: auto;
-    }
-
-    ul {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      &::after {
-        display: block;
-        width: 100%;
-        height: @timepicker-column-height - @timepicker-cell-height -
-          @timepicker-cell-spacing * 2;
-        content: '';
-      }
-    }
-  }
-
-  &-cell {
-    padding: @timepicker-cell-spacing 0;
-    color: @timepicker-color-text-cell;
-    font-weight: @timepicker-font-weight-cell;
-    cursor: pointer;
-
-    &-inner {
-      height: @timepicker-cell-height;
-      padding-left: 24px;
-      font-size: 14px;
-      line-height: @timepicker-cell-height;
-    }
-
-    &:not(&-selected):not(&-disabled):hover &-inner {
-      background-color: @timepicker-color-bg-cell_hover;
-    }
-  }
-
-  &-cell-selected &-cell-inner {
-    font-weight: @timepicker-font-weight-cell_active;
-    background-color: @timepicker-color-bg-cell_active;
-  }
-
-  &-cell-disabled {
-    color: @timepicker-color-text-cell_disabled;
-    cursor: not-allowed;
-  }
-
-  &-footer-extra-wrapper {
-    padding: 8px;
-    color: var(~'@{arco-cssvars-prefix}-color-text-1');
-    font-size: @font-size-body-1;
-    border-top: 1px solid @timepicker-color-border;
-  }
-
-  &-footer-btn-wrapper {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px;
-    border-top: 1px solid @timepicker-color-border;
-
-    & :only-child {
-      margin-left: auto;
-    }
-  }
-}
+@import './token.less';
+
+@time-picker-prefix-cls: ~'@{prefix}-timepicker';
+
+.@{time-picker-prefix-cls} {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  padding: 0;
+
+  &-container {
+    overflow: hidden;
+    background-color: var(~'@{arco-cssvars-prefix}-color-bg-popup');
+    border: 1px solid @timepicker-color-border;
+    border-radius: @timepicker-wrapper-border-radius;
+    box-shadow: @popup-box-shadow-base;
+  }
+
+  &-column {
+    box-sizing: border-box;
+    width: @timepicker-column-width;
+    height: @timepicker-column-height;
+    overflow: hidden;
+
+    &:not(:last-child) {
+      border-right: 1px solid @timepicker-color-border;
+    }
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    ul {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      &::after {
+        display: block;
+        width: 100%;
+        height: @timepicker-column-height - @timepicker-cell-height -
+          @timepicker-cell-spacing * 2;
+        content: '';
+      }
+    }
+  }
+
+  &-cell {
+    padding: @timepicker-cell-spacing 0;
+    color: @timepicker-color-text-cell;
+    font-weight: @timepicker-font-weight-cell;
+    cursor: pointer;
+
+    &-inner {
+      height: @timepicker-cell-height;
+      padding-left: 24px;
+      font-size: 14px;
+      line-height: @timepicker-cell-height;
+    }
+
+    &:not(&-selected):not(&-disabled):hover &-inner {
+      background-color: @timepicker-color-bg-cell_hover;
+    }
+  }
+
+  &-cell-selected &-cell-inner {
+    font-weight: @timepicker-font-weight-cell_active;
+    background-color: @timepicker-color-bg-cell_active;
+  }
+
+  &-cell-disabled {
+    color: @timepicker-color-text-cell_disabled;
+    cursor: not-allowed;
+  }
+
+  &-footer-extra-wrapper {
+    padding: 8px;
+    color: var(~'@{arco-cssvars-prefix}-color-text-1');
+    font-size: @font-size-body-1;
+    border-top: 1px solid @timepicker-color-border;
+  }
+
+  &-footer-btn-wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px;
+    border-top: 1px solid @timepicker-color-border;
+
+    & :only-child {
+      margin-left: auto;
+    }
+  }
+}

package/es/time-picker/style/token.less

@@ -1,17 +1,17 @@
-@import '../../style/theme/index.less';
-
-@timepicker-wrapper-border-radius: @radius-medium;
-
-@timepicker-column-width: 64px;
-@timepicker-column-height: 224px;
-@timepicker-cell-height: 24px;
-@timepicker-cell-spacing: 4px;
-
-@timepicker-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@timepicker-color-text-cell: var(~'@{arco-cssvars-prefix}-color-text-1');
-@timepicker-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@timepicker-color-bg-cell_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@timepicker-color-text-cell_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-
-@timepicker-font-weight-cell: @font-weight-500;
-@timepicker-font-weight-cell_active: @font-weight-500;
+@import '../../style/theme/index.less';
+
+@timepicker-wrapper-border-radius: @radius-medium;
+
+@timepicker-column-width: 64px;
+@timepicker-column-height: 224px;
+@timepicker-cell-height: 24px;
+@timepicker-cell-spacing: 4px;
+
+@timepicker-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@timepicker-color-text-cell: var(~'@{arco-cssvars-prefix}-color-text-1');
+@timepicker-color-bg-cell_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@timepicker-color-bg-cell_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@timepicker-color-text-cell_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+@timepicker-font-weight-cell: @font-weight-500;
+@timepicker-font-weight-cell_active: @font-weight-500;

package/es/time-picker/time-picker.d.ts

@@ -207,8 +207,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:popupVisible"?: ((visible: boolean) => any) | undefined;
     onClear?: (() => any) | undefined;
     onSelect?: ((timeString: string | (string | undefined)[], time: Date | (Date | undefined)[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
     onChange?: ((timeString: string | (string | undefined)[] | undefined, time: Date | (Date | undefined)[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((timeString: string | (string | undefined)[] | undefined) => any) | undefined;
     "onPopup-visible-change"?: ((visible: boolean) => any) | undefined;
 }>, {
     popupVisible: boolean;
@@ -216,9 +216,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     position: "top" | "tl" | "tr" | "bottom" | "bl" | "br";
     disabled: boolean;
     unmountOnClose: boolean;
+    type: "time" | "time-range";
     error: boolean;
     readonly: boolean;
-    type: "time" | "time-range";
     allowClear: boolean;
     format: string;
     disableConfirm: boolean;
@@ -834,7 +834,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }, {}, {}, {
         focus(): void;
         blur(): void;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "blur" | "press-enter" | "change")[], "clear" | "blur" | "press-enter" | "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "change" | "press-enter" | "blur")[], "clear" | "change" | "press-enter" | "blur", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         size: {
             type: PropType<"mini" | "medium" | "large" | "small">;
         };
@@ -873,8 +873,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         "onPress-enter"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean;
-        error: boolean;
         focused: boolean;
+        error: boolean;
         readonly: boolean;
         allowClear: boolean;
     }, {}, {
@@ -989,7 +989,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }, {}, {}, {
         focus(index?: number | undefined): void;
         blur(): void;
-    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "press-enter" | "change" | "focused-index-change" | "update:focusedIndex")[], "clear" | "press-enter" | "change" | "focused-index-change" | "update:focusedIndex", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "focused-index-change" | "update:focusedIndex" | "change" | "press-enter")[], "clear" | "focused-index-change" | "update:focusedIndex" | "change" | "press-enter", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         size: {
             type: PropType<"mini" | "medium" | "large" | "small">;
         };
@@ -1030,16 +1030,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{
         onChange?: ((...args: any[]) => any) | undefined;
         onClear?: ((...args: any[]) => any) | undefined;
-        "onPress-enter"?: ((...args: any[]) => any) | undefined;
         "onFocused-index-change"?: ((...args: any[]) => any) | undefined;
         "onUpdate:focusedIndex"?: ((...args: any[]) => any) | undefined;
+        "onPress-enter"?: ((...args: any[]) => any) | undefined;
     }>, {
         disabled: boolean | boolean[];
-        placeholder: string[];
-        error: boolean;
         focused: boolean;
+        error: boolean;
         readonly: boolean;
         allowClear: boolean;
+        placeholder: string[];
         value: (Dayjs | undefined)[];
     }, {}, {
         IconHover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{

package/es/timeline/style/horizontal.less

@@ -1,87 +1,87 @@
-.@{timeline-prefix-cls}-direction-horizontal {
-  display: flex;
-  flex-direction: row;
-
-  &.@{timeline-prefix-cls}-is-reverse {
-    flex-direction: row-reverse;
-  }
-}
-
-.@{timeline-prefix-cls}-item-dot-line-is-horizontal {
-  top: 50%;
-  right: @timeline-horizontal-margin-line-right;
-  left: @timeline-dot-size-width + @timeline-horizontal-margin-line-left;
-  width: unset;
-  height: @timeline-size-line-width;
-  border-top-width: @timeline-size-line-width;
-  border-left: none;
-  transform: translateY(-50%);
-}
-
-.@{timeline-prefix-cls}-item-horizontal-bottom,
-.@{timeline-prefix-cls}-item-horizontal-top {
-  flex: 1;
-  min-height: unset;
-  padding-right: 0;
-  padding-left: 0;
-
-  > .@{timeline-prefix-cls}-item-dot-wrapper {
-    top: 0;
-    width: 100%;
-    height: auto;
-
-    .@{timeline-prefix-cls}-item-dot {
-      top: unset;
-      margin-top: unset;
-    }
-
-    .@{timeline-prefix-cls}-item-dot-content {
-      height: 6px;
-      line-height: 6px;
-    }
-  }
-}
-
-.@{timeline-prefix-cls}-item-horizontal-top {
-  padding-top: @timeline-dot-size-width;
-
-  > .@{timeline-prefix-cls}-item-dot-wrapper {
-    top: 0;
-    bottom: unset;
-  }
-
-  > .@{timeline-prefix-cls}-item-content-wrapper {
-    margin-top: @timeline-horizontal-margin-content-spacing;
-    margin-left: 0;
-  }
-}
-
-.@{timeline-prefix-cls}-item-horizontal-bottom {
-  padding-bottom: @timeline-dot-size-width;
-
-  > .@{timeline-prefix-cls}-item-dot-wrapper {
-    top: unset;
-    bottom: 0;
-  }
-
-  > .@{timeline-prefix-cls}-item-content-wrapper {
-    margin-bottom: @timeline-horizontal-margin-content-spacing;
-    margin-left: 0;
-  }
-}
-
-.@{timeline-prefix-cls}-alternate.@{timeline-prefix-cls}-direction-horizontal {
-  align-items: center;
-  min-height: 200px;
-  overflow: visible;
-
-  .@{timeline-prefix-cls}-item-horizontal-bottom {
-    margin-top: @timeline-dot-size-width;
-    transform: translateY(-50%);
-  }
-
-  .@{timeline-prefix-cls}-item-horizontal-top {
-    margin-top: -@timeline-dot-size-width;
-    transform: translateY(50%);
-  }
-}
+.@{timeline-prefix-cls}-direction-horizontal {
+  display: flex;
+  flex-direction: row;
+
+  &.@{timeline-prefix-cls}-is-reverse {
+    flex-direction: row-reverse;
+  }
+}
+
+.@{timeline-prefix-cls}-item-dot-line-is-horizontal {
+  top: 50%;
+  right: @timeline-horizontal-margin-line-right;
+  left: @timeline-dot-size-width + @timeline-horizontal-margin-line-left;
+  width: unset;
+  height: @timeline-size-line-width;
+  border-top-width: @timeline-size-line-width;
+  border-left: none;
+  transform: translateY(-50%);
+}
+
+.@{timeline-prefix-cls}-item-horizontal-bottom,
+.@{timeline-prefix-cls}-item-horizontal-top {
+  flex: 1;
+  min-height: unset;
+  padding-right: 0;
+  padding-left: 0;
+
+  > .@{timeline-prefix-cls}-item-dot-wrapper {
+    top: 0;
+    width: 100%;
+    height: auto;
+
+    .@{timeline-prefix-cls}-item-dot {
+      top: unset;
+      margin-top: unset;
+    }
+
+    .@{timeline-prefix-cls}-item-dot-content {
+      height: 6px;
+      line-height: 6px;
+    }
+  }
+}
+
+.@{timeline-prefix-cls}-item-horizontal-top {
+  padding-top: @timeline-dot-size-width;
+
+  > .@{timeline-prefix-cls}-item-dot-wrapper {
+    top: 0;
+    bottom: unset;
+  }
+
+  > .@{timeline-prefix-cls}-item-content-wrapper {
+    margin-top: @timeline-horizontal-margin-content-spacing;
+    margin-left: 0;
+  }
+}
+
+.@{timeline-prefix-cls}-item-horizontal-bottom {
+  padding-bottom: @timeline-dot-size-width;
+
+  > .@{timeline-prefix-cls}-item-dot-wrapper {
+    top: unset;
+    bottom: 0;
+  }
+
+  > .@{timeline-prefix-cls}-item-content-wrapper {
+    margin-bottom: @timeline-horizontal-margin-content-spacing;
+    margin-left: 0;
+  }
+}
+
+.@{timeline-prefix-cls}-alternate.@{timeline-prefix-cls}-direction-horizontal {
+  align-items: center;
+  min-height: 200px;
+  overflow: visible;
+
+  .@{timeline-prefix-cls}-item-horizontal-bottom {
+    margin-top: @timeline-dot-size-width;
+    transform: translateY(-50%);
+  }
+
+  .@{timeline-prefix-cls}-item-horizontal-top {
+    margin-top: -@timeline-dot-size-width;
+    transform: translateY(50%);
+  }
+}