@arco-design/mobile-react 2.22.0 → 2.22.2

package/tokens/app/arcodesign/default/index.json

@@ -6527,6 +6527,18 @@
             "en": "Custom icon color of Steps in processing state"
         }
     },
+    "stepsTailBorderRadius": {
+        "cssKey": "steps-tail-border-radius",
+        "desc": "steps 分割线圆角值",
+        "override": "",
+        "value": "2PX",
+        "jsValue": "2PX",
+        "staticValue": "2PX",
+        "localeDesc": {
+            "ch": "steps 分割线圆角值",
+            "en": "Border radius of steps dividing"
+        }
+    },
     "stepsTailFinishBackground": {
         "cssKey": "steps-tail-finish-background",
         "desc": "steps 步骤分割线完成态颜色",
@@ -6539,13 +6551,37 @@
             "en": "Steps dividing line color in finish state"
         }
     },
+    "stepsTailHorizontalGutter": {
+        "cssKey": "steps-tail-horizontal-gutter",
+        "desc": "steps 水平分割线与图标中心点的距离",
+        "override": "",
+        "value": "18PX",
+        "jsValue": "18PX",
+        "staticValue": "18PX",
+        "localeDesc": {
+            "ch": "steps 水平分割线与图标中心点的距离",
+            "en": "The distance between the horizontal dividing line and the center point of the icon"
+        }
+    },
+    "stepsTailHorizontalLeft": {
+        "cssKey": "steps-tail-horizontal-left",
+        "desc": "steps 水平分割线的向右偏移距离，一般是 stepsIconHeight 值的一半",
+        "override": "",
+        "value": "9PX",
+        "jsValue": "9PX",
+        "staticValue": "9PX",
+        "localeDesc": {
+            "ch": "steps 水平分割线的向右偏移距离，一般是 stepsIconHeight 值的一半",
+            "en": "The offset distance to the right of the horizontal dividing line of steps, generally half the value of stepsIconHeight"
+        }
+    },
     "stepsTailHorizontalPadding": {
         "cssKey": "steps-tail-horizontal-padding",
         "desc": "steps 水平分割线左右间距",
         "override": "",
-        "value": "0 ~`pxtorem(18)`",
-        "jsValue": "0 @getRem@18",
-        "staticValue": "0 0.36rem",
+        "value": "0 @steps-tail-horizontal-gutter",
+        "jsValue": "0 @global@stepsTailHorizontalGutter",
+        "staticValue": "0 18PX",
         "localeDesc": {
             "ch": "steps 水平分割线左右间距",
             "en": "Left and right spacing of the horizontal dividing line of Steps"
@@ -6575,13 +6611,25 @@
             "en": "Steps dividing line thickness"
         }
     },
+    "stepsTailVerticalGutter": {
+        "cssKey": "steps-tail-vertical-gutter",
+        "desc": "steps 垂直分割线与图标中心点的距离",
+        "override": "",
+        "value": "14PX",
+        "jsValue": "14PX",
+        "staticValue": "14PX",
+        "localeDesc": {
+            "ch": "steps 垂直分割线与图标中心点的距离",
+            "en": "The distance between the vertical dividing line and the center point of the icon"
+        }
+    },
     "stepsTailVerticalPadding": {
         "cssKey": "steps-tail-vertical-padding",
         "desc": "steps 垂直分割线上下间距",
         "override": "",
-        "value": "~`pxtorem(14)` 0",
-        "jsValue": "@getRem@14 0",
-        "staticValue": "0.28rem 0",
+        "value": "@steps-tail-vertical-gutter 0",
+        "jsValue": "@global@stepsTailVerticalGutter 0",
+        "staticValue": "14PX 0",
         "localeDesc": {
             "ch": "steps 垂直分割线上下间距",
             "en": "Left and right spacing of the vertical dividing line of Steps"
@@ -6591,12 +6639,12 @@
         "cssKey": "steps-tail-vertical-top",
         "desc": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
         "override": "",
-        "value": "~`pxtorem(9)`",
-        "jsValue": "@getRem@9",
-        "staticValue": "0.18rem",
+        "value": "9PX",
+        "jsValue": "9PX",
+        "staticValue": "9PX",
         "localeDesc": {
             "ch": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
-            "en": "Left and right spacing of the vertical dividing line of Steps"
+            "en": "The offset distance to the bottom of the vertical dividing line of steps, generally half the value of stepsIconHeight"
         }
     },
     "stepsTitleFontSize": {

package/tokens/app/arcodesign/default/index.less

@@ -516,9 +516,13 @@
 @notify-font-size: ~`pxtorem(14)`;
 @notify-min-height: ~`pxtorem(36)`;
 @steps-padding: ~`pxtorem(16)` 0;
-@steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
-@steps-tail-vertical-padding: ~`pxtorem(14)` 0;
-@steps-tail-vertical-top: ~`pxtorem(9)`;
+@steps-tail-border-radius: 2PX;
+@steps-tail-horizontal-gutter: 18PX;
+@steps-tail-vertical-gutter: 14PX;
+@steps-tail-horizontal-padding: 0 @steps-tail-horizontal-gutter;
+@steps-tail-vertical-padding: @steps-tail-vertical-gutter 0;
+@steps-tail-horizontal-left: 9PX;
+@steps-tail-vertical-top: 9PX;
 @steps-tail-standard-size: 1PX;
 @steps-tail-standard-background: @line-color;
 @steps-tail-finish-background: @primary-color;

package/tokens/mixin/index.less

@@ -38,7 +38,7 @@
     }
 }
 
-.text-medium-var(@color, @stroke: 0.3PX) {
+.text-medium-var(@color: currentColor, @stroke: 0.3PX) {
     .text-medium(@@color, @stroke);
     & when (@use-css-vars = 1) {
         .text-medium(var(~"--@{color}", @@color), @stroke);

package/umd/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/umd/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/umd/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/umd/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/umd/pull-refresh/android-pull-refresh.js

@@ -37,6 +37,7 @@
         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", {
@@ -273,6 +274,7 @@
       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/umd/pull-refresh/ios-pull-refresh.js

@@ -35,6 +35,7 @@
 
     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 @@
         '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/umd/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/umd/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/umd/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/umd/steps/index.js

@@ -45,6 +45,7 @@
         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,
@@ -55,6 +56,8 @@
         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],
@@ -90,11 +93,12 @@
           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/umd/steps/step.js

@@ -33,9 +33,11 @@
         _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 {
@@ -74,12 +76,12 @@
       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", {
@@ -87,7 +89,7 @@
       }, 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/umd/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/umd/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);
+                }
             }
         }