blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

feat(theme): support custom theme base on css variables @rex-zsd (#2049)

Browse Source
This commit is contained in:
rex 2019-09-18 17:42:21 +08:00 committed by neverland
parent 2be1ab0ef1
commit 7c41cc0ff0
41 changed files with 466 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
docs/markdown/theme.md Normal file
View File

@ -0,0 +1,116 @@
# 定制主题
### 背景知识
由于小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件，所以 Vant Weapp 使用 [Css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。
Css变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=css-variables) 查看。对于不支持 Css变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
### 样式变量
定制使用的 Css 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant-weapp/blob/dev/src/style/var.less)。
```less
// Component Colors
@text-color: #323233;
@border-color: #ebedf0;
@active-color: #f2f3f5;
@background-color: #f8f8f8;
@background-color-light: #fafafa;
```
## 定制方法
### 定制单个组件的主题样式
> 在 wxss 中为组件设置 Css 变量
```html
<van-button class="my-button">
默认按钮
</van-button>
```
```less
.my-button {
--button-border-radius: 10px;
--button-default-color: #f2f3f5;
}
```
> 或通过 style 属性来设置 Css 变量，这使你能够轻松实现主题的动态切换
```html
<van-button style="{{ buttonStyle }}">
默认按钮
</van-button>
```
```js
Page({
data: {
buttonStyle: `
--button-border-radius: 10px;
--button-default-color: green;
`
},
onLoad() {
setTimeout(() => {
this.setData({
buttonStyle: `
--button-border-radius: 2px;
--button-default-color: pink;
`
});
}, 2000);
}
});
```
### 定制多个组件的主题样式
> 与单个组件的定制方式类似，只需用一个container节点包裹住需要定制的组件，并将 Css变量 设置在container节点上
```html
<view class="container">
<van-button bind:click="onClick">
默认按钮
</van-button>
<van-toast id="van-toast" />
</view>
```
```js
import Toast from 'path/to/vant-weapp/dist/toast/toast';
Page({
onClick() {
Toast('我是提示文案，建议不超过十五字~');
}
});
```
```less
.container {
--button-border-radius: 10px;
--button-default-color: #f2f3f5;
--toast-max-width: 100px;
--toast-background-color: pink;
}
```
### 定制全局主题样式
> 在 app.wxss 中，写入 Css变量，即可对全局生效
```less
page {
--button-border-radius: 10px;
--button-default-color: #f2f3f5;
--toast-max-width: 100px;
--toast-background-color: pink;
}
```

5
docs/src/doc.config.js
View File

@ -51,6 +51,11 @@ export default {
{
path: '/common',
title: '内置样式'
},
{
path: '/theme',
title: '定制主题',
md: true
}
]
}

17
packages/action-sheet/index.less
View File

@ -1,8 +1,9 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-action-sheet {
max-height: 90% !important;
color: @text-color;
.theme(color, '@text-color');
&__item,
&__cancel {
@ -10,10 +11,10 @@
font-size: 16px;
line-height: 50px;
text-align: center;
background-color: @white;
.theme(background-color, '@white');
&--hover {
background-color: @active-color;
.theme(background-color, '@active-color');
}
}
@ -23,23 +24,23 @@
&::before {
display: block;
height: 10px;
background-color: @background-color;
content: ' ';
.theme(background-color, '@background-color');
}
}
&__item--disabled {
color: @gray;
.theme(color, '@gray');
}
&__item--disabled&__item--hover {
background-color: @white;
.theme(background-color, '@white');
}
&__subname {
margin-left: 5px;
color: @gray-darker;
font-size: 12px;
.theme(color, '@gray-darker');
}
&__header {
@ -54,8 +55,8 @@
top: 0;
right: 0;
padding: 0 15px;
color: @gray-dark;
font-size: 18px !important;
line-height: inherit !important;
.theme(color, '@gray-dark');
}
}

