@arco-design/mobile-react 2.31.5 → 2.32.0

package/esnext/dialog/style/css/index.css

@@ -0,0 +1,1111 @@
+/**
+ * @type mixin-var
+ * @name GeneralMixinVars
+ * @name_en General Mixin
+ */
+/**
+ * 根据 base-font-size，设置单位尺寸为 rem
+ * @desc {en} set the unit size to rem based on base-font-size
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+ * @param @values {en} css property value, the values can be separated by commas when the style is composite
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .rem(font-size, 14);
+ *     .rem(padding, 16, 0);
+ * }
+ * ```
+ */
+/**
+ * 根据 base-font-size，设置常规模式和 rtl 模式下单位尺寸为 rem
+ * @desc {en} set the unit size to rem for regular and RTL modes based on the base-font-size
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @values css属性值，如果为复合属性，值可以用逗号分隔开
+ * @param @values {en} css property value, the values can be separated by commas when the style is composite
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .rem-with-rtl(font-size, 14);
+ *     .rem-with-rtl(padding, 16, 0);
+ * }
+ * ```
+ */
+/**
+ * 当 less 变量 use-dark-mode=1 时，自定义暗黑模式样式规则
+ * @desc {en} Customize dark mode style rules when the less variable use-dark-mode=1.
+ * @param @rules 对应的暗黑模式规则
+ * @param @rules {en} Corresponding dark mode rules
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-dark-mode-query({
+ *         background-color: #000;
+ *     });
+ * }
+ * ```
+ */
+/**
+ * 为属性设置 arco 提供的 token 变量
+ * @desc {en} set the token variable provided by Arco for the attribute
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @variables token变量名
+ * @param @variables {en} token variable name
+ * @param @preValues 复合属性css变量前缀
+ * @param @preValues {en} prefix for Compound Attribute CSS Variables
+ * @param @nextValues 复合属性css变量后缀
+ * @param @nextValues {en} suffix for Compound Attribute CSS Variables
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-var(background, primary-color);
+ *     .use-var(border, primary-color, 1px solid);
+ *     .use-var(border, cell-border-width, '', solid black);
+ * }
+ * ```
+ */
+/**
+ * 在常规模式和 rtl 模式下为属性设置 arco 提供的 token 变量
+ * @desc {en} set the token variable provided by Arco for the attribute in regular mode and RTL mode
+ * @param @property css 属性名
+ * @param @property {en} css property
+ * @param @variables token 变量名
+ * @param @variables {en} token variable name
+ * @param @preValues
+ * @param @preValues {en}
+ * @param @nextValues
+ * @param @nextValues {en}
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .use-var-with-rtl(margin-left, button-icon-text-gutter);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性名，在rtl模式下自动替换为相反的属性名
+ * @desc {en} set the property name related to left and right, and automatically replace it with the opposite attribute name in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @param @rules 自定义的复写规则，默认重置为initial
+ * @param @rules {en} customized rewrite rules, default to initial
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *   .set-prop-with-rtl(right, auto);
+ * }
+ * ```
+ */
+/**
+ * 设置涉及左右相关的属性值，在rtl模式下自动替换为相反的属性值
+ * @desc {en} set the property value related to left and right, and automatically replace it with the opposite attribute value in rtl mode
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @value css属性值
+ * @param @value {en} css property value
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *   .set-value-with-rtl(text-align, left);
+ * }
+ * ```
+ */
+/**
+ * 在 rtl 模式下，自定义样式规则
+ * @desc {en} custom style in RTL mode
+ * @param @rules 对应的rtl模式下的规则
+ * @param @rules {en} property with rtl
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .style-with-rtl({
+ *         transform: scale(-1);
+ *     });
+ * }
+ * ```
+ */
+/**
+ * 0.5px 的边框线
+ * @desc {en} a border line of 0.5 pixels
+ * @param @color 使用 css 变量为线设置颜色
+ * @param @color {en} set border-color by CSS variable
+ * @param @direction 边框方向，默认为全部方向
+ * @param @direction {en} border direction，default to all directions.
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *     .hairline-var(line-color);
+ *     .hairline-var(line-color, top);
+ * }
+ * ```
+ */
+/**
+ * 字体加粗
+ * @desc {en} font bold
+ * @param @color 使用 css 变量设置加粗的字体颜色，默认继承文字当前颜色
+ * @param @color {en} set color by CSS variable
+ * @param @stroke 字体粗细，默认 0.3px
+ * @param @stroke {en} font weight, default 0.3 pixel
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .text-medium-var();
+ *    .text-medium-var(primary-color, 0.5PX);
+ * }
+ * ```
+ */
+/**
+ * 1px 边框
+ * @desc {en} 1 pixel border
+ * @param @direction 边框方向
+ * @param @direction {en} border direction
+ * @param @borderColor 使用 css 变量设置边框颜色
+ * @param @borderColor {en} set border-color by CSS variable
+ * @param @borderRadius border-radius，默认为 0
+ * @param @borderRadius {en} border-radius, default value is 0
+ * @param @borderWidth border-width，默认为 1px
+ * @param @borderWidth {en} border-width, default value is 1 pixel
+ * @param @borderStyle border-style，默认为 solid
+ * @param @borderStyle {en} border-style, default value is solid
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .onepx-border-var(top, line-color);
+ *    .onepx-border-var(all, line-color, 2, 2px, dashed);
+ * }
+ * ```
+ */
+/**
+ * 元素右下 0.5px 边框
+ * @desc {en} 0.5px border on bottom right
+ * @param @color 使用 css 变量设置边框颜色
+ * @param @color {en} set border-color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .hairline-bottom-right-var(line-color);
+ * }
+ * ```
+ */
+/**
+ * 元素左上 0.5px 边框
+ * @desc {en} 0.5px border on top left
+ * @param @color 使用 css 变量设置边框颜色
+ * @param @color {en} set border-color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .hairline-top-left-var(line-color);
+ * }
+ * ```
+ */
+/**
+ * 设置 Loading 组件颜色
+ * @desc {en} set Loading component color
+ * @param @color 使用 css 变量设置颜色
+ * @param @color {en} set color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-loading-color-var(primary-color);
+ * }
+ * ```
+ */
+/**
+ * 设置最小字号
+ * @desc {en} set minimum font-size
+ * @param @size 使用 css 变量设置最小字号
+ * @param @size {en} set minimum font-size by CSS variable
+ * @param @scale 设置最小字号下文字缩放比例，默认为 0.9
+ * @param @scale {en} set minimum font-size down text scale，default value is 0.9
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-font-size-var(badge-font-size);
+ *    .set-font-size-var(badge-font-size, 0.5);
+ * }
+ * ```
+ */
+/**
+ * 设置 content-box 盒模型下元素宽度
+ * @desc {en} set box width in content-box
+ * @param @property css 属性名
+ * @param @property {en} css property
+ * @param @width 元素总宽度，包含内边距
+ * @param @width element width, include padding
+ * @param @padding-left 左侧内边距
+ * @param @padding-left {en} padding-left
+ * @param @padding-right 右侧内边距
+ * @param @padding-right {en} padding-right
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-content-box-width-var(min-width, badge-text-width, badge-text-padding-left, badge-text-padding-right);
+ * }
+ * ```
+ */
+/**
+ * 设置 Steps 组件颜色
+ * @desc {en} set Steps component color
+ * @param @color 使用 css 变量设置主颜色
+ * @param @color {en} set main step color by CSS variable
+ * @param @finish-color 使用 css 变量设置已完成步骤的颜色
+ * @param @finish-color {en} set finished step color by CSS variable
+ * @example
+ * ```
+ * @import '@arco-design/mobile-react/style/mixin.less';
+ *
+ * .demo {
+ *    .set-steps-color-var(primary-color, lighter-primary-color);
+ * }
+ * ```
+ */
+/**
+ * @type mixin
+ * @name GeneralMixin
+ * @name_en General Mixin
+ */
+/**
+ * 文本溢出，支持1行/多行文本
+ * @desc {en} text overflow, support single line or multiple lines
+ * @param @lines 最大展示行数，默认为1行
+ * @param @lines {en} allows limiting of the contents of a block to the specified number of lines, default to 1
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ * .demo1{
+ *   .text-overflow();
+ * }
+ * .demo2 {
+ *   .text-overflow(2);
+ * }
+ * ```
+ */
+/**
+ * 禁用用户选择文本
+ * @desc {en} disable user selection of text
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .noselect();
+ * }
+ */
+/**
+ * 全屏布局
+ * @desc {en} full-screen layout
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .full-screen();
+ * }
+ */
+/**
+ * 文本加粗，兼容安卓设备
+ * @desc {en} text-bold, compatible with Android devices
+ * @param @color 文本颜色，默认为currentColor
+ * @param @color {en} text color, default to currentColor
+ * @param @stroke 文本字符笔触宽度，默认为0.3PX
+ * @param @stroke {en} the width of strokes for text characters, default to 0.3PX
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo1 {
+ *   .text-medium();
+ * }
+ * .demo2 {
+ *   .text-medium(#fff, 0.5px);
+ * }
+ */
+/**
+ * 消除文本加粗样式，兼容安卓设备
+ * @desc {en} remove text-bold, compatible with Android devices
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .remove-text-medium();
+ * }
+ */
+/**
+ * 1px(物理像素)边框
+ * @desc {en} a border line of 1 pixel
+ * @param @direction 边框方向
+ * @param @direction {en} border direction
+ * @param @borderColor 边框颜色，默认inherit
+ * @param @borderColor {en} border color, default to inherit
+ * @param @borderRadius 边框圆角，默认0
+ * @param @borderRadius {en} border radius, default to 0
+ * @param @borderWidth 边框宽度，默认1px
+ * @param @borderWidth {en} border width, default to 1px
+ * @param @borderStyle 边框样式，默认solid
+ * @param @borderStyle {en} border style, default to solid
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   .onepx-border();
+ * }
+ */
+/**
+ * 移除0.5px的边框线
+ * @desc {en} remove border line of 0.5 pixels
+ * @param @direction 边框方向，默认为全部方向
+ * @param @direction {en} border direction，default to all directions.
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *     .remove-hairline(all);
+ * }
+ * ```
+ */
+/**
+ * 元素右下 0.5px border
+ * @desc {en} 0.5px border on bottom right
+ * @param @color 边框颜色
+ * @param @color {en} border-color
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *     .hairline-bottom-right(#000);
+ * }
+ * ```
+ */
+/**
+ * 元素左上 0.5px border
+ * @desc {en} 0.5px border on top left
+ * @param @color 边框颜色
+ * @param @color {en} border-color
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *     .hairline-top-left(#000);
+ * }
+ * ```
+ */
+/**
+ * 输入涉及左右相关的属性名，获取方向相反的属性名，可用于处理rtl模式
+ * @desc {en} get the property name in the opposite direction of the input property name, which can be used to process rtl mode
+ * @param @origin-property css属性名
+ * @param @origin-property {en} css property
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *   @a: .prop-with-rtl(margin-left)[@property-name]; // @a 变量值为margin-right
+ * }
+ * ```
+ */
+/**
+ * 设置Loading组件颜色
+ * @desc {en} set Loading component color
+ * @param @color 颜色
+ * @param @color {en} color
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-loading-color(#000);
+ * }
+ * ```
+ */
+/**
+ * 设置最小字号
+ * @desc {en} set minimum font-size
+ * @param @size 最小字号
+ * @param @size {en} minimum font-size
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-font-size(10px);
+ * }
+ * ```
+ */
+/**
+ * 设置content-box盒模型下元素宽度
+ * @desc {en} set box width in content-box
+ * @param @property css属性名
+ * @param @property {en} css property
+ * @param @width 元素总宽度，包含内边距
+ * @param @width element width, include padding
+ * @param @padding-left 左侧内边距
+ * @param @padding-left {en} padding-left
+ * @param @padding-right 右侧内边距
+ * @param @padding-right {en} padding-right
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-content-box-width(min-width, 300px, 10px, 10px);
+ * }
+ * ```
+ */
+/**
+ * 设置Steps组件当前步骤主要颜色，已完成步骤颜色自动计算为当前步骤颜色透明度10%
+ * @desc {en} set Steps component color
+ * @param @color 当前步骤背景、标题文本颜色
+ * @param @color {en} color of current step background and title text
+ * @param @finish-color 已完成步骤背景色
+ * @param @finish-color {en} color of finished step background
+ * @example
+ * ```
+ * @import '@arco-design/mobile-utils/style/mixin.less';
+ *
+ * .demo {
+ *    .set-steps-color(#FFB400);
+ * }
+ * ```
+ */
+@-webkit-keyframes fade-scale-on {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes fade-scale-on {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes fade-scale-off {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+}
+@keyframes fade-scale-off {
+  0% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(0.5);
+            transform: scale(0.5);
+  }
+}
+.arco-fade-scale-enter-active {
+  -webkit-animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
+          animation: fade-scale-on 0.45s cubic-bezier(0.2, 1.23, 0.25, 1) forwards;
+}
+.arco-fade-scale-exit-active {
+  -webkit-animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
+          animation: fade-scale-off 0.15s cubic-bezier(0.48, 0.04, 0.52, 0.96) forwards;
+}
+.arco-dialog-mask,
+.arco-dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.arco-dialog-mask {
+  z-index: 1000;
+  background:  rgba(0, 0, 0, 0.6) ;
+}
+.arco-dialog-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  z-index: 1001;
+  pointer-events: none;
+}
+.arco-dialog-content {
+  position: relative;
+  width:  5.4rem ;
+  pointer-events: visible;
+}
+.arco-dialog-content.android {
+  width:  5.6rem ;
+}
+.arco-dialog-container.pre-mount .arco-dialog-content,
+.arco-dialog-container[class*="-exit-done"] .arco-dialog-content {
+  pointer-events: none;
+}
+.arco-dialog-part {
+  background:  #FFFFFF ;
+}
+.arco-dialog-part.android:first-of-type {
+  border-top-left-radius:  0.08rem ;
+  border-top-right-radius:  0.08rem ;
+}
+.arco-dialog-part.android:last-of-type {
+  border-bottom-left-radius:  0.08rem ;
+  border-bottom-right-radius:  0.08rem ;
+}
+.arco-dialog-part.ios:first-of-type {
+  border-top-left-radius:  0.16rem ;
+  border-top-right-radius:  0.16rem ;
+}
+.arco-dialog-part.ios:last-of-type {
+  border-bottom-left-radius:  0.16rem ;
+  border-bottom-right-radius:  0.16rem ;
+}
+.arco-dialog-header {
+  position: relative;
+}
+.arco-dialog-header.ios {
+  text-align: center;
+  padding-top:  0.4rem ;
+  padding-left:  0.32rem ;
+  padding-right:  0.32rem ;
+  font-size:  0.34rem ;
+  line-height:  0.52rem ;
+  font-weight: bold;
+}
+.android .arco-dialog-header.ios,
+.arco-dialog-header.ios.android,
+.arco-dialog-header.ios.system-android {
+  font-weight: 400;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
+}
+.arco-dialog-header.ios.only-title {
+  padding-bottom:  0.4rem ;
+}
+.arco-dialog-header.android {
+  color:  #1d2129 ;
+}
+.arco-dialog-body.ios {
+  padding-top:  0.08rem ;
+  padding-left:  0.32rem ;
+  padding-right:  0.32rem ;
+  padding-bottom:  0.4rem ;
+  color:  #4e5969 ;
+  font-size:  0.3rem ;
+  line-height:  0.44rem ;
+}
+.arco-dialog-body.ios.sub-title {
+  padding-top:  0.4rem ;
+}
+.arco-dialog-body.android {
+  padding-top:  0.24rem ;
+  padding-left:  0.48rem ;
+  padding-right:  0.48rem ;
+  color:  #4e5969 ;
+  font-size:  0.3rem ;
+  line-height:  0.48rem ;
+}
+.arco-dialog-header.left,
+.arco-dialog-body.left {
+  text-align: left;
+}
+[dir="rtl"] .arco-dialog-header.left,
+[dir="rtl"] .arco-dialog-body.left {
+  text-align: right;
+}
+.arco-dialog-header.center,
+.arco-dialog-body.center {
+  text-align: center;
+}
+.arco-dialog-header.right,
+.arco-dialog-body.right {
+  text-align: right;
+}
+[dir="rtl"] .arco-dialog-header.right,
+[dir="rtl"] .arco-dialog-body.right {
+  text-align: left;
+}
+.arco-dialog-header.android,
+.arco-dialog-body.sub-title.android {
+  padding-top:  0.4rem ;
+  padding-left:  0.48rem ;
+  padding-right:  0.48rem ;
+  font-size:  0.34rem ;
+  line-height:  0.56rem ;
+}
+.arco-dialog-header.ios,
+.arco-dialog-body.sub-title.ios {
+  color:  #1d2129 ;
+}
+.arco-dialog-footer {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-dialog-footer.android {
+  padding-left:  0.48rem ;
+  padding-right:  0.48rem ;
+  padding-top:  0.48rem ;
+  padding-bottom:  0.4rem ;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+          justify-content: flex-end;
+  text-align: right;
+}
+[dir="rtl"] .arco-dialog-footer.android {
+  text-align: left;
+}
+.arco-dialog-footer.android .dialog-footer-button {
+  color:  #1a74ff ;
+  font-size:  0.3rem ;
+  line-height:  0.4rem ;
+}
+.arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
+  margin-right:  0.56rem ;
+}
+[dir="rtl"] .arco-dialog-footer.android .dialog-footer-button:not(:last-child) {
+  margin-right: initial;
+  margin-left:  0.56rem ;
+}
+.arco-dialog-footer.ios {
+  overflow: hidden;
+}
+.arco-dialog-footer.ios .dialog-footer-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  height:  0.88rem ;
+  font-size:  0.32rem ;
+  color:  #165DFF ;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) {
+  position: relative;
+  border-width: 0;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  border-right-style: solid;
+  border-right-width: 1PX;
+  border-right-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: right top;
+  -webkit-transform-origin: right top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-left-style: solid;
+  border-left-width: 1PX;
+  border-left-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
+[dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+  display: none;
+}
+.arco-dialog-footer.ios.collapsed {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+}
+.arco-dialog-footer.ios.collapsed .dialog-footer-button {
+  width: 100%;
+  position: relative;
+  border-width: 0;
+}
+.arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-dialog-footer.ios.type-button {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  padding-left:  0.32rem ;
+  padding-right:  0.32rem ;
+  padding-bottom:  0.4rem ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button {
+  width: 100%;
+  border-radius:  0.6rem ;
+  height:  0.72rem ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button:first-child {
+  color:  #FFFFFF ;
+  background:  #165DFF ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button:not(:first-child) {
+  color:  #86909c ;
+  margin-top:  0.16rem ;
+}
+.arco-dialog-footer.ios.type-button .dialog-footer-button:last-child {
+  margin-bottom: -0.14rem;
+}
+/***************************************************
+ *                                                 *
+ *               Arco Theme Style                  *
+ *                                                 *
+ ***************************************************/
+.arco-theme-dark .process-bg-color-with-config,
+.arco-theme-dark .process-custom-icon-bg-color-with-config {
+  color:  rgba(255, 255, 255, 0.9) ;
+}
+.arco-theme-dark .wait-custom-icon-bg-color-with-config {
+  background:  #2e2e30 ;
+  color:  #929293 ;
+}
+.arco-theme-dark .arco-dialog-part {
+  background:  #2A2A2B ;
+}
+.arco-theme-dark .arco-dialog-header.android {
+  color:  #f6f6f6 ;
+}
+.arco-theme-dark .arco-dialog-body.ios {
+  color:  #c5c5c5 ;
+}
+.arco-theme-dark .arco-dialog-body.android {
+  color:  #c5c5c5 ;
+}
+.arco-theme-dark .arco-dialog-header.ios,
+.arco-theme-dark .arco-dialog-body.sub-title.ios {
+  color:  #f6f6f6 ;
+}
+.arco-theme-dark .arco-dialog-footer.ios .dialog-footer-button {
+  color:  #3C7EFF ;
+}
+.arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button) {
+  position: relative;
+  border-width: 0;
+}
+.arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #484849;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button)::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  border-right-style: solid;
+  border-right-width: 1PX;
+  border-right-color: #484849;
+  box-sizing: border-box;
+  transform-origin: right top;
+  -webkit-transform-origin: right top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-theme-dark .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::after {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+  content: '';
+  width: 1PX;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-left-style: solid;
+  border-left-width: 1PX;
+  border-left-color: #484849;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.5);
+    -webkit-transform: scaleX(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-theme-dark [dir='rtl'] .arco-dialog-footer.ios:not(.collapsed):not(.type-button) .dialog-footer-button:not(:last-child)::before {
+    transform: scaleX(0.33333333);
+    -webkit-transform: scaleX(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-theme-dark .arco-dialog-footer.ios.collapsed .dialog-footer-button {
+  position: relative;
+  border-width: 0;
+}
+.arco-theme-dark .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  border-top-style: solid;
+  border-top-width: 1PX;
+  border-top-color: #484849;
+  box-sizing: border-box;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-theme-dark .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-theme-dark .arco-dialog-footer.ios.collapsed .dialog-footer-button::before {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-theme-dark .arco-dialog-footer.ios.type-button .dialog-footer-button:first-child {
+  color:  rgba(255, 255, 255, 0.9) ;
+  background:  #3C7EFF ;
+}
+.arco-theme-dark .arco-dialog-footer.ios.type-button .dialog-footer-button:not(:first-child) {
+  color:  #929293 ;
+}
+/********************* End *************************/