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: no longer support less vars

Browse Source
This commit is contained in:
chenjiahan 2021-11-03 16:45:49 +08:00
parent 099141f6c5
commit ada5db011c
150 changed files with 770 additions and 2263 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,10 @@
## 不兼容更新
### 主题定制方式调整
不再支持基于 Less 变量进行主题定制，请使用 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。
### API 调整
#### Picker

215
packages/vant/docs/markdown/theme.en-US.md
View File

@ -1,215 +0,0 @@
# Custom Theme
### Deprecated
This document is deprecated. Vant provides a more convenient [ConfigProvider](#/en-US/config-provider) component for theme configuration. Less variables **will be removed in the next major version**.
### Intro
Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme.
### Less variables
There are some [basic variables](<(https://github.com/youzan/vant/blob/dev/packages/vant/src/style/var.less)>) below, for component less variables, please refer to the documentation of each component, or view the `var.less` file in the component source directory.
```less
// Color Palette
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
@text-color: @gray-8;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: @gray-1;
@background-color-light: @white;
@text-link-color: #576b95;
// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;
// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
sans-serif;
// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;
// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;
```
## How to custom theme
### Step 1: import less file
First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file.
#### Automatically import style
Configure babel plugin in babel.config.js, if you are using babel6, please manually import less file.
```js
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// specify less file path
style: (name) => `${name}/style/less`,
},
'vant',
],
],
};
```
#### Manually import style
```js
// import all styles
import 'vant/lib/index.less';
// import style of single component
import 'vant/lib/button/style/less';
```
### Step 2: modify less variables
Use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to modify less variables，webpack config for reference:
```js
// webpack.config.js
module.exports = {
rules: [
{
test: /\.less$/,
use: [
// ...other loaders
{
loader: 'less-loader',
options: {
lessOptions: {
modifyVars: {
// override with less vars
'text-color': '#111',
'border-color': '#eee',
// or override with less file
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
],
},
],
};
```
If you build a project by vue-cli,it can be configured in `vue.config.js`:
```js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
// override with less vars
'text-color': '#111',
'border-color': '#eee',
// or override with less file
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
```
### Vite
Add the following config in `vite.config.js`.
```js
// vite.config.js
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
'text-color': '#111',
'border-color': '#eee',
},
},
},
},
resolve: {
alias: [{ find: /^~/, replacement: '' }],
},
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style/less`,
},
],
}),
],
};
```

225
packages/vant/docs/markdown/theme.zh-CN.md
View File

@ -1,225 +0,0 @@
# 定制主题
### 废弃提示
本文档已废弃，Vant 提供了更方便的 [ConfigProvider 全局配置](#/zh-CN/config-provider) 组件进行主题配置。基于 Less 变量进行定制的方式**将在下个大版本废弃**。
### 介绍
Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。
### 示例工程
我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，其中包含了定制主题的基本配置，可以作为参考。
### 样式变量
Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
下面是所有的[基础样式变量](https://github.com/youzan/vant/blob/dev/packages/vant/src/style/var.less)，组件的样式变量请参考各个组件的文档，或查看组件源码目录下的 `var.less` 文件。
```less
// Color Palette
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
// Component Colors
@text-color: @gray-8;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: @gray-1;
@background-color-light: @white;
@text-link-color: #576b95;
// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;
// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
'Microsoft Yahei', sans-serif;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
sans-serif;
// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;
// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;
```
## 定制方法
### 步骤一 引入样式源文件
定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。
#### 按需引入样式（推荐）
在 babel.config.js 中配置按需引入样式源文件，注意 babel 6 不支持按需引入样式，请手动引入样式。
```js
module.exports = {
plugins: [
[
'import',
{
libraryName: 'vant',
libraryDirectory: 'es',
// 指定样式路径
style: (name) => `${name}/style/less`,
},
'vant',
],
],
};
```
#### 手动引入样式
```js
// 引入全部样式
import 'vant/lib/index.less';
// 引入单个组件样式
import 'vant/lib/button/style/less';
```
### 步骤二 修改样式变量
使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改，下面是参考的 webpack 配置。
```js
// webpack.config.js
module.exports = {
rules: [
{
test: /\.less$/,
use: [
// ...其他 loader 配置
{
loader: 'less-loader',
options: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
],
},
],
};
```
如果 vue-cli 搭建的项目，可以在 `vue.config.js` 中进行配置。
```js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
less: {
// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
lessOptions: {
modifyVars: {
// 直接覆盖变量
'text-color': '#111',
'border-color': '#eee',
// 或者可以通过 less 文件覆盖（文件路径为绝对路径）
hack: `true; @import "your-less-file-path.less";`,
},
},
},
},
},
};
```
### Vite 项目
如果是 vite 项目，可以跳过以上步骤，直接在 `vite.config.js` 中添加如下配置即可。
```js
// vite.config.js
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
export default {
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
// 覆盖样式变量
modifyVars: {
'text-color': '#111',
'border-color': '#eee',
},
},
},
},
resolve: {
alias: [{ find: /^~/, replacement: '' }],
},
plugins: [
vue(),
// 按需引入样式源文件
styleImport({
libs: [
{
libraryName: 'vant',
esModule: true,
resolveStyle: (name) => `vant/es/${name}/style/less`,
},
],
}),
],
};
```

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

@ -1,9 +1,7 @@
@import './var.less';
:root {
--van-action-bar-button-height: @action-bar-button-height;
--van-action-bar-button-warning-color: @action-bar-button-warning-color;
--van-action-bar-button-danger-color: @action-bar-button-danger-color;
--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-button {

5
packages/vant/src/action-bar-button/var.less
View File

@ -1,5 +0,0 @@
@import '../style/var.less';
@action-bar-button-height: 40px;
@action-bar-button-warning-color: var(--van-gradient-orange);
@action-bar-button-danger-color: var(--van-gradient-red);

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

@ -1,14 +1,12 @@
@import './var.less';
:root {
--van-action-bar-icon-width: @action-bar-icon-width;
--van-action-bar-icon-height: @action-bar-icon-height;
--van-action-bar-icon-color: @action-bar-icon-color;
--van-action-bar-icon-size: @action-bar-icon-size;
--van-action-bar-icon-font-size: @action-bar-icon-font-size;
--van-action-bar-icon-active-color: @action-bar-icon-active-color;
--van-action-bar-icon-text-color: @action-bar-icon-text-color;
--van-action-bar-icon-background-color: @action-bar-icon-background-color;
--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-icon {

10
packages/vant/src/action-bar-icon/var.less
View File

@ -1,10 +0,0 @@
@import '../style/var.less';
@action-bar-icon-width: 48px;
@action-bar-icon-height: 100%;
@action-bar-icon-color: var(--van-text-color);
@action-bar-icon-size: 18px;
@action-bar-icon-font-size: var(--van-font-size-xs);
@action-bar-icon-active-color: var(--van-active-color);
@action-bar-icon-text-color: var(--van-gray-7);
@action-bar-icon-background-color: var(--van-background-color-light);

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

@ -1,8 +1,6 @@
@import './var.less';
:root {
--van-action-bar-background-color: @action-bar-background-color;
--van-action-bar-height: @action-bar-height;
--van-action-bar-background-color: var(--van-background-color-light);
--van-action-bar-height: 50px;
}
.van-action-bar {

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

@ -1,4 +0,0 @@
@import '../style/var.less';
@action-bar-background-color: var(--van-background-color-light);
@action-bar-height: 50px;

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

@ -1,28 +1,27 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-action-sheet-max-height: @action-sheet-max-height;
--van-action-sheet-header-height: @action-sheet-header-height;
--van-action-sheet-header-font-size: @action-sheet-header-font-size;
--van-action-sheet-description-color: @action-sheet-description-color;
--van-action-sheet-description-font-size: @action-sheet-description-font-size;
--van-action-sheet-description-line-height: @action-sheet-description-line-height;
--van-action-sheet-item-background: @action-sheet-item-background;
--van-action-sheet-item-font-size: @action-sheet-item-font-size;
--van-action-sheet-item-line-height: @action-sheet-item-line-height;
--van-action-sheet-item-text-color: @action-sheet-item-text-color;
--van-action-sheet-item-disabled-text-color: @action-sheet-item-disabled-text-color;
--van-action-sheet-subname-color: @action-sheet-subname-color;
--van-action-sheet-subname-font-size: @action-sheet-subname-font-size;
--van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
--van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
--van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
--van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
--van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
--van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
--van-action-sheet-cancel-padding-color: @action-sheet-cancel-padding-color;
--van-action-sheet-loading-icon-size: @action-sheet-loading-icon-size;
--van-action-sheet-max-height: 80%;
--van-action-sheet-header-height: 48px;
--van-action-sheet-header-font-size: var(--van-font-size-lg);
--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-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);
--van-action-sheet-item-disabled-text-color: var(--van-text-color-tertiary);
--van-action-sheet-subname-color: var(--van-text-color-secondary);
--van-action-sheet-subname-font-size: var(--van-font-size-sm);
--van-action-sheet-subname-line-height: var(--van-line-height-sm);
--van-action-sheet-close-icon-size: 22px;
--van-action-sheet-close-icon-color: var(--van-gray-5);
--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-loading-icon-size: 22px;
}
.van-action-sheet {

23
packages/vant/src/action-sheet/var.less
View File

@ -1,23 +0,0 @@
@import '../style/var.less';
@action-sheet-max-height: 80%;
@action-sheet-header-height: 48px;
@action-sheet-header-font-size: var(--van-font-size-lg);
@action-sheet-description-color: var(--van-text-color-secondary);
@action-sheet-description-font-size: var(--van-font-size-md);
@action-sheet-description-line-height: var(--van-line-height-md);
@action-sheet-item-background: var(--van-background-color-light);
@action-sheet-item-font-size: var(--van-font-size-lg);
@action-sheet-item-line-height: var(--van-line-height-lg);
@action-sheet-item-text-color: var(--van-text-color);
@action-sheet-item-disabled-text-color: var(--van-text-color-tertiary);
@action-sheet-subname-color: var(--van-text-color-secondary);
@action-sheet-subname-font-size: var(--van-font-size-sm);
@action-sheet-subname-line-height: var(--van-line-height-sm);
@action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: var(--van-gray-5);
@action-sheet-close-icon-padding: 0 var(--van-padding-md);
@action-sheet-cancel-text-color: var(--van-gray-7);
@action-sheet-cancel-padding-top: var(--van-padding-xs);
@action-sheet-cancel-padding-color: var(--van-background-color);
@action-sheet-loading-icon-size: 22px;

11
packages/vant/src/address-edit/index.less
View File

@ -1,10 +1,9 @@
@import './var.less';
:root {
--van-address-edit-padding: @address-edit-padding;
--van-address-edit-buttons-padding: @address-edit-buttons-padding;
--van-address-edit-button-margin-bottom: @address-edit-button-margin-bottom;
--van-address-edit-button-font-size: @address-edit-button-font-size;
--van-address-edit-padding: var(--van-padding-sm);
--van-address-edit-buttons-padding: var(--van-padding-xl)
var(--van-padding-base);
--van-address-edit-button-margin-bottom: var(--van-padding-sm);
--van-address-edit-button-font-size: var(--van-font-size-lg);
}
.van-address-edit {

6
packages/vant/src/address-edit/var.less
View File

@ -1,6 +0,0 @@
@import '../style/var.less';
@address-edit-padding: var(--van-padding-sm);
@address-edit-buttons-padding: var(--van-padding-xl) var(--van-padding-base);
@address-edit-button-margin-bottom: var(--van-padding-sm);
@address-edit-button-font-size: var(--van-font-size-lg);

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

@ -1,19 +1,17 @@
@import './var.less';
:root {
--van-address-list-padding: @address-list-padding;
--van-address-list-disabled-text-color: @address-list-disabled-text-color;
--van-address-list-disabled-text-padding: @address-list-disabled-text-padding;
--van-address-list-disabled-text-font-size: @address-list-disabled-text-font-size;
--van-address-list-disabled-text-line-height: @address-list-disabled-text-line-height;
--van-address-list-add-button-z-index: @address-list-add-button-z-index;
--van-address-list-item-padding: @address-list-item-padding;
--van-address-list-item-text-color: @address-list-item-text-color;
--van-address-list-item-disabled-text-color: @address-list-item-disabled-text-color;
--van-address-list-item-font-size: @address-list-item-font-size;
--van-address-list-item-line-height: @address-list-item-line-height;
--van-address-list-item-radio-icon-color: @address-list-item-radio-icon-color;
--van-address-list-edit-icon-size: @address-list-edit-icon-size;
--van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
--van-address-list-disabled-text-color: var(--van-text-color-secondary);
--van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;
--van-address-list-disabled-text-font-size: var(--van-font-size-md);
--van-address-list-disabled-text-line-height: var(--van-line-height-md);
--van-address-list-add-button-z-index: 999;
--van-address-list-item-padding: var(--van-padding-sm);
--van-address-list-item-text-color: var(--van-text-color);
--van-address-list-item-disabled-text-color: var(--van-text-color-tertiary);
--van-address-list-item-font-size: 13px;
--van-address-list-item-line-height: var(--van-line-height-sm);
--van-address-list-item-radio-icon-color: var(--van-danger-color);
--van-address-list-edit-icon-size: 20px;
}
.van-address-list {

16
packages/vant/src/address-list/var.less
View File

@ -1,16 +0,0 @@
@import '../style/var.less';
@address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
@address-list-disabled-text-color: var(--van-text-color-secondary);
@address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0
var(--van-padding-md);
@address-list-disabled-text-font-size: var(--van-font-size-md);
@address-list-disabled-text-line-height: var(--van-line-height-md);
@address-list-add-button-z-index: 999;
@address-list-item-padding: var(--van-padding-sm);
@address-list-item-text-color: var(--van-text-color);
@address-list-item-disabled-text-color: var(--van-text-color-tertiary);
@address-list-item-font-size: 13px;
@address-list-item-line-height: var(--van-line-height-sm);
@address-list-item-radio-icon-color: var(--van-danger-color);
@address-list-edit-icon-size: 20px;

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

@ -1,16 +1,14 @@
@import './var.less';
:root {
--van-badge-size: @badge-size;
--van-badge-color: @badge-color;
--van-badge-padding: @badge-padding;
--van-badge-font-size: @badge-font-size;
--van-badge-font-weight: @badge-font-weight;
--van-badge-border-width: @badge-border-width;
--van-badge-background-color: @badge-background-color;
--van-badge-dot-color: @badge-dot-color;
--van-badge-dot-size: @badge-dot-size;
--van-badge-font-family: @badge-font-family;
--van-badge-size: 16px;
--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-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 {

12
packages/vant/src/badge/var.less
View File

@ -1,12 +0,0 @@
@import '../style/var.less';
@badge-size: 16px;
@badge-color: var(--van-white);
@badge-padding: 0 3px;
@badge-font-size: var(--van-font-size-sm);
@badge-font-weight: var(--van-font-weight-bold);
@badge-border-width: var(--van-border-width-base);
@badge-background-color: var(--van-danger-color);
@badge-dot-color: var(--van-danger-color);
@badge-dot-size: 8px;
@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;

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

@ -1,40 +1,38 @@
@import './var.less';
:root {
--van-button-mini-height: @button-mini-height;
--van-button-mini-padding: @button-mini-padding;
--van-button-mini-font-size: @button-mini-font-size;
--van-button-small-height: @button-small-height;
--van-button-small-padding: @button-small-padding;
--van-button-small-font-size: @button-small-font-size;
--van-button-normal-padding: @button-normal-padding;
--van-button-normal-font-size: @button-normal-font-size;
--van-button-large-height: @button-large-height;
--van-button-default-height: @button-default-height;
--van-button-default-line-height: @button-default-line-height;
--van-button-default-font-size: @button-default-font-size;
--van-button-default-color: @button-default-color;
--van-button-default-background-color: @button-default-background-color;
--van-button-default-border-color: @button-default-border-color;
--van-button-primary-color: @button-primary-color;
--van-button-primary-background-color: @button-primary-background-color;
--van-button-primary-border-color: @button-primary-border-color;
--van-button-success-color: @button-success-color;
--van-button-success-background-color: @button-success-background-color;
--van-button-success-border-color: @button-success-border-color;
--van-button-danger-color: @button-danger-color;
--van-button-danger-background-color: @button-danger-background-color;
--van-button-danger-border-color: @button-danger-border-color;
--van-button-warning-color: @button-warning-color;
--van-button-warning-background-color: @button-warning-background-color;
--van-button-warning-border-color: @button-warning-border-color;
--van-button-border-width: @button-border-width;
--van-button-border-radius: @button-border-radius;
--van-button-round-border-radius: @button-round-border-radius;
--van-button-plain-background-color: @button-plain-background-color;
--van-button-disabled-opacity: @button-disabled-opacity;
--van-button-icon-size: @button-icon-size;
--van-button-loading-icon-size: @button-loading-icon-size;
--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-padding: 0 15px;
--van-button-normal-font-size: var(--van-font-size-md);
--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-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-disabled-opacity: var(--van-disabled-opacity);
--van-button-icon-size: 1.2em;
--van-button-loading-icon-size: 20px;
}
.van-button {

36
packages/vant/src/button/var.less
View File

@ -1,36 +0,0 @@
@import '../style/var.less';
@button-mini-height: 24px;
@button-mini-padding: 0 var(--van-padding-base);
@button-mini-font-size: var(--van-font-size-xs);
@button-small-height: 32px;
@button-small-padding: 0 var(--van-padding-xs);
@button-small-font-size: var(--van-font-size-sm);
@button-normal-padding: 0 15px;
@button-normal-font-size: var(--van-font-size-md);
@button-large-height: 50px;
@button-default-height: 44px;
@button-default-line-height: 1.2;
@button-default-font-size: var(--van-font-size-lg);
@button-default-color: var(--van-text-color);
@button-default-background-color: var(--van-background-color-light);
@button-default-border-color: var(--van-border-color);
@button-primary-color: var(--van-white);
@button-primary-background-color: var(--van-primary-color);
@button-primary-border-color: var(--van-primary-color);
@button-success-color: var(--van-white);
@button-success-background-color: var(--van-success-color);
@button-success-border-color: var(--van-success-color);
@button-danger-color: var(--van-white);
@button-danger-background-color: var(--van-danger-color);
@button-danger-border-color: var(--van-danger-color);
@button-warning-color: var(--van-white);
@button-warning-background-color: var(--van-warning-color);
@button-warning-border-color: var(--van-warning-color);
@button-border-width: var(--van-border-width-base);
@button-border-radius: var(--van-border-radius-sm);
@button-round-border-radius: var(--van-border-radius-max);
@button-plain-background-color: var(--van-white);
@button-disabled-opacity: var(--van-disabled-opacity);
@button-icon-size: 1.2em;
@button-loading-icon-size: 20px;

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

@ -1,31 +1,29 @@
@import './var.less';
:root {
--van-calendar-background-color: @calendar-background-color;
--van-calendar-popup-height: @calendar-popup-height;
--van-calendar-header-box-shadow: @calendar-header-box-shadow;
--van-calendar-header-title-height: @calendar-header-title-height;
--van-calendar-header-title-font-size: @calendar-header-title-font-size;
--van-calendar-header-subtitle-font-size: @calendar-header-subtitle-font-size;
--van-calendar-weekdays-height: @calendar-weekdays-height;
--van-calendar-weekdays-font-size: @calendar-weekdays-font-size;
--van-calendar-month-title-font-size: @calendar-month-title-font-size;
--van-calendar-month-mark-color: @calendar-month-mark-color;
--van-calendar-month-mark-font-size: @calendar-month-mark-font-size;
--van-calendar-day-height: @calendar-day-height;
--van-calendar-day-font-size: @calendar-day-font-size;
--van-calendar-range-edge-color: @calendar-range-edge-color;
--van-calendar-range-edge-background-color: @calendar-range-edge-background-color;
--van-calendar-range-middle-color: @calendar-range-middle-color;
--van-calendar-range-middle-background-opacity: @calendar-range-middle-background-opacity;
--van-calendar-selected-day-size: @calendar-selected-day-size;
--van-calendar-selected-day-color: @calendar-selected-day-color;
--van-calendar-info-font-size: @calendar-info-font-size;
--van-calendar-info-line-height: @calendar-info-line-height;
--van-calendar-selected-day-background-color: @calendar-selected-day-background-color;
--van-calendar-day-disabled-color: @calendar-day-disabled-color;
--van-calendar-confirm-button-height: @calendar-confirm-button-height;
--van-calendar-confirm-button-margin: @calendar-confirm-button-margin;
--van-calendar-background-color: var(--van-background-color-light);
--van-calendar-popup-height: 80%;
--van-calendar-header-box-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);
--van-calendar-weekdays-height: 30px;
--van-calendar-weekdays-font-size: var(--van-font-size-sm);
--van-calendar-month-title-font-size: var(--van-font-size-md);
--van-calendar-month-mark-color: rgba(242, 243, 245, 0.8);
--van-calendar-month-mark-font-size: 160px;
--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-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-day-disabled-color: var(--van-text-color-tertiary);
--van-calendar-confirm-button-height: 36px;
--van-calendar-confirm-button-margin: 7px 0;
}
.van-calendar {

27
packages/vant/src/calendar/var.less
View File

@ -1,27 +0,0 @@
@import '../style/var.less';
@calendar-background-color: var(--van-background-color-light);
@calendar-popup-height: 80%;
@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);
@calendar-header-title-height: 44px;
@calendar-header-title-font-size: var(--van-font-size-lg);
@calendar-header-subtitle-font-size: var(--van-font-size-md);
@calendar-weekdays-height: 30px;
@calendar-weekdays-font-size: var(--van-font-size-sm);
@calendar-month-title-font-size: var(--van-font-size-md);
@calendar-month-mark-color: rgba(242, 243, 245, 0.8);
@calendar-month-mark-font-size: 160px;
@calendar-day-height: 64px;
@calendar-day-font-size: var(--van-font-size-lg);
@calendar-range-edge-color: var(--van-white);
@calendar-range-edge-background-color: var(--van-danger-color);
@calendar-range-middle-color: var(--van-danger-color);
@calendar-range-middle-background-opacity: 0.1;
@calendar-selected-day-size: 54px;
@calendar-selected-day-color: var(--van-white);
@calendar-info-font-size: var(--van-font-size-xs);
@calendar-info-line-height: var(--van-line-height-xs);
@calendar-selected-day-background-color: var(--van-danger-color);
@calendar-day-disabled-color: var(--van-text-color-tertiary);
@calendar-confirm-button-height: 36px;
@calendar-confirm-button-margin: 7px 0;

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

@ -1,22 +1,20 @@
@import './var.less';
:root {
--van-card-padding: @card-padding;
--van-card-font-size: @card-font-size;
--van-card-text-color: @card-text-color;
--van-card-background-color: @card-background-color;
--van-card-thumb-size: @card-thumb-size;
--van-card-thumb-border-radius: @card-thumb-border-radius;
--van-card-title-line-height: @card-title-line-height;
--van-card-desc-color: @card-desc-color;
--van-card-desc-line-height: @card-desc-line-height;
--van-card-price-color: @card-price-color;
--van-card-origin-price-color: @card-origin-price-color;
--van-card-num-color: @card-num-color;
--van-card-origin-price-font-size: @card-origin-price-font-size;
--van-card-price-font-size: @card-price-font-size;
--van-card-price-integer-font-size: @card-price-integer-font-size;
--van-card-price-font-family: @card-price-font-family;
--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-thumb-size: 88px;
--van-card-thumb-border-radius: var(--van-border-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);
--van-card-price-color: var(--van-gray-8);
--van-card-origin-price-color: var(--van-text-color-secondary);
--van-card-num-color: var(--van-text-color-secondary);
--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 {

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

@ -1,18 +0,0 @@
@import '../style/var.less';
@card-padding: var(--van-padding-xs) var(--van-padding-md);
@card-font-size: var(--van-font-size-sm);
@card-text-color: var(--van-text-color);
@card-background-color: var(--van-gray-1);
@card-thumb-size: 88px;
@card-thumb-border-radius: var(--van-border-radius-lg);
@card-title-line-height: 16px;
@card-desc-color: var(--van-gray-7);
@card-desc-line-height: var(--van-line-height-md);
@card-price-color: var(--van-gray-8);
@card-origin-price-color: var(--van-text-color-secondary);
@card-num-color: var(--van-text-color-secondary);
@card-origin-price-font-size: var(--van-font-size-xs);
@card-price-font-size: var(--van-font-size-sm);
@card-price-integer-font-size: var(--van-font-size-lg);
@card-price-font-family: var(--van-price-integer-font-family);

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

@ -1,19 +1,17 @@
@import './var.less';
:root {
--van-cascader-header-height: @cascader-header-height;
--van-cascader-header-padding: @cascader-header-padding;
--van-cascader-title-font-size: @cascader-title-font-size;
--van-cascader-title-line-height: @cascader-title-line-height;
--van-cascader-close-icon-size: @cascader-close-icon-size;
--van-cascader-close-icon-color: @cascader-close-icon-color;
--van-cascader-selected-icon-size: @cascader-selected-icon-size;
--van-cascader-tabs-height: @cascader-tabs-height;
--van-cascader-active-color: @cascader-active-color;
--van-cascader-options-height: @cascader-options-height;
--van-cascader-option-disabled-color: @cascader-option-disabled-color;
--van-cascader-tab-color: @cascader-tab-color;
--van-cascader-unselected-tab-color: @cascader-unselected-tab-color;
--van-cascader-header-height: 48px;
--van-cascader-header-padding: 0 var(--van-padding-md);
--van-cascader-title-font-size: var(--van-font-size-lg);
--van-cascader-title-line-height: 20px;
--van-cascader-close-icon-size: 22px;
--van-cascader-close-icon-color: var(--van-gray-5);
--van-cascader-selected-icon-size: 18px;
--van-cascader-tabs-height: 48px;
--van-cascader-active-color: var(--van-danger-color);
--van-cascader-options-height: 384px;
--van-cascader-option-disabled-color: var(--van-text-color-tertiary);
--van-cascader-tab-color: var(--van-text-color);
--van-cascader-unselected-tab-color: var(--van-text-color-secondary);
}
.van-cascader {

15
packages/vant/src/cascader/var.less
View File

@ -1,15 +0,0 @@
@import '../style/var.less';
@cascader-header-height: 48px;
@cascader-header-padding: 0 var(--van-padding-md);
@cascader-title-font-size: var(--van-font-size-lg);
@cascader-title-line-height: 20px;
@cascader-close-icon-size: 22px;
@cascader-close-icon-color: var(--van-gray-5);
@cascader-selected-icon-size: 18px;
@cascader-tabs-height: 48px;
@cascader-active-color: var(--van-danger-color);
@cascader-options-height: 384px;
@cascader-option-disabled-color: var(--van-text-color-tertiary);
@cascader-tab-color: var(--van-text-color);
@cascader-unselected-tab-color: var(--van-text-color-secondary);

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

@ -1,14 +1,13 @@
@import './var.less';
:root {
--van-cell-group-background-color: @cell-group-background-color;
--van-cell-group-title-color: @cell-group-title-color;
--van-cell-group-title-padding: @cell-group-title-padding;
--van-cell-group-title-font-size: @cell-group-title-font-size;
--van-cell-group-title-line-height: @cell-group-title-line-height;
--van-cell-group-inset-padding: @cell-group-inset-padding;
--van-cell-group-inset-border-radius: @cell-group-inset-border-radius;
--van-cell-group-inset-title-padding: @cell-group-inset-title-padding;
--van-cell-group-background-color: var(--van-background-color-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-title-padding: var(--van-padding-md)
var(--van-padding-md);
}
.van-cell-group {

12
packages/vant/src/cell-group/var.less
View File

@ -1,12 +0,0 @@
@import '../style/var.less';
@cell-group-background-color: var(--van-background-color-light);
@cell-group-title-color: var(--van-text-color-secondary);
@cell-group-title-padding: var(--van-padding-md) var(--van-padding-md)
var(--van-padding-xs);
@cell-group-title-font-size: var(--van-font-size-md);
@cell-group-title-line-height: 16px;
@cell-group-inset-padding: 0 var(--van-padding-md);
@cell-group-inset-border-radius: var(--van-border-radius-lg);
@cell-group-inset-title-padding: var(--van-padding-md) var(--van-padding-md)
var(--van-padding-xs) var(--van-padding-xl);

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

@ -1,26 +1,25 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-cell-font-size: @cell-font-size;
--van-cell-line-height: @cell-line-height;
--van-cell-vertical-padding: @cell-vertical-padding;
--van-cell-horizontal-padding: @cell-horizontal-padding;
--van-cell-text-color: @cell-text-color;
--van-cell-background-color: @cell-background-color;
--van-cell-border-color: @cell-border-color;
--van-cell-active-color: @cell-active-color;
--van-cell-required-color: @cell-required-color;
--van-cell-label-color: @cell-label-color;
--van-cell-label-font-size: @cell-label-font-size;
--van-cell-label-line-height: @cell-label-line-height;
--van-cell-label-margin-top: @cell-label-margin-top;
--van-cell-value-color: @cell-value-color;
--van-cell-icon-size: @cell-icon-size;
--van-cell-right-icon-color: @cell-right-icon-color;
--van-cell-large-vertical-padding: @cell-large-vertical-padding;
--van-cell-large-title-font-size: @cell-large-title-font-size;
--van-cell-large-label-font-size: @cell-large-label-font-size;
--van-cell-font-size: var(--van-font-size-md);
--van-cell-line-height: 24px;
--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-border-color: var(--van-border-color);
--van-cell-active-color: var(--van-active-color);
--van-cell-required-color: var(--van-danger-color);
--van-cell-label-color: var(--van-text-color-secondary);
--van-cell-label-font-size: var(--van-font-size-sm);
--van-cell-label-line-height: var(--van-line-height-sm);
--van-cell-label-margin-top: var(--van-padding-base);
--van-cell-value-color: var(--van-text-color-secondary);
--van-cell-icon-size: 16px;
--van-cell-right-icon-color: var(--van-gray-6);
--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 {

21
packages/vant/src/cell/var.less
View File

@ -1,21 +0,0 @@
@import '../style/var.less';
@cell-font-size: var(--van-font-size-md);
@cell-line-height: 24px;
@cell-vertical-padding: 10px;
@cell-horizontal-padding: var(--van-padding-md);
@cell-text-color: var(--van-text-color);
@cell-background-color: var(--van-background-color-light);
@cell-border-color: var(--van-border-color);
@cell-active-color: var(--van-active-color);
@cell-required-color: var(--van-danger-color);
@cell-label-color: var(--van-text-color-secondary);
@cell-label-font-size: var(--van-font-size-sm);
@cell-label-line-height: var(--van-line-height-sm);
@cell-label-margin-top: var(--van-padding-base);
@cell-value-color: var(--van-text-color-secondary);
@cell-icon-size: 16px;
@cell-right-icon-color: var(--van-gray-6);
@cell-large-vertical-padding: var(--van-padding-sm);
@cell-large-title-font-size: var(--van-font-size-lg);
@cell-large-label-font-size: var(--van-font-size-md);

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

@ -1,15 +1,13 @@
@import './var.less';
:root {
--van-checkbox-size: @checkbox-size;
--van-checkbox-border-color: @checkbox-border-color;
--van-checkbox-transition-duration: @checkbox-transition-duration;
--van-checkbox-label-margin: @checkbox-label-margin;
--van-checkbox-label-color: @checkbox-label-color;
--van-checkbox-checked-icon-color: @checkbox-checked-icon-color;
--van-checkbox-disabled-icon-color: @checkbox-disabled-icon-color;
--van-checkbox-disabled-label-color: @checkbox-disabled-label-color;
--van-checkbox-disabled-background-color: @checkbox-disabled-background-color;
--van-checkbox-size: 20px;
--van-checkbox-border-color: var(--van-gray-5);
--van-checkbox-transition-duration: var(--van-animation-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 {

11
packages/vant/src/checkbox/var.less
View File

@ -1,11 +0,0 @@
@import '../style/var.less';
@checkbox-size: 20px;
@checkbox-border-color: var(--van-gray-5);
@checkbox-transition-duration: var(--van-animation-duration-fast);
@checkbox-label-margin: var(--van-padding-xs);
@checkbox-label-color: var(--van-text-color);
@checkbox-checked-icon-color: var(--van-primary-color);
@checkbox-disabled-icon-color: var(--van-gray-5);
@checkbox-disabled-label-color: var(--van-text-color-tertiary);
@checkbox-disabled-background-color: var(--van-border-color);

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

@ -1,13 +1,11 @@
@import './var.less';
:root {
--van-circle-size: @circle-size;
--van-circle-color: @circle-color;
--van-circle-layer-color: @circle-layer-color;
--van-circle-text-color: @circle-text-color;
--van-circle-text-font-weight: @circle-text-font-weight;
--van-circle-text-font-size: @circle-text-font-size;
--van-circle-text-line-height: @circle-text-line-height;
--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 {

9
packages/vant/src/circle/var.less
View File

@ -1,9 +0,0 @@
@import '../style/var.less';
@circle-size: 100px;
@circle-color: var(--van-primary-color);
@circle-layer-color: var(--van-white);
@circle-text-color: var(--van-text-color);
@circle-text-font-weight: var(--van-font-weight-bold);
@circle-text-font-size: var(--van-font-size-md);
@circle-text-line-height: var(--van-line-height-md);

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

@ -1,14 +1,16 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-collapse-item-transition-duration: @collapse-item-transition-duration;
--van-collapse-item-content-padding: @collapse-item-content-padding;
--van-collapse-item-content-font-size: @collapse-item-content-font-size;
--van-collapse-item-content-line-height: @collapse-item-content-line-height;
--van-collapse-item-content-text-color: @collapse-item-content-text-color;
--van-collapse-item-content-background-color: @collapse-item-content-background-color;
--van-collapse-item-title-disabled-color: @collapse-item-title-disabled-color;
--van-collapse-item-transition-duration: var(--van-animation-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-title-disabled-color: var(--van-text-color-tertiary);
}
.van-collapse-item {

9
packages/vant/src/collapse-item/var.less
View File

@ -1,9 +0,0 @@
@import '../style/var.less';
@collapse-item-transition-duration: var(--van-animation-duration-base);
@collapse-item-content-padding: var(--van-padding-sm) var(--van-padding-md);
@collapse-item-content-font-size: var(--van-font-size-md);
@collapse-item-content-line-height: 1.5;
@collapse-item-content-text-color: var(--van-text-color-secondary);
@collapse-item-content-background-color: var(--van-background-color-light);
@collapse-item-title-disabled-color: var(--van-text-color-tertiary);

10
packages/vant/src/contact-card/index.less
View File

@ -1,10 +1,8 @@
@import './var.less';
:root {
--van-contact-card-padding: @contact-card-padding;
--van-contact-card-add-icon-size: @contact-card-add-icon-size;
--van-contact-card-add-icon-color: @contact-card-add-icon-color;
--van-contact-card-value-line-height: @contact-card-value-line-height;
--van-contact-card-padding: var(--van-padding-md);
--van-contact-card-add-icon-size: 40px;
--van-contact-card-add-icon-color: var(--van-primary-color);
--van-contact-card-value-line-height: var(--van-line-height-md);
}
.van-contact-card {

6
packages/vant/src/contact-card/var.less
View File

@ -1,6 +0,0 @@
@import '../style/var.less';
@contact-card-padding: var(--van-padding-md);
@contact-card-add-icon-size: 40px;
@contact-card-add-icon-color: var(--van-primary-color);
@contact-card-value-line-height: var(--van-line-height-md);

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

@ -1,12 +1,10 @@
@import './var.less';
:root {
--van-contact-edit-padding: @contact-edit-padding;
--van-contact-edit-fields-radius: @contact-edit-fields-radius;
--van-contact-edit-buttons-padding: @contact-edit-buttons-padding;
--van-contact-edit-button-margin-bottom: @contact-edit-button-margin-bottom;
--van-contact-edit-button-font-size: @contact-edit-button-font-size;
--van-contact-edit-field-label-width: @contact-edit-field-label-width;
--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 {

8
packages/vant/src/contact-edit/var.less
View File

@ -1,8 +0,0 @@
@import '../style/var.less';
@contact-edit-padding: var(--van-padding-md);
@contact-edit-fields-radius: var(--van-border-radius-md);
@contact-edit-buttons-padding: var(--van-padding-xl) 0;
@contact-edit-button-margin-bottom: var(--van-padding-sm);
@contact-edit-button-font-size: var(--van-font-size-lg);
@contact-edit-field-label-width: 4.1em;

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

@ -1,10 +1,8 @@
@import './var.less';
:root {
--van-contact-list-edit-icon-size: @contact-list-edit-icon-size;
--van-contact-list-add-button-z-index: @contact-list-add-button-z-index;
--van-contact-list-item-padding: @contact-list-item-padding;
--van-contact-list-item-radio-icon-color: @contact-list-item-radio-icon-color;
--van-contact-list-edit-icon-size: 16px;
--van-contact-list-add-button-z-index: 999;
--van-contact-list-item-padding: var(--van-padding-md);
--van-contact-list-item-radio-icon-color: var(--van-danger-color);
}
.van-contact-list {

6
packages/vant/src/contact-list/var.less
View File

@ -1,6 +0,0 @@
@import '../style/var.less';
@contact-list-edit-icon-size: 16px;
@contact-list-add-button-z-index: 999;
@contact-list-item-padding: var(--van-padding-md);
@contact-list-item-radio-icon-color: var(--van-danger-color);

8
packages/vant/src/count-down/index.less
View File

@ -1,9 +1,7 @@
@import './var.less';
:root {
--van-count-down-text-color: @count-down-text-color;
--van-count-down-font-size: @count-down-font-size;
--van-count-down-line-height: @count-down-line-height;
--van-count-down-text-color: var(--van-text-color);
--van-count-down-font-size: var(--van-font-size-md);
--van-count-down-line-height: var(--van-line-height-md);
}
.van-count-down {

5
packages/vant/src/count-down/var.less
View File

@ -1,5 +0,0 @@
@import '../style/var.less';
@count-down-text-color: var(--van-text-color);
@count-down-font-size: var(--van-font-size-md);
@count-down-line-height: var(--van-line-height-md);

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

@ -1,7 +1,5 @@
@import './var.less';
:root {
--van-coupon-cell-selected-text-color: @coupon-cell-selected-text-color;
--van-coupon-cell-selected-text-color: var(--van-text-color);
}
.van-coupon-cell {

3
packages/vant/src/coupon-cell/var.less
View File

@ -1,3 +0,0 @@
@import '../style/var.less';
@coupon-cell-selected-text-color: var(--van-text-color);

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

@ -1,14 +1,12 @@
@import './var.less';
:root {
--van-coupon-list-background-color: @coupon-list-background-color;
--van-coupon-list-field-padding: @coupon-list-field-padding;
--van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height;
--van-coupon-list-close-button-height: @coupon-list-close-button-height;
--van-coupon-list-empty-image-size: @coupon-list-empty-image-size;
--van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color;
--van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size;
--van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height;
--van-coupon-list-background-color: var(--van-background-color);
--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;
--van-coupon-list-empty-image-size: 200px;
--van-coupon-list-empty-tip-color: var(--van-text-color-secondary);
--van-coupon-list-empty-tip-font-size: var(--van-font-size-md);
--van-coupon-list-empty-tip-line-height: var(--van-line-height-md);
}
.van-coupon-list {

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

@ -1,10 +0,0 @@
@import '../style/var.less';
@coupon-list-background-color: var(--van-background-color);
@coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
@coupon-list-exchange-button-height: 32px;
@coupon-list-close-button-height: 40px;
@coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: var(--van-text-color-secondary);
@coupon-list-empty-tip-font-size: var(--van-font-size-md);
@coupon-list-empty-tip-line-height: var(--van-line-height-md);

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

@ -1,24 +1,23 @@
@import './var.less';
@import '../style/mixins/ellipsis';
:root {
--van-coupon-margin: @coupon-margin;
--van-coupon-content-height: @coupon-content-height;
--van-coupon-content-padding: @coupon-content-padding;
--van-coupon-content-text-color: @coupon-content-text-color;
--van-coupon-background-color: @coupon-background-color;
--van-coupon-active-background-color: @coupon-active-background-color;
--van-coupon-border-radius: @coupon-border-radius;
--van-coupon-box-shadow: @coupon-box-shadow;
--van-coupon-head-width: @coupon-head-width;
--van-coupon-amount-color: @coupon-amount-color;
--van-coupon-amount-font-size: @coupon-amount-font-size;
--van-coupon-currency-font-size: @coupon-currency-font-size;
--van-coupon-name-font-size: @coupon-name-font-size;
--van-coupon-disabled-text-color: @coupon-disabled-text-color;
--van-coupon-description-padding: @coupon-description-padding;
--van-coupon-description-border-color: @coupon-description-border-color;
--van-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color;
--van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
--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-head-width: 96px;
--van-coupon-amount-color: var(--van-danger-color);
--van-coupon-amount-font-size: 30px;
--van-coupon-currency-font-size: 40%;
--van-coupon-name-font-size: var(--van-font-size-md);
--van-coupon-disabled-text-color: var(--van-text-color-secondary);
--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 {

19
packages/vant/src/coupon/var.less
View File

@ -1,19 +0,0 @@
@import '../style/var.less';
@coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
@coupon-content-height: 84px;
@coupon-content-padding: 14px 0;
@coupon-content-text-color: var(--van-text-color);
@coupon-background-color: var(--van-background-color-light);
@coupon-active-background-color: var(--van-active-color);
@coupon-border-radius: var(--van-border-radius-lg);
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
@coupon-head-width: 96px;
@coupon-amount-color: var(--van-danger-color);
@coupon-amount-font-size: 30px;
@coupon-currency-font-size: 40%;
@coupon-name-font-size: var(--van-font-size-md);
@coupon-disabled-text-color: var(--van-text-color-secondary);
@coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);
@coupon-description-border-color: var(--van-border-color);
@coupon-corner-checkbox-icon-color: var(--van-danger-color);

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

@ -1,25 +1,23 @@
@import './var.less';
:root {
--van-dialog-width: @dialog-width;
--van-dialog-small-screen-width: @dialog-small-screen-width;
--van-dialog-font-size: @dialog-font-size;
--van-dialog-transition: @dialog-transition;
--van-dialog-border-radius: @dialog-border-radius;
--van-dialog-background-color: @dialog-background-color;
--van-dialog-header-font-weight: @dialog-header-font-weight;
--van-dialog-header-line-height: @dialog-header-line-height;
--van-dialog-header-padding-top: @dialog-header-padding-top;
--van-dialog-header-isolated-padding: @dialog-header-isolated-padding;
--van-dialog-message-padding: @dialog-message-padding;
--van-dialog-message-font-size: @dialog-message-font-size;
--van-dialog-message-line-height: @dialog-message-line-height;
--van-dialog-message-max-height: @dialog-message-max-height;
--van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color;
--van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top;
--van-dialog-button-height: @dialog-button-height;
--van-dialog-round-button-height: @dialog-round-button-height;
--van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color;
--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-header-line-height: 24px;
--van-dialog-header-padding-top: 26px;
--van-dialog-header-isolated-padding: var(--van-padding-lg) 0;
--van-dialog-message-padding: var(--van-padding-lg);
--van-dialog-message-font-size: var(--van-font-size-md);
--van-dialog-message-line-height: var(--van-line-height-md);
--van-dialog-message-max-height: 60vh;
--van-dialog-has-title-message-text-color: var(--van-gray-7);
--van-dialog-has-title-message-padding-top: var(--van-padding-xs);
--van-dialog-button-height: 48px;
--van-dialog-round-button-height: 36px;
--van-dialog-confirm-button-text-color: var(--van-danger-color);
}
.van-dialog {

21
packages/vant/src/dialog/var.less
View File

@ -1,21 +0,0 @@
@import '../style/var.less';
@dialog-width: 320px;
@dialog-small-screen-width: 90%;
@dialog-font-size: var(--van-font-size-lg);
@dialog-transition: var(--van-animation-duration-base);
@dialog-border-radius: 16px;
@dialog-background-color: var(--van-background-color-light);
@dialog-header-font-weight: var(--van-font-weight-bold);
@dialog-header-line-height: 24px;
@dialog-header-padding-top: 26px;
@dialog-header-isolated-padding: var(--van-padding-lg) 0;
@dialog-message-padding: var(--van-padding-lg);
@dialog-message-font-size: var(--van-font-size-md);
@dialog-message-line-height: var(--van-line-height-md);
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: var(--van-gray-7);
@dialog-has-title-message-padding-top: var(--van-padding-xs);
@dialog-button-height: 48px;
@dialog-round-button-height: 36px;
@dialog-confirm-button-text-color: var(--van-danger-color);

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

@ -1,14 +1,12 @@
@import './var.less';
:root {
--van-divider-margin: @divider-margin;
--van-divider-text-color: @divider-text-color;
--van-divider-font-size: @divider-font-size;
--van-divider-line-height: @divider-line-height;
--van-divider-border-color: @divider-border-color;
--van-divider-content-padding: @divider-content-padding;
--van-divider-content-left-width: @divider-content-left-width;
--van-divider-content-right-width: @divider-content-right-width;
--van-divider-margin: var(--van-padding-md) 0;
--van-divider-text-color: var(--van-text-color-secondary);
--van-divider-font-size: var(--van-font-size-md);
--van-divider-line-height: 24px;
--van-divider-border-color: var(--van-border-color);
--van-divider-content-padding: var(--van-padding-md);
--van-divider-content-left-width: 10%;
--van-divider-content-right-width: 10%;
}
.van-divider {

10
packages/vant/src/divider/var.less
View File

@ -1,10 +0,0 @@
@import '../style/var.less';
@divider-margin: var(--van-padding-md) 0;
@divider-text-color: var(--van-text-color-secondary);
@divider-font-size: var(--van-font-size-md);
@divider-line-height: 24px;
@divider-border-color: var(--van-border-color);
@divider-content-padding: var(--van-padding-md);
@divider-content-left-width: 10%;
@divider-content-right-width: 10%;

5
packages/vant/src/dropdown-item/index.less
View File

@ -1,8 +1,5 @@
@import './var.less';
@import '../dropdown-menu/var.less';
:root {
--van-dropdown-item-z-index: @dropdown-item-z-index;
--van-dropdown-item-z-index: 10;
}
.van-dropdown-item {

3
packages/vant/src/dropdown-item/var.less
View File

@ -1,3 +0,0 @@
@import '../style/var.less';
@dropdown-item-z-index: 10;

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

@ -1,18 +1,17 @@
@import './var.less';
@import '../dropdown-item/var.less';
:root {
--van-dropdown-menu-height: @dropdown-menu-height;
--van-dropdown-menu-background-color: @dropdown-menu-background-color;
--van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow;
--van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size;
--van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color;
--van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color;
--van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color;
--van-dropdown-menu-title-padding: @dropdown-menu-title-padding;
--van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height;
--van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color;
--van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height;
--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-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);
--van-dropdown-menu-title-disabled-text-color: var(
--van-text-color-secondary
);
--van-dropdown-menu-title-padding: 0 var(--van-padding-xs);
--van-dropdown-menu-title-line-height: var(--van-line-height-lg);
--van-dropdown-menu-option-active-color: var(--van-danger-color);
--van-dropdown-menu-content-max-height: 80%;
}
.van-dropdown-menu {

13
packages/vant/src/dropdown-menu/var.less
View File

@ -1,13 +0,0 @@
@import '../style/var.less';
@dropdown-menu-height: 48px;
@dropdown-menu-background-color: var(--van-background-color-light);
@dropdown-menu-box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
@dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: var(--van-text-color);
@dropdown-menu-title-active-text-color: var(--van-danger-color);
@dropdown-menu-title-disabled-text-color: var(--van-text-color-secondary);
@dropdown-menu-title-padding: 0 var(--van-padding-xs);
@dropdown-menu-title-line-height: var(--van-line-height-lg);
@dropdown-menu-option-active-color: var(--van-danger-color);
@dropdown-menu-content-max-height: 80%;

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

@ -1,14 +1,12 @@
@import './var.less';
:root {
--van-empty-padding: @empty-padding;
--van-empty-image-size: @empty-image-size;
--van-empty-description-margin-top: @empty-description-margin-top;
--van-empty-description-padding: @empty-description-padding;
--van-empty-description-color: @empty-description-color;
--van-empty-description-font-size: @empty-description-font-size;
--van-empty-description-line-height: @empty-description-line-height;
--van-empty-bottom-margin-top: @empty-bottom-margin-top;
--van-empty-padding: var(--van-padding-xl) 0;
--van-empty-image-size: 160px;
--van-empty-description-margin-top: var(--van-padding-md);
--van-empty-description-padding: 0 60px;
--van-empty-description-color: var(--van-text-color-secondary);
--van-empty-description-font-size: var(--van-font-size-md);
--van-empty-description-line-height: var(--van-line-height-md);
--van-empty-bottom-margin-top: 24px;
}
.van-empty {

10
packages/vant/src/empty/var.less
View File

@ -1,10 +0,0 @@
@import '../style/var.less';
@empty-padding: var(--van-padding-xl) 0;
@empty-image-size: 160px;
@empty-description-margin-top: var(--van-padding-md);
@empty-description-padding: 0 60px;
@empty-description-color: var(--van-text-color-secondary);
@empty-description-font-size: var(--van-font-size-md);
@empty-description-line-height: var(--van-line-height-md);
@empty-bottom-margin-top: 24px;

41
packages/vant/src/field/index.less
View File

@ -1,26 +1,23 @@
@import './var.less';
@import '../cell/var.less';
:root {
--van-field-label-width: @field-label-width;
--van-field-label-color: @field-label-color;
--van-field-label-margin-right: @field-label-margin-right;
--van-field-input-text-color: @field-input-text-color;
--van-field-input-error-text-color: @field-input-error-text-color;
--van-field-input-disabled-text-color: @field-input-disabled-text-color;
--van-field-placeholder-text-color: @field-placeholder-text-color;
--van-field-icon-size: @field-icon-size;
--van-field-clear-icon-size: @field-clear-icon-size;
--van-field-clear-icon-color: @field-clear-icon-color;
--van-field-right-icon-color: @field-right-icon-color;
--van-field-error-message-color: @field-error-message-color;
--van-field-error-message-font-size: @field-error-message-font-size;
--van-field-text-area-min-height: @field-text-area-min-height;
--van-field-word-limit-color: @field-word-limit-color;
--van-field-word-limit-font-size: @field-word-limit-font-size;
--van-field-word-limit-line-height: @field-word-limit-line-height;
--van-field-disabled-text-color: @field-disabled-text-color;
--van-field-required-mark-color: @field-required-mark-color;
--van-field-label-width: 6.2em;
--van-field-label-color: var(--van-gray-7);
--van-field-label-margin-right: var(--van-padding-sm);
--van-field-input-text-color: var(--van-text-color);
--van-field-input-error-text-color: var(--van-danger-color);
--van-field-input-disabled-text-color: var(--van-text-color-tertiary);
--van-field-placeholder-text-color: var(--van-text-color-tertiary);
--van-field-icon-size: 16px;
--van-field-clear-icon-size: 16px;
--van-field-clear-icon-color: var(--van-gray-5);
--van-field-right-icon-color: var(--van-gray-6);
--van-field-error-message-color: var(--van-danger-color);
--van-field-error-message-font-size: 12px;
--van-field-text-area-min-height: 60px;
--van-field-word-limit-color: var(--van-gray-7);
--van-field-word-limit-font-size: var(--van-font-size-sm);
--van-field-word-limit-line-height: 16px;
--van-field-disabled-text-color: var(--van-text-color-tertiary);
--van-field-required-mark-color: var(--van-red);
}
.van-field {

21
packages/vant/src/field/var.less
View File

@ -1,21 +0,0 @@
@import '../style/var.less';
@field-label-width: 6.2em;
@field-label-color: var(--van-gray-7);
@field-label-margin-right: var(--van-padding-sm);
@field-input-text-color: var(--van-text-color);
@field-input-error-text-color: var(--van-danger-color);
@field-input-disabled-text-color: var(--van-text-color-tertiary);
@field-placeholder-text-color: var(--van-text-color-tertiary);
@field-icon-size: 16px;
@field-clear-icon-size: 16px;
@field-clear-icon-color: var(--van-gray-5);
@field-right-icon-color: var(--van-gray-6);
@field-error-message-color: var(--van-danger-color);
@field-error-message-font-size: 12px;
@field-text-area-min-height: 60px;
@field-word-limit-color: var(--van-gray-7);
@field-word-limit-font-size: var(--van-font-size-sm);
@field-word-limit-line-height: 16px;
@field-disabled-text-color: var(--van-text-color-tertiary);
@field-required-mark-color: var(--van-red);

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

@ -1,12 +1,10 @@
@import './var.less';
:root {
--van-grid-item-content-padding: @grid-item-content-padding;
--van-grid-item-content-background-color: @grid-item-content-background-color;
--van-grid-item-content-active-color: @grid-item-content-active-color;
--van-grid-item-icon-size: @grid-item-icon-size;
--van-grid-item-text-color: @grid-item-text-color;
--van-grid-item-text-font-size: @grid-item-text-font-size;
--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-active-color: var(--van-active-color);
--van-grid-item-icon-size: 28px;
--van-grid-item-text-color: var(--van-gray-7);
--van-grid-item-text-font-size: var(--van-font-size-sm);
}
.van-grid-item {

8
packages/vant/src/grid-item/var.less
View File

@ -1,8 +0,0 @@
@import '../style/var.less';
@grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
@grid-item-content-background-color: var(--van-background-color-light);
@grid-item-content-active-color: var(--van-active-color);
@grid-item-icon-size: 28px;
@grid-item-text-color: var(--van-gray-7);
@grid-item-text-font-size: var(--van-font-size-sm);

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

@ -1,15 +1,13 @@
@import './var.less';
:root {
--van-image-preview-index-text-color: @image-preview-index-text-color;
--van-image-preview-index-font-size: @image-preview-index-font-size;
--van-image-preview-index-line-height: @image-preview-index-line-height;
--van-image-preview-index-text-shadow: @image-preview-index-text-shadow;
--van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
--van-image-preview-close-icon-size: @image-preview-close-icon-size;
--van-image-preview-close-icon-color: @image-preview-close-icon-color;
--van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
--van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
--van-image-preview-index-text-color: var(--van-white);
--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-close-icon-size: 22px;
--van-image-preview-close-icon-color: var(--van-gray-5);
--van-image-preview-close-icon-margin: var(--van-padding-md);
--van-image-preview-close-icon-z-index: 1;
}
.van-image-preview {

11
packages/vant/src/image-preview/var.less
View File

@ -1,11 +0,0 @@
@import '../style/var.less';
@image-preview-index-text-color: var(--van-white);
@image-preview-index-font-size: var(--van-font-size-md);
@image-preview-index-line-height: var(--van-line-height-md);
@image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);
@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
@image-preview-close-icon-size: 22px;
@image-preview-close-icon-color: var(--van-gray-5);
@image-preview-close-icon-margin: var(--van-padding-md);
@image-preview-close-icon-z-index: 1;

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

@ -1,13 +1,11 @@
@import './var.less';
:root {
--van-image-placeholder-text-color: @image-placeholder-text-color;
--van-image-placeholder-font-size: @image-placeholder-font-size;
--van-image-placeholder-background-color: @image-placeholder-background-color;
--van-image-loading-icon-size: @image-loading-icon-size;
--van-image-loading-icon-color: @image-loading-icon-color;
--van-image-error-icon-size: @image-error-icon-size;
--van-image-error-icon-color: @image-error-icon-color;
--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-loading-icon-size: 32px;
--van-image-loading-icon-color: var(--van-gray-4);
--van-image-error-icon-size: 32px;
--van-image-error-icon-color: var(--van-gray-4);
}
.van-image {

9
packages/vant/src/image/var.less
View File

@ -1,9 +0,0 @@
@import '../style/var.less';
@image-placeholder-text-color: var(--van-text-color-secondary);
@image-placeholder-font-size: var(--van-font-size-md);
@image-placeholder-background-color: var(--van-background-color);
@image-loading-icon-size: 32px;
@image-loading-icon-color: var(--van-gray-4);
@image-error-icon-size: 32px;
@image-error-icon-color: var(--van-gray-4);

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

@ -1,15 +1,13 @@
@import './var.less';
:root {
--van-index-anchor-z-index: @index-anchor-z-index;
--van-index-anchor-padding: @index-anchor-padding;
--van-index-anchor-text-color: @index-anchor-text-color;
--van-index-anchor-font-weight: @index-anchor-font-weight;
--van-index-anchor-font-size: @index-anchor-font-size;
--van-index-anchor-line-height: @index-anchor-line-height;
--van-index-anchor-background-color: @index-anchor-background-color;
--van-index-anchor-sticky-text-color: @index-anchor-sticky-text-color;
--van-index-anchor-sticky-background-color: @index-anchor-sticky-background-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-anchor {

11
packages/vant/src/index-anchor/var.less
View File

@ -1,11 +0,0 @@
@import '../style/var.less';
@index-anchor-z-index: 1;
@index-anchor-padding: 0 var(--van-padding-md);
@index-anchor-text-color: var(--van-text-color);
@index-anchor-font-weight: var(--van-font-weight-bold);
@index-anchor-font-size: var(--van-font-size-md);
@index-anchor-line-height: 32px;
@index-anchor-background-color: transparent;
@index-anchor-sticky-text-color: var(--van-danger-color);
@index-anchor-sticky-background-color: var(--van-background-color-light);

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

@ -1,10 +1,8 @@
@import './var.less';
:root {
--van-index-bar-sidebar-z-index: @index-bar-sidebar-z-index;
--van-index-bar-index-font-size: @index-bar-index-font-size;
--van-index-bar-index-line-height: @index-bar-index-line-height;
--van-index-bar-index-active-color: @index-bar-index-active-color;
--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-bar {

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

@ -1,6 +0,0 @@
@import '../style/var.less';
@index-bar-sidebar-z-index: 2;
@index-bar-index-font-size: var(--van-font-size-xs);
@index-bar-index-line-height: var(--van-line-height-xs);
@index-bar-index-active-color: var(--van-danger-color);

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

@ -1,10 +1,8 @@
@import './var.less';
:root {
--van-list-text-color: @list-text-color;
--van-list-text-font-size: @list-text-font-size;
--van-list-text-line-height: @list-text-line-height;
--van-list-loading-icon-size: @list-loading-icon-size;
--van-list-text-color: var(--van-text-color-secondary);
--van-list-text-font-size: var(--van-font-size-md);
--van-list-text-line-height: 50px;
--van-list-loading-icon-size: 16px;
}
.van-list {

6
packages/vant/src/list/var.less
View File

@ -1,6 +0,0 @@
@import '../style/var.less';
@list-text-color: var(--van-text-color-secondary);
@list-text-font-size: var(--van-font-size-md);
@list-text-line-height: 50px;
@list-loading-icon-size: 16px;

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

@ -1,11 +1,9 @@
@import './var.less';
:root {
--van-loading-text-color: @loading-text-color;
--van-loading-text-font-size: @loading-text-font-size;
--van-loading-spinner-color: @loading-spinner-color;
--van-loading-spinner-size: @loading-spinner-size;
--van-loading-spinner-animation-duration: @loading-spinner-animation-duration;
--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 {

7
packages/vant/src/loading/var.less
View File

@ -1,7 +0,0 @@
@import '../style/var.less';
@loading-text-color: var(--van-text-color-secondary);
@loading-text-font-size: var(--van-font-size-md);
@loading-spinner-color: var(--van-gray-5);
@loading-spinner-size: 30px;
@loading-spinner-animation-duration: 0.8s;

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

@ -1,14 +1,12 @@
@import './var.less';
:root {
--van-nav-bar-height: @nav-bar-height;
--van-nav-bar-background-color: @nav-bar-background-color;
--van-nav-bar-arrow-size: @nav-bar-arrow-size;
--van-nav-bar-icon-color: @nav-bar-icon-color;
--van-nav-bar-text-color: @nav-bar-text-color;
--van-nav-bar-title-font-size: @nav-bar-title-font-size;
--van-nav-bar-title-text-color: @nav-bar-title-text-color;
--van-nav-bar-z-index: @nav-bar-z-index;
--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 {

10
packages/vant/src/nav-bar/var.less
View File

@ -1,10 +0,0 @@
@import '../style/var.less';
@nav-bar-height: 46px;
@nav-bar-background-color: var(--van-background-color-light);
@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: var(--van-primary-color);
@nav-bar-text-color: var(--van-primary-color);
@nav-bar-title-font-size: var(--van-font-size-lg);
@nav-bar-title-text-color: var(--van-text-color);
@nav-bar-z-index: 1;

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

@ -1,15 +1,13 @@
@import './var.less';
:root {
--van-notice-bar-height: @notice-bar-height;
--van-notice-bar-padding: @notice-bar-padding;
--van-notice-bar-wrapable-padding: @notice-bar-wrapable-padding;
--van-notice-bar-text-color: @notice-bar-text-color;
--van-notice-bar-font-size: @notice-bar-font-size;
--van-notice-bar-line-height: @notice-bar-line-height;
--van-notice-bar-background-color: @notice-bar-background-color;
--van-notice-bar-icon-size: @notice-bar-icon-size;
--van-notice-bar-icon-min-width: @notice-bar-icon-min-width;
--van-notice-bar-height: 40px;
--van-notice-bar-padding: 0 var(--van-padding-md);
--van-notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md);
--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-icon-size: 16px;
--van-notice-bar-icon-min-width: 24px;
}
.van-notice-bar {

11
packages/vant/src/notice-bar/var.less
View File

@ -1,11 +0,0 @@
@import '../style/var.less';
@notice-bar-height: 40px;
@notice-bar-padding: 0 var(--van-padding-md);
@notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md);
@notice-bar-text-color: var(--van-orange-dark);
@notice-bar-font-size: var(--van-font-size-md);
@notice-bar-line-height: 24px;
@notice-bar-background-color: var(--van-orange-light);
@notice-bar-icon-size: 16px;
@notice-bar-icon-min-width: 24px;

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

@ -1,14 +1,12 @@
@import './var.less';
:root {
--van-notify-text-color: @notify-text-color;
--van-notify-padding: @notify-padding;
--van-notify-font-size: @notify-font-size;
--van-notify-line-height: @notify-line-height;
--van-notify-primary-background-color: @notify-primary-background-color;
--van-notify-success-background-color: @notify-success-background-color;
--van-notify-danger-background-color: @notify-danger-background-color;
--van-notify-warning-background-color: @notify-warning-background-color;
--van-notify-text-color: var(--van-white);
--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 {

10
packages/vant/src/notify/var.less
View File

@ -1,10 +0,0 @@
@import '../style/var.less';
@notify-text-color: var(--van-white);
@notify-padding: var(--van-padding-xs) var(--van-padding-md);
@notify-font-size: var(--van-font-size-md);
@notify-line-height: var(--van-line-height-md);
@notify-primary-background-color: var(--van-primary-color);
@notify-success-background-color: var(--van-success-color);
@notify-danger-background-color: var(--van-danger-color);
@notify-warning-background-color: var(--van-warning-color);

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

@ -1,21 +1,19 @@
@import './var.less';
:root {
--van-number-keyboard-background-color: @number-keyboard-background-color;
--van-number-keyboard-key-height: @number-keyboard-key-height;
--van-number-keyboard-key-font-size: @number-keyboard-key-font-size;
--van-number-keyboard-key-active-color: @number-keyboard-key-active-color;
--van-number-keyboard-key-background-color: @number-keyboard-key-background-color;
--van-number-keyboard-delete-font-size: @number-keyboard-delete-font-size;
--van-number-keyboard-title-color: @number-keyboard-title-color;
--van-number-keyboard-title-height: @number-keyboard-title-height;
--van-number-keyboard-title-font-size: @number-keyboard-title-font-size;
--van-number-keyboard-close-padding: @number-keyboard-close-padding;
--van-number-keyboard-close-color: @number-keyboard-close-color;
--van-number-keyboard-close-font-size: @number-keyboard-close-font-size;
--van-number-keyboard-button-text-color: @number-keyboard-button-text-color;
--van-number-keyboard-button-background-color: @number-keyboard-button-background-color;
--van-number-keyboard-z-index: @number-keyboard-z-index;
--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-background-color-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-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 {

17
packages/vant/src/number-keyboard/var.less
View File

@ -1,17 +0,0 @@
@import '../style/var.less';
@number-keyboard-background-color: var(--van-gray-2);
@number-keyboard-key-height: 48px;
@number-keyboard-key-font-size: 28px;
@number-keyboard-key-background-color: var(--van-background-color-light);
@number-keyboard-key-active-color: var(--van-gray-3);
@number-keyboard-delete-font-size: var(--van-font-size-lg);
@number-keyboard-title-color: var(--van-gray-7);
@number-keyboard-title-height: 34px;
@number-keyboard-title-font-size: var(--van-font-size-lg);
@number-keyboard-close-padding: 0 var(--van-padding-md);
@number-keyboard-close-color: var(--van-text-link-color);
@number-keyboard-close-font-size: var(--van-font-size-md);
@number-keyboard-button-text-color: var(--van-white);
@number-keyboard-button-background-color: var(--van-primary-color);
@number-keyboard-z-index: 100;

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

@ -1,8 +1,6 @@
@import './var.less';
:root {
--van-overlay-z-index: @overlay-z-index;
--van-overlay-background-color: @overlay-background-color;
--van-overlay-z-index: 1;
--van-overlay-background-color: rgba(0, 0, 0, 0.7);
}
.van-overlay {

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

@ -1,4 +0,0 @@
@import '../style/var.less';
@overlay-z-index: 1;
@overlay-background-color: rgba(0, 0, 0, 0.7);

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

@ -1,15 +1,13 @@
@import './var.less';
:root {
--van-pagination-height: @pagination-height;
--van-pagination-font-size: @pagination-font-size;
--van-pagination-item-width: @pagination-item-width;
--van-pagination-item-default-color: @pagination-item-default-color;
--van-pagination-item-disabled-color: @pagination-item-disabled-color;
--van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
--van-pagination-background-color: @pagination-background-color;
--van-pagination-desc-color: @pagination-desc-color;
--van-pagination-disabled-opacity: @pagination-disabled-opacity;
--van-pagination-height: 40px;
--van-pagination-font-size: var(--van-font-size-md);
--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-desc-color: var(--van-gray-7);
--van-pagination-disabled-opacity: var(--van-disabled-opacity);
}
.van-pagination {

11
packages/vant/src/pagination/var.less
View File

@ -1,11 +0,0 @@
@import '../style/var.less';
@pagination-height: 40px;
@pagination-font-size: var(--van-font-size-md);
@pagination-item-width: 36px;
@pagination-item-default-color: var(--van-primary-color);
@pagination-item-disabled-color: var(--van-gray-7);
@pagination-item-disabled-background-color: var(--van-background-color);
@pagination-background-color: var(--van-background-color-light);
@pagination-desc-color: var(--van-gray-7);
@pagination-disabled-opacity: var(--van-disabled-opacity);

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

@ -1,21 +1,19 @@
@import './var.less';
:root {
--van-password-input-height: @password-input-height;
--van-password-input-margin: @password-input-margin;
--van-password-input-font-size: @password-input-font-size;
--van-password-input-border-radius: @password-input-border-radius;
--van-password-input-background-color: @password-input-background-color;
--van-password-input-info-color: @password-input-info-color;
--van-password-input-info-font-size: @password-input-info-font-size;
--van-password-input-error-info-color: @password-input-error-info-color;
--van-password-input-dot-size: @password-input-dot-size;
--van-password-input-dot-color: @password-input-dot-color;
--van-password-input-text-color: @password-input-text-color;
--van-password-input-cursor-color: @password-input-cursor-color;
--van-password-input-cursor-width: @password-input-cursor-width;
--van-password-input-cursor-height: @password-input-cursor-height;
--van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration;
--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-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);
--van-password-input-dot-size: 10px;
--van-password-input-dot-color: var(--van-text-color);
--van-password-input-text-color: var(--van-text-color);
--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 {

17
packages/vant/src/password-input/var.less
View File

@ -1,17 +0,0 @@
@import '../style/var.less';
@password-input-height: 50px;
@password-input-margin: 0 var(--van-padding-md);
@password-input-font-size: 20px;
@password-input-border-radius: 6px;
@password-input-background-color: var(--van-background-color-light);
@password-input-info-color: var(--van-text-color-secondary);
@password-input-info-font-size: var(--van-font-size-md);
@password-input-error-info-color: var(--van-danger-color);
@password-input-dot-size: 10px;
@password-input-dot-color: var(--van-text-color);
@password-input-text-color: var(--van-text-color);
@password-input-cursor-color: var(--van-text-color);
@password-input-cursor-width: 1px;
@password-input-cursor-height: 40%;
@password-input-cursor-animation-duration: 1s;

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

@ -1,21 +1,24 @@
@import './var.less';
:root {
--van-picker-background-color: @picker-background-color;
--van-picker-toolbar-height: @picker-toolbar-height;
--van-picker-title-font-size: @picker-title-font-size;
--van-picker-title-line-height: @picker-title-line-height;
--van-picker-action-padding: @picker-action-padding;
--van-picker-action-font-size: @picker-action-font-size;
--van-picker-confirm-action-color: @picker-confirm-action-color;
--van-picker-cancel-action-color: @picker-cancel-action-color;
--van-picker-option-font-size: @picker-option-font-size;
--van-picker-option-padding: @picker-option-padding;
--van-picker-option-text-color: @picker-option-text-color;
--van-picker-option-disabled-opacity: @picker-option-disabled-opacity;
--van-picker-loading-icon-color: @picker-loading-icon-color;
--van-picker-loading-mask-color: @picker-loading-mask-color;
--van-picker-mask-color: @picker-mask-color;
--van-picker-background-color: var(--van-background-color-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-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);
--van-picker-option-text-color: var(--van-text-color);
--van-picker-option-disabled-opacity: 0.3;
--van-picker-loading-icon-color: var(--van-primary-color);
--van-picker-loading-mask-color: rgba(255, 255, 255, 0.9);
--van-picker-mask-color: linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.4)
),
linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
}
.van-picker {

22
packages/vant/src/picker/var.less
View File

@ -1,22 +0,0 @@
@import '../style/var.less';
@picker-background-color: var(--van-background-color-light);
@picker-toolbar-height: 44px;
@picker-title-font-size: var(--van-font-size-lg);
@picker-title-line-height: var(--van-line-height-md);
@picker-action-padding: 0 var(--van-padding-md);
@picker-action-font-size: var(--van-font-size-md);
@picker-confirm-action-color: var(--van-text-link-color);
@picker-cancel-action-color: var(--van-text-color-secondary);
@picker-option-padding: 0 var(--van-padding-base);
@picker-option-font-size: var(--van-font-size-lg);
@picker-option-text-color: var(--van-text-color);
@picker-option-disabled-opacity: 0.3;
@picker-mask-color: linear-gradient(
180deg,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.4)
),
linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
@picker-loading-icon-color: var(--van-primary-color);
@picker-loading-mask-color: rgba(255, 255, 255, 0.9);

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

@ -1,19 +1,21 @@
@import './var.less';
:root {
--van-popover-arrow-size: @popover-arrow-size;
--van-popover-border-radius: @popover-border-radius;
--van-popover-action-width: @popover-action-width;
--van-popover-action-height: @popover-action-height;
--van-popover-action-font-size: @popover-action-font-size;
--van-popover-action-line-height: @popover-action-line-height;
--van-popover-action-icon-size: @popover-action-icon-size;
--van-popover-light-text-color: @popover-light-text-color;
--van-popover-light-background-color: @popover-light-background-color;
--van-popover-light-action-disabled-text-color: @popover-light-action-disabled-text-color;
--van-popover-dark-text-color: @popover-dark-text-color;
--van-popover-dark-background-color: @popover-dark-background-color;
--van-popover-dark-action-disabled-text-color: @popover-dark-action-disabled-text-color;
--van-popover-arrow-size: 6px;
--van-popover-border-radius: var(--van-border-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-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-action-disabled-text-color: var(
--van-text-color-secondary
);
}
.van-popover {

15
packages/vant/src/popover/var.less
View File

@ -1,15 +0,0 @@
@import '../style/var.less';
@popover-arrow-size: 6px;
@popover-border-radius: var(--van-border-radius-lg);
@popover-action-width: 128px;
@popover-action-height: 44px;
@popover-action-font-size: var(--van-font-size-md);
@popover-action-line-height: var(--van-line-height-md);
@popover-action-icon-size: 20px;
@popover-light-text-color: var(--van-text-color);
@popover-light-background-color: var(--van-background-color-light);
@popover-light-action-disabled-text-color: var(--van-text-color-tertiary);
@popover-dark-text-color: var(--van-white);
@popover-dark-background-color: #4a4a4a;
@popover-dark-action-disabled-text-color: var(--van-text-color-secondary);

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

@ -1,13 +1,11 @@
@import './var.less';
:root {
--van-popup-background-color: @popup-background-color;
--van-popup-transition: @popup-transition;
--van-popup-round-border-radius: @popup-round-border-radius;
--van-popup-close-icon-size: @popup-close-icon-size;
--van-popup-close-icon-color: @popup-close-icon-color;
--van-popup-close-icon-margin: @popup-close-icon-margin;
--van-popup-close-icon-z-index: @popup-close-icon-z-index;
--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 {

9
packages/vant/src/popup/var.less
View File

@ -1,9 +0,0 @@
@import '../style/var.less';
@popup-background-color: var(--van-background-color-light);
@popup-transition: transform var(--van-animation-duration-base);
@popup-round-border-radius: 16px;
@popup-close-icon-size: 22px;
@popup-close-icon-color: var(--van-gray-5);
@popup-close-icon-margin: 16px;
@popup-close-icon-z-index: 1;

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

@ -1,15 +1,13 @@
@import './var.less';
:root {
--van-progress-height: @progress-height;
--van-progress-color: @progress-color;
--van-progress-inactive-color: @progress-inactive-color;
--van-progress-background-color: @progress-background-color;
--van-progress-pivot-padding: @progress-pivot-padding;
--van-progress-pivot-text-color: @progress-pivot-text-color;
--van-progress-pivot-font-size: @progress-pivot-font-size;
--van-progress-pivot-line-height: @progress-pivot-line-height;
--van-progress-pivot-background-color: @progress-pivot-background-color;
--van-progress-height: 4px;
--van-progress-color: var(--van-primary-color);
--van-progress-inactive-color: var(--van-gray-5);
--van-progress-background-color: var(--van-gray-3);
--van-progress-pivot-padding: 0 5px;
--van-progress-pivot-text-color: var(--van-white);
--van-progress-pivot-font-size: var(--van-font-size-xs);
--van-progress-pivot-line-height: 1.6;
--van-progress-pivot-background-color: var(--van-primary-color);
}
.van-progress {

11
packages/vant/src/progress/var.less
View File

@ -1,11 +0,0 @@
@import '../style/var.less';
@progress-height: 4px;
@progress-color: var(--van-primary-color);
@progress-inactive-color: var(--van-gray-5);
@progress-background-color: var(--van-gray-3);
@progress-pivot-padding: 0 5px;
@progress-pivot-text-color: var(--van-white);
@progress-pivot-font-size: var(--van-font-size-xs);
@progress-pivot-line-height: 1.6;
@progress-pivot-background-color: var(--van-primary-color);

10
packages/vant/src/pull-refresh/index.less
View File

@ -1,10 +1,8 @@
@import './var.less';
:root {
--van-pull-refresh-head-height: @pull-refresh-head-height;
--van-pull-refresh-head-font-size: @pull-refresh-head-font-size;
--van-pull-refresh-head-text-color: @pull-refresh-head-text-color;
--van-pull-refresh-loading-icon-size: @pull-refresh-loading-icon-size;
--van-pull-refresh-head-height: 50px;
--van-pull-refresh-head-font-size: var(--van-font-size-md);
--van-pull-refresh-head-text-color: var(--van-text-color-secondary);
--van-pull-refresh-loading-icon-size: 16px;
}
.van-pull-refresh {

6
packages/vant/src/pull-refresh/var.less
View File

@ -1,6 +0,0 @@
@import '../style/var.less';
@pull-refresh-head-height: 50px;
@pull-refresh-head-font-size: var(--van-font-size-md);
@pull-refresh-head-text-color: var(--van-text-color-secondary);
@pull-refresh-loading-icon-size: 16px;

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

@ -1,15 +1,13 @@
@import './var.less';
:root {
--van-radio-size: @radio-size;
--van-radio-border-color: @radio-border-color;
--van-radio-transition-duration: @radio-transition-duration;
--van-radio-label-margin: @radio-label-margin;
--van-radio-label-color: @radio-label-color;
--van-radio-checked-icon-color: @radio-checked-icon-color;
--van-radio-disabled-icon-color: @radio-disabled-icon-color;
--van-radio-disabled-label-color: @radio-disabled-label-color;
--van-radio-disabled-background-color: @radio-disabled-background-color;
--van-radio-size: 20px;
--van-radio-border-color: var(--van-gray-5);
--van-radio-transition-duration: var(--van-animation-duration-fast);
--van-radio-label-margin: var(--van-padding-xs);
--van-radio-label-color: var(--van-text-color);
--van-radio-checked-icon-color: var(--van-primary-color);
--van-radio-disabled-icon-color: var(--van-gray-5);
--van-radio-disabled-label-color: var(--van-text-color-tertiary);
--van-radio-disabled-background-color: var(--van-border-color);
}
.van-radio {

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