blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

breaking change: shorter css var names

Browse Source
This commit is contained in:
chenjiahan 2021-11-03 17:36:17 +08:00
parent ada5db011c
commit 7d6916b946
161 changed files with 893 additions and 886 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vant/docs/markdown/changelog.en-US.md
View File

@ -142,7 +142,7 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
- Circle: add start-position prop [#9305](https://github.com/youzan/vant/issues/9305)
- Slider: add reverse prop [#9308](https://github.com/youzan/vant/issues/9308)
- NumberKeyboard: add van-number-keyboard-key-background-color css var [#9303](https://github.com/youzan/vant/issues/9303)
- NumberKeyboard: add van-number-keyboard-key-background css var [#9303](https://github.com/youzan/vant/issues/9303)
- PasswordInput: add password-input-text-color css var [#9304](https://github.com/youzan/vant/issues/9304)
**Bug Fixes**
@ -401,7 +401,7 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
**Feature**
- ActionBar: add @action-bar-icon-background-color less var [#8474](https://github.com/youzan/vant/issues/8474)
- ActionBar: add @action-bar-icon-background less var [#8474](https://github.com/youzan/vant/issues/8474)
- Popover: bump @popperjs/core@2.9.2 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e)
- perf: reduce bundle size [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f)

6
packages/vant/docs/markdown/changelog.zh-CN.md
View File

@ -142,7 +142,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- Circle: 新增 start-position 属性 [#9305](https://github.com/youzan/vant/issues/9305)
- Slider: 新增 reverse 属性 [#9308](https://github.com/youzan/vant/issues/9308)
- NumberKeyboard: 新增 van-number-keyboard-key-background-color CSS 变量 [#9303](https://github.com/youzan/vant/issues/9303)
- NumberKeyboard: 新增 van-number-keyboard-key-background CSS 变量 [#9303](https://github.com/youzan/vant/issues/9303)
- PasswordInput: add password-input-text-color CSS 变量 [#9304](https://github.com/youzan/vant/issues/9304)
**Bug Fixes**
@ -402,7 +402,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
**Feature**
- ActionBar: 新增 @action-bar-icon-background-color 样式变量 [#8474](https://github.com/youzan/vant/issues/8474)
- ActionBar: 新增 @action-bar-icon-background 样式变量 [#8474](https://github.com/youzan/vant/issues/8474)
- Popover: 升级依赖的 @popperjs/core 到 2.9.2 版本 [0d1323](https://github.com/youzan/vant/commit/0d132337d5d263957a7993d60e47a18efec7313e)
- perf: 优化包体积 [ba3e6d](https://github.com/youzan/vant/commit/ba3e6d56a0bc7ae3acc25b1380f054da3b9b020f)
@ -965,7 +965,7 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- Button: 新增 icon-position 属性 [#7174](https://github.com/youzan/vant/issues/7174)
- slider: 新增 range 属性，支持范围选择 [#7175](https://github.com/youzan/vant/issues/7175)
- TabbarItem: 新增 @tabbar-item-active-background-color 变量 [#7162](https://github.com/youzan/vant/issues/7162)
- TabbarItem: 新增 @tabbar-item-active-background 变量 [#7162](https://github.com/youzan/vant/issues/7162)
**Bug Fixes**

19
packages/vant/docs/markdown/migrate-from-v3.zh-CN.md
View File

@ -10,6 +10,25 @@
不再支持基于 Less 变量进行主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。
### CSS 变量名称简化
为了便于使用 CSS 变量，我们对部分 CSS 变量的名称进行了简化，使用更短的单词代替：
```
text-link -> link
box-shadow -> shadow
font-family -> font
border-radius -> radius
background-color -> background
font-weight-bold -> font-bold
border-width-base -> border-width
price-integer-font -> price-font
animation-duration -> duration
transition-duration -> duration
animation-timing-function-enter -> ease-out
animation-timing-function-leave -> ease-in
```
### API 调整
#### Picker

10
packages/vant/src/action-bar-button/index.less
View File

@ -7,21 +7,21 @@
.van-action-bar-button {
flex: 1;
height: var(--van-action-bar-button-height);
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-font-size-md);
border: none;
border-radius: 0;
&--first {
margin-left: 5px;
border-top-left-radius: var(--van-border-radius-max);
border-bottom-left-radius: var(--van-border-radius-max);
border-top-left-radius: var(--van-radius-max);
border-bottom-left-radius: var(--van-radius-max);
}
&--last {
margin-right: 5px;
border-top-right-radius: var(--van-border-radius-max);
border-bottom-right-radius: var(--van-border-radius-max);
border-top-right-radius: var(--van-radius-max);
border-bottom-right-radius: var(--van-radius-max);
}
&--warning {

4
packages/vant/src/action-bar-icon/index.less
View File

@ -6,7 +6,7 @@
--van-action-bar-icon-font-size: var(--van-font-size-xs);
--van-action-bar-icon-active-color: var(--van-active-color);
--van-action-bar-icon-text-color: var(--van-gray-7);
--van-action-bar-icon-background-color: var(--van-background-color-light);
--van-action-bar-icon-background: var(--van-background-light);
}
.van-action-bar-icon {
@ -19,7 +19,7 @@
font-size: var(--van-action-bar-icon-font-size);
line-height: 1;
text-align: center;
background: var(--van-action-bar-icon-background-color);
background: var(--van-action-bar-icon-background);
cursor: pointer;
&:active {

4
packages/vant/src/action-bar/README.md
View File

@ -153,7 +153,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-action-bar-background-color | _var(--van-background-color-light)_ | - |
| --van-action-bar-background | _var(--van-background-light)_ | - |
| --van-action-bar-height | _50px_ | - |
| --van-action-bar-icon-width | _48px_ | - |
| --van-action-bar-icon-height | _100%_ | - |
@ -162,7 +162,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
| --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
| --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - |
| --van-action-bar-icon-background | _var(--van-background-light)_ | - |
| --van-action-bar-button-height | _40px_ | - |
| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | - |
| --van-action-bar-button-danger-color | _var(--van-gradient-red)_ | - |

30
packages/vant/src/action-bar/README.zh-CN.md
View File

@ -155,18 +155,18 @@ import type {
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-action-bar-background-color | _var(--van-background-color-light)_ | - |
| --van-action-bar-height | _50px_ | - |
| --van-action-bar-icon-width | _48px_ | - |
| --van-action-bar-icon-height | _100%_ | - |
| --van-action-bar-icon-color | _var(--van-text-color)_ | - |
| --van-action-bar-icon-size | _18px_ | - |
| --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
| --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
| --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
| --van-action-bar-icon-background-color | _var(--van-background-color-light)_ | - |
| --van-action-bar-button-height | _40px_ | - |
| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | - |
| --van-action-bar-button-danger-color | _var(--van-gradient-red)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ----------------------------- | ---- |
| --van-action-bar-background | _var(--van-background-light)_ | - |
| --van-action-bar-height | _50px_ | - |
| --van-action-bar-icon-width | _48px_ | - |
| --van-action-bar-icon-height | _100%_ | - |
| --van-action-bar-icon-color | _var(--van-text-color)_ | - |
| --van-action-bar-icon-size | _18px_ | - |
| --van-action-bar-icon-font-size | _var(--van-font-size-xs)_ | - |
| --van-action-bar-icon-active-color | _var(--van-active-color)_ | - |
| --van-action-bar-icon-text-color | _var(--van-gray-7)_ | - |
| --van-action-bar-icon-background | _var(--van-background-light)_ | - |
| --van-action-bar-button-height | _40px_ | - |
| --van-action-bar-button-warning-color | _var(--van-gradient-orange)_ | - |
| --van-action-bar-button-danger-color | _var(--van-gradient-red)_ | - |

4
packages/vant/src/action-bar/index.less
View File

@ -1,5 +1,5 @@
:root {
--van-action-bar-background-color: var(--van-background-color-light);
--van-action-bar-background: var(--van-background-light);
--van-action-bar-height: 50px;
}
@ -12,5 +12,5 @@
align-items: center;
box-sizing: content-box;
height: var(--van-action-bar-height);
background: var(--van-action-bar-background-color);
background: var(--van-action-bar-background);
}

4
packages/vant/src/action-sheet/README.md
View File

@ -246,7 +246,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-action-sheet-description-color | _var(--van-text-color-secondary)_ | - |
| --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
| --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
| --van-action-sheet-item-background | _var(--van-background-light)_ | - |
| --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
| --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
| --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
@ -259,5 +259,5 @@ The component provides the following CSS variables, which can be used to customi
| --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
| --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
| --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
| --van-action-sheet-cancel-padding-color | _var(--van-background-color)_ | - |
| --van-action-sheet-cancel-padding-color | _var(--van-background)_ | - |
| --van-action-sheet-loading-icon-size | _22px_ | - |

4
packages/vant/src/action-sheet/README.zh-CN.md
View File

@ -258,7 +258,7 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
| --van-action-sheet-description-color | _var(--van-text-color-secondary)_ | - |
| --van-action-sheet-description-font-size | _var(--van-font-size-md)_ | - |
| --van-action-sheet-description-line-height | _var(--van-line-height-md)_ | - |
| --van-action-sheet-item-background | _var(--van-background-color-light)_ | - |
| --van-action-sheet-item-background | _var(--van-background-light)_ | - |
| --van-action-sheet-item-font-size | _var(--van-font-size-lg)_ | - |
| --van-action-sheet-item-line-height | _var(--van-line-height-lg)_ | - |
| --van-action-sheet-item-text-color | _var(--van-text-color)_ | - |
@ -271,5 +271,5 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
| --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
| --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
| --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
| --van-action-sheet-cancel-padding-color | _var(--van-background-color)_ | - |
| --van-action-sheet-cancel-padding-color | _var(--van-background)_ | - |
| --van-action-sheet-loading-icon-size | _22px_ | - |

6
packages/vant/src/action-sheet/index.less
View File

@ -7,7 +7,7 @@
--van-action-sheet-description-color: var(--van-text-color-secondary);
--van-action-sheet-description-font-size: var(--van-font-size-md);
--van-action-sheet-description-line-height: var(--van-line-height-md);
--van-action-sheet-item-background: var(--van-background-color-light);
--van-action-sheet-item-background: var(--van-background-light);
--van-action-sheet-item-font-size: var(--van-font-size-lg);
--van-action-sheet-item-line-height: var(--van-line-height-lg);
--van-action-sheet-item-text-color: var(--van-text-color);
@ -20,7 +20,7 @@
--van-action-sheet-close-icon-padding: 0 var(--van-padding-md);
--van-action-sheet-cancel-text-color: var(--van-gray-7);
--van-action-sheet-cancel-padding-top: var(--van-padding-xs);
--van-action-sheet-cancel-padding-color: var(--van-background-color);
--van-action-sheet-cancel-padding-color: var(--van-background);
--van-action-sheet-loading-icon-size: 22px;
}
@ -94,7 +94,7 @@
&__header {
flex-shrink: 0;
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-action-sheet-header-font-size);
line-height: var(--van-action-sheet-header-height);
text-align: center;

6
packages/vant/src/address-list/index.less
View File

@ -28,7 +28,7 @@
width: 100%;
padding-left: var(--van-padding-md);
padding-right: var(--van-padding-md);
background-color: var(--van-background-color-light);
background-color: var(--van-background-light);
}
&__add {
@ -46,8 +46,8 @@
.van-address-item {
padding: var(--van-address-list-item-padding);
background-color: var(--van-background-color-light);
border-radius: var(--van-border-radius-lg);
background-color: var(--van-background-light);
border-radius: var(--van-radius-lg);
&:not(:last-child) {
margin-bottom: var(--van-padding-sm);

8
packages/vant/src/badge/README.md
View File

@ -153,9 +153,9 @@ The component provides the following CSS variables, which can be used to customi
| --van-badge-color | _var(--van-white)_ | - |
| --van-badge-padding | _0 3px_ | - |
| --van-badge-font-size | _var(--van-font-size-sm)_ | - |
| --van-badge-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-badge-border-width | _var(--van-border-width-base)_ | - |
| --van-badge-background-color | _var(--van-danger-color)_ | - |
| --van-badge-font-weight | _var(--van-font-bold)_ | - |
| --van-badge-border-width | _var(--van-border-width)_ | - |
| --van-badge-background | _var(--van-danger-color)_ | - |
| --van-badge-dot-color | _var(--van-danger-color)_ | - |
| --van-badge-dot-size | _8px_ | - |
| --van-badge-font-family | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |
| --van-badge-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |

8
packages/vant/src/badge/README.zh-CN.md
View File

@ -161,9 +161,9 @@ import type { BadgeProps } from 'vant';
| --van-badge-color | _var(--van-white)_ | - |
| --van-badge-padding | _0 3px_ | - |
| --van-badge-font-size | _var(--van-font-size-sm)_ | - |
| --van-badge-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-badge-border-width | _var(--van-border-width-base)_ | - |
| --van-badge-background-color | _var(--van-danger-color)_ | - |
| --van-badge-font-weight | _var(--van-font-bold)_ | - |
| --van-badge-border-width | _var(--van-border-width)_ | - |
| --van-badge-background | _var(--van-danger-color)_ | - |
| --van-badge-dot-color | _var(--van-danger-color)_ | - |
| --van-badge-dot-size | _8px_ | - |
| --van-badge-font-family | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |
| --van-badge-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |

16
packages/vant/src/badge/index.less
View File

@ -3,12 +3,12 @@
--van-badge-color: var(--van-white);
--van-badge-padding: 0 3px;
--van-badge-font-size: var(--van-font-size-sm);
--van-badge-font-weight: var(--van-font-weight-bold);
--van-badge-border-width: var(--van-border-width-base);
--van-badge-background-color: var(--van-danger-color);
--van-badge-font-weight: var(--van-font-bold);
--van-badge-border-width: var(--van-border-width);
--van-badge-background: var(--van-danger-color);
--van-badge-dot-color: var(--van-danger-color);
--van-badge-dot-size: 8px;
--van-badge-font-family: -apple-system-font, helvetica neue, arial, sans-serif;
--van-badge-font: -apple-system-font, helvetica neue, arial, sans-serif;
}
.van-badge {
@ -19,12 +19,12 @@
color: var(--van-badge-color);
font-weight: var(--van-badge-font-weight);
font-size: var(--van-badge-font-size);
font-family: var(--van-badge-font-family);
font-family: var(--van-badge-font);
line-height: 1.2;
text-align: center;
background: var(--van-badge-background-color);
border: var(--van-badge-border-width) solid var(--van-background-color-light);
border-radius: var(--van-border-radius-max);
background: var(--van-badge-background);
border: var(--van-badge-border-width) solid var(--van-background-light);
border-radius: var(--van-radius-max);
&--fixed {
position: absolute;

18
packages/vant/src/button/README.md
View File

@ -184,24 +184,24 @@ The component provides the following CSS variables, which can be used to customi
| --van-button-default-line-height | _1.2_ | - |
| --van-button-default-font-size | _var(--van-font-size-lg)_ | - |
| --van-button-default-color | _var(--van-text-color)_ | - |
| --van-button-default-background-color | _var(--van-background-color-light)_ | - |
| --van-button-default-background | _var(--van-background-light)_ | - |
| --van-button-default-border-color | _var(--van-border-color)_ | - |
| --van-button-primary-color | _var(--van-white)_ | - |
| --van-button-primary-background-color | _var(--van-primary-color)_ | - |
| --van-button-primary-background | _var(--van-primary-color)_ | - |
| --van-button-primary-border-color | _var(--van-primary-color)_ | - |
| --van-button-success-color | _var(--van-white)_ | - |
| --van-button-success-background-color | _var(--van-success-color)_ | - |
| --van-button-success-background | _var(--van-success-color)_ | - |
| --van-button-success-border-color | _var(--van-success-color)_ | - |
| --van-button-danger-color | _var(--van-white)_ | - |
| --van-button-danger-background-color | _var(--van-danger-color)_ | - |
| --van-button-danger-background | _var(--van-danger-color)_ | - |
| --van-button-danger-border-color | _var(--van-danger-color)_ | - |
| --van-button-warning-color | _var(--van-white)_ | - |
| --van-button-warning-background-color | _var(--van-warning-color)_ | - |
| --van-button-warning-background | _var(--van-warning-color)_ | - |
| --van-button-warning-border-color | _var(--van-warning-color)_ | - |
| --van-button-border-width | _var(--van-border-width-base)_ | - |
| --van-button-border-radius | _var(--van-border-radius-sm)_ | - |
| --van-button-round-border-radius | _var(--van-border-radius-max)_ | - |
| --van-button-plain-background-color | _var(--van-white)_ | - |
| --van-button-border-width | _var(--van-border-width)_ | - |
| --van-button-radius | _var(--van-radius-sm)_ | - |
| --van-button-round-radius | _var(--van-radius-max)_ | - |
| --van-button-plain-background | _var(--van-white)_ | - |
| --van-button-disabled-opacity | _var(--van-disabled-opacity)_ | - |
| --van-button-icon-size | _1.2em_ | - |
| --van-button-loading-icon-size | _20px_ | - |

72
packages/vant/src/button/README.zh-CN.md
View File

@ -192,39 +192,39 @@ import type {
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-button-mini-height | _24px_ | - |
| --van-button-mini-padding | _0 var(--van-padding-base)_ | - |
| --van-button-mini-font-size | _var(--van-font-size-xs)_ | - |
| --van-button-small-height | _32px_ | - |
| --van-button-small-padding | _0 var(--van-padding-xs)_ | - |
| --van-button-small-font-size | _var(--van-font-size-sm)_ | - |
| --van-button-normal-font-size | _var(--van-font-size-md)_ | - |
| --van-button-normal-padding | _0 15px_ | - |
| --van-button-large-height | _50px_ | - |
| --van-button-default-height | _44px_ | - |
| --van-button-default-line-height | _1.2_ | - |
| --van-button-default-font-size | _var(--van-font-size-lg)_ | - |
| --van-button-default-color | _var(--van-text-color)_ | - |
| --van-button-default-background-color | _var(--van-background-color-light)_ | - |
| --van-button-default-border-color | _var(--van-border-color)_ | - |
| --van-button-primary-color | _var(--van-white)_ | - |
| --van-button-primary-background-color | _var(--van-primary-color)_ | - |
| --van-button-primary-border-color | _var(--van-primary-color)_ | - |
| --van-button-success-color | _var(--van-white)_ | - |
| --van-button-success-background-color | _var(--van-success-color)_ | - |
| --van-button-success-border-color | _var(--van-success-color)_ | - |
| --van-button-danger-color | _var(--van-white)_ | - |
| --van-button-danger-background-color | _var(--van-danger-color)_ | - |
| --van-button-danger-border-color | _var(--van-danger-color)_ | - |
| --van-button-warning-color | _var(--van-white)_ | - |
| --van-button-warning-background-color | _var(--van-orange)_ | - |
| --van-button-warning-border-color | _var(--van-orange)_ | - |
| --van-button-border-width | _var(--van-border-width-base)_ | - |
| --van-button-border-radius | _var(--van-border-radius-sm)_ | - |
| --van-button-round-border-radius | _var(--van-border-radius-max)_ | - |
| --van-button-plain-background-color | _var(--van-white)_ | - |
| --van-button-disabled-opacity | _var(--van-disabled-opacity)_ | - |
| --van-button-icon-size | _1.2em_ | - |
| --van-button-loading-icon-size | _20px_ | - |
| 名称 | 默认值 | 描述 |
| --------------------------------- | ----------------------------- | ---- |
| --van-button-mini-height | _24px_ | - |
| --van-button-mini-padding | _0 var(--van-padding-base)_ | - |
| --van-button-mini-font-size | _var(--van-font-size-xs)_ | - |
| --van-button-small-height | _32px_ | - |
| --van-button-small-padding | _0 var(--van-padding-xs)_ | - |
| --van-button-small-font-size | _var(--van-font-size-sm)_ | - |
| --van-button-normal-font-size | _var(--van-font-size-md)_ | - |
| --van-button-normal-padding | _0 15px_ | - |
| --van-button-large-height | _50px_ | - |
| --van-button-default-height | _44px_ | - |
| --van-button-default-line-height | _1.2_ | - |
| --van-button-default-font-size | _var(--van-font-size-lg)_ | - |
| --van-button-default-color | _var(--van-text-color)_ | - |
| --van-button-default-background | _var(--van-background-light)_ | - |
| --van-button-default-border-color | _var(--van-border-color)_ | - |
| --van-button-primary-color | _var(--van-white)_ | - |
| --van-button-primary-background | _var(--van-primary-color)_ | - |
| --van-button-primary-border-color | _var(--van-primary-color)_ | - |
| --van-button-success-color | _var(--van-white)_ | - |
| --van-button-success-background | _var(--van-success-color)_ | - |
| --van-button-success-border-color | _var(--van-success-color)_ | - |
| --van-button-danger-color | _var(--van-white)_ | - |
| --van-button-danger-background | _var(--van-danger-color)_ | - |
| --van-button-danger-border-color | _var(--van-danger-color)_ | - |
| --van-button-warning-color | _var(--van-white)_ | - |
| --van-button-warning-background | _var(--van-orange)_ | - |
| --van-button-warning-border-color | _var(--van-orange)_ | - |
| --van-button-border-width | _var(--van-border-width)_ | - |
| --van-button-radius | _var(--van-radius-sm)_ | - |
| --van-button-round-radius | _var(--van-radius-max)_ | - |
| --van-button-plain-background | _var(--van-white)_ | - |
| --van-button-disabled-opacity | _var(--van-disabled-opacity)_ | - |
| --van-button-icon-size | _1.2em_ | - |
| --van-button-loading-icon-size | _20px_ | - |

48
packages/vant/src/button/index.less
View File

@ -12,24 +12,24 @@
--van-button-default-line-height: 1.2;
--van-button-default-font-size: var(--van-font-size-lg);
--van-button-default-color: var(--van-text-color);
--van-button-default-background-color: var(--van-background-color-light);
--van-button-default-background: var(--van-background-light);
--van-button-default-border-color: var(--van-border-color);
--van-button-primary-color: var(--van-white);
--van-button-primary-background-color: var(--van-primary-color);
--van-button-primary-background: var(--van-primary-color);
--van-button-primary-border-color: var(--van-primary-color);
--van-button-success-color: var(--van-white);
--van-button-success-background-color: var(--van-success-color);
--van-button-success-background: var(--van-success-color);
--van-button-success-border-color: var(--van-success-color);
--van-button-danger-color: var(--van-white);
--van-button-danger-background-color: var(--van-danger-color);
--van-button-danger-background: var(--van-danger-color);
--van-button-danger-border-color: var(--van-danger-color);
--van-button-warning-color: var(--van-white);
--van-button-warning-background-color: var(--van-warning-color);
--van-button-warning-background: var(--van-warning-color);
--van-button-warning-border-color: var(--van-warning-color);
--van-button-border-width: var(--van-border-width-base);
--van-button-border-radius: var(--van-border-radius-sm);
--van-button-round-border-radius: var(--van-border-radius-max);
--van-button-plain-background-color: var(--van-white);
--van-button-border-width: var(--van-border-width);
--van-button-radius: var(--van-radius-sm);
--van-button-round-radius: var(--van-radius-max);
--van-button-plain-background: var(--van-white);
--van-button-disabled-opacity: var(--van-disabled-opacity);
--van-button-icon-size: 1.2em;
--van-button-loading-icon-size: 20px;
@ -45,9 +45,9 @@
font-size: var(--van-button-default-font-size);
line-height: var(--van-button-default-line-height);
text-align: center;
border-radius: var(--van-button-border-radius);
border-radius: var(--van-button-radius);
cursor: pointer;
transition: opacity var(--van-animation-duration-fast);
transition: opacity var(--van-duration-fast);
-webkit-appearance: none;
&::before {
@ -78,56 +78,56 @@
&--default {
color: var(--van-button-default-color);
background: var(--van-button-default-background-color);
background: var(--van-button-default-background);
border: var(--van-button-border-width) solid
var(--van-button-default-border-color);
}
&--primary {
color: var(--van-button-primary-color);
background: var(--van-button-primary-background-color);
background: var(--van-button-primary-background);
border: var(--van-button-border-width) solid
var(--van-button-primary-border-color);
}
&--success {
color: var(--van-button-success-color);
background: var(--van-button-success-background-color);
background: var(--van-button-success-background);
border: var(--van-button-border-width) solid
var(--van-button-success-border-color);
}
&--danger {
color: var(--van-button-danger-color);
background: var(--van-button-danger-background-color);
background: var(--van-button-danger-background);
border: var(--van-button-border-width) solid
var(--van-button-danger-border-color);
}
&--warning {
color: var(--van-button-warning-color);
background: var(--van-button-warning-background-color);
background: var(--van-button-warning-background);
border: var(--van-button-border-width) solid
var(--van-button-warning-border-color);
}
&--plain {
background: var(--van-button-plain-background-color);
background: var(--van-button-plain-background);
&.van-button--primary {
color: var(--van-button-primary-background-color);
color: var(--van-button-primary-background);
}
&.van-button--success {
color: var(--van-button-success-background-color);
color: var(--van-button-success-background);
}
&.van-button--danger {
color: var(--van-button-danger-background-color);
color: var(--van-button-danger-background);
}
&.van-button--warning {
color: var(--van-button-warning-background-color);
color: var(--van-button-warning-background);
}
}
@ -183,7 +183,7 @@
}
&--round {
border-radius: var(--van-button-round-border-radius);
border-radius: var(--van-button-round-radius);
}
&--square {
@ -222,11 +222,11 @@
&::after {
border-color: inherit;
border-radius: calc(var(--van-button-border-radius) * 2);
border-radius: calc(var(--van-button-radius) * 2);
}
&.van-button--round::after {
border-radius: var(--van-button-round-border-radius);
border-radius: var(--van-button-round-radius);
}
&.van-button--square::after {

8
packages/vant/src/calendar/README.md
View File

@ -381,9 +381,9 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-calendar-background-color | _var(--van-background-color-light)_ | - |
| --van-calendar-background | _var(--van-background-light)_ | - |
| --van-calendar-popup-height | _80%_ | - |
| --van-calendar-header-box-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
| --van-calendar-header-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
| --van-calendar-header-title-height | _44px_ | - |
| --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - |
@ -395,14 +395,14 @@ The component provides the following CSS variables, which can be used to customi
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-edge-background | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-background-opacity | _0.1_ | - |
| --van-calendar-selected-day-size | _54px_ | - |
| --van-calendar-selected-day-color | _var(--van-white)_ | - |
| --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
| --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
| --van-calendar-selected-day-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-selected-day-background | _var(--van-danger-color)_ | - |
| --van-calendar-day-disabled-color | _var(--van-text-color-tertiary)_ | - |
| --van-calendar-confirm-button-height | _36px_ | - |
| --van-calendar-confirm-button-margin | _7px 0_ | - |

8
packages/vant/src/calendar/README.zh-CN.md
View File

@ -387,9 +387,9 @@ calendarRef.value?.reset();
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-calendar-background-color | _var(--van-background-color-light)_ | - |
| --van-calendar-background | _var(--van-background-light)_ | - |
| --van-calendar-popup-height | _80%_ | - |
| --van-calendar-header-box-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
| --van-calendar-header-shadow | _0 2px 10px rgba(125, 126, 128, 0.16)_ | - |
| --van-calendar-header-title-height | _44px_ | - |
| --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - |
@ -401,14 +401,14 @@ calendarRef.value?.reset();
| --van-calendar-day-height | _64px_ | - |
| --van-calendar-day-font-size | _var(--van-font-size-lg)_ | - |
| --van-calendar-range-edge-color | _var(--van-white)_ | - |
| --van-calendar-range-edge-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-edge-background | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-color | _var(--van-danger-color)_ | - |
| --van-calendar-range-middle-background-opacity | _0.1_ | - |
| --van-calendar-selected-day-size | _54px_ | - |
| --van-calendar-selected-day-color | _var(--van-white)_ | - |
| --van-calendar-info-font-size | _var(--van-font-size-xs)_ | - |
| --van-calendar-info-line-height | _var(--van-line-height-xs)_ | - |
| --van-calendar-selected-day-background-color | _var(--van-danger-color)_ | - |
| --van-calendar-selected-day-background | _var(--van-danger-color)_ | - |
| --van-calendar-day-disabled-color | _var(--van-text-color-tertiary)_ | - |
| --van-calendar-confirm-button-height | _36px_ | - |
| --van-calendar-confirm-button-margin | _7px 0_ | - |

26
packages/vant/src/calendar/index.less
View File

@ -1,7 +1,7 @@
:root {
--van-calendar-background-color: var(--van-background-color-light);
--van-calendar-background: var(--van-background-light);
--van-calendar-popup-height: 80%;
--van-calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
--van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
--van-calendar-header-title-height: 44px;
--van-calendar-header-title-font-size: var(--van-font-size-lg);
--van-calendar-header-subtitle-font-size: var(--van-font-size-md);
@ -13,14 +13,14 @@
--van-calendar-day-height: 64px;
--van-calendar-day-font-size: var(--van-font-size-lg);
--van-calendar-range-edge-color: var(--van-white);
--van-calendar-range-edge-background-color: var(--van-danger-color);
--van-calendar-range-edge-background: var(--van-danger-color);
--van-calendar-range-middle-color: var(--van-danger-color);
--van-calendar-range-middle-background-opacity: 0.1;
--van-calendar-selected-day-size: 54px;
--van-calendar-selected-day-color: var(--van-white);
--van-calendar-info-font-size: var(--van-font-size-xs);
--van-calendar-info-line-height: var(--van-line-height-xs);
--van-calendar-selected-day-background-color: var(--van-danger-color);
--van-calendar-selected-day-background: var(--van-danger-color);
--van-calendar-day-disabled-color: var(--van-text-color-tertiary);
--van-calendar-confirm-button-height: 36px;
--van-calendar-confirm-button-margin: 7px 0;
@ -30,7 +30,7 @@
display: flex;
flex-direction: column;
height: 100%;
background: var(--van-calendar-background-color);
background: var(--van-calendar-background);
&__popup {
&.van-popup--top,
@ -50,14 +50,14 @@
&__header {
flex-shrink: 0;
box-shadow: var(--van-calendar-header-box-shadow);
box-shadow: var(--van-calendar-header-shadow);
}
&__month-title,
&__header-title,
&__header-subtitle {
height: var(--van-calendar-header-title-height);
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
line-height: var(--van-calendar-header-title-height);
text-align: center;
}
@ -130,20 +130,20 @@
&--multiple-middle,
&--multiple-selected {
color: var(--van-calendar-range-edge-color);
background: var(--van-calendar-range-edge-background-color);
background: var(--van-calendar-range-edge-background);
}
&--start {
border-radius: var(--van-border-radius-md) 0 0 var(--van-border-radius-md);
border-radius: var(--van-radius-md) 0 0 var(--van-radius-md);
}
&--end {
border-radius: 0 var(--van-border-radius-md) var(--van-border-radius-md) 0;
border-radius: 0 var(--van-radius-md) var(--van-radius-md) 0;
}
&--start-end,
&--multiple-selected {
border-radius: var(--van-border-radius-md);
border-radius: var(--van-radius-md);
}
&--middle {
@ -192,8 +192,8 @@
width: var(--van-calendar-selected-day-size);
height: var(--van-calendar-selected-day-size);
color: var(--van-calendar-selected-day-color);
background: var(--van-calendar-selected-day-background-color);
border-radius: var(--van-border-radius-md);
background: var(--van-calendar-selected-day-background);
border-radius: var(--van-radius-md);
}
&__footer {

6
packages/vant/src/card/README.md
View File

@ -127,9 +127,9 @@ The component provides the following CSS variables, which can be used to customi
| --van-card-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-card-font-size | _var(--van-font-size-sm)_ | - |
| --van-card-text-color | _var(--van-text-color)_ | - |
| --van-card-background-color | _var(--van-gray-1)_ | - |
| --van-card-background | _var(--van-gray-1)_ | - |
| --van-card-thumb-size | _88px_ | - |
| --van-card-thumb-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-card-thumb-radius | _var(--van-radius-lg)_ | - |
| --van-card-title-line-height | _16px_ | - |
| --van-card-desc-color | _var(--van-gray-7)_ | - |
| --van-card-desc-line-height | _var(--van-line-height-md)_ | - |
@ -139,4 +139,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-card-origin-price-font-size | _var(--van-font-size-xs)_ | - |
| --van-card-price-font-size | _var(--van-font-size-sm)_ | - |
| --van-card-price-integer-font-size | _var(--van-font-size-lg)_ | - |
| --van-card-price-font-family | _var(--van-price-integer-font-family)_ | - |
| --van-card-price-font | _var(--van-price-font)_ | - |

6
packages/vant/src/card/README.zh-CN.md
View File

@ -129,9 +129,9 @@ import type { CardProps } from 'vant';
| --van-card-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-card-font-size | _var(--van-font-size-sm)_ | - |
| --van-card-text-color | _var(--van-text-color)_ | - |
| --van-card-background-color | _var(--van-gray-1)_ | - |
| --van-card-background | _var(--van-gray-1)_ | - |
| --van-card-thumb-size | _88px_ | - |
| --van-card-thumb-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-card-thumb-radius | _var(--van-radius-lg)_ | - |
| --van-card-title-line-height | _16px_ | - |
| --van-card-desc-color | _var(--van-gray-7)_ | - |
| --van-card-desc-line-height | _var(--van-line-height-md)_ | - |
@ -141,4 +141,4 @@ import type { CardProps } from 'vant';
| --van-card-origin-price-font-size | _var(--van-font-size-xs)_ | - |
| --van-card-price-font-size | _var(--van-font-size-sm)_ | - |
| --van-card-price-integer-font-size | _var(--van-font-size-lg)_ | - |
| --van-card-price-font-family | _var(--van-price-integer-font-family)_ | - |
| --van-card-price-font | _var(--van-price-font)_ | - |

18
packages/vant/src/card/index.less
View File

@ -2,9 +2,9 @@
--van-card-padding: var(--van-padding-xs) var(--van-padding-md);
--van-card-font-size: var(--van-font-size-sm);
--van-card-text-color: var(--van-text-color);
--van-card-background-color: var(--van-gray-1);
--van-card-background: var(--van-gray-1);
--van-card-thumb-size: 88px;
--van-card-thumb-border-radius: var(--van-border-radius-lg);
--van-card-thumb-radius: var(--van-radius-lg);
--van-card-title-line-height: 16px;
--van-card-desc-color: var(--van-gray-7);
--van-card-desc-line-height: var(--van-line-height-md);
@ -14,7 +14,7 @@
--van-card-origin-price-font-size: var(--van-font-size-xs);
--van-card-price-font-size: var(--van-font-size-sm);
--van-card-price-integer-font-size: var(--van-font-size-lg);
--van-card-price-font-family: var(--van-price-integer-font-family);
--van-card-price-font: var(--van-price-font);
}
.van-card {
@ -23,7 +23,7 @@
padding: var(--van-card-padding);
color: var(--van-card-text-color);
font-size: var(--van-card-font-size);
background: var(--van-card-background-color);
background: var(--van-card-background);
&:not(:first-child) {
margin-top: var(--van-padding-xs);
@ -41,7 +41,7 @@
margin-right: var(--van-padding-xs);
img {
border-radius: var(--van-card-thumb-border-radius);
border-radius: var(--van-card-thumb-radius);
}
}
@ -66,7 +66,7 @@
&__title {
max-height: 32px;
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
line-height: var(--van-card-title-line-height);
}
@ -83,17 +83,17 @@
&__price {
display: inline-block;
color: var(--van-card-price-color);
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-card-price-font-size);
}
&__price-integer {
font-size: var(--van-card-price-integer-font-size);
font-family: var(--van-card-price-font-family);
font-family: var(--van-card-price-font);
}
&__price-decimal {
font-family: var(--van-card-price-font-family);
font-family: var(--van-card-price-font);
}
&__origin-price {

6
packages/vant/src/cascader/index.less
View File

@ -24,7 +24,7 @@
}
&__title {
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-cascader-title-font-size);
line-height: var(--van-cascader-title-line-height);
}
@ -52,7 +52,7 @@
&__tab {
color: var(--van-cascader-tab-color);
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
&--unselected {
color: var(--van-cascader-unselected-tab-color);
@ -75,7 +75,7 @@
&--selected {
color: var(--van-cascader-active-color);
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
}
&--disabled {

8
packages/vant/src/cell-group/index.less
View File

@ -1,21 +1,21 @@
:root {
--van-cell-group-background-color: var(--van-background-color-light);
--van-cell-group-background: var(--van-background-light);
--van-cell-group-title-color: var(--van-text-color-secondary);
--van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);
--van-cell-group-title-font-size: var(--van-font-size-md);
--van-cell-group-title-line-height: 16px;
--van-cell-group-inset-padding: 0 var(--van-padding-md);
--van-cell-group-inset-border-radius: var(--van-border-radius-lg);
--van-cell-group-inset-radius: var(--van-radius-lg);
--van-cell-group-inset-title-padding: var(--van-padding-md)
var(--van-padding-md);
}
.van-cell-group {
background: var(--van-cell-group-background-color);
background: var(--van-cell-group-background);
&--inset {
margin: var(--van-cell-group-inset-padding);
border-radius: var(--van-cell-group-inset-border-radius);
border-radius: var(--van-cell-group-inset-radius);
overflow: hidden;
}

6
packages/vant/src/cell/README.md
View File

@ -213,7 +213,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-cell-vertical-padding | _10px_ | - |
| --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
| --van-cell-text-color | _var(--van-text-color)_ | - |
| --van-cell-background-color | _var(--van-background-color-light)_ | - |
| --van-cell-background | _var(--van-background-light)_ | - |
| --van-cell-border-color | _var(--van-border-color)_ | - |
| --van-cell-active-color | _var(--van-active-color)_ | - |
| --van-cell-required-color | _var(--van-danger-color)_ | - |
@ -227,11 +227,11 @@ The component provides the following CSS variables, which can be used to customi
| --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
| --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-background-color | _var(--van-background-color-light)_ | - |
| --van-cell-group-background | _var(--van-background-light)_ | - |
| --van-cell-group-title-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-title-line-height | _16px_ | - |
| --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - |
| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-cell-group-inset-radius | _var(--van-radius-lg)_ | - |
| --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - |

6
packages/vant/src/cell/README.zh-CN.md
View File

@ -218,7 +218,7 @@ import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant';
| --van-cell-vertical-padding | _10px_ | - |
| --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
| --van-cell-text-color | _var(--van-text-color)_ | - |
| --van-cell-background-color | _var(--van-background-color-light)_ | - |
| --van-cell-background | _var(--van-background-light)_ | - |
| --van-cell-border-color | _var(--van-border-color)_ | - |
| --van-cell-active-color | _var(--van-active-color)_ | - |
| --van-cell-required-color | _var(--van-danger-color)_ | - |
@ -232,11 +232,11 @@ import type { CellProps, CellGroupProps, CellArrowDirection } from 'vant';
| --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
| --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-background-color | _var(--van-background-color-light)_ | - |
| --van-cell-group-background | _var(--van-background-light)_ | - |
| --van-cell-group-title-color | _var(--van-text-color-secondary)_ | - |
| --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-title-line-height | _16px_ | - |
| --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - |
| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-cell-group-inset-radius | _var(--van-radius-lg)_ | - |
| --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - |

4
packages/vant/src/cell/index.less
View File

@ -6,7 +6,7 @@
--van-cell-vertical-padding: 10px;
--van-cell-horizontal-padding: var(--van-padding-md);
--van-cell-text-color: var(--van-text-color);
--van-cell-background-color: var(--van-background-color-light);
--van-cell-background: var(--van-background-light);
--van-cell-border-color: var(--van-border-color);
--van-cell-active-color: var(--van-active-color);
--van-cell-required-color: var(--van-danger-color);
@ -32,7 +32,7 @@
color: var(--van-cell-text-color);
font-size: var(--van-cell-font-size);
line-height: var(--van-cell-line-height);
background: var(--van-cell-background-color);
background: var(--van-cell-background);
&::after {
.hairline-bottom(var(--van-cell-border-color), var(--van-padding-md), var(--van-padding-md));

4
packages/vant/src/checkbox/README.md
View File

@ -367,10 +367,10 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- | --- |
| --van-checkbox-size | _20px_ | - |
| --van-checkbox-border-color | _var(--van-gray-5)_ | - |
| --van-checkbox-transition-duration | _var(--van-animation-duration-fast)_ | - |
| --van-checkbox-duration | _var(--van-duration-fast)_ | - |
| --van-checkbox-label-margin | _var(--van-padding-xs)_ | - |
| --van-checkbox-label-color | _var(--van-text-color)_ | - |
| --van-checkbox-checked-icon-color | _var(--van-primary-color)_ | - |
| --van-checkbox-disabled-icon-color | _var(--van-gray-5)_ | - |
| --van-checkbox-disabled-label-color | _var(--van-text-color-tertiary)_ | - |
| --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - |
| --van-checkbox-disabled-background | _var(--van-border-color)_ | - |

4
packages/vant/src/checkbox/README.zh-CN.md
View File

@ -385,10 +385,10 @@ checkboxGroupRef.value?.toggleAll();
| --- | --- | --- |
| --van-checkbox-size | _20px_ | - |
| --van-checkbox-border-color | _var(--van-gray-5)_ | - |
| --van-checkbox-transition-duration | _var(--van-animation-duration-fast)_ | - |
| --van-checkbox-duration | _var(--van-duration-fast)_ | - |
| --van-checkbox-label-margin | _var(--van-padding-xs)_ | - |
| --van-checkbox-label-color | _var(--van-text-color)_ | - |
| --van-checkbox-checked-icon-color | _var(--van-primary-color)_ | - |
| --van-checkbox-disabled-icon-color | _var(--van-gray-5)_ | - |
| --van-checkbox-disabled-label-color | _var(--van-text-color-tertiary)_ | - |
| --van-checkbox-disabled-background-color | _var(--van-border-color)_ | - |
| --van-checkbox-disabled-background | _var(--van-border-color)_ | - |

8
packages/vant/src/checkbox/index.less
View File

@ -1,13 +1,13 @@
:root {
--van-checkbox-size: 20px;
--van-checkbox-border-color: var(--van-gray-5);
--van-checkbox-transition-duration: var(--van-animation-duration-fast);
--van-checkbox-duration: var(--van-duration-fast);
--van-checkbox-label-margin: var(--van-padding-xs);
--van-checkbox-label-color: var(--van-text-color);
--van-checkbox-checked-icon-color: var(--van-primary-color);
--van-checkbox-disabled-icon-color: var(--van-gray-5);
--van-checkbox-disabled-label-color: var(--van-text-color-tertiary);
--van-checkbox-disabled-background-color: var(--van-border-color);
--van-checkbox-disabled-background: var(--van-border-color);
}
.van-checkbox {
@ -46,7 +46,7 @@
line-height: 1.25;
text-align: center;
border: 1px solid var(--van-checkbox-border-color);
transition-duration: var(--van-checkbox-transition-duration);
transition-duration: var(--van-checkbox-duration);
transition-property: color, border-color, background-color;
}
@ -68,7 +68,7 @@
cursor: not-allowed;
.van-icon {
background-color: var(--van-checkbox-disabled-background-color);
background-color: var(--van-checkbox-disabled-background);
border-color: var(--van-checkbox-disabled-icon-color);
}
}

18
packages/vant/src/circle/README.md
View File

@ -181,12 +181,12 @@ import type { CircleProps, CircleStartPosition } from 'vant';
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ----------------------------- | ----------------------------- | ----------- |
| --van-circle-size | _100px_ | - |
| --van-circle-color | _var(--van-primary-color)_ | - |
| --van-circle-layer-color | _var(--van-white)_ | - |
| --van-circle-text-color | _var(--van-text-color)_ | - |
| --van-circle-text-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-circle-text-font-size | _var(--van-font-size-md)_ | - |
| --van-circle-text-line-height | _var(--van-line-height-md)_ | - |
| Name | Default Value | Description |
| ----------------------------- | --------------------------- | ----------- |
| --van-circle-size | _100px_ | - |
| --van-circle-color | _var(--van-primary-color)_ | - |
| --van-circle-layer-color | _var(--van-white)_ | - |
| --van-circle-text-color | _var(--van-text-color)_ | - |
| --van-circle-text-font-weight | _var(--van-font-bold)_ | - |
| --van-circle-text-font-size | _var(--van-font-size-md)_ | - |
| --van-circle-text-line-height | _var(--van-line-height-md)_ | - |

18
packages/vant/src/circle/README.zh-CN.md
View File

@ -195,12 +195,12 @@ import type { CircleProps, CircleStartPosition } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------- | ----------------------------- | ---- |
| --van-circle-size | _100px_ | - |
| --van-circle-color | _var(--van-primary-color)_ | - |
| --van-circle-layer-color | _var(--van-white)_ | - |
| --van-circle-text-color | _var(--van-text-color)_ | - |
| --van-circle-text-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-circle-text-font-size | _var(--van-font-size-md)_ | - |
| --van-circle-text-line-height | _var(--van-line-height-md)_ | - |
| 名称 | 默认值 | 描述 |
| ----------------------------- | --------------------------- | ---- |
| --van-circle-size | _100px_ | - |
| --van-circle-color | _var(--van-primary-color)_ | - |
| --van-circle-layer-color | _var(--van-white)_ | - |
| --van-circle-text-color | _var(--van-text-color)_ | - |
| --van-circle-text-font-weight | _var(--van-font-bold)_ | - |
| --van-circle-text-font-size | _var(--van-font-size-md)_ | - |
| --van-circle-text-line-height | _var(--van-line-height-md)_ | - |

2
packages/vant/src/circle/index.less
View File

@ -3,7 +3,7 @@
--van-circle-color: var(--van-primary-color);
--van-circle-layer-color: var(--van-white);
--van-circle-text-color: var(--van-text-color);
--van-circle-text-font-weight: var(--van-font-weight-bold);
--van-circle-text-font-weight: var(--van-font-bold);
--van-circle-text-font-size: var(--van-font-size-md);
--van-circle-text-line-height: var(--van-line-height-md);
}

12
packages/vant/src/collapse-item/index.less
View File

@ -1,15 +1,13 @@
@import '../style/mixins/hairline';
:root {
--van-collapse-item-transition-duration: var(--van-animation-duration-base);
--van-collapse-item-duration: var(--van-duration-base);
--van-collapse-item-content-padding: var(--van-padding-sm)
var(--van-padding-md);
--van-collapse-item-content-font-size: var(--van-font-size-md);
--van-collapse-item-content-line-height: 1.5;
--van-collapse-item-content-text-color: var(--van-text-color-secondary);
--van-collapse-item-content-background-color: var(
--van-background-color-light
);
--van-collapse-item-content-background: var(--van-background-light);
--van-collapse-item-title-disabled-color: var(--van-text-color-tertiary);
}
@ -27,7 +25,7 @@
// using translateZ to fix safari rendering issues
// see: https://github.com/youzan/vant/issues/8608
transform: rotate(90deg) translateZ(0);
transition: transform var(--van-collapse-item-transition-duration);
transition: transform var(--van-collapse-item-duration);
}
&::after {
@ -63,7 +61,7 @@
&__wrapper {
overflow: hidden;
transition: height var(--van-collapse-item-transition-duration) ease-in-out;
transition: height var(--van-collapse-item-duration) ease-in-out;
will-change: height;
}
@ -72,6 +70,6 @@
color: var(--van-collapse-item-content-text-color);
font-size: var(--van-collapse-item-content-font-size);
line-height: var(--van-collapse-item-content-line-height);
background: var(--van-collapse-item-content-background-color);
background: var(--van-collapse-item-content-background);
}
}

4
packages/vant/src/collapse/README.md
View File

@ -192,10 +192,10 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-collapse-item-transition-duration | _var(--van-animation-duration-base)_ | - |
| --van-collapse-item-duration | _var(--van-duration-base)_ | - |
| --van-collapse-item-content-padding | _var(--van-padding-sm) var(--van-padding-md)_ | - |
| --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
| --van-collapse-item-content-line-height | _1.5_ | - |
| --van-collapse-item-content-text-color | _var(--van-text-color-secondary)_ | - |
| --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - |
| --van-collapse-item-content-background | _var(--van-background-light)_ | - |
| --van-collapse-item-title-disabled-color | _var(--van-text-color-tertiary)_ | - |

4
packages/vant/src/collapse/README.zh-CN.md
View File

@ -190,10 +190,10 @@ collapseItemRef.value?.toggle();
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-collapse-item-transition-duration | _var(--van-animation-duration-base)_ | - |
| --van-collapse-item-duration | _var(--van-duration-base)_ | - |
| --van-collapse-item-content-padding | _var(--van-padding-sm) var(--van-padding-md)_ | - |
| --van-collapse-item-content-font-size | _var(--van-font-size-md)_ | - |
| --van-collapse-item-content-line-height | _1.5_ | - |
| --van-collapse-item-content-text-color | _var(--van-text-color-secondary)_ | - |
| --van-collapse-item-content-background-color | _var(--van-background-color-light)_ | - |
| --van-collapse-item-content-background | _var(--van-background-light)_ | - |
| --van-collapse-item-title-disabled-color | _var(--van-text-color-tertiary)_ | - |

41
packages/vant/src/config-provider/README.md
View File

@ -29,7 +29,7 @@ Looking at the style of the Button component, you can see that the following var
```css
.van-button--primary {
color: var(--van-button-primary-color);
background-color: var(--van-button-primary-background-color);
background-color: var(--van-button-primary-background);
}
```
@ -40,7 +40,7 @@ The default values of these variables are defined on the `root` node:
--van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
--van-button-primary-background-color: var(--van-primary-color);
--van-button-primary-background: var(--van-primary-color);
}
```
@ -53,7 +53,7 @@ You can directly override these CSS variables in the code, and the style of the
```css
/* the Primary Button will turn red */
:root {
--van-button-primary-background-color: red;
--van-button-primary-background: red;
}
```
@ -158,12 +158,12 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
--van-text-color: var(--van-gray-8);
--van-text-color-secondary: var(--van-gray-6);
--van-text-color-tertiary: var(--van-gray-5);
--van-text-link-color: #576b95;
--van-link-color: #576b95;
--van-active-color: var(--van-gray-2);
--van-active-opacity: 0.6;
--van-disabled-opacity: 0.5;
--van-background-color: var(--van-gray-1);
--van-background-color-light: var(--van-white);
--van-background: var(--van-gray-1);
--van-background-light: var(--van-white);
// Padding
--van-padding-base: 4px;
@ -178,30 +178,29 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
--van-font-size-sm: 12px;
--van-font-size-md: 14px;
--van-font-size-lg: 16px;
--van-font-weight-bold: 500;
--van-font-bold: 500;
--van-line-height-xs: 14px;
--van-line-height-sm: 18px;
--van-line-height-md: 20px;
--van-line-height-lg: 22px;
--van-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
--van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue,
Arial, sans-serif;
--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
sans-serif;
--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
// Animation
--van-animation-duration-base: 0.3s;
--van-animation-duration-fast: 0.2s;
--van-animation-timing-function-enter: ease-out;
--van-animation-timing-function-leave: ease-in;
--van-duration-base: 0.3s;
--van-duration-fast: 0.2s;
--van-ease-out: ease-out;
--van-ease-in: ease-in;
// Border
--van-border-color: var(--van-gray-3);
--van-border-width-base: 1px;
--van-border-radius-sm: 2px;
--van-border-radius-md: 4px;
--van-border-radius-lg: 8px;
--van-border-radius-max: 999px;
--van-border-width: 1px;
--van-radius-sm: 2px;
--van-radius-md: 4px;
--van-radius-lg: 8px;
--van-radius-max: 999px;
```
## API

41
packages/vant/src/config-provider/README.zh-CN.md
View File

@ -29,7 +29,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
```css
.van-button--primary {
color: var(--van-button-primary-color);
background-color: var(--van-button-primary-background-color);
background-color: var(--van-button-primary-background);
}
```
@ -40,7 +40,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
--van-white: #fff;
--van-blue: #1989fa;
--van-button-primary-color: var(--van-white);
--van-button-primary-background-color: var(--van-primary-color);
--van-button-primary-background: var(--van-primary-color);
}
```
@ -53,7 +53,7 @@ Vant 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs
```css
/* 添加这段样式后，Primary Button 会变成红色 */
:root {
--van-button-primary-background-color: red;
--van-button-primary-background: red;
}
```
@ -160,12 +160,12 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
--van-text-color: var(--van-gray-8);
--van-text-color-secondary: var(--van-gray-6);
--van-text-color-tertiary: var(--van-gray-5);
--van-text-link-color: #576b95;
--van-link-color: #576b95;
--van-active-color: var(--van-gray-2);
--van-active-opacity: 0.6;
--van-disabled-opacity: 0.5;
--van-background-color: var(--van-gray-1);
--van-background-color-light: var(--van-white);
--van-background: var(--van-gray-1);
--van-background-light: var(--van-white);
// Padding
--van-padding-base: 4px;
@ -180,30 +180,29 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
--van-font-size-sm: 12px;
--van-font-size-md: 14px;
--van-font-size-lg: 16px;
--van-font-weight-bold: 500;
--van-font-bold: 500;
--van-line-height-xs: 14px;
--van-line-height-sm: 18px;
--van-line-height-md: 20px;
--van-line-height-lg: 22px;
--van-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
--van-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue,
Arial, sans-serif;
--van-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
sans-serif;
--van-price-font: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
// Animation
--van-animation-duration-base: 0.3s;
--van-animation-duration-fast: 0.2s;
--van-animation-timing-function-enter: ease-out;
--van-animation-timing-function-leave: ease-in;
--van-duration-base: 0.3s;
--van-duration-fast: 0.2s;
--van-ease-out: ease-out;
--van-ease-in: ease-in;
// Border
--van-border-color: var(--van-gray-3);
--van-border-width-base: 1px;
--van-border-radius-sm: 2px;
--van-border-radius-md: 4px;
--van-border-radius-lg: 8px;
--van-border-radius-max: 999px;
--van-border-width: 1px;
--van-radius-sm: 2px;
--van-radius-md: 4px;
--van-radius-lg: 8px;
--van-radius-max: 999px;
```
你可以在各个组件文档底部的表格中查看组件变量。

2
packages/vant/src/contact-edit/README.md
View File

@ -94,7 +94,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-contact-edit-padding | _var(--van-padding-md)_ | - |
| --van-contact-edit-fields-radius | _var(--van-border-radius-md)_ | - |
| --van-contact-edit-fields-radius | _var(--van-radius-md)_ | - |
| --van-contact-edit-buttons-padding | _var(--van-padding-xl) 0_ | - |
| --van-contact-edit-button-margin-bottom | _var(--van-padding-sm)_ | - |
| --van-contact-edit-button-font-size | _var(--van-font-size-lg)_ | - |

16
packages/vant/src/contact-edit/README.zh-CN.md
View File

@ -91,11 +91,11 @@ import type { ContactEditInfo, ContactEditProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-contact-edit-padding | _var(--van-padding-md)_ | - |
| --van-contact-edit-fields-radius | _var(--van-border-radius-md)_ | - |
| --van-contact-edit-buttons-padding | _var(--van-padding-xl) 0_ | - |
| --van-contact-edit-button-margin-bottom | _var(--van-padding-sm)_ | - |
| --van-contact-edit-button-font-size | _var(--van-font-size-lg)_ | - |
| --van-contact-edit-field-label-width | _4.1em_ | - |
| 名称 | 默认值 | 描述 |
| --------------------------------------- | ------------------------- | ---- |
| --van-contact-edit-padding | _var(--van-padding-md)_ | - |
| --van-contact-edit-fields-radius | _var(--van-radius-md)_ | - |
| --van-contact-edit-buttons-padding | _var(--van-padding-xl) 0_ | - |
| --van-contact-edit-button-margin-bottom | _var(--van-padding-sm)_ | - |
| --van-contact-edit-button-font-size | _var(--van-font-size-lg)_ | - |
| --van-contact-edit-field-label-width | _4.1em_ | - |

2
packages/vant/src/contact-edit/index.less
View File

@ -1,6 +1,6 @@
:root {
--van-contact-edit-padding: var(--van-padding-md);
--van-contact-edit-fields-radius: var(--van-border-radius-md);
--van-contact-edit-fields-radius: var(--van-radius-md);
--van-contact-edit-buttons-padding: var(--van-padding-xl) 0;
--van-contact-edit-button-margin-bottom: var(--van-padding-sm);
--van-contact-edit-button-font-size: var(--van-font-size-lg);

2
packages/vant/src/contact-list/index.less
View File

@ -55,7 +55,7 @@
z-index: var(--van-contact-list-add-button-z-index);
padding-left: var(--van-padding-md);
padding-right: var(--van-padding-md);
background-color: var(--van-background-color-light);
background-color: var(--van-background-light);
}
&__add {

10
packages/vant/src/coupon-list/README.md
View File

@ -169,10 +169,10 @@ The component provides the following CSS variables, which can be used to customi
| --van-coupon-content-height | _84px_ | - |
| --van-coupon-content-padding | _14px 0_ | - |
| --van-coupon-content-text-color | _var(--van-text-color)_ | - |
| --van-coupon-background-color | _var(--van-background-color-light)_ | - |
| --van-coupon-active-background-color | _var(--van-active-color)_ | - |
| --van-coupon-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-coupon-box-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
| --van-coupon-background | _var(--van-background-light)_ | - |
| --van-coupon-active-background | _var(--van-active-color)_ | - |
| --van-coupon-radius | _var(--van-radius-lg)_ | - |
| --van-coupon-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
| --van-coupon-head-width | _96px_ | - |
| --van-coupon-amount-color | _var(--van-danger-color)_ | - |
| --van-coupon-amount-font-size | _30px_ | - |
@ -182,7 +182,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-coupon-description-border-color | _var(--van-border-color)_ | - |
| --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - |
| --van-coupon-list-background-color | _var(--van-background-color)_ | - |
| --van-coupon-list-background | _var(--van-background)_ | - |
| --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
| --van-coupon-list-exchange-button-height | _32px_ | - |
| --van-coupon-list-close-button-height | _40px_ | - |

10
packages/vant/src/coupon-list/README.zh-CN.md
View File

@ -171,10 +171,10 @@ import type { CouponCellProps, CouponListProps } from 'vant';
| --van-coupon-content-height | _84px_ | - |
| --van-coupon-content-padding | _14px 0_ | - |
| --van-coupon-content-text-color | _var(--van-text-color)_ | - |
| --van-coupon-background-color | _var(--van-background-color-light)_ | - |
| --van-coupon-active-background-color | _var(--van-active-color)_ | - |
| --van-coupon-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-coupon-box-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
| --van-coupon-background | _var(--van-background-light)_ | - |
| --van-coupon-active-background | _var(--van-active-color)_ | - |
| --van-coupon-radius | _var(--van-radius-lg)_ | - |
| --van-coupon-shadow | _0 0 4px rgba(0, 0, 0, 0.1)_ | - |
| --van-coupon-head-width | _96px_ | - |
| --van-coupon-amount-color | _var(--van-danger-color)_ | - |
| --van-coupon-amount-font-size | _30px_ | - |
@ -184,7 +184,7 @@ import type { CouponCellProps, CouponListProps } from 'vant';
| --van-coupon-description-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-coupon-description-border-color | _var(--van-border-color)_ | - |
| --van-coupon-corner-checkbox-icon-color | _var(--van-danger-color)_ | - |
| --van-coupon-list-background-color | _var(--van-background-color)_ | - |
| --van-coupon-list-background | _var(--van-background)_ | - |
| --van-coupon-list-field-padding | _5px 0 5px var(--van-padding-md)_ | - |
| --van-coupon-list-exchange-button-height | _32px_ | - |
| --van-coupon-list-close-button-height | _40px_ | - |

10
packages/vant/src/coupon-list/index.less
View File

@ -1,5 +1,5 @@
:root {
--van-coupon-list-background-color: var(--van-background-color);
--van-coupon-list-background: var(--van-background);
--van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
--van-coupon-list-exchange-button-height: 32px;
--van-coupon-list-close-button-height: 40px;
@ -12,7 +12,7 @@
.van-coupon-list {
position: relative;
height: 100%;
background: var(--van-coupon-list-background-color);
background: var(--van-coupon-list-background);
&__field {
padding: var(--van-coupon-list-field-padding);
@ -37,7 +37,7 @@
&__exchange-bar {
display: flex;
align-items: center;
background-color: var(--van-background-color-light);
background-color: var(--van-background-light);
}
&__exchange {
@ -76,8 +76,8 @@
box-sizing: border-box;
width: 100%;
padding: 5px var(--van-padding-md);
font-weight: var(--van-font-weight-bold);
background-color: var(--van-background-color-light);
font-weight: var(--van-font-bold);
background-color: var(--van-background-light);
}
&__close {

23
packages/vant/src/coupon/index.less
View File

@ -5,10 +5,10 @@
--van-coupon-content-height: 84px;
--van-coupon-content-padding: 14px 0;
--van-coupon-content-text-color: var(--van-text-color);
--van-coupon-background-color: var(--van-background-color-light);
--van-coupon-active-background-color: var(--van-active-color);
--van-coupon-border-radius: var(--van-border-radius-lg);
--van-coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
--van-coupon-background: var(--van-background-light);
--van-coupon-active-background: var(--van-active-color);
--van-coupon-radius: var(--van-radius-lg);
--van-coupon-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
--van-coupon-head-width: 96px;
--van-coupon-amount-color: var(--van-danger-color);
--van-coupon-amount-font-size: 30px;
@ -23,12 +23,12 @@
.van-coupon {
margin: var(--van-coupon-margin);
overflow: hidden;
background: var(--van-coupon-background-color);
border-radius: var(--van-coupon-border-radius);
box-shadow: var(--van-coupon-box-shadow);
background: var(--van-coupon-background);
border-radius: var(--van-coupon-radius);
box-shadow: var(--van-coupon-shadow);
&:active {
background-color: var(--van-coupon-active-background-color);
background-color: var(--van-coupon-active-background);
}
&__content {
@ -57,7 +57,7 @@
&__amount {
margin-bottom: 6px;
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-coupon-amount-font-size);
.ellipsis();
@ -80,8 +80,7 @@
&__body {
position: relative;
flex: 1;
border-radius: 0 var(--van-coupon-border-radius)
var(--van-coupon-border-radius) 0;
border-radius: 0 var(--van-coupon-radius) var(--van-coupon-radius) 0;
}
&__name {
@ -115,7 +114,7 @@
&--disabled {
&:active {
background-color: var(--van-coupon-background-color);
background-color: var(--van-coupon-background);
}
.van-coupon-item__content {

8
packages/vant/src/dialog/README.md
View File

@ -239,10 +239,10 @@ The component provides the following CSS variables, which can be used to customi
| --van-dialog-width | _320px_ | - |
| --van-dialog-small-screen-width | _90%_ | - |
| --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
| --van-dialog-transition | _var(--van-animation-duration-base)_ | - |
| --van-dialog-border-radius | _16px_ | - |
| --van-dialog-background-color | _var(--van-background-color-light)_ | - |
| --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-dialog-transition | _var(--van-duration-base)_ | - |
| --van-dialog-radius | _16px_ | - |
| --van-dialog-background | _var(--van-background-light)_ | - |
| --van-dialog-header-font-weight | _var(--van-font-bold)_ | - |
| --van-dialog-header-line-height | _24px_ | - |
| --van-dialog-header-padding-top | _26px_ | - |
| --van-dialog-header-isolated-padding | _var(--van-padding-lg) 0_ | - |

8
packages/vant/src/dialog/README.zh-CN.md
View File

@ -289,10 +289,10 @@ import type {
| --van-dialog-width | _320px_ | - |
| --van-dialog-small-screen-width | _90%_ | - |
| --van-dialog-font-size | _var(--van-font-size-lg)_ | - |
| --van-dialog-transition | _var(--van-animation-duration-base)_ | - |
| --van-dialog-border-radius | _16px_ | - |
| --van-dialog-background-color | _var(--van-background-color-light)_ | - |
| --van-dialog-header-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-dialog-transition | _var(--van-duration-base)_ | - |
| --van-dialog-radius | _16px_ | - |
| --van-dialog-background | _var(--van-background-light)_ | - |
| --van-dialog-header-font-weight | _var(--van-font-bold)_ | - |
| --van-dialog-header-line-height | _24px_ | - |
| --van-dialog-header-padding-top | _26px_ | - |
| --van-dialog-header-isolated-padding | _var(--van-padding-lg) 0_ | - |

12
packages/vant/src/dialog/index.less
View File

@ -2,10 +2,10 @@
--van-dialog-width: 320px;
--van-dialog-small-screen-width: 90%;
--van-dialog-font-size: var(--van-font-size-lg);
--van-dialog-transition: var(--van-animation-duration-base);
--van-dialog-border-radius: 16px;
--van-dialog-background-color: var(--van-background-color-light);
--van-dialog-header-font-weight: var(--van-font-weight-bold);
--van-dialog-transition: var(--van-duration-base);
--van-dialog-radius: 16px;
--van-dialog-background: var(--van-background-light);
--van-dialog-header-font-weight: var(--van-font-bold);
--van-dialog-header-line-height: 24px;
--van-dialog-header-padding-top: 26px;
--van-dialog-header-isolated-padding: var(--van-padding-lg) 0;
@ -26,8 +26,8 @@
width: var(--van-dialog-width);
overflow: hidden;
font-size: var(--van-dialog-font-size);
background: var(--van-dialog-background-color);
border-radius: var(--van-dialog-border-radius);
background: var(--van-dialog-background);
border-radius: var(--van-dialog-radius);
backface-visibility: hidden; // avoid blurry text after scale animation
transition: var(--van-dialog-transition);
transition-property: transform, opacity;

2
packages/vant/src/divider/index.less
View File

@ -28,7 +28,7 @@
height: 1px;
border-color: inherit;
border-style: inherit;
border-width: var(--van-border-width-base) 0 0;
border-width: var(--van-border-width) 0 0;
}
&::before {

4
packages/vant/src/dropdown-menu/README.md
View File

@ -233,8 +233,8 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-dropdown-menu-height | _48px_ | - |
| --van-dropdown-menu-background-color | _var(--van-background-color-light)_ | - |
| --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-background | _var(--van-background-light)_ | - |
| --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-title-font-size | _15px_ | - |
| --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - |

4
packages/vant/src/dropdown-menu/README.zh-CN.md
View File

@ -237,8 +237,8 @@ dropdownItemRef.value?.toggle();
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-dropdown-menu-height | _48px_ | - |
| --van-dropdown-menu-background-color | _var(--van-background-color-light)_ | - |
| --van-dropdown-menu-box-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-background | _var(--van-background-light)_ | - |
| --van-dropdown-menu-shadow | _0 2px 12px fade(var(--van-gray-7), 12)_ | - |
| --van-dropdown-menu-title-font-size | _15px_ | - |
| --van-dropdown-menu-title-text-color | _var(--van-text-color)_ | - |
| --van-dropdown-menu-title-active-text-color | _var(--van-danger-color)_ | - |

8
packages/vant/src/dropdown-menu/index.less
View File

@ -1,7 +1,7 @@
:root {
--van-dropdown-menu-height: 48px;
--van-dropdown-menu-background-color: var(--van-background-color-light);
--van-dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
--van-dropdown-menu-background: var(--van-background-light);
--van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
--van-dropdown-menu-title-font-size: 15px;
--van-dropdown-menu-title-text-color: var(--van-text-color);
--van-dropdown-menu-title-active-text-color: var(--van-danger-color);
@ -21,8 +21,8 @@
position: relative;
display: flex;
height: var(--van-dropdown-menu-height);
background: var(--van-dropdown-menu-background-color);
box-shadow: var(--van-dropdown-menu-box-shadow);
background: var(--van-dropdown-menu-background);
box-shadow: var(--van-dropdown-menu-shadow);
&--opened {
z-index: calc(var(--van-dropdown-item-z-index) + 1);

9
packages/vant/src/grid-item/index.less
View File

@ -1,6 +1,6 @@
:root {
--van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
--van-grid-item-content-background-color: var(--van-background-color-light);
--van-grid-item-content-background: var(--van-background-light);
--van-grid-item-content-active-color: var(--van-active-color);
--van-grid-item-icon-size: 28px;
--van-grid-item-text-color: var(--van-gray-7);
@ -37,12 +37,11 @@
box-sizing: border-box;
height: 100%;
padding: var(--van-grid-item-content-padding);
background: var(--van-grid-item-content-background-color);
background: var(--van-grid-item-content-background);
&::after {
z-index: 1;
border-width: 0 var(--van-border-width-base) var(--van-border-width-base)
0;
border-width: 0 var(--van-border-width) var(--van-border-width) 0;
}
&--square {
@ -83,7 +82,7 @@
&--surround {
&::after {
border-width: var(--van-border-width-base);
border-width: var(--van-border-width);
}
}

2
packages/vant/src/grid/README.md
View File

@ -159,7 +159,7 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-grid-item-content-background-color | _var(--van-background-color-light)_ | - |
| --van-grid-item-content-background | _var(--van-background-light)_ | - |
| --van-grid-item-content-active-color | _var(--van-active-color)_ | - |
| --van-grid-item-icon-size | _28px_ | - |
| --van-grid-item-text-color | _var(--van-gray-7)_ | - |

2
packages/vant/src/grid/README.zh-CN.md
View File

@ -175,7 +175,7 @@ import type { GridProps, GridDirection, GridItemProps } from 'vant';
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-grid-item-content-padding | _var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-grid-item-content-background-color | _var(--van-background-color-light)_ | - |
| --van-grid-item-content-background | _var(--van-background-light)_ | - |
| --van-grid-item-content-active-color | _var(--van-active-color)_ | - |
| --van-grid-item-icon-size | _28px_ | - |
| --van-grid-item-text-color | _var(--van-gray-7)_ | - |

2
packages/vant/src/image-preview/README.md
View File

@ -242,7 +242,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-image-preview-index-font-size | _var(--van-font-size-md)_ | - |
| --van-image-preview-index-line-height | _var(--van-line-height-md)_ | - |
| --van-image-preview-index-text-shadow | _0 1px 1px var(--van-gray-8)_ | - |
| --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - |
| --van-image-preview-overlay-background | _rgba(0, 0, 0, 0.9)_ | - |
| --van-image-preview-close-icon-size | _22px_ | - |
| --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - |
| --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - |

2
packages/vant/src/image-preview/README.zh-CN.md
View File

@ -294,7 +294,7 @@ imagePreviewRef.value?.swipeTo(1);
| --van-image-preview-index-font-size | _var(--van-font-size-md)_ | - |
| --van-image-preview-index-line-height | _var(--van-line-height-md)_ | - |
| --van-image-preview-index-text-shadow | _0 1px 1px var(--van-gray-8)_ | - |
| --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - |
| --van-image-preview-overlay-background | _rgba(0, 0, 0, 0.9)_ | - |
| --van-image-preview-close-icon-size | _22px_ | - |
| --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - |
| --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - |

4
packages/vant/src/image-preview/index.less
View File

@ -3,7 +3,7 @@
--van-image-preview-index-font-size: var(--van-font-size-md);
--van-image-preview-index-line-height: var(--van-line-height-md);
--van-image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);
--van-image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
--van-image-preview-overlay-background: rgba(0, 0, 0, 0.9);
--van-image-preview-close-icon-size: 22px;
--van-image-preview-close-icon-color: var(--van-gray-5);
--van-image-preview-close-icon-margin: var(--van-padding-md);
@ -78,7 +78,7 @@
}
&__overlay {
background: var(--van-image-preview-overlay-background-color);
background: var(--van-image-preview-overlay-background);
}
&__close-icon {

2
packages/vant/src/image/README.md
View File

@ -132,7 +132,7 @@ The component provides the following CSS variables, which can be used to customi
| --- | --- | --- |
| --van-image-placeholder-text-color | _var(--van-text-color-secondary)_ | - |
| --van-image-placeholder-font-size | _var(--van-font-size-md)_ | - |
| --van-image-placeholder-background-color | _var(--van-background-color)_ | - |
| --van-image-placeholder-background | _var(--van-background)_ | - |
| --van-image-loading-icon-size | _32px_ | - |
| --van-image-loading-icon-color | _var(--van-gray-4)_ | - |
| --van-image-error-icon-size | _32px_ | - |

2
packages/vant/src/image/README.zh-CN.md
View File

@ -160,7 +160,7 @@ import type { ImageFit, ImageProps } from 'vant';
| --- | --- | --- |
| --van-image-placeholder-text-color | _var(--van-text-color-secondary)_ | - |
| --van-image-placeholder-font-size | _var(--van-font-size-md)_ | - |
| --van-image-placeholder-background-color | _var(--van-background-color)_ | - |
| --van-image-placeholder-background | _var(--van-background)_ | - |
| --van-image-loading-icon-size | _32px_ | - |
| --van-image-loading-icon-color | _var(--van-gray-4)_ | - |
| --van-image-error-icon-size | _32px_ | - |

6
packages/vant/src/image/index.less
View File

@ -1,7 +1,7 @@
:root {
--van-image-placeholder-text-color: var(--van-text-color-secondary);
--van-image-placeholder-font-size: var(--van-font-size-md);
--van-image-placeholder-background-color: var(--van-background-color);
--van-image-placeholder-background: var(--van-background);
--van-image-loading-icon-size: 32px;
--van-image-loading-icon-color: var(--van-gray-4);
--van-image-error-icon-size: 32px;
@ -14,7 +14,7 @@
&--round {
overflow: hidden;
border-radius: var(--van-border-radius-max);
border-radius: var(--van-radius-max);
.van-image__img {
border-radius: inherit;
@ -40,7 +40,7 @@
justify-content: center;
color: var(--van-image-placeholder-text-color);
font-size: var(--van-image-placeholder-font-size);
background: var(--van-image-placeholder-background-color);
background: var(--van-image-placeholder-background);
}
&__loading-icon {

10
packages/vant/src/index-anchor/index.less
View File

@ -2,12 +2,12 @@
--van-index-anchor-z-index: 1;
--van-index-anchor-padding: 0 var(--van-padding-md);
--van-index-anchor-text-color: var(--van-text-color);
--van-index-anchor-font-weight: var(--van-font-weight-bold);
--van-index-anchor-font-weight: var(--van-font-bold);
--van-index-anchor-font-size: var(--van-font-size-md);
--van-index-anchor-line-height: 32px;
--van-index-anchor-background-color: transparent;
--van-index-anchor-background: transparent;
--van-index-anchor-sticky-text-color: var(--van-danger-color);
--van-index-anchor-sticky-background-color: var(--van-background-color-light);
--van-index-anchor-sticky-background: var(--van-background-light);
}
.van-index-anchor {
@ -18,7 +18,7 @@
font-weight: var(--van-index-anchor-font-weight);
font-size: var(--van-index-anchor-font-size);
line-height: var(--van-index-anchor-line-height);
background: var(--van-index-anchor-background-color);
background: var(--van-index-anchor-background);
&--sticky {
position: fixed;
@ -26,6 +26,6 @@
right: 0;
left: 0;
color: var(--van-index-anchor-sticky-text-color);
background: var(--van-index-anchor-sticky-background-color);
background: var(--van-index-anchor-sticky-background);
}
}

6
packages/vant/src/index-bar/README.md
View File

@ -139,9 +139,9 @@ The component provides the following CSS variables, which can be used to customi
| --van-index-anchor-z-index | _1_ | - |
| --van-index-anchor-padding | _0 var(--van-padding-md)_ | - |
| --van-index-anchor-text-color | _var(--van-text-color)_ | - |
| --van-index-anchor-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-index-anchor-font-weight | _var(--van-font-bold)_ | - |
| --van-index-anchor-font-size | _var(--van-font-size-md)_ | - |
| --van-index-anchor-line-height | _32px_ | - |
| --van-index-anchor-background-color | _transparent_ | - |
| --van-index-anchor-background | _transparent_ | - |
| --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-sticky-background-color | _var(--van-background-color-light)_ | - |
| --van-index-anchor-sticky-background | _var(--van-background-light)_ | - |

30
packages/vant/src/index-bar/README.zh-CN.md
View File

@ -134,18 +134,18 @@ indexBarRef.value?.scrollTo('B');
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-index-bar-sidebar-z-index | _2_ | - |
| --van-index-bar-index-font-size | _var(--van-font-size-xs)_ | - |
| --van-index-bar-index-line-height | _var(--van-line-height-xs)_ | - |
| --van-index-bar-index-active-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-z-index | _1_ | - |
| --van-index-anchor-padding | _0 var(--van-padding-md)_ | - |
| --van-index-anchor-text-color | _var(--van-text-color)_ | - |
| --van-index-anchor-font-weight | _var(--van-font-weight-bold)_ | - |
| --van-index-anchor-font-size | _var(--van-font-size-md)_ | - |
| --van-index-anchor-line-height | _32px_ | - |
| --van-index-anchor-background-color | _transparent_ | - |
| --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-sticky-background-color | _var(--van-background-color-light)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------ | ----------------------------- | ---- |
| --van-index-bar-sidebar-z-index | _2_ | - |
| --van-index-bar-index-font-size | _var(--van-font-size-xs)_ | - |
| --van-index-bar-index-line-height | _var(--van-line-height-xs)_ | - |
| --van-index-bar-index-active-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-z-index | _1_ | - |
| --van-index-anchor-padding | _0 var(--van-padding-md)_ | - |
| --van-index-anchor-text-color | _var(--van-text-color)_ | - |
| --van-index-anchor-font-weight | _var(--van-font-bold)_ | - |
| --van-index-anchor-font-size | _var(--van-font-size-md)_ | - |
| --van-index-anchor-line-height | _32px_ | - |
| --van-index-anchor-background | _transparent_ | - |
| --van-index-anchor-sticky-text-color | _var(--van-danger-color)_ | - |
| --van-index-anchor-sticky-background | _var(--van-background-light)_ | - |

2
packages/vant/src/index-bar/index.less
View File

@ -21,7 +21,7 @@
&__index {
padding: 0 var(--van-padding-xs) 0 var(--van-padding-md);
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-index-bar-index-font-size);
line-height: var(--van-index-bar-index-line-height);

2
packages/vant/src/loading/README.md
View File

@ -105,4 +105,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-loading-text-font-size | _var(--van-font-size-md)_ | - |
| --van-loading-spinner-color | _var(--van-gray-5)_ | - |
| --van-loading-spinner-size | _30px_ | - |
| --van-loading-spinner-animation-duration | _0.8s_ | - |
| --van-loading-spinner-duration | _0.8s_ | - |

14
packages/vant/src/loading/README.zh-CN.md
View File

@ -109,10 +109,10 @@ import type { LoadingType, LoadingProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-loading-text-color | _var(--van-text-color-secondary)_ | - |
| --van-loading-text-font-size | _var(--van-font-size-md)_ | - |
| --van-loading-spinner-color | _var(--van-gray-5)_ | - |
| --van-loading-spinner-size | _30px_ | - |
| --van-loading-spinner-animation-duration | _0.8s_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | --------------------------------- | ---- |
| --van-loading-text-color | _var(--van-text-color-secondary)_ | - |
| --van-loading-text-font-size | _var(--van-font-size-md)_ | - |
| --van-loading-spinner-color | _var(--van-gray-5)_ | - |
| --van-loading-spinner-size | _30px_ | - |
| --van-loading-spinner-duration | _0.8s_ | - |

5
packages/vant/src/loading/index.less
View File

@ -3,7 +3,7 @@
--van-loading-text-font-size: var(--van-font-size-md);
--van-loading-spinner-color: var(--van-gray-5);
--van-loading-spinner-size: 30px;
--van-loading-spinner-animation-duration: 0.8s;
--van-loading-spinner-duration: 0.8s;
}
.van-loading {
@ -21,8 +21,7 @@
height: var(--van-loading-spinner-size);
max-height: 100%;
vertical-align: middle;
animation: van-rotate var(--van-loading-spinner-animation-duration) linear
infinite;
animation: van-rotate var(--van-loading-spinner-duration) linear infinite;
&--spinner {
animation-timing-function: steps(12);

20
packages/vant/src/nav-bar/README.md
View File

@ -129,13 +129,13 @@ import type { NavbarProps } from 'vant';
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| --- | --- | --- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background-color | _var(--van-background-color-light)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |
| Name | Default Value | Description |
| ------------------------------ | ----------------------------- | ----------- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background | _var(--van-background-light)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |

20
packages/vant/src/nav-bar/README.zh-CN.md
View File

@ -137,13 +137,13 @@ import type { NavbarProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------ | ----------------------------------- | ---- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background-color | _var(--van-background-color-light)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | ----------------------------- | ---- |
| --van-nav-bar-height | _46px_ | - |
| --van-nav-bar-background | _var(--van-background-light)_ | - |
| --van-nav-bar-arrow-size | _16px_ | - |
| --van-nav-bar-icon-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-text-color | _var(--van-primary-color)_ | - |
| --van-nav-bar-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-nav-bar-title-text-color | _var(--van-text-color)_ | - |
| --van-nav-bar-z-index | _1_ | - |

6
packages/vant/src/nav-bar/index.less
View File

@ -1,6 +1,6 @@
:root {
--van-nav-bar-height: 46px;
--van-nav-bar-background-color: var(--van-background-color-light);
--van-nav-bar-background: var(--van-background-light);
--van-nav-bar-arrow-size: 16px;
--van-nav-bar-icon-color: var(--van-primary-color);
--van-nav-bar-text-color: var(--van-primary-color);
@ -14,7 +14,7 @@
z-index: var(--van-nav-bar-z-index);
line-height: var(--van-line-height-lg);
text-align: center;
background: var(--van-nav-bar-background-color);
background: var(--van-nav-bar-background);
user-select: none;
&--fixed {
@ -49,7 +49,7 @@
max-width: 60%;
margin: 0 auto;
color: var(--van-nav-bar-title-text-color);
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-nav-bar-title-font-size);
}

2
packages/vant/src/notice-bar/README.md
View File

@ -156,6 +156,6 @@ The component provides the following CSS variables, which can be used to customi
| --van-notice-bar-text-color | _var(--van-orange-dark)_ | - |
| --van-notice-bar-font-size | _var(--van-font-size-md)_ | - |
| --van-notice-bar-line-height | _24px_ | - |
| --van-notice-bar-background-color | _var(--van-orange-light)_ | - |
| --van-notice-bar-background | _var(--van-orange-light)_ | - |
| --van-notice-bar-icon-size | _16px_ | - |
| --van-notice-bar-icon-min-width | _24px_ | - |

2
packages/vant/src/notice-bar/README.zh-CN.md
View File

@ -177,6 +177,6 @@ noticeBarRef.value?.reset();
| --van-notice-bar-text-color | _var(--van-orange-dark)_ | - |
| --van-notice-bar-font-size | _var(--van-font-size-md)_ | - |
| --van-notice-bar-line-height | _24px_ | - |
| --van-notice-bar-background-color | _var(--van-orange-light)_ | - |
| --van-notice-bar-background | _var(--van-orange-light)_ | - |
| --van-notice-bar-icon-size | _16px_ | - |
| --van-notice-bar-icon-min-width | _24px_ | - |

4
packages/vant/src/notice-bar/index.less
View File

@ -5,7 +5,7 @@
--van-notice-bar-text-color: var(--van-orange-dark);
--van-notice-bar-font-size: var(--van-font-size-md);
--van-notice-bar-line-height: 24px;
--van-notice-bar-background-color: var(--van-orange-light);
--van-notice-bar-background: var(--van-orange-light);
--van-notice-bar-icon-size: 16px;
--van-notice-bar-icon-min-width: 24px;
}
@ -19,7 +19,7 @@
color: var(--van-notice-bar-text-color);
font-size: var(--van-notice-bar-font-size);
line-height: var(--van-notice-bar-line-height);
background: var(--van-notice-bar-background-color);
background: var(--van-notice-bar-background);
&__left-icon,
&__right-icon {

8
packages/vant/src/notify/README.md
View File

@ -138,7 +138,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-notify-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-notify-font-size | _var(--van-font-size-md)_ | - |
| --van-notify-line-height | _var(--van-line-height-md)_ | - |
| --van-notify-primary-background-color | _var(--van-primary-color)_ | - |
| --van-notify-success-background-color | _var(--van-success-color)_ | - |
| --van-notify-danger-background-color | _var(--van-danger-color)_ | - |
| --van-notify-warning-background-color | _var(--van-warning-color)_ | - |
| --van-notify-primary-background | _var(--van-primary-color)_ | - |
| --van-notify-success-background | _var(--van-success-color)_ | - |
| --van-notify-danger-background | _var(--van-danger-color)_ | - |
| --van-notify-warning-background | _var(--van-warning-color)_ | - |

8
packages/vant/src/notify/README.zh-CN.md
View File

@ -186,7 +186,7 @@ import type { NotifyType, NotifyProps, NotifyOptions } from 'vant';
| --van-notify-padding | _var(--van-padding-xs) var(--van-padding-md)_ | - |
| --van-notify-font-size | _var(--van-font-size-md)_ | - |
| --van-notify-line-height | _var(--van-line-height-md)_ | - |
| --van-notify-primary-background-color | _var(--van-primary-color)_ | - |
| --van-notify-success-background-color | _var(--van-success-color)_ | - |
| --van-notify-danger-background-color | _var(--van-danger-color)_ | - |
| --van-notify-warning-background-color | _var(--van-warning-color)_ | - |
| --van-notify-primary-background | _var(--van-primary-color)_ | - |
| --van-notify-success-background | _var(--van-success-color)_ | - |
| --van-notify-danger-background | _var(--van-danger-color)_ | - |
| --van-notify-warning-background | _var(--van-warning-color)_ | - |

16
packages/vant/src/notify/index.less
View File

@ -3,10 +3,10 @@
--van-notify-padding: var(--van-padding-xs) var(--van-padding-md);
--van-notify-font-size: var(--van-font-size-md);
--van-notify-line-height: var(--van-line-height-md);
--van-notify-primary-background-color: var(--van-primary-color);
--van-notify-success-background-color: var(--van-success-color);
--van-notify-danger-background-color: var(--van-danger-color);
--van-notify-warning-background-color: var(--van-warning-color);
--van-notify-primary-background: var(--van-primary-color);
--van-notify-success-background: var(--van-success-color);
--van-notify-danger-background: var(--van-danger-color);
--van-notify-warning-background: var(--van-warning-color);
}
.van-notify {
@ -25,18 +25,18 @@
word-wrap: break-word;
&--primary {
background: var(--van-notify-primary-background-color);
background: var(--van-notify-primary-background);
}
&--success {
background: var(--van-notify-success-background-color);
background: var(--van-notify-success-background);
}
&--danger {
background: var(--van-notify-danger-background-color);
background: var(--van-notify-danger-background);
}
&--warning {
background: var(--van-notify-warning-background-color);
background: var(--van-notify-warning-background);
}
}

8
packages/vant/src/number-keyboard/README.md
View File

@ -221,18 +221,18 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-number-keyboard-background-color | _var(--van-gray-2)_ | - |
| --van-number-keyboard-background | _var(--van-gray-2)_ | - |
| --van-number-keyboard-key-height | _48px_ | - |
| --van-number-keyboard-key-font-size | _28px_ | - |
| --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - |
| --van-number-keyboard-key-background-color | _var(--van-white)_ | - |
| --van-number-keyboard-key-background | _var(--van-white)_ | - |
| --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - |
| --van-number-keyboard-title-color | _var(--van-gray-7)_ | - |
| --van-number-keyboard-title-height | _34px_ | - |
| --van-number-keyboard-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-number-keyboard-close-padding | _0 var(--van-padding-md)_ | - |
| --van-number-keyboard-close-color | _var(--van-text-link-color)_ | - |
| --van-number-keyboard-close-color | _var(--van-link-color)_ | - |
| --van-number-keyboard-close-font-size | _var(--van-font-size-md)_ | - |
| --van-number-keyboard-button-text-color | _var(--van-white)_ | - |
| --van-number-keyboard-button-background-color | _var(--van-primary-color)_ | - |
| --van-number-keyboard-button-background | _var(--van-primary-color)_ | - |
| --van-number-keyboard-z-index | _100_ | - |

34
packages/vant/src/number-keyboard/README.zh-CN.md
View File

@ -226,23 +226,23 @@ import type { NumberKeyboardProps, NumberKeyboardTheme } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-number-keyboard-background-color | _var(--van-gray-2)_ | - |
| --van-number-keyboard-key-height | _48px_ | - |
| --van-number-keyboard-key-font-size | _28px_ | - |
| --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - |
| --van-number-keyboard-key-background-color | _var(--van-white)_ | - |
| --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - |
| --van-number-keyboard-title-color | _var(--van-gray-7)_ | - |
| --van-number-keyboard-title-height | _34px_ | - |
| --van-number-keyboard-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-number-keyboard-close-padding | _0 var(--van-padding-md)_ | - |
| --van-number-keyboard-close-color | _var(--van-text-link-color)_ | - |
| --van-number-keyboard-close-font-size | _var(--van-font-size-md)_ | - |
| --van-number-keyboard-button-text-color | _var(--van-white)_ | - |
| --van-number-keyboard-button-background-color | _var(--van-primary-color)_ | - |
| --van-number-keyboard-z-index | _100_ | - |
| 名称 | 默认值 | 描述 |
| --------------------------------------- | -------------------------- | ---- |
| --van-number-keyboard-background | _var(--van-gray-2)_ | - |
| --van-number-keyboard-key-height | _48px_ | - |
| --van-number-keyboard-key-font-size | _28px_ | - |
| --van-number-keyboard-key-active-color | _var(--van-gray-3)_ | - |
| --van-number-keyboard-key-background | _var(--van-white)_ | - |
| --van-number-keyboard-delete-font-size | _var(--van-font-size-lg)_ | - |
| --van-number-keyboard-title-color | _var(--van-gray-7)_ | - |
| --van-number-keyboard-title-height | _34px_ | - |
| --van-number-keyboard-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-number-keyboard-close-padding | _0 var(--van-padding-md)_ | - |
| --van-number-keyboard-close-color | _var(--van-link-color)_ | - |
| --van-number-keyboard-close-font-size | _var(--van-font-size-md)_ | - |
| --van-number-keyboard-button-text-color | _var(--van-white)_ | - |
| --van-number-keyboard-button-background | _var(--van-primary-color)_ | - |
| --van-number-keyboard-z-index | _100_ | - |
## 常见问题

16
packages/vant/src/number-keyboard/index.less
View File

@ -1,18 +1,18 @@
:root {
--van-number-keyboard-background-color: var(--van-gray-2);
--van-number-keyboard-background: var(--van-gray-2);
--van-number-keyboard-key-height: 48px;
--van-number-keyboard-key-font-size: 28px;
--van-number-keyboard-key-active-color: var(--van-gray-3);
--van-number-keyboard-key-background-color: var(--van-background-color-light);
--van-number-keyboard-key-background: var(--van-background-light);
--van-number-keyboard-delete-font-size: var(--van-font-size-lg);
--van-number-keyboard-title-color: var(--van-gray-7);
--van-number-keyboard-title-height: 34px;
--van-number-keyboard-title-font-size: var(--van-font-size-lg);
--van-number-keyboard-close-padding: 0 var(--van-padding-md);
--van-number-keyboard-close-color: var(--van-text-link-color);
--van-number-keyboard-close-color: var(--van-link-color);
--van-number-keyboard-close-font-size: var(--van-font-size-md);
--van-number-keyboard-button-text-color: var(--van-white);
--van-number-keyboard-button-background-color: var(--van-primary-color);
--van-number-keyboard-button-background: var(--van-primary-color);
--van-number-keyboard-z-index: 100;
}
@ -23,7 +23,7 @@
z-index: var(--van-number-keyboard-z-index);
width: 100%;
padding-bottom: 22px;
background: var(--van-number-keyboard-background-color);
background: var(--van-number-keyboard-background);
user-select: none;
&--with-title {
@ -93,8 +93,8 @@
height: var(--van-number-keyboard-key-height);
font-size: var(--van-number-keyboard-key-font-size);
line-height: 1.5;
background: var(--van-number-keyboard-key-background-color);
border-radius: var(--van-border-radius-lg);
background: var(--van-number-keyboard-key-background);
border-radius: var(--van-radius-lg);
cursor: pointer;
&--large {
@ -119,7 +119,7 @@
&--blue {
color: var(--van-number-keyboard-button-text-color);
background: var(--van-number-keyboard-button-background-color);
background: var(--van-number-keyboard-button-background);
&.van-key--active {
opacity: var(--van-active-opacity);

8
packages/vant/src/overlay/README.md
View File

@ -100,7 +100,7 @@ import type { OverlayProps } from 'vant';
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ------------------------------ | -------------------- | ----------- |
| --van-overlay-z-index | _1_ | - |
| --van-overlay-background-color | _rgba(0, 0, 0, 0.7)_ | - |
| Name | Default Value | Description |
| ------------------------ | -------------------- | ----------- |
| --van-overlay-z-index | _1_ | - |
| --van-overlay-background | _rgba(0, 0, 0, 0.7)_ | - |

8
packages/vant/src/overlay/README.zh-CN.md
View File

@ -102,7 +102,7 @@ import type { OverlayProps } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------ | -------------------- | ---- |
| --van-overlay-z-index | _1_ | - |
| --van-overlay-background-color | _rgba(0, 0, 0, 0.7)_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------ | -------------------- | ---- |
| --van-overlay-z-index | _1_ | - |
| --van-overlay-background | _rgba(0, 0, 0, 0.7)_ | - |

4
packages/vant/src/overlay/index.less
View File

@ -1,6 +1,6 @@
:root {
--van-overlay-z-index: 1;
--van-overlay-background-color: rgba(0, 0, 0, 0.7);
--van-overlay-background: rgba(0, 0, 0, 0.7);
}
.van-overlay {
@ -10,5 +10,5 @@
z-index: var(--van-overlay-z-index);
width: 100%;
height: 100%;
background: var(--van-overlay-background-color);
background: var(--van-overlay-background);
}

4
packages/vant/src/pagination/README.md
View File

@ -117,7 +117,7 @@ The component provides the following CSS variables, which can be used to customi
| --van-pagination-item-width | _36px_ | - |
| --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
| --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - |
| --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - |
| --van-pagination-background-color | _var(--van-background-color-light)_ | - |
| --van-pagination-item-disabled-background | _var(--van-background)_ | - |
| --van-pagination-background | _var(--van-background-light)_ | - |
| --van-pagination-desc-color | _var(--van-gray-7)_ | - |
| --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - |

4
packages/vant/src/pagination/README.zh-CN.md
View File

@ -125,7 +125,7 @@ import type { PaginationMode, PaginationProps } from 'vant';
| --van-pagination-item-width | _36px_ | - |
| --van-pagination-item-default-color | _var(--van-primary-color)_ | - |
| --van-pagination-item-disabled-color | _var(--van-gray-7)_ | - |
| --van-pagination-item-disabled-background-color | _var(--van-background-color)_ | - |
| --van-pagination-background-color | _var(--van-background-color-light)_ | - |
| --van-pagination-item-disabled-background | _var(--van-background)_ | - |
| --van-pagination-background | _var(--van-background-light)_ | - |
| --van-pagination-desc-color | _var(--van-gray-7)_ | - |
| --van-pagination-disabled-opacity | _var(--van-disabled-opacity)_ | - |

16
packages/vant/src/pagination/index.less
View File

@ -4,8 +4,8 @@
--van-pagination-item-width: 36px;
--van-pagination-item-default-color: var(--van-primary-color);
--van-pagination-item-disabled-color: var(--van-gray-7);
--van-pagination-item-disabled-background-color: var(--van-background-color);
--van-pagination-background-color: var(--van-background-color-light);
--van-pagination-item-disabled-background: var(--van-background);
--van-pagination-background: var(--van-background-light);
--van-pagination-desc-color: var(--van-gray-7);
--van-pagination-disabled-opacity: var(--van-disabled-opacity);
}
@ -27,7 +27,7 @@
min-width: var(--van-pagination-item-width);
height: var(--van-pagination-height);
color: var(--van-pagination-item-default-color);
background: var(--van-pagination-background-color);
background: var(--van-pagination-background);
cursor: pointer;
user-select: none;
@ -37,12 +37,12 @@
}
&::after {
border-width: var(--van-border-width-base) 0 var(--van-border-width-base)
var(--van-border-width-base);
border-width: var(--van-border-width) 0 var(--van-border-width)
var(--van-border-width);
}
&:last-child::after {
border-right-width: var(--van-border-width-base);
border-right-width: var(--van-border-width);
}
&--active {
@ -61,7 +61,7 @@
&,
&:active {
color: var(--van-pagination-item-disabled-color);
background-color: var(--van-pagination-item-disabled-background-color);
background-color: var(--van-pagination-item-disabled-background);
cursor: not-allowed;
opacity: var(--van-pagination-disabled-opacity);
}
@ -81,7 +81,7 @@
.van-pagination__prev,
.van-pagination__next {
&::after {
border-width: var(--van-border-width-base);
border-width: var(--van-border-width);
}
}
}

6
packages/vant/src/password-input/README.md
View File

@ -159,8 +159,8 @@ The component provides the following CSS variables, which can be used to customi
| --van-password-input-height | _50px_ | - |
| --van-password-input-margin | _0 var(--van-padding-md)_ | - |
| --van-password-input-font-size | _20px_ | - |
| --van-password-input-border-radius | _6px_ | - |
| --van-password-input-background-color | _var(--van-background-color-light)_ | - |
| --van-password-input-radius | _6px_ | - |
| --van-password-input-background | _var(--van-background-light)_ | - |
| --van-password-input-info-color | _var(--van-text-color-secondary)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
@ -170,4 +170,4 @@ The component provides the following CSS variables, which can be used to customi
| --van-password-input-cursor-color | _var(--van-text-color)_ | - |
| --van-password-input-cursor-width | _1px_ | - |
| --van-password-input-cursor-height | _40%_ | - |
| --van-password-input-cursor-animation-duration | _1s_ | - |
| --van-password-input-cursor-duration | _1s_ | - |

6
packages/vant/src/password-input/README.zh-CN.md
View File

@ -169,8 +169,8 @@ export default {
| --van-password-input-height | _50px_ | - |
| --van-password-input-margin | _0 var(--van-padding-md)_ | - |
| --van-password-input-font-size | _20px_ | - |
| --van-password-input-border-radius | _6px_ | - |
| --van-password-input-background-color | _var(--van-background-color-light)_ | - |
| --van-password-input-radius | _6px_ | - |
| --van-password-input-background | _var(--van-background-light)_ | - |
| --van-password-input-info-color | _var(--van-text-color-secondary)_ | - |
| --van-password-input-info-font-size | _var(--van-font-size-md)_ | - |
| --van-password-input-error-info-color | _var(--van-danger-color)_ | - |
@ -180,4 +180,4 @@ export default {
| --van-password-input-cursor-color | _var(--van-text-color)_ | - |
| --van-password-input-cursor-width | _1px_ | - |
| --van-password-input-cursor-height | _40%_ | - |
| --van-password-input-cursor-animation-duration | _1s_ | - |
| --van-password-input-cursor-duration | _1s_ | - |

14
packages/vant/src/password-input/index.less
View File

@ -2,8 +2,8 @@
--van-password-input-height: 50px;
--van-password-input-margin: 0 var(--van-padding-md);
--van-password-input-font-size: 20px;
--van-password-input-border-radius: 6px;
--van-password-input-background-color: var(--van-background-color-light);
--van-password-input-radius: 6px;
--van-password-input-background: var(--van-background-light);
--van-password-input-info-color: var(--van-text-color-secondary);
--van-password-input-info-font-size: var(--van-font-size-md);
--van-password-input-error-info-color: var(--van-danger-color);
@ -13,7 +13,7 @@
--van-password-input-cursor-color: var(--van-text-color);
--van-password-input-cursor-width: 1px;
--van-password-input-cursor-height: 40%;
--van-password-input-cursor-animation-duration: 1s;
--van-password-input-cursor-duration: 1s;
}
.van-password-input {
@ -43,7 +43,7 @@
cursor: pointer;
&::after {
border-radius: var(--van-password-input-border-radius);
border-radius: var(--van-password-input-radius);
}
li {
@ -56,7 +56,7 @@
color: var(--van-password-input-text-color);
font-size: var(--van-password-input-font-size);
line-height: 1.2;
background: var(--van-password-input-background-color);
background: var(--van-password-input-background);
}
i {
@ -80,8 +80,8 @@
height: var(--van-password-input-cursor-height);
background: var(--van-password-input-cursor-color);
transform: translate(-50%, -50%);
animation: var(--van-password-input-cursor-animation-duration)
van-cursor-flicker infinite;
animation: var(--van-password-input-cursor-duration) van-cursor-flicker
infinite;
}
}

4
packages/vant/src/picker/README.md
View File

@ -415,13 +415,13 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-picker-background-color | _var(--van-background-color-light)_ | - |
| --van-picker-background | _var(--van-background-light)_ | - |
| --van-picker-toolbar-height | _44px_ | - |
| --van-picker-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-title-line-height | _var(--van-line-height-md)_ | - |
| --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
| --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
| --van-picker-confirm-action-color | _var(--van-text-link-color)_ | - |
| --van-picker-confirm-action-color | _var(--van-link-color)_ | - |
| --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - |
| --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |

4
packages/vant/src/picker/README.zh-CN.md
View File

@ -440,13 +440,13 @@ pickerRef.value?.confirm();
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-picker-background-color | _var(--van-background-color-light)_ | - |
| --van-picker-background | _var(--van-background-light)_ | - |
| --van-picker-toolbar-height | _44px_ | - |
| --van-picker-title-font-size | _var(--van-font-size-lg)_ | - |
| --van-picker-title-line-height | _var(--van-line-height-md)_ | - |
| --van-picker-action-padding | _0 var(--van-padding-md)_ | - |
| --van-picker-action-font-size | _var(--van-font-size-md)_ | - |
| --van-picker-confirm-action-color | _var(--van-text-link-color)_ | - |
| --van-picker-confirm-action-color | _var(--van-link-color)_ | - |
| --van-picker-cancel-action-color | _var(--van-text-color-secondary)_ | - |
| --van-picker-option-padding | _0 var(--van-padding-base)_ | - |
| --van-picker-option-font-size | _var(--van-font-size-lg)_ | - |

8
packages/vant/src/picker/index.less
View File

@ -1,11 +1,11 @@
:root {
--van-picker-background-color: var(--van-background-color-light);
--van-picker-background: var(--van-background-light);
--van-picker-toolbar-height: 44px;
--van-picker-title-font-size: var(--van-font-size-lg);
--van-picker-title-line-height: var(--van-line-height-md);
--van-picker-action-padding: 0 var(--van-padding-md);
--van-picker-action-font-size: var(--van-font-size-md);
--van-picker-confirm-action-color: var(--van-text-link-color);
--van-picker-confirm-action-color: var(--van-link-color);
--van-picker-cancel-action-color: var(--van-text-color-secondary);
--van-picker-option-font-size: var(--van-font-size-lg);
--van-picker-option-padding: 0 var(--van-padding-base);
@ -23,7 +23,7 @@
.van-picker {
position: relative;
background: var(--van-picker-background-color);
background: var(--van-picker-background);
user-select: none;
&__toolbar {
@ -53,7 +53,7 @@
&__title {
max-width: 50%;
font-weight: var(--van-font-weight-bold);
font-weight: var(--van-font-bold);
font-size: var(--van-picker-title-font-size);
line-height: var(--van-picker-title-line-height);
text-align: center;

6
packages/vant/src/popover/README.md
View File

@ -278,15 +278,15 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-popover-arrow-size | _6px_ | - |
| --van-popover-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-popover-radius | _var(--van-radius-lg)_ | - |
| --van-popover-action-width | _128px_ | - |
| --van-popover-action-height | _44px_ | - |
| --van-popover-action-font-size | _var(--van-font-size-md)_ | - |
| --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
| --van-popover-action-icon-size | _20px_ | - |
| --van-popover-light-text-color | _var(--van-text-color)_ | - |
| --van-popover-light-background-color | _var(--van-background-color-light)_ | - |
| --van-popover-light-background | _var(--van-background-light)_ | - |
| --van-popover-light-action-disabled-text-color | _var(--van-text-color-tertiary)_ | - |
| --van-popover-dark-text-color | _var(--van-white)_ | - |
| --van-popover-dark-background-color | _#4a4a4a_ | - |
| --van-popover-dark-background | _#4a4a4a_ | - |
| --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - |

6
packages/vant/src/popover/README.zh-CN.md
View File

@ -290,17 +290,17 @@ import type {
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-popover-arrow-size | _6px_ | - |
| --van-popover-border-radius | _var(--van-border-radius-lg)_ | - |
| --van-popover-radius | _var(--van-radius-lg)_ | - |
| --van-popover-action-width | _128px_ | - |
| --van-popover-action-height | _44px_ | - |
| --van-popover-action-font-size | _var(--van-font-size-md)_ | - |
| --van-popover-action-line-height | _var(--van-line-height-md)_ | - |
| --van-popover-action-icon-size | _20px_ | - |
| --van-popover-light-text-color | _var(--van-text-color)_ | - |
| --van-popover-light-background-color | _var(--van-background-color-light)_ | - |
| --van-popover-light-background | _var(--van-background-light)_ | - |
| --van-popover-light-action-disabled-text-color | _var(--van-text-color-tertiary)_ | - |
| --van-popover-dark-text-color | _var(--van-white)_ | - |
| --van-popover-dark-background-color | _#4a4a4a_ | - |
| --van-popover-dark-background | _#4a4a4a_ | - |
| --van-popover-dark-action-disabled-text-color | _var(--van-text-color-secondary)_ | - |
## 常见问题

20
packages/vant/src/popover/index.less
View File

@ -1,18 +1,18 @@
:root {
--van-popover-arrow-size: 6px;
--van-popover-border-radius: var(--van-border-radius-lg);
--van-popover-radius: var(--van-radius-lg);
--van-popover-action-width: 128px;
--van-popover-action-height: 44px;
--van-popover-action-font-size: var(--van-font-size-md);
--van-popover-action-line-height: var(--van-line-height-md);
--van-popover-action-icon-size: 20px;
--van-popover-light-text-color: var(--van-text-color);
--van-popover-light-background-color: var(--van-background-color-light);
--van-popover-light-background: var(--van-background-light);
--van-popover-light-action-disabled-text-color: var(
--van-text-color-tertiary
);
--van-popover-dark-text-color: var(--van-white);
--van-popover-dark-background-color: #4a4a4a;
--van-popover-dark-background: #4a4a4a;
--van-popover-dark-action-disabled-text-color: var(
--van-text-color-secondary
);
@ -39,7 +39,7 @@
&__content {
overflow: hidden;
border-radius: var(--van-popover-border-radius);
border-radius: var(--van-popover-radius);
}
&__action {
@ -216,12 +216,12 @@
color: var(--van-popover-light-text-color);
.van-popover__content {
background: var(--van-popover-light-background-color);
background: var(--van-popover-light-background);
box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
}
.van-popover__arrow {
color: var(--van-popover-light-background-color);
color: var(--van-popover-light-background);
}
.van-popover__action {
@ -244,11 +244,11 @@
color: var(--van-popover-dark-text-color);
.van-popover__content {
background: var(--van-popover-dark-background-color);
background: var(--van-popover-dark-background);
}
.van-popover__arrow {
color: var(--van-popover-dark-background-color);
color: var(--van-popover-dark-background);
}
.van-popover__action {
@ -279,10 +279,10 @@
}
&-zoom-enter-active {
transition-timing-function: var(--van-animation-timing-function-enter);
transition-timing-function: var(--van-ease-out);
}
&-zoom-leave-active {
transition-timing-function: var(--van-animation-timing-function-leave);
transition-timing-function: var(--van-ease-in);
}
}

6
packages/vant/src/popup/README.md
View File

@ -162,9 +162,9 @@ The component provides the following CSS variables, which can be used to customi
| Name | Default Value | Description |
| --- | --- | --- |
| --van-popup-background-color | _var(--van-background-color-light)_ | - |
| --van-popup-transition | _transform var(--van-animation-duration-base)_ | - |
| --van-popup-round-border-radius | _16px_ | - |
| --van-popup-background | _var(--van-background-light)_ | - |
| --van-popup-transition | _transform var(--van-duration-base)_ | - |
| --van-popup-round-radius | _16px_ | - |
| --van-popup-close-icon-size | _22px_ | - |
| --van-popup-close-icon-color | _var(--van-gray-5)_ | - |
| --van-popup-close-icon-margin | _16px_ | - |

18
packages/vant/src/popup/README.zh-CN.md
View File

@ -166,12 +166,12 @@ import type { PopupProps, PopupPosition, PopupCloseIconPosition } from 'vant';
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-popup-background-color | _var(--van-background-color-light)_ | - |
| --van-popup-transition | _transform var(--van-animation-duration-base)_ | - |
| --van-popup-round-border-radius | _16px_ | - |
| --van-popup-close-icon-size | _22px_ | - |
| --van-popup-close-icon-color | _var(--van-gray-5)_ | - |
| --van-popup-close-icon-margin | _16px_ | - |
| --van-popup-close-icon-z-index | _1_ | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | ------------------------------------ | ---- |
| --van-popup-background | _var(--van-background-light)_ | - |
| --van-popup-transition | _transform var(--van-duration-base)_ | - |
| --van-popup-round-radius | _16px_ | - |
| --van-popup-close-icon-size | _22px_ | - |
| --van-popup-close-icon-color | _var(--van-gray-5)_ | - |
| --van-popup-close-icon-margin | _16px_ | - |
| --van-popup-close-icon-z-index | _1_ | - |

Some files were not shown because too many files have changed in this diff Show More