55
packages/button/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-button {
position: relative;
@ -10,7 +11,8 @@
line-height: 42px;
text-align: center;
vertical-align: middle;
border-radius: @button-border-radius;
.theme(border-radius, '@button-border-radius');
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
@ -20,13 +22,14 @@
left: 50%;
width: 100%;
height: 100%;
background-color: @black;
border: inherit;
border-color: @black;
border-radius: inherit; /* inherit parent's border radius */
transform: translate(-50%, -50%);
opacity: 0;
content: ' ';
.theme(background-color, '@black');
.theme(border-color, '@black');
}
// reset weapp default border
@ -43,52 +46,52 @@
}
&--default {
color: @button-default-color;
background-color: @button-default-background-color;
border: 1px solid @button-default-border-color;
.theme(color, '@button-default-color');
.theme(background-color, '@button-default-background-color');
.theme(border, '1px solid @button-default-border-color');
}
&--primary {
color: @button-primary-color;
background-color: @button-primary-background-color;
border: 1px solid @button-primary-border-color;
.theme(color, '@button-primary-color');
.theme(background-color, '@button-primary-background-color');
.theme(border, '1px solid @button-primary-border-color');
}
&--info {
color: @button-info-color;
background-color: @button-info-background-color;
border: 1px solid @button-info-border-color;
.theme(color, '@button-info-color');
.theme(background-color, '@button-info-background-color');
.theme(border, '1px solid @button-info-border-color');
}
&--danger {
color: @button-danger-color;
background-color: @button-danger-background-color;
border: 1px solid @button-danger-border-color;
.theme(color, '@button-danger-color');
.theme(background-color, '@button-danger-background-color');
.theme(border, '1px solid @button-danger-border-color');
}
&--warning {
color: @button-warning-color;
background-color: @button-warning-background-color;
border: 1px solid @button-warning-border-color;
.theme(color, '@button-warning-color');
.theme(background-color, '@button-warning-background-color');
.theme(border, '1px solid @button-warning-border-color');
}
&--plain {
background-color: @white;
.theme(background-color, '@white');
&.van-button--primary {
color: @button-primary-background-color;
.theme(color, '@button-primary-background-color');
}
&.van-button--info {
color: @button-info-background-color;
.theme(color, '@button-info-background-color');
}
&.van-button--danger {
color: @button-danger-background-color;
.theme(color, '@button-danger-background-color');
}
&.van-button--warning {
color: @button-warning-background-color;
.theme(color, '@button-warning-background-color');
}
}
@ -130,7 +133,7 @@
}
&--round {
border-radius: @button-round-border-radius;
.theme(border-radius, '@button-round-border-radius');
}
&--square {
@ -170,11 +173,11 @@
&::after {
border-color: inherit;
border-width: 1px;
border-radius: @button-border-radius * 2;
.theme(border-radius, 'calc(@button-border-radius * 2)');
}
&.van-button--round::after {
border-radius: @button-round-border-radius;
.theme(border-radius, '@button-round-border-radius');
}
&.van-button--square::after {

11
packages/card/index.less
View File

@ -1,12 +1,13 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-card {
position: relative;
box-sizing: border-box;
padding: 5px 15px;
color: @text-color;
font-size: 12px;
background-color: @background-color-light;
.theme(color, '@text-color');
.theme(background-color, '@background-color-light');
&__header {
display: flex;
@ -51,8 +52,8 @@
}
&__desc {
color: @gray-darker;
line-height: 20px;
.theme(color, '@gray-darker');
}
&__bottom {
@ -61,16 +62,16 @@
&__price {
display: inline-block;
color: @red;
font-weight: bold;
.theme(color, '@red');
}
&__origin-price {
display: inline-block;
margin-left: 5px;
color: @gray-darker;
font-size: 10px;
text-decoration: line-through;
.theme(color, '@gray-darker');
}
&__num {

3
packages/cell-group/index.less
View File

@ -1,10 +1,11 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-cell-group {
&__title {
padding: 15px 15px 5px;
color: @gray-dark;
font-size: 14px;
line-height: 16px;
.theme(color, '@gray-dark');
}
}

17
packages/cell/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
@import '../common/style/mixins/hairline.less';
.van-cell {
@ -7,10 +8,10 @@
box-sizing: border-box;
width: 100%;
padding: 10px 15px;
color: @text-color;
font-size: 14px;
line-height: 24px;
background-color: @white;
.theme(color, '@text-color');
.theme(background-color, '@white');
&::after {
.hairline-bottom(@border-color, 15px);
@ -21,21 +22,21 @@
}
&-group {
background-color: @white;
.theme(background-color, '@white');
}
&__label {
margin-top: 3px;
color: @gray-dark;
font-size: 12px;
line-height: 18px;
.theme(color, '@gray-dark');
}
&__value {
overflow: hidden;
color: @gray-dark;
text-align: right;
vertical-align: middle;
.theme(color, '@gray-dark');
}
&__title,
@ -61,7 +62,7 @@
&__right-icon-wrap {
margin-left: 5px;
color: @gray-dark;
.theme(color, '@gray-dark');
}
&__left-icon {
@ -74,7 +75,7 @@
}
&--clickable&--hover {
background-color: @active-color;
.theme(background-color, '@active-color');
}
&--required {
@ -83,9 +84,9 @@
&::before {
position: absolute;
left: 7px;
color: @red;
font-size: 14px;
content: '*';
.theme(color, '@red');
}
}

31
packages/checkbox/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-checkbox {
display: flex;
@ -7,7 +8,7 @@
&__icon-wrap,
&__label {
line-height: @checkbox-size;
.theme(line-height, '@checkbox-size');
}
&__icon-wrap {
@ -20,44 +21,46 @@
width: 1em;
height: 1em;
color: transparent;
font-size: @checkbox-size;
text-align: center;
border: 1px solid @checkbox-border-color;
transition-duration: @checkbox-transition-duration;
transition-property: color, border-color, background-color;
.theme(font-size, '@checkbox-size');
.theme(border, '1px solid @checkbox-border-color');
.theme(transition-duration, '@checkbox-transition-duration');
&--round {
border-radius: 100%;
}
&--checked {
color: @white;
background-color: @checkbox-checked-icon-color;
border-color: @checkbox-checked-icon-color;
.theme(color, '@white');
.theme(background-color, '@checkbox-checked-icon-color');
.theme(border-color, '@checkbox-checked-icon-color');
}
&--disabled {
background-color: @checkbox-disabled-background-color;
border-color: @checkbox-disabled-icon-color;
.theme(background-color, '@checkbox-disabled-background-color');
.theme(border-color, '@checkbox-disabled-icon-color');
}
&--disabled&--checked {
color: @checkbox-disabled-icon-color;
.theme(color, '@checkbox-disabled-icon-color');
}
}
&__label {
margin-left: @checkbox-label-margin;
color: @checkbox-label-color;
word-break: break-all;
.theme(margin-left, '@checkbox-label-margin');
.theme(color, '@checkbox-label-color');
&--left {
float: left;
margin: 0 @checkbox-label-margin 0 0;
.theme(margin, '0 @checkbox-label-margin 0 0');
}
&--disabled {
color: @checkbox-disabled-label-color;
.theme(color, '@checkbox-disabled-label-color');
}
&:empty {

4
packages/circle/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-circle {
position: relative;
@ -10,7 +11,8 @@
top: 50%;
left: 0;
width: 100%;
color: @circle-text-color;
transform: translateY(-50%);
.theme(color, '@circle-text-color');
}
}

17
packages/collapse-item/index.less
View File

@ -1,10 +1,11 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-collapse-item {
&__title {
.van-cell__right-icon {
transform: rotate(90deg);
transition: transform @collapse-item-transition-duration;
.theme(transition, 'transform @collapse-item-transition-duration');
}
&--expanded {
@ -16,11 +17,11 @@
&--disabled {
.van-cell,
.van-cell__right-icon {
color: @collapse-item-title-disabled-color !important;
.theme(color, '@collapse-item-title-disabled-color') !important;
}
.van-cell--hover {
background-color: @white !important;
.theme(background-color, '@white') !important;
}
}
}
@ -34,10 +35,10 @@
}
&__content {
padding: @collapse-item-content-padding;
color: @collapse-item-content-text-color;
font-size: @collapse-item-content-font-size;
line-height: @collapse-item-content-line-height;
background-color: @collapse-item-content-background-color;
.theme(padding, '@collapse-item-content-padding');
.theme(color, '@collapse-item-content-text-color');
.theme(font-size, '@collapse-item-content-font-size');
.theme(line-height, '@collapse-item-content-line-height');
.theme(background-color, '@collapse-item-content-background-color');
}
}

6
packages/common/style/theme.less Normal file
View File

@ -0,0 +1,6 @@
@import (reference) './var.less';
.theme(@property, @imp) {
@{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig'));
@{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig'));
}

7
packages/dialog/index.less
View File

@ -1,12 +1,13 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-dialog {
top: 45% !important;
width: 85%;
overflow: hidden;
font-size: 16px;
background-color: @white;
border-radius: 4px;
.theme(background-color, '@white');
&__header {
padding-top: 25px;
@ -30,7 +31,7 @@
&--has-title {
padding-top: 12px;
color: @gray-darker;
.theme(color, '@gray-darker');
}
&--left {
@ -56,7 +57,7 @@
}
&__confirm {
color: @blue !important;
.theme(color, '@blue') !important;
}
&-bounce-enter {

2
packages/field/README.md
View File

@ -215,7 +215,7 @@ Page({
| bind:change | 输入内容时触发 | value: 当前输入值 |
| bind:confirm | 点击完成按钮时触发 | value: 当前输入值 |
| bind:click-icon | 点击尾部图标时触发 | - |
| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度(在基础库 1.9.90 起支持) |
| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 |
| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) |
| bind:clear | 点击清空控件时触发 | - |

17
packages/field/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-field {
&__body {
@ -24,12 +25,12 @@
min-height: 24px;
margin: 0;
padding: 0;
color: @text-color;
line-height: inherit;
text-align: left;
background-color: transparent;
border: 0;
resize: none;
.theme(color, '@text-color');
&--textarea {
height: 18px;
@ -37,13 +38,13 @@
}
&--error {
color: @red;
.theme(color, '@red');
}
&--disabled {
color: @gray-dark;
background-color: transparent;
opacity: 1;
.theme(color, '@gray-dark');
}
&--center {
@ -60,11 +61,11 @@
top: 0;
right: 0;
left: 0;
color: @gray-dark;
pointer-events: none;
.theme(color, '@gray-dark');
&--error {
color: @red;
.theme(color, '@red');
}
}
@ -89,11 +90,11 @@
}
&__clear-root {
color: @gray;
.theme(color, '@gray');
}
&__icon-container {
color: @gray-dark;
.theme(color, '@gray-dark');
&:empty {
display: none;
@ -109,9 +110,9 @@
}
&__error-message {
color: @red;
font-size: 12px;
text-align: left;
.theme(color, '@red');
&--center {
text-align: center;

3
packages/goods-action-icon/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-goods-action-icon {
width: 50px !important;
@ -9,9 +10,9 @@
flex-direction: column;
justify-content: center;
height: 100%;
color: @gray-darker;
font-size: 10px;
line-height: 1;
.theme(color, '@gray-darker');
}
&__icon {

5
packages/goods-action/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-goods-action {
position: fixed;
@ -6,9 +7,9 @@
bottom: 0;
left: 0;
display: flex;
background-color: @white;
.theme(background-color, '@white');
&--safe {
padding-bottom: @safe-area-inset-bottom;
.theme(padding-bottom, '@safe-area-inset-bottom');
}
}

13
packages/grid-item/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-grid-item {
position: relative;
@ -14,8 +15,8 @@
flex-direction: column;
box-sizing: border-box;
height: 100%;
padding: @grid-item-content-padding;
background-color: @grid-item-content-background-color;
.theme(padding, '@grid-item-content-padding');
.theme(background-color, '@grid-item-content-background-color');
&::after {
z-index: 1;
@ -41,17 +42,17 @@
}
&--clickable:active {
background-color: @grid-item-content-active-color;
.theme(background-color, '@grid-item-content-active-color');
}
}
&__icon {
font-size: @grid-item-icon-size;
.theme(font-size, '@grid-item-icon-size');
}
&__text {
color: @grid-item-text-color;
font-size: @grid-item-text-font-size;
word-break: break-all;
.theme(color, '@grid-item-text-color');
.theme(font-size, '@grid-item-text-font-size');
}
}

24
packages/info/index.less
View File

@ -1,22 +1,24 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-info {
position: absolute;
top: -@info-size / 2;
right: 0;
box-sizing: border-box;
min-width: @info-size;
padding: @info-padding;
color: @info-color;
font-weight: @info-font-weight;
font-size: @info-font-size;
font-family: @info-font-family;
line-height: @info-size - @info-border-width * 2;
white-space: nowrap;
text-align: center;
background-color: @info-background-color;
border: @info-border-width solid @white;
border-radius: @info-size;
transform: translateX(50%);
transform-origin: 100%;
.theme(top, 'calc(@info-size / -2)');
.theme(min-width, '@info-size');
.theme(padding, '@info-padding');
.theme(color, '@info-color');
.theme(font-weight, '@info-font-weight');
.theme(font-size, '@info-font-size');
.theme(font-family, '@info-font-family');
.theme(line-height, 'calc(@info-size - @info-border-width * 2)');
.theme(background-color, '@info-background-color');
.theme(border, '@info-border-width solid @white');
.theme(border-radius, '@info-size');
}

13
packages/nav-bar/index.less
View File

@ -1,28 +1,29 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-nav-bar {
position: relative;
height: @nav-bar-height;
line-height: @nav-bar-height;
text-align: center;
background-color: @white;
user-select: none;
.theme(height, '@nav-bar-height');
.theme(line-height, '@nav-bar-height');
.theme(background-color, '@white');
&__text {
display: inline-block;
margin: 0 -15px;
padding: 0 15px;
color: @blue;
vertical-align: middle;
.theme(color, '@blue');
&--hover {
background-color: @active-color;
.theme(background-color, '@active-color');
}
}
&__arrow {
color: @blue;
vertical-align: middle;
.theme(color, '@blue');
+ .van-nav-bar__text {
margin-left: -20px;

16
packages/notify/index.less
View File

@ -1,28 +1,30 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-notify {
position: fixed;
top: 0;
box-sizing: border-box;
width: 100%;
padding: @notify-padding;
font-size: @notify-font-size;
line-height: @notify-line-height;
text-align: center;
word-break: break-all;
.theme(padding, '@notify-padding');
.theme(font-size, '@notify-font-size');
.theme(line-height, '@notify-line-height');
&--primary {
background-color: @notify-primary-background-color;
.theme(background-color, "@notify-primary-background-color");
}
&--success {
background-color: @notify-success-background-color;
.theme(background-color, "@notify-success-background-color");
}
&--danger {
background-color: @notify-danger-background-color;
.theme(background-color, "@notify-danger-background-color");
}
&--warning {
background-color: @notify-warning-background-color;
.theme(background-color, "@notify-warning-background-color");
}
}

3
packages/overlay/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-overlay {
position: fixed;
@ -6,5 +7,5 @@
left: 0;
width: 100%;
height: 100%;
background-color: @overlay-background-color;
.theme(background-color, '@overlay-background-color');
}

5
packages/panel/index.less
View File

@ -1,10 +1,11 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-panel {
background: @white;
.theme(background, '@white');
&__header-value {
color: @red;
.theme(color, '@red');
}
&__footer {

5
packages/picker-column/index.less
View File

@ -1,17 +1,18 @@
@import '../common/style/var';
@import '../common/style/theme';
.van-picker-column {
overflow: hidden;
color: @gray-dark;
font-size: 16px;
text-align: center;
.theme(color, '@gray-dark');
&__item {
padding: 0 5px;
&--selected {
color: @text-color;
font-weight: 500;
.theme(color, '@text-color');
}
&--disabled {

7
packages/picker/index.less
View File

@ -1,11 +1,12 @@
@import '../common/style/var';
@import '../common/style/theme.less';
.van-picker {
position: relative;
overflow: hidden;
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
background-color: @white;
user-select: none;
.theme(background-color, '@white');
&__toolbar {
display: flex;
@ -17,11 +18,11 @@
&__cancel,
&__confirm {
padding: 0 15px;
color: @blue;
font-size: 14px;
.theme(color, '@blue');
&--hover {
background-color: @active-color;
.theme(background-color, '@active-color');
}
}

39
packages/popup/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-popup {
position: fixed;
@ -7,16 +8,16 @@
box-sizing: border-box;
max-height: 100%;
overflow-y: auto;
background-color: @white;
transition-timing-function: ease;
animation: ease both;
-webkit-overflow-scrolling: touch;
.theme(background-color, '@white');
&--center {
transform: translate3d(-50%, -50%, 0);
&.van-popup--round {
border-radius: @popup-round-border-radius;
.theme(border-radius, '@popup-round-border-radius');
}
}
@ -29,7 +30,10 @@
transform: translate3d(-50%, 0, 0);
&.van-popup--round {
border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
.theme(
border-radius,
'0 0 @popup-round-border-radius @popup-round-border-radius'
);
}
}
@ -41,7 +45,10 @@
transform: translate3d(0, -50%, 0);
&.van-popup--round {
border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
.theme(
border-radius,
'@popup-round-border-radius 0 0 @popup-round-border-radius'
);
}
}
@ -54,7 +61,10 @@
transform: translate3d(-50%, 0, 0);
&.van-popup--round {
border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
.theme(
border-radius,
'@popup-round-border-radius @popup-round-border-radius 0 0'
);
}
}
@ -66,24 +76,27 @@
transform: translate3d(0, -50%, 0);
&.van-popup--round {
border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
.theme(
border-radius,
'0 @popup-round-border-radius @popup-round-border-radius 0'
);
}
}
&--bottom&--safe {
padding-bottom: @safe-area-inset-bottom;
.theme(padding-bottom, '@safe-area-inset-bottom');
}
&__close-icon {
position: absolute;
top: @popup-close-icon-margin;
right: @popup-close-icon-margin;
z-index: @popup-close-icon-z-index;
color: @popup-close-icon-color;
font-size: @popup-close-icon-size;
.theme(top, '@popup-close-icon-margin');
.theme(right, '@popup-close-icon-margin');
.theme(z-index, '@popup-close-icon-z-index');
.theme(color, '@popup-close-icon-color');
.theme(font-size, '@popup-close-icon-size');
&:active {
opacity: .6;
opacity: 0.6;
}
}
}

5
packages/progress/index.less
View File

@ -1,10 +1,11 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-progress {
position: relative;
height: 4px;
background: @gray-light;
border-radius: 4px;
.theme(background, '@gray-light');
&__portion {
position: absolute;
@ -24,8 +25,8 @@
line-height: 1.6;
text-align: center;
word-break: keep-all;
background-color: @gray-light;
border-radius: 1em;
transform: translateY(-50%);
.theme(background-color, '@gray-light');
}
}

25
packages/radio/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-radio {
display: flex;
@ -17,42 +18,42 @@
height: 1em;
color: transparent;
text-align: center;
border: 1px solid @radio-border-color;
transition-duration: @radio-transition-duration;
transition-property: color, border-color, background-color;
.theme(border, '1px solid @radio-border-color');
.theme(transition-duration, '@radio-transition-duration');
&--round {
border-radius: 100%;
}
&--checked {
color: @white;
background-color: @radio-checked-icon-color;
border-color: @radio-checked-icon-color;
.theme(color, '@white');
.theme(background-color, '@radio-checked-icon-color');
.theme(border-color, '@radio-checked-icon-color');
}
&--disabled {
background-color: @radio-disabled-background-color;
border-color: @radio-disabled-icon-color;
.theme(background-color, '@radio-disabled-background-color');
.theme(border-color, '@radio-disabled-icon-color');
}
&--disabled&--checked {
color: @radio-disabled-icon-color;
.theme(color, '@radio-disabled-icon-color');
}
}
&__label {
margin-left: @radio-label-margin;
color: @radio-label-color;
word-break: break-all;
.theme(margin-left, '@radio-label-margin');
.theme(color, '@radio-label-color');
&--left {
float: left;
margin: 0 @radio-label-margin 0 0;
.theme(margin, '0 @radio-label-margin 0 0');
}
&--disabled {
color: @radio-disabled-label-color;
.theme(color, '@radio-disabled-label-color');
}
&:empty {

5
packages/rate/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-rate {
display: inline-block;
@ -7,7 +8,7 @@
&__item {
position: relative;
display: inline-block;
padding: 0 @rate-horizontal-padding;
.theme(padding, '0 @rate-horizontal-padding');
}
&__icon {
@ -17,9 +18,9 @@
&--half {
position: absolute;
top: 0;
left: @rate-horizontal-padding;
width: 0.5em;
overflow: hidden;
.theme(left, '@rate-horizontal-padding');
}
}
}

11
packages/search/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-search {
display: flex;
@ -10,8 +11,8 @@
display: flex;
flex: 1;
padding-left: 10px;
background-color: @search-background-color;
border-radius: 2px;
.theme(background-color, '@search-background-color');
&--round {
border-radius: 17px;
@ -20,16 +21,16 @@
&__label {
padding: 0 5px;
color: @text-color;
font-size: 14px;
line-height: 34px;
.theme(color, '@text-color');
}
&__field {
flex: 1;
&__left-icon {
color: @gray-dark;
.theme(color, '@gray-dark');
}
}
@ -39,12 +40,12 @@
&__action {
padding: 0 10px;
color: @text-color;
font-size: 14px;
line-height: 34px;
.theme(color, '@text-color');
&--hover {
background-color: @active-color;
.theme(background-color, '@active-color');
}
}
}

13
packages/sidebar-item/index.less
View File

@ -1,20 +1,21 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-sidebar-item {
display: block;
box-sizing: border-box;
padding: 20px 12px 20px 9px;
overflow: hidden;
color: @gray-darker;
font-size: 14px;
line-height: 1.4;
word-break: break-all;
background-color: @background-color;
border-left: 3px solid transparent;
user-select: none;
.theme(color, '@gray-darker');
.theme(background-color, '@background-color');
&--hover {
background-color: @active-color;
.theme(background-color, '@active-color');
}
&::after {
@ -22,9 +23,9 @@
}
&--active {
color: @text-color;
font-weight: bold;
border-color: @red;
.theme(color, '@text-color');
.theme(border-color, '@red');
&::after {
border-right-width: 1px;
@ -33,7 +34,7 @@
&--active,
&--active&--hover {
background-color: @white;
.theme(background-color, '@white');
}
&__text {

11
packages/slider/index.less
View File

@ -1,22 +1,23 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-slider {
position: relative;
background-color: @gray-light;
border-radius: 999px;
.theme(background-color, '@gray-light');
&__bar {
position: relative;
background-color: @blue;
border-radius: inherit;
.theme(background-color, '@blue');
}
&__button {
width: 20px;
height: 20px;
background-color: @white;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
.theme(background-color, '@white');
&-wrapper {
position: absolute;
@ -37,6 +38,6 @@
}
&--disabled {
opacity: .3;
opacity: 0.3;
}
}

31
packages/stepper/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-stepper {
font-size: 0;
@ -13,8 +14,8 @@
margin: 1px;
padding: 5px;
vertical-align: middle;
background-color: @stepper-background-color;
border: 0;
.theme(background-color, '@stepper-background-color');
&::before {
width: 9px;
@ -34,30 +35,30 @@
bottom: 0;
left: 0;
margin: auto;
background-color: @text-color;
content: '';
.theme(background-color, '@text-color');
}
&--hover {
background-color: @stepper-active-color;
.theme(background-color, '@stepper-active-color');
}
&--disabled {
background-color: @stepper-button-disabled-color;
.theme(background-color, '@stepper-button-disabled-color');
&::before,
&::after {
background-color: @gray;
.theme(background-color, '@gray');
}
}
&--disabled&--hover {
background-color: @stepper-button-disabled-color;
.theme(background-color, '@stepper-button-disabled-color');
}
}
&__minus {
border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
.theme(border-radius, '@stepper-border-radius 0 0 @stepper-border-radius');
&::after {
display: none;
@ -65,32 +66,32 @@
}
&__plus {
border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
.theme(border-radius, '0 @stepper-border-radius @stepper-border-radius 0');
}
&__input {
display: inline-block;
box-sizing: border-box;
width: 32px;
height: 28px;
// 覆盖 common style 中 input 的 min-height: 1.4rem;
// 避免 button-size 对 input 设置的 height 不生效
min-height: 0;
width: 32px;
height: 28px;
margin: 1px;
padding: 1px;
color: @text-color;
font-size: 14px;
text-align: center;
vertical-align: middle;
background-color: @stepper-background-color;
border: 0;
border-width: 1px 0;
border-radius: 0;
-webkit-appearance: none;
.theme(color, '@text-color');
.theme(background-color, '@stepper-background-color');
&--disabled {
color: @gray;
background-color: @stepper-input-disabled-color;
.theme(color, '@gray');
.theme(background-color, '@stepper-input-disabled-color');
}
}
}
}

19
packages/steps/index.less
View File

@ -1,8 +1,9 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-steps {
overflow: hidden;
background-color: @white;
.theme(background-color, '@white');
&--horizontal {
padding: 10px;
@ -26,18 +27,18 @@
.van-step {
position: relative;
flex: 1;
color: @gray-dark;
font-size: 14px;
.theme(color, '@gray-dark');
&--finish {
color: @text-color;
.theme(color, '@text-color');
}
&__circle {
width: 5px;
height: 5px;
background-color: @gray-dark;
border-radius: 50%;
.theme(background-color, '@gray-dark');
}
&--horizontal {
@ -76,8 +77,8 @@
bottom: 6px;
z-index: 1;
padding: 0 8px;
background-color: @white;
transform: translate3d(-50%, 50%, 0);
.theme(background-color, '@white');
}
.van-step__title {
@ -92,12 +93,12 @@
bottom: 6px;
left: 0;
height: 1px;
background-color: @border-color;
transform: translate3d(0, 50%, 0);
.theme(background-color, '@border-color');
}
&.van-step--process {
color: @text-color;
.theme(color, '@text-color');
.van-step__active {
display: block;
@ -128,8 +129,8 @@
z-index: 1;
width: 1px;
height: 20px;
background-color: @white;
content: '';
.theme(background-color, '@white');
}
}
@ -152,8 +153,8 @@
z-index: 1;
width: 1px;
height: 100%;
background-color: @border-color;
transform: translate3d(-50%, 0, 0);
.theme(background-color, '@border-color');
}
}
}

31
packages/submit-bar/index.less
View File

@ -1,19 +1,20 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-submit-bar {
position: fixed;
bottom: 0;
left: 0;
z-index: @submit-bar-z-index;
width: 100%;
user-select: none;
.theme(z-index, '@submit-bar-z-index');
&__tip {
padding: @submit-bar-tip-padding;
color: @submit-bar-tip-color;
font-size: @submit-bar-tip-font-size;
line-height: @submit-bar-tip-line-height;
background-color: @submit-bar-tip-background-color;
.theme(padding, '@submit-bar-tip-padding');
.theme(color, '@submit-bar-tip-color');
.theme(font-size, '@submit-bar-tip-font-size');
.theme(line-height, '@submit-bar-tip-line-height');
.theme(background-color, '@submit-bar-tip-background-color');
&:empty {
display: none;
@ -36,30 +37,30 @@
display: flex;
align-items: center;
justify-content: flex-end;
height: @submit-bar-height;
font-size: @submit-bar-text-font-size;
background-color: @submit-bar-background-color;
.theme(height, '@submit-bar-height');
.theme(font-size, '@submit-bar-text-font-size');
.theme(background-color, '@submit-bar-background-color');
&--safe {
padding-bottom: @safe-area-inset-bottom;
.theme(padding-bottom, '@safe-area-inset-bottom');
}
}
&__text {
flex: 1;
padding-right: 12px;
color: @submit-bar-text-color;
font-weight: 500;
text-align: right;
.theme(color, '@submit-bar-text-color');
}
&__price {
color: @submit-bar-price-color;
font-size: @submit-bar-price-font-size;
.theme(color, '@submit-bar-price-color');
.theme(font-size, '@submit-bar-price-font-size');
}
&__currency {
font-size: @submit-bar-currency-font-size;
.theme(font-size, '@submit-bar-currency-font-size');
}
&__suffix-label {
@ -67,6 +68,6 @@
}
&__button {
width: @submit-bar-button-width;
.theme(width, '@submit-bar-button-width');
}
}

31
packages/switch/index.less
View File

@ -1,27 +1,28 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-switch {
position: relative;
display: inline-block;
box-sizing: content-box;
width: @switch-width;
height: @switch-height;
background-color: @switch-background-color;
border: @switch-border;
border-radius: @switch-node-size;
transition: background-color @switch-transition-duration;
.theme(width, '@switch-width');
.theme(height, '@switch-height');
.theme(background-color, '@switch-background-color');
.theme(border, '@switch-border');
.theme(border-radius, '@switch-node-size');
.theme(transition, 'background-color @switch-transition-duration');
&__node {
position: absolute;
top: 0;
left: 0;
z-index: @switch-node-z-index;
width: @switch-node-size;
height: @switch-node-size;
background-color: @switch-node-background-color;
border-radius: 100%;
box-shadow: @switch-node-box-shadow;
transition: transform @switch-transition-duration;
.theme(z-index, '@switch-node-z-index');
.theme(width, '@switch-node-size');
.theme(height, '@switch-node-size');
.theme(background-color, '@switch-node-background-color');
.theme(box-shadow, '@switch-node-box-shadow');
.theme(transition, 'transform @switch-transition-duration');
}
&__loading {
@ -31,14 +32,14 @@
}
&--on {
background-color: @switch-on-background-color;
.theme(background-color, '@switch-on-background-color');
.van-switch__node {
transform: translateX(@switch-width - @switch-node-size);
.theme(transform, 'translateX(calc(@switch-width - @switch-node-size))');
}
}
&--disabled {
opacity: @switch-disabled-opacity;
.theme(opacity, '@switch-disabled-opacity');
}
}

7
packages/tabbar-item/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
:host {
flex: 1;
@ -10,9 +11,9 @@
align-items: center;
justify-content: center;
height: 100%;
color: @gray-darker;
font-size: 12px;
line-height: 1;
.theme(color, '@gray-darker');
&__icon {
position: relative;
@ -26,9 +27,9 @@
right: -8px;
width: 8px;
height: 8px;
background-color: @red;
border-radius: 100%;
content: ' ';
.theme(background-color, '@red');
}
}
@ -40,6 +41,6 @@
}
&--active {
color: @blue;
.theme(color, '@blue');
}
}

5
packages/tabbar/index.less
View File

@ -1,10 +1,11 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tabbar {
display: flex;
width: 100%;
height: 50px;
background-color: @white;
.theme(background-color, '@white');
&--fixed {
position: fixed;
@ -13,6 +14,6 @@
}
&--safe {
padding-bottom: @safe-area-inset-bottom;
.theme(padding-bottom, '@safe-area-inset-bottom');
}
}

37
packages/tabs/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
@tabs-line-height: 44px;
@tabs-card-height: 30px;
@ -13,7 +14,7 @@
right: 0;
left: 0;
display: flex;
background-color: @white;
.theme(background-color, '@white');
&--page-top {
position: fixed;
@ -32,8 +33,8 @@
}
&__scroll--card {
border: 1px solid @red;
border-radius: 2px;
.theme(border, '1px solid @red');
}
&__nav {
@ -46,20 +47,20 @@
}
&--card {
height: @tabs-card-height;
.theme(height, '@tabs-card-height');
.van-tab {
color: @red;
line-height: @tabs-card-height;
border-right: 1px solid @red;
.theme(color, '@red');
.theme(line-height, '@tabs-card-height');
.theme(border-right, '1px solid @red');
&:last-child {
border-right: none;
}
&.van-tab--active {
color: @white;
background-color: @red;
.theme(color, '@white');
.theme(background-color, '@red');
}
}
}
@ -71,24 +72,24 @@
left: 0;
z-index: 1;
height: 3px;
background-color: @red;
border-radius: 3px;
.theme(background-color, '@red');
}
&--line {
padding-top: @tabs-line-height;
.theme(padding-top, '@tabs-line-height');
.van-tabs__wrap {
height: @tabs-line-height;
.theme(height, '@tabs-line-height');
}
}
&--card {
margin: 0 15px;
padding-top: @tabs-card-height;
.theme(padding-top, '@tabs-card-height');
.van-tabs__wrap {
height: @tabs-card-height;
.theme(height, '@tabs-card-height');
}
}
@ -107,19 +108,19 @@
box-sizing: border-box;
min-width: 0; /* hack for flex ellipsis */
padding: 0 5px;
color: @gray-darker;
font-size: 14px;
line-height: @tabs-line-height;
text-align: center;
cursor: pointer;
.theme(color, '@gray-darker');
.theme(line-height, '@tabs-line-height');
&--active {
color: @text-color;
font-weight: 500;
.theme(color, '@text-color');
}
&--disabled {
color: @gray;
.theme(color, '@gray');
}
&__title {
@ -129,9 +130,9 @@
width: 8px;
height: 8px;
vertical-align: middle;
background-color: @red;
border-radius: 100%;
content: '';
.theme(background-color, '@red');
}
}

37
packages/tag/index.less
View File

@ -1,65 +1,66 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tag {
display: inline-block;
padding: .2em .5em;
color: @white;
padding: 0.2em 0.5em;
font-size: 10px;
line-height: normal;
border-radius: .2em;
border-radius: 0.2em;
.theme(color, '@white');
&::after {
border-color: currentColor;
border-radius: .4em;
border-radius: 0.4em;
}
&--default {
background-color: @tag-default-color;
.theme(background-color, '@tag-default-color');
&.van-tag--plain {
color: @tag-default-color;
.theme(color, '@tag-default-color');
}
}
&--danger {
background-color: @tag-dander-color;
.theme(background-color, '@tag-dander-color');
&.van-tag--plain {
color: @tag-dander-color;
.theme(color, '@tag-dander-color');
}
}
&--primary {
background-color: @tag-primary-color;
.theme(background-color, '@tag-primary-color');
&.van-tag--plain {
color: @tag-primary-color;
.theme(color, '@tag-primary-color');
}
}
&--success {
background-color: @tag-success-color;
.theme(background-color, '@tag-success-color');
&.van-tag--plain {
color: @tag-success-color;
.theme(color, '@tag-success-color');
}
}
&--warning {
background-color: @tag-warning-color;
.theme(background-color, '@tag-warning-color');
&.van-tag--plain {
color: @tag-warning-color;
.theme(color, '@tag-warning-color');
}
}
&--plain {
background-color: @tag-plain-background-color;
.theme(background-color, '@tag-plain-background-color');
}
&--mark {
padding-right: .6em;
border-radius: 0 .8em .8em 0;
padding-right: 0.6em;
border-radius: 0 0.8em 0.8em 0;
&::after {
border-radius: 0 1.6em 1.6em 0;
@ -67,7 +68,7 @@
}
&--round {
border-radius: .8em;
border-radius: 0.8em;
&::after {
border-radius: 1.6em;

25
packages/toast/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-toast {
display: flex;
@ -6,15 +7,15 @@
align-items: center;
justify-content: center;
box-sizing: content-box;
color: @toast-text-color;
font-size: @toast-font-size;
line-height: @toast-line-height;
.theme(color, '@toast-text-color');
.theme(font-size, '@toast-font-size');
.theme(line-height, '@toast-line-height');
// allow newline charactor
white-space: pre-wrap;
word-break: break-all;
background-color: @toast-background-color;
border-radius: @toast-border-radius;
.theme(background-color, '@toast-background-color');
.theme(border-radius, '@toast-border-radius');
&__container {
position: fixed;
@ -22,22 +23,22 @@
left: 50%;
// hack for avoid max-width when use left & fixed
width: fit-content;
max-width: @toast-max-width;
transform: translate(-50%, -50%);
.theme(max-width, '@toast-max-width');
}
&--text {
min-width: @toast-text-min-width;
padding: @toast-text-padding;
.theme(min-width, '@toast-text-min-width');
.theme(padding, '@toast-text-padding');
}
&--icon {
width: @toast-default-width;
min-height: @toast-default-min-height;
padding: @toast-default-padding;
.theme(width, '@toast-default-width');
.theme(min-height, '@toast-default-min-height');
.theme(padding, '@toast-default-padding');
.van-toast__icon {
font-size: @toast-icon-size;
.theme(font-size, '@toast-icon-size');
}
.van-toast__text {

15
packages/tree-select/index.less
View File

@ -1,4 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tree-select {
position: relative;
@ -12,7 +13,7 @@
left: 0;
width: 35%;
min-width: 120px;
background-color: @background-color-light;
.theme(background-color, '@background-color-light');
}
&__nitem {
@ -26,17 +27,17 @@
bottom: 0;
left: 0;
width: 3.6px;
background-color: @red;
content: '';
.theme(background-color, '@red');
}
&--active {
font-weight: bold;
background-color: @white;
.theme(background-color, '@white');
}
&--disabled {
color: @gray-dark;
.theme(color, '@gray-dark');
}
}
@ -45,7 +46,7 @@
width: 65%;
margin-left: 35%;
padding-left: 15px;
background-color: @white;
.theme(background-color, '@white');
}
&__item {
@ -54,11 +55,11 @@
line-height: 44px;
&--active {
color: @red;
.theme(color, '@red');
}
&--disabled {
color: @gray-dark;
.theme(color, '@gray-dark');
}
}