/** * @type mixin-var * @name GeneralMixinVars * @name_en General Mixin */ /** * @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 * } * ``` */ /** * 设置涉及左右相关的属性名，在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-utils/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-utils/style/mixin.less'; * * .demo { * .set-value-with-rtl(text-align, left); * } * ``` */ /** * 设置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); * } * ``` */ /** * 根据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时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则 * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark 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); * } * ``` */ /** * 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); * } * ``` */ * { -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 0; border: 0; touch-action: manipulation; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; } button, input, optgroup, select, textarea { font: inherit; color: inherit; } ul, ol, li { list-style: none; } img, button { border: 0; outline: 0; } a { text-decoration: none; outline: 0; } table, tr, td { border-collapse: collapse; } input, textarea { border: 0; outline: 0; -moz-appearance: auto; appearance: auto; -webkit-appearance: none; } code, kbd, pre, samp { font-family: Menlo, Consolas; } .all-border-box, .all-border-box * { box-sizing: border-box; } /** * @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时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则 * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark 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); * } * ``` */ /** * 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 * } * ``` */ /** * 设置涉及左右相关的属性名，在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-utils/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-utils/style/mixin.less'; * * .demo { * .set-value-with-rtl(text-align, left); * } * ``` */ /** * 设置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); * } * ``` */ .arco-loading { display: inline-block; font-size: 0; line-height: 0; position: relative; } .arco-loading .bg-color-with-config { background: #165DFF; } .arco-loading .stop-color-with-config { stop-color: #165DFF; } .arco-loading .fill-color-with-config { fill: #165DFF; } .arco-loading .stroke-color-with-config { stroke: #165DFF; } @keyframes changDeg { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .arco-loading.circle, .arco-loading.arc, .arco-loading.spin { animation: changDeg 1s infinite linear; } .arco-loading.circle .loading-circle-middle { stop-opacity: 0.5; } .arco-loading.circle .loading-circle-end { stop-opacity: 0; } .arco-loading.dot .dot-cell { display: inline-block; width: 6PX ; height: 6PX ; margin-left: 0.12rem ; } .arco-loading.dot .dot-cell:first-of-type { margin-left: 0; } .arco-loading.dot .dot-cell.filleted { border-radius: 50%; } .arco-loading.spin { height: 0.44rem; width: 0.44rem; position: relative; } .arco-loading.spin .spin-cell { position: absolute; left: 0.2rem; top: 0.02rem; display: inline-block; height: 0.2rem; padding-bottom: 0.08rem; overflow: hidden; transform-origin: 50% bottom; } .arco-loading.spin .spin-cell-inner { display: inline-block; position: absolute; top: 0; left: 0; width: 200%; transform: scale(0.5); transform-origin: top left; height: 0.24rem; } .arco-loading.arc .arc-bg { stroke: #e5e6eb ; } .arco-loading.line { width: 100%; } .arco-loading.line .loading-line-start, .arco-loading.line .loading-line-end { stop-color: #165DFF ; } .arco-loading.line .loading-line-start { stop-opacity: 0; } /*************************************************** * * * 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-loading .bg-color-with-config { background: #3C7EFF; } .arco-theme-dark .arco-loading .stop-color-with-config { stop-color: #3C7EFF; } .arco-theme-dark .arco-loading .fill-color-with-config { fill: #3C7EFF; } .arco-theme-dark .arco-loading .stroke-color-with-config { stroke: #3C7EFF; } .arco-theme-dark .arco-loading.arc .arc-bg { stroke: #484849 ; } .arco-theme-dark .arco-loading.line .loading-line-start, .arco-theme-dark .arco-loading.line .loading-line-end { stop-color: #3C7EFF ; } /********************* End *************************/ /** * @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时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则 * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark 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); * } * ``` */ /** * 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 * } * ``` */ /** * 设置涉及左右相关的属性名，在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-utils/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-utils/style/mixin.less'; * * .demo { * .set-value-with-rtl(text-align, left); * } * ``` */ /** * 设置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); * } * ``` */ .arco-button { cursor: pointer; text-align: center; line-height: 1.2; font-size: 0; display: block; width: 100%; box-sizing: border-box; line-height: 1.2 ; border-radius: 2PX ; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently*/ } .arco-button.arco-button-inline { width: auto; display: inline-block; } .arco-button.arco-button-type-primary { background: #165DFF ; color: #FFFFFF ; } .arco-button.arco-button-type-primary-disabled { background: #94BFFF ; color: #E8F3FF ; } .arco-button.arco-button-type-primary-active { background: #0E42D2 ; } .arco-button-type-primary .bg-color-with-config { background: #FFFFFF; } .arco-button-type-primary .stop-color-with-config { stop-color: #FFFFFF; } .arco-button-type-primary .fill-color-with-config { fill: #FFFFFF; } .arco-button-type-primary .stroke-color-with-config { stroke: #FFFFFF; } .arco-button.arco-button-type-default { background: #E8F3FF ; color: #165DFF ; } .arco-button.arco-button-type-default-disabled { background: #E8F3FF ; color: #94BFFF ; } .arco-button.arco-button-type-default-active { background: #94BFFF ; } .arco-button-type-default .bg-color-with-config { background: #165DFF; } .arco-button-type-default .stop-color-with-config { stop-color: #165DFF; } .arco-button-type-default .fill-color-with-config { fill: #165DFF; } .arco-button-type-default .stroke-color-with-config { stroke: #165DFF; } .arco-button.arco-button-type-ghost { background: transparent ; color: #165DFF ; } .arco-button.arco-button-type-ghost-disabled { background: transparent ; color: #94BFFF ; } .arco-button.arco-button-type-ghost-active { background: #E8F3FF ; } .arco-button-type-ghost .bg-color-with-config { background: #165DFF; } .arco-button-type-ghost .stop-color-with-config { stop-color: #165DFF; } .arco-button-type-ghost .fill-color-with-config { fill: #165DFF; } .arco-button-type-ghost .stroke-color-with-config { stroke: #165DFF; } .arco-button.arco-button-type-ghost { border: 1PX solid currentColor; } .arco-button.arco-button-type-ghost.half-border { border-width: 0; box-shadow: 0 0 0 1PX currentColor inset; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .arco-button.arco-button-type-ghost.half-border { box-shadow: 0 0 0 0.5PX currentColor inset; } } .ios .arco-button.arco-button-type-ghost.half-border, .arco-button.arco-button-type-ghost.half-border.ios { box-shadow: none; border: 0.5PX solid currentColor; } .arco-button.arco-button-size-mini { padding: 0 0.16rem ; height: 0.48rem ; } .arco-button.arco-button-size-mini-is-round { border-radius: 0.48rem ; } .arco-button.arco-button-size-mini-is-square { border-radius: 0; } .arco-button.arco-button-size-mini .arco-button-icon, .arco-button.arco-button-size-mini i, .arco-button.arco-button-size-mini .arco-button-text, .arco-button.arco-button-size-mini svg { font-size: 0.24rem ; } .arco-button.arco-button-size-small { padding: 0 0.16rem ; height: 0.56rem ; } .arco-button.arco-button-size-small-is-round { border-radius: 0.56rem ; } .arco-button.arco-button-size-small-is-square { border-radius: 0; } .arco-button.arco-button-size-small .arco-button-icon, .arco-button.arco-button-size-small i, .arco-button.arco-button-size-small .arco-button-text, .arco-button.arco-button-size-small svg { font-size: 0.28rem ; } .arco-button.arco-button-size-medium { padding: 0 0.32rem ; height: 0.64rem ; } .arco-button.arco-button-size-medium-is-round { border-radius: 0.64rem ; } .arco-button.arco-button-size-medium-is-square { border-radius: 0; } .arco-button.arco-button-size-medium .arco-button-icon, .arco-button.arco-button-size-medium i, .arco-button.arco-button-size-medium .arco-button-text, .arco-button.arco-button-size-medium svg { font-size: 0.28rem ; } .arco-button.arco-button-size-large { padding: 0 0.32rem ; height: 0.72rem ; } .arco-button.arco-button-size-large-is-round { border-radius: 0.72rem ; } .arco-button.arco-button-size-large-is-square { border-radius: 0; } .arco-button.arco-button-size-large .arco-button-icon, .arco-button.arco-button-size-large i, .arco-button.arco-button-size-large .arco-button-text, .arco-button.arco-button-size-large svg { font-size: 0.3rem ; } .arco-button.arco-button-size-huge { padding: 0 0.32rem ; height: 0.88rem ; } .arco-button.arco-button-size-huge-is-round { border-radius: 0.88rem ; } .arco-button.arco-button-size-huge-is-square { border-radius: 0; } .arco-button.arco-button-size-huge .arco-button-icon, .arco-button.arco-button-size-huge i, .arco-button.arco-button-size-huge .arco-button-text, .arco-button.arco-button-size-huge svg { font-size: 0.32rem ; } .arco-button-text-android { padding-top: 0.04rem; } .arco-button-icon { vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; } .arco-button-text { display: inline-block; vertical-align: middle; } .arco-button-text-has-icon { margin-left: 0.08rem ; } [dir="rtl"] .arco-button-text-has-icon { margin-left: 0; margin-left: initial; margin-right: 0.08rem ; } .arco-button-loading-icon { display: inline-block; vertical-align: middle; } .arco-button.has-custom-border { border: 1PX solid; } /*************************************************** * * * 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-button.arco-button-type-primary { background: #3C7EFF ; color: rgba(255, 255, 255, 0.9) ; } .arco-theme-dark .arco-button.arco-button-type-primary-disabled { background: #0E32A6 ; color: #000D4D ; } .arco-theme-dark .arco-button.arco-button-type-primary-active { background: #689FFF ; } .arco-theme-dark .arco-button-type-primary .bg-color-with-config { background: rgba(255, 255, 255, 0.9); } .arco-theme-dark .arco-button-type-primary .stop-color-with-config { stop-color: rgba(255, 255, 255, 0.9); } .arco-theme-dark .arco-button-type-primary .fill-color-with-config { fill: rgba(255, 255, 255, 0.9); } .arco-theme-dark .arco-button-type-primary .stroke-color-with-config { stroke: rgba(255, 255, 255, 0.9); } .arco-theme-dark .arco-button.arco-button-type-default { background: #000D4D ; color: #3C7EFF ; } .arco-theme-dark .arco-button.arco-button-type-default-disabled { background: #000D4D ; color: #0E32A6 ; } .arco-theme-dark .arco-button.arco-button-type-default-active { background: #0E32A6 ; } .arco-theme-dark .arco-button-type-default .bg-color-with-config { background: #3C7EFF; } .arco-theme-dark .arco-button-type-default .stop-color-with-config { stop-color: #3C7EFF; } .arco-theme-dark .arco-button-type-default .fill-color-with-config { fill: #3C7EFF; } .arco-theme-dark .arco-button-type-default .stroke-color-with-config { stroke: #3C7EFF; } .arco-theme-dark .arco-button.arco-button-type-ghost { color: #3C7EFF ; } .arco-theme-dark .arco-button.arco-button-type-ghost-disabled { color: #0E32A6 ; } .arco-theme-dark .arco-button.arco-button-type-ghost-active { background: #000D4D ; } .arco-theme-dark .arco-button-type-ghost .bg-color-with-config { background: #3C7EFF; } .arco-theme-dark .arco-button-type-ghost .stop-color-with-config { stop-color: #3C7EFF; } .arco-theme-dark .arco-button-type-ghost .fill-color-with-config { fill: #3C7EFF; } .arco-theme-dark .arco-button-type-ghost .stroke-color-with-config { stroke: #3C7EFF; } /********************* End *************************/ /** * @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时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则 * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark 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); * } * ``` */ /** * 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 * } * ``` */ /** * 设置涉及左右相关的属性名，在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-utils/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-utils/style/mixin.less'; * * .demo { * .set-value-with-rtl(text-align, left); * } * ``` */ /** * 设置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); * } * ``` */ .arco-fade-enter { opacity: 0; } .arco-fade-enter-active { opacity: 1; transition-property: opacity; transition-duration: 300ms ; } .arco-fade-exit { opacity: 1; } .arco-fade-exit-active { opacity: 0; transition-property: opacity; transition-duration: 300ms ; } .arco-fade-exit-done { display: none; } /*************************************************** * * * 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 ; } /********************* End *************************/ /** * @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时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则 * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark 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); * } * ``` */ /** * 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 * } * ``` */ /** * 设置涉及左右相关的属性名，在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-utils/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-utils/style/mixin.less'; * * .demo { * .set-value-with-rtl(text-align, left); * } * ``` */ /** * 设置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); * } * ``` */ .arco-masking-mask.pre-mount:not([class*="-enter"]):not([class*="-exit"]), .arco-masking-content.pre-mount:not([class*="-enter"]):not([class*="-exit"]), .arco-masking-mask[class*="-exit-done"], .arco-masking-content[class*="-exit-done"] { opacity: 0; pointer-events: none; } .arco-masking-mask { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; background: rgba(0, 0, 0, 0.6) ; } .arco-masking-content { position: fixed; z-index: 1001; } .arco-masking-content.at-center { left: 50%; top: 50%; transform: translate(-50%, -50%); } /*************************************************** * * * 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 ; } /********************* End *************************/ /** * @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时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则 * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark 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); * } * ``` */ /** * 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 * } * ``` */ /** * 设置涉及左右相关的属性名，在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-utils/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-utils/style/mixin.less'; * * .demo { * .set-value-with-rtl(text-align, left); * } * ``` */ /** * 设置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); * } * ``` */ .arco-popup .arco-slide-from-left-enter, .arco-popup .arco-slide-from-left-exit-active, .arco-popup .arco-slide-from-left-exit-done { transform: translate(-100%, 0); } .arco-popup .arco-slide-from-left-enter.translateZ, .arco-popup .arco-slide-from-left-exit-active.translateZ, .arco-popup .arco-slide-from-left-exit-done.translateZ { transform: translate(-100%, 0) translateZ(2PX); } .arco-popup .arco-slide-from-right-enter, .arco-popup .arco-slide-from-right-exit-active, .arco-popup .arco-slide-from-right-exit-done { transform: translate(100%, 0); } .arco-popup .arco-slide-from-right-enter.translateZ, .arco-popup .arco-slide-from-right-exit-active.translateZ, .arco-popup .arco-slide-from-right-exit-done.translateZ { transform: translate(100%, 0) translateZ(2PX); } .arco-popup .arco-slide-from-top-enter, .arco-popup .arco-slide-from-top-exit-active, .arco-popup .arco-slide-from-top-exit-done { transform: translate(0, -100%); } .arco-popup .arco-slide-from-top-enter.translateZ, .arco-popup .arco-slide-from-top-exit-active.translateZ, .arco-popup .arco-slide-from-top-exit-done.translateZ { transform: translate(0, -100%) translateZ(2PX); } .arco-popup .arco-slide-from-bottom-enter, .arco-popup .arco-slide-from-bottom-exit-active, .arco-popup .arco-slide-from-bottom-exit-done { transform: translate(0, 100%); } .arco-popup .arco-slide-from-bottom-enter.translateZ, .arco-popup .arco-slide-from-bottom-exit-active.translateZ, .arco-popup .arco-slide-from-bottom-exit-done.translateZ { transform: translate(0, 100%) translateZ(2PX); } .arco-popup-content[class*="-enter-active"], .arco-popup-mask[class*="-enter-active"] { transform: translate(0, 0); transition: all 450ms cubic-bezier(0.34, 0.69, 0.1, 1) ; } .arco-popup-content[class*="-enter-active"].translateZ, .arco-popup-mask[class*="-enter-active"].translateZ { transform: translateZ(2PX); } .arco-popup [class*="-exit-active"] { transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ; } .arco-popup-content { background: #FFFFFF ; position: fixed; z-index: 1001; } .arco-popup-content.need-bottom-offset { padding-bottom: env(safe-area-inset-bottom); } .arco-popup-content.left { left: 0; top: 0; height: 100%; } .arco-popup-content.top { left: 0; top: 0; width: 100%; } .arco-popup-content.right { right: 0; top: 0; height: 100%; } .arco-popup-content.bottom { left: 0; bottom: 0; width: 100%; } .arco-popup-content.translateZ { transform: translateZ(2PX); } .arco-popup-mask { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; background: rgba(0, 0, 0, 0.6) ; } .arco-popup-mask.translateZ { transform: translateZ(1PX); } /*************************************************** * * * 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-popup-content { background: #2A2A2B ; } /********************* End *************************/ /** * @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时，为原生暗黑模式媒体查询事件prefers-color-scheme:dark绑定对应css规则 * @desc {en} bind corresponding CSS rules to the native dark mode media query event prefers-color-scheme: dark 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); * } * ``` */ /** * 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 * } * ``` */ /** * 设置涉及左右相关的属性名，在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-utils/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-utils/style/mixin.less'; * * .demo { * .set-value-with-rtl(text-align, left); * } * ``` */ /** * 设置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); * } * ``` */ .arco-popup-swiper.has-trans .arco-popup-mask, .arco-popup-swiper.has-trans .arco-popup-content { transition: all 240ms cubic-bezier(0.34, 0.69, 0.1, 1) ; } /*************************************************** * * * 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 ; } /********************* End *************************/