@arco-design/mobile-react 2.22.0 → 2.22.3

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.22.3](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.2...@arco-design/mobile-react@2.22.3) (2022-11-23)
+
+
+### Bug Fixes
+
+* `Carousel` supports autoPlayDirection ([#72](https://github.com/arco-design/arco-design-mobile/issues/72)) ([527aaf4](https://github.com/arco-design/arco-design-mobile/commit/527aaf4bdf86fe4cf995bd8e4bd2580e9db8c942))
+* flexible.js support umd ([#73](https://github.com/arco-design/arco-design-mobile/issues/73)) ([d3f35c0](https://github.com/arco-design/arco-design-mobile/commit/d3f35c093a579bb404fff91dbf6437cdd93f19f7))
+
+
+
+
+
+## [2.22.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.22.0...@arco-design/mobile-react@2.22.2) (2022-11-09)
+
+
+### Bug Fixes
+
+* `PullRefresh` support custom style ([edac495](https://github.com/arco-design/arco-design-mobile/commit/edac4954526b8f2e3a86c9742752222e19f899f8))
+* `Steps` optimize style & support custom alignment ([617c570](https://github.com/arco-design/arco-design-mobile/commit/617c57003135215787897b48c07d2b674c482828))
+* `Tabs` fix touch event on foldable screen ([a67fa71](https://github.com/arco-design/arco-design-mobile/commit/a67fa71c8944e27aa43d6353e4a24e4ba676cec3))
+* optimize .text-medium mixin ([ab62ab2](https://github.com/arco-design/arco-design-mobile/commit/ab62ab2cdb51174cbd2106467bbf1a3db4694982))
+
+
+
+
+
 # [2.22.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.21.3...@arco-design/mobile-react@2.22.0) (2022-10-28)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.21.3/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.22.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/action-sheet/style/css/index.css

@@ -46,8 +46,8 @@
 .arco-action-sheet-title.android,
 .arco-action-sheet-title.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-action-sheet-sub-title {
   color:  #86909c ;

package/cjs/action-sheet/style/index.less

@@ -11,7 +11,7 @@
 
     &-title {
         .use-var(font-size, action-sheet-title-font-size);
-        .text-medium-var(font-color);
+        .text-medium();
     }
 
     &-sub-title {

package/cjs/carousel/index.d.ts

@@ -66,6 +66,12 @@ export interface CarouselProps {
      * @default true
      */
     autoPlay?: boolean;
+    /**
+     * 自动播放方向
+     * @en Direction when playing auto
+     * @default "normal"
+     */
+    autoPlayDirection?: 'normal' | 'reverse';
     /**
      * 是否响应手势滑动
      * @en Whether to respond to gesture swipe

package/cjs/carousel/index.js

@@ -42,6 +42,8 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       loop = _props$loop === void 0 ? true : _props$loop,
       _props$autoPlay = props.autoPlay,
       autoPlay = _props$autoPlay === void 0 ? true : _props$autoPlay,
+      _props$autoPlayDirect = props.autoPlayDirection,
+      autoPlayDirection = _props$autoPlayDirect === void 0 ? 'normal' : _props$autoPlayDirect,
       _props$swipeable = props.swipeable,
       swipeable = _props$swipeable === void 0 ? true : _props$swipeable,
       _props$stayDuration = props.stayDuration,
@@ -164,7 +166,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       transformsRef = _useRefState4[1],
       setTransforms = _useRefState4[2];
 
-  var _useRefState5 = (0, _helpers.useRefState)('left'),
+  var _useRefState5 = (0, _helpers.useRefState)(autoPlayDirection === 'reverse' && autoPlay ? 'right' : 'left'),
       direction = _useRefState5[0],
       directionRef = _useRefState5[1],
       setStateDirection = _useRefState5[2];
@@ -401,7 +403,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return function () {
       clear();
     };
-  }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval]);
+  }, [userSetBoxWidth, userSetBoxHeight, childWidth, childHeight, stayDuration, noInterval, autoPlayDirection]);
   (0, _helpers.useUpdateEffect)(function () {
     if (currentIndex !== void 0) {
       jumpTo(currentIndex);
@@ -541,7 +543,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var changedIndex = newIndex !== oldIndex ? getShownIndex(newIndex) : -1;
 
     if (autoJump) {
-      setDirection('left');
+      setDirection(autoPlayDirection === 'reverse' ? 'right' : 'left');
     } else if (newIndex === indexRef.current) {
       setDirection(distanceRef.current > 0 ? 'right' : 'left');
     } else {
@@ -595,7 +597,7 @@ var Carousel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     timerRef.current = delayTimeout(function () {
-      jumpTo(indexRef.current + 1);
+      jumpTo(autoPlayDirection === 'reverse' ? indexRef.current - 1 : indexRef.current + 1);
     }, stayDuration);
   }
 

package/cjs/dialog/style/css/index.css

@@ -126,8 +126,8 @@
 .arco-dialog-header.ios.android,
 .arco-dialog-header.ios.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-dialog-header.ios.only-title {
   padding-bottom:  0.4rem ;

package/cjs/dialog/style/index.less

@@ -105,7 +105,7 @@
             .use-var(padding-right, dialog-ios-horizontal-padding);
             .use-var(font-size, dialog-header-ios-font-size);
             .use-var(line-height, dialog-header-ios-line-height);
-            .text-medium-var(dialog-header-ios-color);
+            .text-medium();
 
             &.only-title {
                 .use-var(padding-bottom, dialog-ios-vertical-padding);

package/cjs/pull-refresh/android-pull-refresh.js

@@ -36,6 +36,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       locale = _useContext$locale === void 0 ? _mobileUtils.defaultLocale : _useContext$locale;
 
   var className = props.className,
+      style = props.style,
       children = props.children,
       _props$loosingText = props.loosingText,
       loosingText = _props$loosingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -272,6 +273,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh all-border-box is-android", className, {
       'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== _model.PullRefreshStatus.Loading
     }),
+    style: style,
     ref: domRef
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-place"),

package/cjs/pull-refresh/ios-pull-refresh.js

@@ -35,6 +35,7 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var animationRef = (0, _react.useRef)(0);
   var className = props.className,
+      style = props.style,
       children = props.children,
       _props$loadingText = props.loadingText,
       loadingText = _props$loadingText === void 0 ? /*#__PURE__*/_react.default.createElement("div", {
@@ -214,9 +215,9 @@ var PullRefresh = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       'is-disabled': disabled || !touching && useHideAsNestedScroll
     }),
     ref: domRef,
-    style: contentHeight > 0 ? {
+    style: contentHeight > 0 ? (0, _extends2.default)({
       height: contentHeight
-    } : {}
+    }, style || {}) : style
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _mobileUtils.cls)(prefixCls + "-pull-refresh-content-wrapper")
   }, /*#__PURE__*/_react.default.createElement("div", {

package/cjs/pull-refresh/model.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM
@@ -32,9 +32,13 @@ export interface PullRefreshBasicProps {
     /**
      * 样式类名
      * @en Custom classname
-     * @default ""
      */
     className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
     /**
      * 是否禁用
      * @en Whether to be disabled

package/cjs/steps/demo/style/css/mobile.css

@@ -30,7 +30,10 @@
 #demo-steps #demo-order-7 .process-title-color-with-config {
   color: #FFB400;
 }
-#demo-steps #demo-order-7 .finish-tail-color-with-config:after {
+#demo-steps #demo-order-7 .finish-tail-color-with-config::before,
+#demo-steps #demo-order-7 .finish-tail-color-with-config::after,
+#demo-steps #demo-order-7 .process-tail-color-with-config::before,
+#demo-steps #demo-order-7 .error-tail-color-with-config::before {
   background: #FFB400;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
@@ -57,7 +60,10 @@
 #demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
   color: #165DFF;
 }
-#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config:after {
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::after,
+#demo-steps #demo-order-8 .demo-svg .process-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .error-tail-color-with-config::before {
   background: #165DFF;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {

package/cjs/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "iconType"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "align" | "iconType"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;

package/cjs/steps/index.js

@@ -44,6 +44,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       children = props.children,
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+      userSetAlign = props.align,
       _props$iconType = props.iconType,
       iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
       current = props.current,
@@ -54,6 +55,8 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       items = props.items,
       onClick = props.onClick,
       onChange = props.onChange;
+  var defaultAlign = direction === 'vertical' ? 'start' : 'center';
+  var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
 
   var _useState = (0, _react.useState)(Number(defaultIndex)),
       innerIndex = _useState[0],
@@ -89,11 +92,12 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         direction: direction,
         index: index,
         status: activeIndex === index ? status : void 0,
+        align: align,
         changeIndex: changeIndex
       },
       key: index
     }, child);
-  }, [iconType, activeIndex, direction]);
+  }, [iconType, activeIndex, direction, align]);
   return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {

package/cjs/steps/step.js

@@ -29,9 +29,11 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _useContext$index = _useContext.index,
       index = _useContext$index === void 0 ? 0 : _useContext$index,
       contextStatus = _useContext.status,
+      contextAlign = _useContext.align,
       changeIndex = _useContext.changeIndex;
 
   var status = props.status || contextStatus;
+  var align = props.align || contextAlign;
   var domRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
@@ -70,12 +72,12 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: domRef,
-      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", currentStatus, direction, iconType),
+      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
       onClick: function onClick() {
         return changeIndex(index);
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
+      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-tail", prefixCls + "-steps-item-tail-status-" + currentStatus, prefixCls + "-steps-item-tail-align-" + align, currentStatus + "-tail-color-with-config")
     }), icon ? /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
     }, icon) : /*#__PURE__*/_react.default.createElement("div", {
@@ -83,7 +85,7 @@ var Step = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-icon-dot")
     })), title || description ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content")
+      className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
     }, title ? /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _mobileUtils.cls)(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
     }, title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {

package/cjs/steps/style/css/index.css

@@ -18,17 +18,23 @@
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
           flex-direction: column;
+}
+.arco-steps-item-align-center {
   -webkit-box-align: center;
   -webkit-align-items: center;
           align-items: center;
 }
-.arco-steps-item.vertical {
+.arco-steps-item-align-start {
   -webkit-box-align: start;
   -webkit-align-items: flex-start;
           align-items: flex-start;
 }
-.arco-steps-item:last-child .arco-steps-item-tail:after {
-  display: none;
+.arco-steps-item-align-center.vertical {
+  padding-bottom:  0.5rem ;
+}
+.arco-steps-item:first-child .arco-steps-item-tail::before,
+.arco-steps-item:last-child .arco-steps-item-tail::after {
+  visibility: hidden;
 }
 .arco-steps-item-tail {
   position: absolute;
@@ -44,33 +50,81 @@
 }
 .horizontal .arco-steps-item-tail {
   width: 100%;
-  left: 50%;
   height:  18PX ;
-  padding:  0 0.36rem ;
 }
-.horizontal .arco-steps-item-tail:after {
+.horizontal .arco-steps-item-tail::before,
+.horizontal .arco-steps-item-tail::after {
+  height:  1PX ;
+}
+.horizontal .arco-steps-item-tail-align-start {
+  left:  9PX ;
+  padding:  0 18PX ;
+}
+.horizontal .arco-steps-item-tail-align-start::after {
   content: "";
-  display: inline-block;
   width: 100%;
-  height:  1PX ;
-  background:  #e5e6eb ;
-  border-radius: 0.04rem;
+  border-radius:  2PX ;
+}
+.horizontal .arco-steps-item-tail-align-center::before,
+.horizontal .arco-steps-item-tail-align-center::after {
+  content: "";
+  width: 50%;
+}
+.horizontal .arco-steps-item-tail-align-center::before {
+  margin-right:  18PX ;
+  border-top-right-radius:  2PX ;
+  border-bottom-right-radius:  2PX ;
+}
+.horizontal .arco-steps-item-tail-align-center::after {
+  margin-left:  18PX ;
+  border-top-left-radius:  2PX ;
+  border-bottom-left-radius:  2PX ;
 }
 .vertical .arco-steps-item-tail {
   height: 100%;
   width:  18PX ;
-  top:  0.18rem ;
-  padding:  0.28rem 0 ;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
 }
-.vertical .arco-steps-item-tail:after {
+.vertical .arco-steps-item-tail::before,
+.vertical .arco-steps-item-tail::after {
+  width:  1PX ;
+}
+.vertical .arco-steps-item-tail-align-start {
+  top:  9PX ;
+  padding:  14PX 0 ;
+}
+.vertical .arco-steps-item-tail-align-start::after {
   content: "";
-  display: inline-block;
   height: 100%;
-  width:  1PX ;
+  border-radius:  2PX ;
+}
+.vertical .arco-steps-item-tail-align-center::before,
+.vertical .arco-steps-item-tail-align-center::after {
+  content: "";
+  height: 50%;
+}
+.vertical .arco-steps-item-tail-align-center::before {
+  margin-bottom:  14PX ;
+  border-bottom-left-radius:  2PX ;
+  border-bottom-right-radius:  2PX ;
+}
+.vertical .arco-steps-item-tail-align-center::after {
+  margin-top:  14PX ;
+  border-top-left-radius:  2PX ;
+  border-top-right-radius:  2PX ;
+}
+.arco-steps-item-tail::after,
+.arco-steps-item-tail::before {
+  display: inline-block;
   background:  #e5e6eb ;
-  border-radius: 0.04rem;
 }
-.finish .arco-steps-item-tail:after {
+.arco-steps-item-tail-status-finish::before,
+.arco-steps-item-tail-status-finish::after,
+.arco-steps-item-tail-align-center.arco-steps-item-tail-status-process::before,
+.arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
   background:  #165dff ;
 }
 .arco-steps-item-custom-icon,
@@ -122,8 +176,8 @@
 .arco-steps-item-icon-num.android,
 .arco-steps-item-icon-num.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #86909c;
-  text-stroke: 0.3PX #86909c;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .process .arco-steps-item-icon-num {
   color:  #FFFFFF ;
@@ -147,18 +201,19 @@
   border: none;
   background:  #165dff ;
 }
-.arco-steps-item-content {
-  text-align: center;
-}
 .horizontal .arco-steps-item-content {
   margin-top:  0.1rem ;
 }
+.horizontal .arco-steps-item-content-align-center {
+  text-align: center;
+}
 .vertical .arco-steps-item-content {
   margin-left:  0.26rem ;
-  text-align: left;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
           flex: 1;
+}
+.vertical .arco-steps-item-content-align-start {
   padding-bottom:  0.5rem ;
 }
 .arco-steps-item-title {

package/cjs/steps/style/index.less

@@ -11,15 +11,23 @@
 
         &.horizontal {
             flex-direction: column;
+        }
+
+        &-align-center {
             align-items: center;
         }
 
-        &.vertical {
+        &-align-start {
             align-items: flex-start;
         }
 
-        &:last-child &-tail:after {
-            display: none;
+        &-align-center.vertical {
+            .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            visibility: hidden;
         }
 
         &-tail {
@@ -30,37 +38,93 @@
 
             .horizontal & {
                 width: 100%;
-                left: 50%;
                 .use-var(height, steps-icon-height);
-                .use-var(padding, steps-tail-horizontal-padding);
 
-                &:after {
-                    content: "";
-                    display: inline-block;
-                    width: 100%;
+                &::before,
+                &::after {
                     .use-var(height, steps-tail-standard-size);
-                    .use-var(background, steps-tail-standard-background);
-                    .rem(border-radius, 2);
+                }
+
+                &-align-start {
+                    .use-var(left, steps-tail-horizontal-left);
+                    .use-var(padding, steps-tail-horizontal-padding);
+
+                    &::after {
+                        content: "";
+                        width: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: "";
+                        width: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-right, steps-tail-horizontal-gutter);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-left, steps-tail-horizontal-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                    }
                 }
             }
 
             .vertical & {
                 height: 100%;
                 .use-var(width, steps-icon-width);
-                .use-var(top, steps-tail-vertical-top);
-                .use-var(padding, steps-tail-vertical-padding);
+                flex-direction: column;
 
-                &:after {
-                    content: "";
-                    display: inline-block;
-                    height: 100%;
+                &::before,
+                &::after {
                     .use-var(width, steps-tail-standard-size);
-                    .use-var(background, steps-tail-standard-background);
-                    .rem(border-radius, 2);
                 }
+
+                &-align-start {
+                    .use-var(top, steps-tail-vertical-top);
+                    .use-var(padding, steps-tail-vertical-padding);
+
+                    &::after {
+                        content: "";
+                        height: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: "";
+                        height: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-bottom, steps-tail-vertical-gutter);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-top, steps-tail-vertical-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            &::after,
+            &::before {
+                display: inline-block;
+                .use-var(background, steps-tail-standard-background);
             }
 
-            .finish &:after {
+            &-status-finish::before,
+            &-status-finish::after,
+            &-align-center&-status-process::before,
+            &-align-center&-status-error::before {
                 .use-var(background, steps-tail-finish-background);
             }
         }
@@ -110,7 +174,7 @@
                 .use-var(font-size, steps-icon-num-font-size);
                 .use-var(line-height, steps-icon-num-line-height);
                 .use-var(color, steps-icon-num-color);
-                .text-medium-var(steps-icon-num-color);
+                .text-medium();
 
                 .process & {
                     .use-var(color, steps-process-icon-num-color);
@@ -142,17 +206,21 @@
         }
 
         &-content {
-            text-align: center;
 
             .horizontal & {
                 .use-var(margin-top, steps-horizontal-content-margin-top);
+                &-align-center {
+                    text-align: center;
+                }
             }
 
             .vertical & {
                 .use-var(margin-left, steps-vertical-content-margin-left);
-                text-align: left;
                 flex: 1;
-                .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+
+                &-align-start {
+                    .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+                }
             }
         }