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

feat(style): add component css variables

Browse Source
This commit is contained in:
chenjiahan 2021-06-12 14:52:56 +08:00 committed by neverland
parent dafea4e1e8
commit fe1cba97b7
73 changed files with 1703 additions and 800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/action-bar-button/index.less
View File

@ -1,8 +1,14 @@
@import './var.less'; @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 { .van-action-bar-button {
flex: 1; flex: 1;
height: @action-bar-button-height; height: var(--van-action-bar-button-height);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @font-size-md; font-size: @font-size-md;
border: none; border: none;
@ -21,11 +27,11 @@
} }
&--warning { &--warning {
background: @action-bar-button-warning-color; background: var(--van-action-bar-button-warning-color);
} }
&--danger { &--danger {
background: @action-bar-button-danger-color; background: var(--van-action-bar-button-danger-color);
} }
@media (max-width: 321px) { @media (max-width: 321px) {

27
src/action-bar-icon/index.less
View File

@ -1,25 +1,36 @@
@import './var.less'; @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 { .van-action-bar-icon {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
min-width: @action-bar-icon-width; min-width: var(--van-action-bar-icon-width);
height: @action-bar-icon-height; height: var(--van-action-bar-icon-height);
color: @action-bar-icon-text-color; color: var(--van-action-bar-icon-text-color);
font-size: @action-bar-icon-font-size; font-size: var(--van-action-bar-icon-font-size);
line-height: 1; line-height: 1;
text-align: center; text-align: center;
background-color: @action-bar-icon-background-color; background-color: var(--van-action-bar-icon-background-color);
cursor: pointer; cursor: pointer;
&:active { &:active {
background-color: @action-bar-icon-active-color; background-color: var(--van-action-bar-icon-active-color);
} }
&__icon { &__icon {
margin: 0 auto @padding-base; margin: 0 auto @padding-base;
color: @action-bar-icon-color; color: var(--van-action-bar-icon-color);
font-size: @action-bar-icon-size; font-size: var(--van-action-bar-icon-size);
} }
} }

9
src/action-bar/index.less
View File

@ -1,6 +1,11 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/safe-area.less'; @import '../style/mixins/safe-area.less';
:root {
--van-action-bar-background-color: @action-bar-background-color;
--van-action-bar-height: @action-bar-height;
}
.van-action-bar { .van-action-bar {
position: fixed; position: fixed;
right: 0; right: 0;
@ -9,8 +14,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: content-box; box-sizing: content-box;
height: @action-bar-height; height: var(--van-action-bar-height);
background-color: @action-bar-background-color; background-color: var(--van-action-bar-background-color);
.safe-area-inset-bottom(); .safe-area-inset-bottom();
&--unfit { &--unfit {

73
src/action-sheet/index.less
View File

@ -1,12 +1,37 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/hairline'; @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-active-color: @action-sheet-close-icon-active-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 { .van-action-sheet {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: @action-sheet-max-height; max-height: var(--van-action-sheet-max-height);
overflow: hidden; overflow: hidden;
color: @action-sheet-item-text-color; color: var(--van-action-sheet-item-text-color);
&__content { &__content {
flex: 1 auto; flex: 1 auto;
@ -19,8 +44,8 @@
display: block; display: block;
width: 100%; width: 100%;
padding: 14px @padding-md; padding: 14px @padding-md;
font-size: @action-sheet-item-font-size; font-size: var(--van-action-sheet-item-font-size);
background-color: @action-sheet-item-background; background-color: var(--van-action-sheet-item-background);
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -30,14 +55,14 @@
} }
&__item { &__item {
line-height: @action-sheet-item-line-height; line-height: var(--van-action-sheet-item-line-height);
&--loading, &--loading,
&--disabled { &--disabled {
color: @action-sheet-item-disabled-text-color; color: var(--van-action-sheet-item-disabled-text-color);
&:active { &:active {
background-color: @action-sheet-item-background; background-color: var(--van-action-sheet-item-background);
} }
} }
@ -53,27 +78,27 @@
&__cancel { &__cancel {
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box; box-sizing: border-box;
color: @action-sheet-cancel-text-color; color: var(--van-action-sheet-cancel-text-color);
} }
&__subname { &__subname {
margin-top: @padding-xs; margin-top: @padding-xs;
color: @action-sheet-subname-color; color: var(--van-action-sheet-subname-color);
font-size: @action-sheet-subname-font-size; font-size: var(--van-action-sheet-subname-font-size);
line-height: @action-sheet-subname-line-height; line-height: var(--van-action-sheet-subname-line-height);
} }
&__gap { &__gap {
display: block; display: block;
height: @action-sheet-cancel-padding-top; height: var(--van-action-sheet-cancel-padding-top);
background-color: @action-sheet-cancel-padding-color; background-color: var(--van-action-sheet-cancel-padding-color);
} }
&__header { &__header {
flex-shrink: 0; flex-shrink: 0;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @action-sheet-header-font-size; font-size: var(--van-action-sheet-header-font-size);
line-height: @action-sheet-header-height; line-height: var(--van-action-sheet-header-height);
text-align: center; text-align: center;
} }
@ -81,9 +106,9 @@
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
padding: 20px @padding-md; padding: 20px @padding-md;
color: @action-sheet-description-color; color: var(--van-action-sheet-description-color);
font-size: @action-sheet-description-font-size; font-size: var(--van-action-sheet-description-font-size);
line-height: @action-sheet-description-line-height; line-height: var(--van-action-sheet-description-line-height);
text-align: center; text-align: center;
&::after { &::after {
@ -92,21 +117,21 @@
} }
&__loading-icon .van-loading__spinner { &__loading-icon .van-loading__spinner {
width: @action-sheet-loading-icon-size; width: var(--van-action-sheet-loading-icon-size);
height: @action-sheet-loading-icon-size; height: var(--van-action-sheet-loading-icon-size);
} }
&__close { &__close {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
padding: @action-sheet-close-icon-padding; padding: var(--van-action-sheet-close-icon-padding);
color: @action-sheet-close-icon-color; color: var(--van-action-sheet-close-icon-color);
font-size: @action-sheet-close-icon-size; font-size: var(--van-action-sheet-close-icon-size);
line-height: inherit; line-height: inherit;
&:active { &:active {
color: @action-sheet-close-icon-active-color; color: var(--van-action-sheet-close-icon-active-color);
} }
} }
} }

18
src/address-edit/index.less
View File

@ -1,7 +1,15 @@
@import './var.less'; @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-detail-finish-color: @address-edit-detail-finish-color;
--van-address-edit-detail-finish-font-size: @address-edit-detail-finish-font-size;
}
.van-address-edit { .van-address-edit {
padding: @address-edit-padding; padding: var(--van-address-edit-padding);
&__fields { &__fields {
overflow: hidden; overflow: hidden;
@ -19,10 +27,10 @@
} }
&__buttons { &__buttons {
padding: @address-edit-buttons-padding; padding: var(--van-address-edit-buttons-padding);
.van-button { .van-button {
margin-bottom: @address-edit-button-margin-bottom; margin-bottom: var(--van-address-edit-button-margin-bottom);
} }
} }
@ -36,8 +44,8 @@
} }
&__finish { &__finish {
color: @address-edit-detail-finish-color; color: var(--van-address-edit-detail-finish-color);
font-size: @address-edit-detail-finish-font-size; font-size: var(--van-address-edit-detail-finish-font-size);
} }
} }
} }

44
src/address-list/index.less
View File

@ -1,16 +1,32 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/safe-area.less'; @import '../style/mixins/safe-area.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 { .van-address-list {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
padding: @address-list-padding; padding: var(--van-address-list-padding);
&__bottom { &__bottom {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @address-list-add-button-z-index; z-index: var(--van-address-list-add-button-z-index);
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 0 @padding-md; padding: 0 @padding-md;
@ -24,15 +40,15 @@
} }
&__disabled-text { &__disabled-text {
padding: @address-list-disabled-text-padding; padding: var(--van-address-list-disabled-text-padding);
color: @address-list-disabled-text-color; color: var(--van-address-list-disabled-text-color);
font-size: @address-list-disabled-text-font-size; font-size: var(--van-address-list-disabled-text-font-size);
line-height: @address-list-disabled-text-line-height; line-height: var(--van-address-list-disabled-text-line-height);
} }
} }
.van-address-item { .van-address-item {
padding: @address-list-item-padding; padding: var(--van-address-list-item-padding);
background-color: @white; background-color: @white;
border-radius: @border-radius-lg; border-radius: @border-radius-lg;
@ -61,15 +77,15 @@
} }
&__address { &__address {
color: @address-list-item-text-color; color: var(--van-address-list-item-text-color);
font-size: @address-list-item-font-size; font-size: var(--van-address-list-item-font-size);
line-height: @address-list-item-line-height; line-height: var(--van-address-list-item-line-height);
} }
&--disabled { &--disabled {
.van-address-item__name, .van-address-item__name,
.van-address-item__address { .van-address-item__address {
color: @address-list-item-disabled-text-color; color: var(--van-address-list-item-disabled-text-color);
} }
} }
@ -78,7 +94,7 @@
top: 50%; top: 50%;
right: @padding-md; right: @padding-md;
color: @gray-6; color: @gray-6;
font-size: @address-list-edit-icon-size; font-size: var(--van-address-list-edit-icon-size);
transform: translate(0, -50%); transform: translate(0, -50%);
} }
@ -91,7 +107,7 @@
} }
.van-radio__icon--checked .van-icon { .van-radio__icon--checked .van-icon {
background-color: @address-list-item-radio-icon-color; background-color: var(--van-address-list-item-radio-icon-color);
border-color: @address-list-item-radio-icon-color; border-color: var(--van-address-list-item-radio-icon-color);
} }
} }

35
src/badge/index.less
View File

@ -1,18 +1,31 @@
@import './var.less'; @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 { .van-badge {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
min-width: @badge-size; min-width: var(--van-badge-size);
padding: @badge-padding; padding: var(--van-badge-padding);
color: @badge-color; color: var(--van-badge-color);
font-weight: @badge-font-weight; font-weight: var(--van-badge-font-weight);
font-size: @badge-font-size; font-size: var(--van-badge-font-size);
font-family: @badge-font-family; font-family: var(--van-badge-font-family);
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
background-color: @badge-background-color; background-color: var(--van-badge-background-color);
border: @badge-border-width solid @white; border: var(--van-badge-border-width) solid @white;
border-radius: @border-radius-max; border-radius: @border-radius-max;
&--fixed { &--fixed {
@ -24,10 +37,10 @@
} }
&--dot { &--dot {
width: @badge-dot-size; width: var(--van-badge-dot-size);
min-width: 0; min-width: 0;
height: @badge-dot-size; height: var(--van-badge-dot-size);
background-color: @badge-dot-color; background-color: var(--van-badge-dot-color);
border-radius: 100%; border-radius: 100%;
} }

122
src/button/index.less
View File

@ -1,16 +1,53 @@
@import './var.less'; @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 { .van-button {
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
height: @button-default-height; height: var(--van-button-default-height);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: @button-default-font-size; font-size: var(--van-button-default-font-size);
line-height: @button-default-line-height; line-height: var(--van-button-default-line-height);
text-align: center; text-align: center;
border-radius: @button-border-radius; border-radius: var(--van-button-border-radius);
cursor: pointer; cursor: pointer;
transition: opacity @animation-duration-fast; transition: opacity @animation-duration-fast;
-webkit-appearance: none; -webkit-appearance: none;
@ -42,69 +79,74 @@
} }
&--default { &--default {
color: @button-default-color; color: var(--van-button-default-color);
background-color: @button-default-background-color; background-color: var(--van-button-default-background-color);
border: @button-border-width solid @button-default-border-color; border: var(--van-button-border-width) solid
var(--van-button-default-border-color);
} }
&--primary { &--primary {
color: @button-primary-color; color: var(--van-button-primary-color);
background-color: @button-primary-background-color; background-color: var(--van-button-primary-background-color);
border: @button-border-width solid @button-primary-border-color; border: var(--van-button-border-width) solid
var(--van-button-primary-border-color);
} }
&--success { &--success {
color: @button-success-color; color: var(--van-button-success-color);
background-color: @button-success-background-color; background-color: var(--van-button-success-background-color);
border: @button-border-width solid @button-success-border-color; border: var(--van-button-border-width) solid
var(--van-button-success-border-color);
} }
&--danger { &--danger {
color: @button-danger-color; color: var(--van-button-danger-color);
background-color: @button-danger-background-color; background-color: var(--van-button-danger-background-color);
border: @button-border-width solid @button-danger-border-color; border: var(--van-button-border-width) solid
var(--van-button-danger-border-color);
} }
&--warning { &--warning {
color: @button-warning-color; color: var(--van-button-warning-color);
background-color: @button-warning-background-color; background-color: var(--van-button-warning-background-color);
border: @button-border-width solid @button-warning-border-color; border: var(--van-button-border-width) solid
var(--van-button-warning-border-color);
} }
&--plain { &--plain {
background-color: @button-plain-background-color; background-color: var(--van-button-plain-background-color);
&.van-button--primary { &.van-button--primary {
color: @button-primary-background-color; color: var(--van-button-primary-background-color);
} }
&.van-button--success { &.van-button--success {
color: @button-success-background-color; color: var(--van-button-success-background-color);
} }
&.van-button--danger { &.van-button--danger {
color: @button-danger-background-color; color: var(--van-button-danger-background-color);
} }
&.van-button--warning { &.van-button--warning {
color: @button-warning-background-color; color: var(--van-button-warning-background-color);
} }
} }
&--large { &--large {
width: 100%; width: 100%;
height: @button-large-height; height: var(--van-button-large-height);
} }
&--normal { &--normal {
padding: @button-normal-padding; padding: var(--van-button-normal-padding);
font-size: @button-normal-font-size; font-size: var(--van-button-normal-font-size);
} }
&--small { &--small {
height: @button-small-height; height: var(--van-button-small-height);
padding: @button-small-padding; padding: var(--van-button-small-padding);
font-size: @button-small-font-size; font-size: var(--van-button-small-font-size);
} }
&__loading { &__loading {
@ -113,15 +155,15 @@
.van-loading__spinner { .van-loading__spinner {
color: currentColor; color: currentColor;
width: @button-loading-icon-size; width: var(--van-button-loading-icon-size);
height: @button-loading-icon-size; height: var(--van-button-loading-icon-size);
} }
} }
&--mini { &--mini {
height: @button-mini-height; height: var(--van-button-mini-height);
padding: @button-mini-padding; padding: var(--van-button-mini-padding);
font-size: @button-mini-font-size; font-size: var(--van-button-mini-font-size);
& + .van-button--mini { & + .van-button--mini {
margin-left: @padding-base; margin-left: @padding-base;
@ -135,7 +177,7 @@
&--disabled { &--disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: @button-disabled-opacity; opacity: var(--van-button-disabled-opacity);
} }
&--loading { &--loading {
@ -143,7 +185,7 @@
} }
&--round { &--round {
border-radius: @button-round-border-radius; border-radius: var(--van-button-round-border-radius);
} }
&--square { &--square {
@ -166,7 +208,7 @@
} }
&__icon { &__icon {
font-size: @button-icon-size; font-size: var(--van-button-icon-size);
line-height: inherit; line-height: inherit;
} }
@ -182,11 +224,11 @@
&::after { &::after {
border-color: inherit; border-color: inherit;
border-radius: @button-border-radius * 2; border-radius: calc(var(--van-button-border-radius) * 2);
} }
&.van-button--round::after { &.van-button--round::after {
border-radius: @button-round-border-radius; border-radius: var(--van-button-round-border-radius);
} }
&.van-button--square::after { &.van-button--square::after {

82
src/calendar/index.less
View File

@ -1,16 +1,44 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/safe-area.less'; @import '../style/mixins/safe-area.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 { .van-calendar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background-color: @calendar-background-color; background-color: var(--van-calendar-background-color);
&__popup { &__popup {
&.van-popup--top, &.van-popup--top,
&.van-popup--bottom { &.van-popup--bottom {
height: @calendar-popup-height; height: var(--van-calendar-popup-height);
} }
&.van-popup--left, &.van-popup--left,
@ -25,28 +53,28 @@
&__header { &__header {
flex-shrink: 0; flex-shrink: 0;
box-shadow: @calendar-header-box-shadow; box-shadow: var(--van-calendar-header-box-shadow);
} }
&__month-title, &__month-title,
&__header-title, &__header-title,
&__header-subtitle { &__header-subtitle {
height: @calendar-header-title-height; height: var(--van-calendar-header-title-height);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
line-height: @calendar-header-title-height; line-height: var(--van-calendar-header-title-height);
text-align: center; text-align: center;
} }
&__header-title { &__header-title {
font-size: @calendar-header-title-font-size; font-size: var(--van-calendar-header-title-font-size);
} }
&__header-subtitle { &__header-subtitle {
font-size: @calendar-header-subtitle-font-size; font-size: var(--van-calendar-header-subtitle-font-size);
} }
&__month-title { &__month-title {
font-size: @calendar-month-title-font-size; font-size: var(--van-calendar-month-title-font-size);
} }
&__weekdays { &__weekdays {
@ -55,8 +83,8 @@
&__weekday { &__weekday {
flex: 1; flex: 1;
font-size: @calendar-weekdays-font-size; font-size: var(--van-calendar-weekdays-font-size);
line-height: @calendar-weekdays-height; line-height: var(--van-calendar-weekdays-height);
text-align: center; text-align: center;
} }
@ -78,8 +106,8 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 0; z-index: 0;
color: @calendar-month-mark-color; color: var(--van-calendar-month-mark-color);
font-size: @calendar-month-mark-font-size; font-size: var(--van-calendar-month-mark-font-size);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
pointer-events: none; pointer-events: none;
} }
@ -95,8 +123,8 @@
&__day { &__day {
position: relative; position: relative;
width: 14.285%; width: 14.285%;
height: @calendar-day-height; height: var(--van-calendar-day-height);
font-size: @calendar-day-font-size; font-size: var(--van-calendar-day-font-size);
cursor: pointer; cursor: pointer;
&--end, &--end,
@ -104,8 +132,8 @@
&--start-end, &--start-end,
&--multiple-middle, &--multiple-middle,
&--multiple-selected { &--multiple-selected {
color: @calendar-range-edge-color; color: var(--van-calendar-range-edge-color);
background-color: @calendar-range-edge-background-color; background-color: var(--van-calendar-range-edge-background-color);
} }
&--start { &--start {
@ -122,7 +150,7 @@
} }
&--middle { &--middle {
color: @calendar-range-middle-color; color: var(--van-calendar-range-middle-color);
&::after { &::after {
position: absolute; position: absolute;
@ -131,13 +159,13 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: currentColor; background-color: currentColor;
opacity: @calendar-range-middle-background-opacity; opacity: var(--van-calendar-range-middle-background-opacity);
content: ''; content: '';
} }
} }
&--disabled { &--disabled {
color: @calendar-day-disabled-color; color: var(--van-calendar-day-disabled-color);
cursor: default; cursor: default;
} }
} }
@ -147,8 +175,8 @@
position: absolute; position: absolute;
right: 0; right: 0;
left: 0; left: 0;
font-size: @calendar-info-font-size; font-size: var(--van-calendar-info-font-size);
line-height: @calendar-info-line-height; line-height: var(--van-calendar-info-line-height);
@media (max-width: 350px) { @media (max-width: 350px) {
font-size: 9px; font-size: 9px;
@ -164,10 +192,10 @@
} }
&__selected-day { &__selected-day {
width: @calendar-selected-day-size; width: var(--van-calendar-selected-day-size);
height: @calendar-selected-day-size; height: var(--van-calendar-selected-day-size);
color: @calendar-selected-day-color; color: var(--van-calendar-selected-day-color);
background-color: @calendar-selected-day-background-color; background-color: var(--van-calendar-selected-day-background-color);
border-radius: @border-radius-md; border-radius: @border-radius-md;
} }
@ -182,7 +210,7 @@
} }
&__confirm { &__confirm {
height: @calendar-confirm-button-height; height: var(--van-calendar-confirm-button-height);
margin: @calendar-confirm-button-margin; margin: var(--van-calendar-confirm-button-margin);
} }
} }

59
src/card/index.less
View File

@ -1,12 +1,31 @@
@import './var.less'; @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 { .van-card {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: @card-padding; padding: var(--van-card-padding);
color: @card-text-color; color: var(--van-card-text-color);
font-size: @card-font-size; font-size: var(--van-card-font-size);
background-color: @card-background-color; background-color: var(--van-card-background-color);
&:not(:first-child) { &:not(:first-child) {
margin-top: @padding-xs; margin-top: @padding-xs;
@ -19,12 +38,12 @@
&__thumb { &__thumb {
position: relative; position: relative;
flex: none; flex: none;
width: @card-thumb-size; width: var(--van-card-thumb-size);
height: @card-thumb-size; height: var(--van-card-thumb-size);
margin-right: @padding-xs; margin-right: @padding-xs;
img { img {
border-radius: @card-thumb-border-radius; border-radius: var(--van-card-thumb-border-radius);
} }
} }
@ -35,7 +54,7 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
min-width: 0; /* hack for flex box ellipsis */ min-width: 0; /* hack for flex box ellipsis */
min-height: @card-thumb-size; min-height: var(--van-card-thumb-size);
&--centered { &--centered {
justify-content: center; justify-content: center;
@ -50,13 +69,13 @@
&__title { &__title {
max-height: 32px; max-height: 32px;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
line-height: @card-title-line-height; line-height: var(--van-card-title-line-height);
} }
&__desc { &__desc {
max-height: @card-desc-line-height; max-height: var(--van-card-desc-line-height);
color: @card-desc-color; color: var(--van-card-desc-color);
line-height: @card-desc-line-height; line-height: var(--van-card-desc-line-height);
} }
&__bottom { &__bottom {
@ -65,31 +84,31 @@
&__price { &__price {
display: inline-block; display: inline-block;
color: @card-price-color; color: var(--van-card-price-color);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @card-price-font-size; font-size: var(--van-card-price-font-size);
} }
&__price-integer { &__price-integer {
font-size: @card-price-integer-font-size; font-size: var(--van-card-price-integer-font-size);
font-family: @card-price-font-family; font-family: var(--van-card-price-font-family);
} }
&__price-decimal { &__price-decimal {
font-family: @card-price-font-family; font-family: var(--van-card-price-font-family);
} }
&__origin-price { &__origin-price {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
color: @card-origin-price-color; color: var(--van-card-origin-price-color);
font-size: @card-origin-price-font-size; font-size: var(--van-card-origin-price-font-size);
text-decoration: line-through; text-decoration: line-through;
} }
&__num { &__num {
float: right; float: right;
color: @card-num-color; color: var(--van-card-num-color);
} }
&__tag { &__tag {

42
src/cascader/index.less
View File

@ -1,26 +1,42 @@
@import './var.less'; @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-close-icon-active-color: @cascader-close-icon-active-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-tab-color: @cascader-tab-color;
--van-cascader-unselected-tab-color: @cascader-unselected-tab-color;
}
.van-cascader { .van-cascader {
&__header { &__header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: @cascader-header-height; height: var(--van-cascader-header-height);
padding: @cascader-header-padding; padding: var(--van-cascader-header-padding);
} }
&__title { &__title {
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @cascader-title-font-size; font-size: var(--van-cascader-title-font-size);
line-height: @cascader-title-line-height; line-height: var(--van-cascader-title-line-height);
} }
&__close-icon { &__close-icon {
color: @cascader-close-icon-color; color: var(--van-cascader-close-icon-color);
font-size: @cascader-close-icon-size; font-size: var(--van-cascader-close-icon-size);
&:active { &:active {
color: @cascader-close-icon-active-color; color: var(--van-cascader-close-icon-active-color);
} }
} }
@ -31,7 +47,7 @@
} }
&.van-tabs--line .van-tabs__wrap { &.van-tabs--line .van-tabs__wrap {
height: @cascader-tabs-height; height: var(--van-cascader-tabs-height);
} }
.van-tabs__nav--complete { .van-tabs__nav--complete {
@ -41,11 +57,11 @@
} }
&__tab { &__tab {
color: @cascader-tab-color; color: var(--van-cascader-tab-color);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
&--unselected { &--unselected {
color: @cascader-unselected-tab-color; color: var(--van-cascader-unselected-tab-color);
font-weight: normal; font-weight: normal;
} }
} }
@ -63,18 +79,18 @@
} }
&--selected { &--selected {
color: @cascader-active-color; color: var(--van-cascader-active-color);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
} }
} }
&__selected-icon { &__selected-icon {
font-size: @cascader-selected-icon-size; font-size: var(--van-cascader-selected-icon-size);
} }
&__options { &__options {
box-sizing: border-box; box-sizing: border-box;
height: @cascader-options-height; height: var(--van-cascader-options-height);
padding-top: 6px; padding-top: 6px;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

18
src/cell-group/index.less
View File

@ -1,12 +1,20 @@
@import './var.less'; @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 { .van-cell-group {
background-color: @cell-group-background-color; background-color: var(--van-cell-group-background-color);
&__title { &__title {
padding: @cell-group-title-padding; padding: var(--van-cell-group-title-padding);
color: @cell-group-title-color; color: var(--van-cell-group-title-color);
font-size: @cell-group-title-font-size; font-size: var(--van-cell-group-title-font-size);
line-height: @cell-group-title-line-height; line-height: var(--van-cell-group-title-line-height);
} }
} }

66
src/cell/index.less
View File

@ -1,20 +1,42 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/hairline'; @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 { .van-cell {
position: relative; position: relative;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: @cell-vertical-padding @cell-horizontal-padding; padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
overflow: hidden; overflow: hidden;
color: @cell-text-color; color: var(--van-cell-text-color);
font-size: @cell-font-size; font-size: var(--van-cell-font-size);
line-height: @cell-line-height; line-height: var(--van-cell-line-height);
background-color: @cell-background-color; background-color: var(--van-cell-background-color);
&::after { &::after {
.hairline-bottom(@cell-border-color, @padding-md, @padding-md); .hairline-bottom(var(--van-cell-border-color), @padding-md, @padding-md);
} }
&:last-child::after, &:last-child::after,
@ -23,10 +45,10 @@
} }
&__label { &__label {
margin-top: @cell-label-margin-top; margin-top: var(--van-cell-label-margin-top);
color: @cell-label-color; color: var(--van-cell-label-color);
font-size: @cell-label-font-size; font-size: var(--van-cell-label-font-size);
line-height: @cell-label-line-height; line-height: var(--van-cell-label-line-height);
} }
&__title, &__title,
@ -37,7 +59,7 @@
&__value { &__value {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
color: @cell-value-color; color: var(--van-cell-value-color);
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
word-wrap: break-word; word-wrap: break-word;
@ -50,9 +72,9 @@
&__left-icon, &__left-icon,
&__right-icon { &__right-icon {
height: @cell-line-height; height: var(--van-cell-line-height);
font-size: @cell-icon-size; font-size: var(--van-cell-icon-size);
line-height: @cell-line-height; line-height: var(--van-cell-line-height);
} }
&__left-icon { &__left-icon {
@ -61,14 +83,14 @@
&__right-icon { &__right-icon {
margin-left: @padding-base; margin-left: @padding-base;
color: @cell-right-icon-color; color: var(--van-cell-right-icon-color);
} }
&--clickable { &--clickable {
cursor: pointer; cursor: pointer;
&:active { &:active {
background-color: @cell-active-color; background-color: var(--van-cell-active-color);
} }
} }
@ -78,8 +100,8 @@
&::before { &::before {
position: absolute; position: absolute;
left: @padding-xs; left: @padding-xs;
color: @cell-required-color; color: var(--van-cell-required-color);
font-size: @cell-font-size; font-size: var(--van-cell-font-size);
content: '*'; content: '*';
} }
} }
@ -89,15 +111,15 @@
} }
&--large { &--large {
padding-top: @cell-large-vertical-padding; padding-top: var(--van-cell-large-vertical-padding);
padding-bottom: @cell-large-vertical-padding; padding-bottom: var(--van-cell-large-vertical-padding);
.van-cell__title { .van-cell__title {
font-size: @cell-large-title-font-size; font-size: var(--van-cell-large-title-font-size);
} }
.van-cell__label { .van-cell__label {
font-size: @cell-large-label-font-size; font-size: var(--van-cell-large-label-font-size);
} }
} }
} }

38
src/checkbox/index.less
View File

@ -1,5 +1,17 @@
@import './var.less'; @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 { .van-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
@ -22,7 +34,7 @@
&__icon { &__icon {
flex: none; flex: none;
height: 1em; height: 1em;
font-size: @checkbox-size; font-size: var(--van-checkbox-size);
line-height: 1em; line-height: 1em;
cursor: pointer; cursor: pointer;
@ -35,8 +47,8 @@
font-size: 0.8em; font-size: 0.8em;
line-height: 1.25; line-height: 1.25;
text-align: center; text-align: center;
border: 1px solid @checkbox-border-color; border: 1px solid var(--van-checkbox-border-color);
transition-duration: @checkbox-transition-duration; transition-duration: var(--van-checkbox-transition-duration);
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
} }
@ -49,8 +61,8 @@
&--checked { &--checked {
.van-icon { .van-icon {
color: @white; color: @white;
background-color: @checkbox-checked-icon-color; background-color: var(--van-checkbox-checked-icon-color);
border-color: @checkbox-checked-icon-color; border-color: var(--van-checkbox-checked-icon-color);
} }
} }
@ -58,29 +70,29 @@
cursor: not-allowed; cursor: not-allowed;
.van-icon { .van-icon {
background-color: @checkbox-disabled-background-color; background-color: var(--van-checkbox-disabled-background-color);
border-color: @checkbox-disabled-icon-color; border-color: var(--van-checkbox-disabled-icon-color);
} }
} }
&--disabled&--checked { &--disabled&--checked {
.van-icon { .van-icon {
color: @checkbox-disabled-icon-color; color: var(--van-checkbox-disabled-icon-color);
} }
} }
} }
&__label { &__label {
margin-left: @checkbox-label-margin; margin-left: var(--van-checkbox-label-margin);
color: @checkbox-label-color; color: var(--van-checkbox-label-color);
line-height: @checkbox-size; line-height: var(--van-checkbox-size);
&--left { &--left {
margin: 0 @checkbox-label-margin 0 0; margin: 0 var(--van-checkbox-label-margin) 0 0;
} }
&--disabled { &--disabled {
color: @checkbox-disabled-label-color; color: var(--van-checkbox-disabled-label-color);
} }
} }
} }

26
src/circle/index.less
View File

@ -1,10 +1,20 @@
@import './var.less'; @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 { .van-circle {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: @circle-size; width: var(--van-circle-size);
height: @circle-size; height: var(--van-circle-size);
text-align: center; text-align: center;
svg { svg {
@ -16,12 +26,12 @@
} }
&__layer { &__layer {
stroke: @circle-layer-color; stroke: var(--van-circle-layer-color);
} }
&__hover { &__hover {
fill: none; fill: none;
stroke: @circle-color; stroke: var(--van-circle-color);
stroke-linecap: round; stroke-linecap: round;
} }
@ -32,10 +42,10 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 0 @padding-base; padding: 0 @padding-base;
color: @circle-text-color; color: var(--van-circle-text-color);
font-weight: @circle-text-font-weight; font-weight: var(--van-circle-text-font-weight);
font-size: @circle-text-font-size; font-size: var(--van-circle-text-font-size);
line-height: @circle-text-line-height; line-height: var(--van-circle-text-line-height);
transform: translateY(-50%); transform: translateY(-50%);
} }
} }

26
src/collapse-item/index.less
View File

@ -1,6 +1,16 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/hairline'; @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 { .van-collapse-item {
position: relative; position: relative;
@ -15,7 +25,7 @@
// using translateZ to fix safari rendering issues // using translateZ to fix safari rendering issues
// see: https://github.com/youzan/vant/issues/8608 // see: https://github.com/youzan/vant/issues/8608
transform: rotate(90deg) translateZ(0); transform: rotate(90deg) translateZ(0);
transition: transform @collapse-item-transition-duration; transition: transform var(--van-collapse-item-transition-duration);
} }
&::after { &::after {
@ -44,22 +54,22 @@
&, &,
& .van-cell__right-icon { & .van-cell__right-icon {
color: @collapse-item-title-disabled-color; color: var(--van-collapse-item-title-disabled-color);
} }
} }
} }
&__wrapper { &__wrapper {
overflow: hidden; overflow: hidden;
transition: height @collapse-item-transition-duration ease-in-out; transition: height var(--van-collapse-item-transition-duration) ease-in-out;
will-change: height; will-change: height;
} }
&__content { &__content {
padding: @collapse-item-content-padding; padding: var(--van-collapse-item-content-padding);
color: @collapse-item-content-text-color; color: var(--van-collapse-item-content-text-color);
font-size: @collapse-item-content-font-size; font-size: var(--van-collapse-item-content-font-size);
line-height: @collapse-item-content-line-height; line-height: var(--van-collapse-item-content-line-height);
background-color: @collapse-item-content-background-color; background-color: var(--van-collapse-item-content-background-color);
} }
} }

17
src/contact-card/index.less
View File

@ -1,21 +1,28 @@
@import './var.less'; @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 { .van-contact-card {
padding: @contact-card-padding; padding: var(--van-contact-card-padding);
&__value { &__value {
margin-left: 5px; margin-left: 5px;
line-height: @contact-card-value-line-height; line-height: var(--van-contact-card-value-line-height);
} }
&--add { &--add {
.van-contact-card__value { .van-contact-card__value {
line-height: @contact-card-add-icon-size; line-height: var(--van-contact-card-add-icon-size);
} }
.van-cell__left-icon { .van-cell__left-icon {
color: @contact-card-add-icon-color; color: var(--van-contact-card-add-icon-color);
font-size: @contact-card-add-icon-size; font-size: var(--van-contact-card-add-icon-size);
} }
} }

23
src/contact-edit/index.less
View File

@ -1,14 +1,23 @@
@import './var.less'; @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 { .van-contact-edit {
padding: @contact-edit-padding; padding: var(--van-contact-edit-padding);
&__fields { &__fields {
overflow: hidden; overflow: hidden;
border-radius: @contact-edit-fields-radius; border-radius: var(--van-contact-edit-fields-radius);
.van-field__label { .van-field__label {
width: @contact-edit-field-label-width; width: var(--van-contact-edit-field-label-width);
} }
} }
@ -16,15 +25,15 @@
margin-top: 10px; margin-top: 10px;
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
border-radius: @contact-edit-fields-radius; border-radius: var(--van-contact-edit-fields-radius);
} }
&__buttons { &__buttons {
padding: @contact-edit-buttons-padding; padding: var(--van-contact-edit-buttons-padding);
} }
.van-button { .van-button {
margin-bottom: @contact-edit-button-margin-bottom; margin-bottom: var(--van-contact-edit-button-margin-bottom);
font-size: @contact-edit-button-font-size; font-size: var(--van-contact-edit-button-font-size);
} }
} }

17
src/contact-list/index.less
View File

@ -1,13 +1,20 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/safe-area.less'; @import '../style/mixins/safe-area.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 { .van-contact-list {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
padding-bottom: 80px; padding-bottom: 80px;
&__item { &__item {
padding: @contact-list-item-padding; padding: var(--van-contact-list-item-padding);
} }
&__item-value { &__item-value {
@ -33,13 +40,13 @@
} }
&__edit { &__edit {
font-size: @contact-list-edit-icon-size; font-size: var(--van-contact-list-edit-icon-size);
} }
&__radio { &__radio {
.van-radio__icon--checked .van-icon { .van-radio__icon--checked .van-icon {
background-color: @contact-list-item-radio-icon-color; background-color: var(--van-contact-list-item-radio-icon-color);
border-color: @contact-list-item-radio-icon-color; border-color: var(--van-contact-list-item-radio-icon-color);
} }
} }
@ -48,7 +55,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @contact-list-add-button-z-index; z-index: var(--van-contact-list-add-button-z-index);
padding: 0 @padding-md; padding: 0 @padding-md;
background-color: @white; background-color: @white;
.safe-area-inset-bottom(); .safe-area-inset-bottom();

14
src/count-down/index.less
View File

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

6
src/coupon-cell/index.less
View File

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

31
src/coupon-list/index.less
View File

@ -1,12 +1,23 @@
@import './var.less'; @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 { .van-coupon-list {
position: relative; position: relative;
height: 100%; height: 100%;
background-color: @coupon-list-background-color; background-color: var(--van-coupon-list-background-color);
&__field { &__field {
padding: @coupon-list-field-padding; padding: var(--van-coupon-list-field-padding);
.van-field__body { .van-field__body {
height: 34px; height: 34px;
@ -33,9 +44,9 @@
&__exchange { &__exchange {
flex: none; flex: none;
height: @coupon-list-exchange-button-height; height: var(--van-coupon-list-exchange-button-height);
font-size: @font-size-lg; font-size: @font-size-lg;
line-height: @coupon-list-exchange-button-height - 2px; line-height: calc(var(--van-coupon-list-exchange-button-height) - 2px);
border: 0; border: 0;
} }
@ -67,7 +78,7 @@
} }
&__close { &__close {
height: @coupon-list-close-button-height; height: var(--van-coupon-list-close-button-height);
} }
&__empty { &__empty {
@ -76,14 +87,14 @@
p { p {
margin: @padding-md 0; margin: @padding-md 0;
color: @coupon-list-empty-tip-color; color: var(--van-coupon-list-empty-tip-color);
font-size: @coupon-list-empty-tip-font-size; font-size: var(--van-coupon-list-empty-tip-font-size);
line-height: @coupon-list-empty-tip-line-height; line-height: var(--van-coupon-list-empty-tip-line-height);
} }
img { img {
width: @coupon-list-empty-image-size; width: var(--van-coupon-list-empty-image-size);
height: @coupon-list-empty-image-size; height: var(--van-coupon-list-empty-image-size);
} }
} }
} }

58
src/coupon/index.less
View File

@ -1,31 +1,50 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/ellipsis'; @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-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 { .van-coupon {
margin: @coupon-margin; margin: var(--van-coupon-margin);
overflow: hidden; overflow: hidden;
background-color: @coupon-background-color; background-color: var(--van-coupon-background-color);
border-radius: @coupon-border-radius; border-radius: var(--van-coupon-border-radius);
box-shadow: @coupon-box-shadow; box-shadow: var(--van-coupon-box-shadow);
&:active { &:active {
background-color: @coupon-active-background-color; background-color: var(--van-coupon-active-background-color);
} }
&__content { &__content {
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
min-height: @coupon-content-height; min-height: var(--van-coupon-content-height);
padding: @coupon-content-padding; padding: var(--van-coupon-content-padding);
color: @gray-8; color: @gray-8;
} }
&__head { &__head {
position: relative; position: relative;
min-width: @coupon-head-width; min-width: var(--van-coupon-head-width);
padding: 0 @padding-xs; padding: 0 @padding-xs;
color: @coupon-amount-color; color: var(--van-coupon-amount-color);
text-align: center; text-align: center;
} }
@ -39,12 +58,12 @@
&__amount { &__amount {
margin-bottom: 6px; margin-bottom: 6px;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @coupon-amount-font-size; font-size: var(--van-coupon-amount-font-size);
.ellipsis(); .ellipsis();
span { span {
font-weight: normal; font-weight: normal;
font-size: @coupon-currency-font-size; font-size: var(--van-coupon-currency-font-size);
&:not(:empty) { &:not(:empty) {
margin-left: 2px; margin-left: 2px;
@ -61,13 +80,14 @@
&__body { &__body {
position: relative; position: relative;
flex: 1; flex: 1;
border-radius: 0 @coupon-border-radius @coupon-border-radius 0; border-radius: 0 var(--van-coupon-border-radius)
var(--van-coupon-border-radius) 0;
} }
&__name { &__name {
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
font-size: @coupon-name-font-size; font-size: var(--van-coupon-name-font-size);
line-height: @line-height-md; line-height: @line-height-md;
} }
@ -82,24 +102,24 @@
bottom: 0; bottom: 0;
.van-checkbox__icon--checked .van-icon { .van-checkbox__icon--checked .van-icon {
background-color: @coupon-corner-checkbox-icon-color; background-color: var(--van-coupon-corner-checkbox-icon-color);
border-color: @coupon-corner-checkbox-icon-color; border-color: var(--van-coupon-corner-checkbox-icon-color);
} }
} }
&__description { &__description {
padding: @coupon-description-padding; padding: var(--van-coupon-description-padding);
font-size: @font-size-sm; font-size: @font-size-sm;
border-top: 1px dashed @coupon-description-border-color; border-top: 1px dashed var(--van-coupon-description-border-color);
} }
&--disabled { &--disabled {
&:active { &:active {
background-color: @coupon-background-color; background-color: var(--van-coupon-background-color);
} }
.van-coupon-item__content { .van-coupon-item__content {
height: @coupon-content-height - 10px; height: calc(var(--van-coupon-content-height) - 10px);
} }
.van-coupon__head { .van-coupon__head {

60
src/dialog/index.less
View File

@ -1,29 +1,51 @@
@import './var.less'; @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 { .van-dialog {
top: 45%; top: 45%;
left: 50%; left: 50%;
width: @dialog-width; width: var(--van-dialog-width);
overflow: hidden; overflow: hidden;
font-size: @dialog-font-size; font-size: var(--van-dialog-font-size);
background-color: @dialog-background-color; background-color: var(--van-dialog-background-color);
border-radius: @dialog-border-radius; border-radius: var(--van-dialog-border-radius);
backface-visibility: hidden; // avoid blurry text after scale animation backface-visibility: hidden; // avoid blurry text after scale animation
transition: @dialog-transition; transition: var(--van-dialog-transition);
transition-property: transform, opacity; transition-property: transform, opacity;
@media (max-width: 321px) { @media (max-width: 321px) {
width: @dialog-small-screen-width; width: var(--van-dialog-small-screen-width);
} }
&__header { &__header {
padding-top: @dialog-header-padding-top; padding-top: var(--van-dialog-header-padding-top);
font-weight: @dialog-header-font-weight; font-weight: var(--van-dialog-header-font-weight);
line-height: @dialog-header-line-height; line-height: var(--van-dialog-header-line-height);
text-align: center; text-align: center;
&--isolated { &--isolated {
padding: @dialog-header-isolated-padding; padding: var(--van-dialog-header-isolated-padding);
} }
} }
@ -37,11 +59,11 @@
&__message { &__message {
flex: 1; flex: 1;
max-height: @dialog-message-max-height; max-height: var(--van-dialog-message-max-height);
padding: 26px @dialog-message-padding; padding: 26px var(--van-dialog-message-padding);
overflow-y: auto; overflow-y: auto;
font-size: @dialog-message-font-size; font-size: var(--van-dialog-message-font-size);
line-height: @dialog-message-line-height; line-height: var(--van-dialog-message-line-height);
// allow newline charactor // allow newline charactor
white-space: pre-wrap; white-space: pre-wrap;
@ -50,8 +72,8 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&--has-title { &--has-title {
padding-top: @dialog-has-title-message-padding-top; padding-top: var(--van-dialog-has-title-message-padding-top);
color: @dialog-has-title-message-text-color; color: var(--van-dialog-has-title-message-text-color);
} }
&--left { &--left {
@ -72,7 +94,7 @@
&__confirm, &__confirm,
&__cancel { &__cancel {
flex: 1; flex: 1;
height: @dialog-button-height; height: var(--van-dialog-button-height);
margin: 0; margin: 0;
border: 0; border: 0;
} }
@ -80,7 +102,7 @@
&__confirm { &__confirm {
&, &,
&:active { &:active {
color: @dialog-confirm-button-text-color; color: var(--van-dialog-confirm-button-text-color);
} }
} }
@ -98,7 +120,7 @@
.van-dialog__confirm, .van-dialog__confirm,
.van-dialog__cancel { .van-dialog__cancel {
height: @dialog-round-button-height; height: var(--van-dialog-round-button-height);
} }
.van-dialog__confirm { .van-dialog__confirm {

29
src/divider/index.less
View File

@ -1,13 +1,24 @@
@import './var.less'; @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 { .van-divider {
display: flex; display: flex;
align-items: center; align-items: center;
margin: @divider-margin; margin: var(--van-divider-margin);
color: @divider-text-color; color: var(--van-divider-text-color);
font-size: @divider-font-size; font-size: var(--van-divider-font-size);
line-height: @divider-line-height; line-height: var(--van-divider-line-height);
border-color: @divider-border-color; border-color: var(--van-divider-border-color);
border-style: solid; border-style: solid;
border-width: 0; border-width: 0;
@ -41,24 +52,24 @@
&--content-left, &--content-left,
&--content-right { &--content-right {
&::before { &::before {
margin-right: @divider-content-padding; margin-right: var(--van-divider-content-padding);
} }
&::after { &::after {
margin-left: @divider-content-padding; margin-left: var(--van-divider-content-padding);
content: ''; content: '';
} }
} }
&--content-left { &--content-left {
&::before { &::before {
max-width: @divider-content-left-width; max-width: var(--van-divider-content-left-width);
} }
} }
&--content-right { &--content-right {
&::after { &::after {
max-width: @divider-content-right-width; max-width: var(--van-divider-content-right-width);
} }
} }
} }

6
src/dropdown-item/index.less
View File

@ -1,11 +1,15 @@
@import './var.less'; @import './var.less';
@import '../dropdown-menu/var.less'; @import '../dropdown-menu/var.less';
:root {
--van-dropdown-item-z-index: @dropdown-item-z-index;
}
.van-dropdown-item { .van-dropdown-item {
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
z-index: @dropdown-item-z-index; z-index: var(--van-dropdown-item-z-index);
overflow: hidden; overflow: hidden;
&__icon { &__icon {

32
src/dropdown-menu/index.less
View File

@ -1,15 +1,29 @@
@import './var.less'; @import './var.less';
@import '../dropdown-item/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 { .van-dropdown-menu {
user-select: none; user-select: none;
&__bar { &__bar {
position: relative; position: relative;
display: flex; display: flex;
height: @dropdown-menu-height; height: var(--van-dropdown-menu-height);
background-color: @dropdown-menu-background-color; background-color: var(--van-dropdown-menu-background-color);
box-shadow: @dropdown-menu-box-shadow; box-shadow: var(--van-dropdown-menu-box-shadow);
&--opened { &--opened {
z-index: @dropdown-item-z-index + 1; z-index: @dropdown-item-z-index + 1;
@ -34,7 +48,7 @@
} }
.van-dropdown-menu__title { .van-dropdown-menu__title {
color: @dropdown-menu-title-disabled-text-color; color: var(--van-dropdown-menu-title-disabled-text-color);
} }
} }
} }
@ -43,10 +57,10 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
padding: @dropdown-menu-title-padding; padding: var(--van-dropdown-menu-title-padding);
color: @dropdown-menu-title-text-color; color: var(--van-dropdown-menu-title-text-color);
font-size: @dropdown-menu-title-font-size; font-size: var(--van-dropdown-menu-title-font-size);
line-height: @dropdown-menu-title-line-height; line-height: var(--van-dropdown-menu-title-line-height);
&::after { &::after {
position: absolute; position: absolute;
@ -61,7 +75,7 @@
} }
&--active { &--active {
color: @dropdown-menu-title-active-text-color; color: var(--van-dropdown-menu-title-active-text-color);
&::after { &::after {
border-color: transparent transparent currentColor currentColor; border-color: transparent transparent currentColor currentColor;

29
src/empty/index.less
View File

@ -1,16 +1,27 @@
@import './var.less'; @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 { .van-empty {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding: @empty-padding; padding: var(--van-empty-padding);
&__image { &__image {
width: @empty-image-size; width: var(--van-empty-image-size);
height: @empty-image-size; height: var(--van-empty-image-size);
img { img {
width: 100%; width: 100%;
@ -19,14 +30,14 @@
} }
&__description { &__description {
margin-top: @empty-description-margin-top; margin-top: var(--van-empty-description-margin-top);
padding: @empty-description-padding; padding: var(--van-empty-description-padding);
color: @empty-description-color; color: var(--van-empty-description-color);
font-size: @empty-description-font-size; font-size: var(--van-empty-description-font-size);
line-height: @empty-description-line-height; line-height: var(--van-empty-description-line-height);
} }
&__bottom { &__bottom {
margin-top: @empty-bottom-margin-top; margin-top: var(--van-empty-bottom-margin-top);
} }
} }

59
src/field/index.less
View File

@ -1,13 +1,34 @@
@import './var.less'; @import './var.less';
@import '../cell/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-text-color: @field-error-message-text-color;
--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 { .van-field {
&__label { &__label {
flex: none; flex: none;
box-sizing: border-box; box-sizing: border-box;
width: @field-label-width; width: var(--van-field-label-width);
margin-right: @field-label-margin-right; margin-right: var(--van-field-label-margin-right);
color: @field-label-color; color: var(--van-field-label-color);
text-align: left; text-align: left;
word-wrap: break-word; word-wrap: break-word;
@ -22,7 +43,7 @@
&--disabled { &--disabled {
.van-field__label { .van-field__label {
color: @field-disabled-text-color; color: var(--van-field-disabled-text-color);
} }
} }
@ -42,7 +63,7 @@
min-width: 0; // for flex-shrink in field__button min-width: 0; // for flex-shrink in field__button
margin: 0; margin: 0;
padding: 0; padding: 0;
color: @field-input-text-color; color: var(--van-field-input-text-color);
line-height: inherit; line-height: inherit;
text-align: left; text-align: left;
background-color: transparent; background-color: transparent;
@ -50,15 +71,15 @@
resize: none; resize: none;
&::placeholder { &::placeholder {
color: @field-placeholder-text-color; color: var(--van-field-placeholder-text-color);
} }
&:disabled { &:disabled {
color: @field-input-disabled-text-color; color: var(--van-field-input-disabled-text-color);
cursor: not-allowed; cursor: not-allowed;
opacity: 1; opacity: 1;
// fix disabled color in mobile safari // fix disabled color in mobile safari
-webkit-text-fill-color: @field-input-disabled-text-color; -webkit-text-fill-color: var(--van-field-input-disabled-text-color);
} }
&:read-only { &:read-only {
@ -109,15 +130,15 @@
} }
&__clear { &__clear {
color: @field-clear-icon-color; color: var(--van-field-clear-icon-color);
font-size: @field-clear-icon-size; font-size: var(--van-field-clear-icon-size);
cursor: pointer; cursor: pointer;
} }
&__left-icon .van-icon, &__left-icon .van-icon,
&__right-icon .van-icon { &__right-icon .van-icon {
display: block; display: block;
font-size: @field-icon-size; font-size: var(--van-field-icon-size);
line-height: inherit; line-height: inherit;
} }
@ -126,7 +147,7 @@
} }
&__right-icon { &__right-icon {
color: @field-right-icon-color; color: var(--van-field-right-icon-color);
} }
&__button { &__button {
@ -134,8 +155,8 @@
} }
&__error-message { &__error-message {
color: @field-error-message-color; color: var(--van-field-error-message-color);
font-size: @field-error-message-text-color; font-size: var(--van-field-error-message-text-color);
text-align: left; text-align: left;
&--center { &--center {
@ -149,9 +170,9 @@
&__word-limit { &__word-limit {
margin-top: @padding-base; margin-top: @padding-base;
color: @field-word-limit-color; color: var(--van-field-word-limit-color);
font-size: @field-word-limit-font-size; font-size: var(--van-field-word-limit-font-size);
line-height: @field-word-limit-line-height; line-height: var(--van-field-word-limit-line-height);
text-align: right; text-align: right;
} }
@ -159,7 +180,7 @@
.van-field__control { .van-field__control {
&, &,
&::placeholder { &::placeholder {
color: @field-input-error-text-color; color: var(--van-field-input-error-text-color);
-webkit-text-fill-color: currentColor; -webkit-text-fill-color: currentColor;
} }
} }
@ -167,7 +188,7 @@
&--min-height { &--min-height {
.van-field__control { .van-field__control {
min-height: @field-text-area-min-height; min-height: var(--van-field-text-area-min-height);
} }
} }
} }

21
src/grid-item/index.less
View File

@ -1,5 +1,14 @@
@import './var.less'; @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 { .van-grid-item {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -9,12 +18,12 @@
} }
&__icon { &__icon {
font-size: @grid-item-icon-size; font-size: var(--van-grid-item-icon-size);
} }
&__text { &__text {
color: @grid-item-text-color; color: var(--van-grid-item-text-color);
font-size: @grid-item-text-font-size; font-size: var(--van-grid-item-text-font-size);
line-height: 1.5; line-height: 1.5;
// https://github.com/youzan/vant/issues/3894 // https://github.com/youzan/vant/issues/3894
word-break: break-all; word-break: break-all;
@ -29,8 +38,8 @@
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
padding: @grid-item-content-padding; padding: var(--van-grid-item-content-padding);
background-color: @grid-item-content-background-color; background-color: var(--van-grid-item-content-background-color);
&::after { &::after {
z-index: 1; z-index: 1;
@ -68,7 +77,7 @@
cursor: pointer; cursor: pointer;
&:active { &:active {
background-color: @grid-item-content-active-color; background-color: var(--van-grid-item-content-active-color);
} }
} }
} }

47
src/image-preview/index.less
View File

@ -1,5 +1,18 @@
@import './var.less'; @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-active-color: @image-preview-close-icon-active-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 { .van-image-preview {
position: fixed; position: fixed;
top: 0; top: 0;
@ -60,46 +73,46 @@
position: absolute; position: absolute;
top: @padding-md; top: @padding-md;
left: 50%; left: 50%;
color: @image-preview-index-text-color; color: var(--van-image-preview-index-text-color);
font-size: @image-preview-index-font-size; font-size: var(--van-image-preview-index-font-size);
line-height: @image-preview-index-line-height; line-height: var(--van-image-preview-index-line-height);
text-shadow: @image-preview-index-text-shadow; text-shadow: var(--van-image-preview-index-text-shadow);
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
&__overlay { &__overlay {
background-color: @image-preview-overlay-background-color; background-color: var(--van-image-preview-overlay-background-color);
} }
&__close-icon { &__close-icon {
position: absolute; position: absolute;
z-index: @image-preview-close-icon-z-index; z-index: var(--van-image-preview-close-icon-z-index);
color: @image-preview-close-icon-color; color: var(--van-image-preview-close-icon-color);
font-size: @image-preview-close-icon-size; font-size: var(--van-image-preview-close-icon-size);
cursor: pointer; cursor: pointer;
&:active { &:active {
color: @image-preview-close-icon-active-color; color: var(--van-image-preview-close-icon-active-color);
} }
&--top-left { &--top-left {
top: @image-preview-close-icon-margin; top: var(--van-image-preview-close-icon-margin);
left: @image-preview-close-icon-margin; left: var(--van-image-preview-close-icon-margin);
} }
&--top-right { &--top-right {
top: @image-preview-close-icon-margin; top: var(--van-image-preview-close-icon-margin);
right: @image-preview-close-icon-margin; right: var(--van-image-preview-close-icon-margin);
} }
&--bottom-left { &--bottom-left {
bottom: @image-preview-close-icon-margin; bottom: var(--van-image-preview-close-icon-margin);
left: @image-preview-close-icon-margin; left: var(--van-image-preview-close-icon-margin);
} }
&--bottom-right { &--bottom-right {
right: @image-preview-close-icon-margin; right: var(--van-image-preview-close-icon-margin);
bottom: @image-preview-close-icon-margin; bottom: var(--van-image-preview-close-icon-margin);
} }
} }
} }

24
src/image/index.less
View File

@ -1,5 +1,15 @@
@import './var.less'; @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 { .van-image {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -30,18 +40,18 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @image-placeholder-text-color; color: var(--van-image-placeholder-text-color);
font-size: @image-placeholder-font-size; font-size: var(--van-image-placeholder-font-size);
background-color: @image-placeholder-background-color; background-color: var(--van-image-placeholder-background-color);
} }
&__loading-icon { &__loading-icon {
color: @image-loading-icon-color; color: var(--van-image-loading-icon-color);
font-size: @image-loading-icon-size; font-size: var(--van-image-loading-icon-size);
} }
&__error-icon { &__error-icon {
color: @image-error-icon-color; color: var(--van-image-error-icon-color);
font-size: @image-error-icon-size; font-size: var(--van-image-error-icon-size);
} }
} }

30
src/index-anchor/index.less
View File

@ -1,21 +1,33 @@
@import './var.less'; @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 { .van-index-anchor {
z-index: @index-anchor-z-index; z-index: var(--van-index-anchor-z-index);
box-sizing: border-box; box-sizing: border-box;
padding: @index-anchor-padding; padding: var(--van-index-anchor-padding);
color: @index-anchor-text-color; color: var(--van-index-anchor-text-color);
font-weight: @index-anchor-font-weight; font-weight: var(--van-index-anchor-font-weight);
font-size: @index-anchor-font-size; font-size: var(--van-index-anchor-font-size);
line-height: @index-anchor-line-height; line-height: var(--van-index-anchor-line-height);
background-color: @index-anchor-background-color; background-color: var(--van-index-anchor-background-color);
&--sticky { &--sticky {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
color: @index-anchor-sticky-text-color; color: var(--van-index-anchor-sticky-text-color);
background-color: @index-anchor-sticky-background-color; background-color: var(--van-index-anchor-sticky-background-color);
} }
} }

15
src/index-bar/index.less
View File

@ -1,11 +1,18 @@
@import './var.less'; @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 { .van-index-bar {
&__sidebar { &__sidebar {
position: fixed; position: fixed;
top: 50%; top: 50%;
right: 0; right: 0;
z-index: @index-bar-sidebar-z-index; z-index: var(--van-index-bar-sidebar-z-index);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -17,11 +24,11 @@
&__index { &__index {
padding: 0 @padding-xs 0 @padding-md; padding: 0 @padding-xs 0 @padding-md;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @index-bar-index-font-size; font-size: var(--van-index-bar-index-font-size);
line-height: @index-bar-index-line-height; line-height: var(--van-index-bar-index-line-height);
&--active { &--active {
color: @index-bar-index-active-color; color: var(--van-index-bar-index-active-color);
} }
} }
} }

17
src/list/index.less
View File

@ -1,12 +1,19 @@
@import './var.less'; @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 { .van-list {
&__loading, &__loading,
&__finished-text, &__finished-text,
&__error-text { &__error-text {
color: @list-text-color; color: var(--van-list-text-color);
font-size: @list-text-font-size; font-size: var(--van-list-text-font-size);
line-height: @list-text-line-height; line-height: var(--van-list-text-line-height);
text-align: center; text-align: center;
} }
@ -17,8 +24,8 @@
&__loading-icon { &__loading-icon {
.van-loading__spinner { .van-loading__spinner {
width: @list-loading-icon-size; width: var(--van-list-loading-icon-size);
height: @list-loading-icon-size; height: var(--van-list-loading-icon-size);
} }
} }
} }

21
src/loading/index.less
View File

@ -1,21 +1,30 @@
@import './var.less'; @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 { .van-loading {
position: relative; position: relative;
color: @loading-spinner-color; color: var(--van-loading-spinner-color);
font-size: 0; font-size: 0;
vertical-align: middle; vertical-align: middle;
&__spinner { &__spinner {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: @loading-spinner-size; width: var(--van-loading-spinner-size);
// compatible for 1.x, users may set width or height in root element // compatible for 1.x, users may set width or height in root element
max-width: 100%; max-width: 100%;
height: @loading-spinner-size; height: var(--van-loading-spinner-size);
max-height: 100%; max-height: 100%;
vertical-align: middle; vertical-align: middle;
animation: van-rotate @loading-spinner-animation-duration linear infinite; animation: van-rotate var(--van-loading-spinner-animation-duration) linear
infinite;
&--spinner { &--spinner {
animation-timing-function: steps(12); animation-timing-function: steps(12);
@ -60,8 +69,8 @@
&__text { &__text {
display: inline-block; display: inline-block;
margin-left: @padding-xs; margin-left: @padding-xs;
color: @loading-text-color; color: var(--van-loading-text-color);
font-size: @loading-text-font-size; font-size: var(--van-loading-text-font-size);
vertical-align: middle; vertical-align: middle;
} }

27
src/nav-bar/index.less
View File

@ -1,11 +1,22 @@
@import './var.less'; @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 { .van-nav-bar {
position: relative; position: relative;
z-index: @nav-bar-z-index; z-index: var(--van-nav-bar-z-index);
line-height: @line-height-lg; line-height: @line-height-lg;
text-align: center; text-align: center;
background-color: @nav-bar-background-color; background-color: var(--van-nav-bar-background-color);
user-select: none; user-select: none;
&--fixed { &--fixed {
@ -21,27 +32,27 @@
} }
.van-icon { .van-icon {
color: @nav-bar-icon-color; color: var(--van-nav-bar-icon-color);
} }
&__content { &__content {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
height: @nav-bar-height; height: var(--van-nav-bar-height);
} }
&__arrow { &__arrow {
margin-right: @padding-base; margin-right: @padding-base;
font-size: @nav-bar-arrow-size; font-size: var(--van-nav-bar-arrow-size);
} }
&__title { &__title {
max-width: 60%; max-width: 60%;
margin: 0 auto; margin: 0 auto;
color: @nav-bar-title-text-color; color: var(--van-nav-bar-title-text-color);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @nav-bar-title-font-size; font-size: var(--van-nav-bar-title-font-size);
} }
&__left, &__left,
@ -69,6 +80,6 @@
} }
&__text { &__text {
color: @nav-bar-text-color; color: var(--van-nav-bar-text-color);
} }
} }

30
src/notice-bar/index.less
View File

@ -1,20 +1,32 @@
@import './var.less'; @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 { .van-notice-bar {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
height: @notice-bar-height; height: var(--van-notice-bar-height);
padding: @notice-bar-padding; padding: var(--van-notice-bar-padding);
color: @notice-bar-text-color; color: var(--van-notice-bar-text-color);
font-size: @notice-bar-font-size; font-size: var(--van-notice-bar-font-size);
line-height: @notice-bar-line-height; line-height: var(--van-notice-bar-line-height);
background-color: @notice-bar-background-color; background-color: var(--van-notice-bar-background-color);
&__left-icon, &__left-icon,
&__right-icon { &__right-icon {
min-width: @notice-bar-icon-min-width; min-width: var(--van-notice-bar-icon-min-width);
font-size: @notice-bar-icon-size; font-size: var(--van-notice-bar-icon-size);
} }
&__right-icon { &__right-icon {
@ -43,7 +55,7 @@
&--wrapable { &--wrapable {
height: auto; height: auto;
padding: @notice-bar-wrapable-padding; padding: var(--van-notice-bar-wrapable-padding);
.van-notice-bar { .van-notice-bar {
&__wrap { &__wrap {

27
src/notify/index.less
View File

@ -1,14 +1,25 @@
@import './var.less'; @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 { .van-notify {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding: @notify-padding; padding: var(--van-notify-padding);
color: @notify-text-color; color: var(--van-notify-text-color);
font-size: @notify-font-size; font-size: var(--van-notify-font-size);
line-height: @notify-line-height; line-height: var(--van-notify-line-height);
// allow newline charactor // allow newline charactor
white-space: pre-wrap; white-space: pre-wrap;
@ -16,18 +27,18 @@
word-wrap: break-word; word-wrap: break-word;
&--primary { &--primary {
background-color: @notify-primary-background-color; background-color: var(--van-notify-primary-background-color);
} }
&--success { &--success {
background-color: @notify-success-background-color; background-color: var(--van-notify-success-background-color);
} }
&--danger { &--danger {
background-color: @notify-danger-background-color; background-color: var(--van-notify-danger-background-color);
} }
&--warning { &--warning {
background-color: @notify-warning-background-color; background-color: var(--van-notify-warning-background-color);
} }
} }

49
src/number-keyboard/index.less
View File

@ -1,13 +1,30 @@
@import './var.less'; @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-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 { .van-number-keyboard {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @number-keyboard-z-index; z-index: var(--van-number-keyboard-z-index);
width: 100%; width: 100%;
padding-bottom: 22px; padding-bottom: 22px;
background-color: @number-keyboard-background-color; background-color: var(--van-number-keyboard-background-color);
user-select: none; user-select: none;
&--with-title { &--with-title {
@ -20,10 +37,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: content-box; box-sizing: content-box;
height: @number-keyboard-title-height; height: var(--van-number-keyboard-title-height);
padding-top: 6px; padding-top: 6px;
color: @number-keyboard-title-color; color: var(--van-number-keyboard-title-color);
font-size: @number-keyboard-title-font-size; font-size: var(--van-number-keyboard-title-font-size);
} }
&__title { &__title {
@ -51,9 +68,9 @@
position: absolute; position: absolute;
right: 0; right: 0;
height: 100%; height: 100%;
padding: @number-keyboard-close-padding; padding: var(--van-number-keyboard-close-padding);
color: @number-keyboard-close-color; color: var(--van-number-keyboard-close-color);
font-size: @number-keyboard-close-font-size; font-size: var(--van-number-keyboard-close-font-size);
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -78,8 +95,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: @number-keyboard-key-height; height: var(--van-number-keyboard-key-height);
font-size: @number-keyboard-key-font-size; font-size: var(--van-number-keyboard-key-font-size);
line-height: 1.5; line-height: 1.5;
background-color: @white; background-color: @white;
border-radius: @border-radius-lg; border-radius: @border-radius-lg;
@ -98,19 +115,19 @@
&--blue, &--blue,
&--delete { &--delete {
font-size: @number-keyboard-delete-font-size; font-size: var(--van-number-keyboard-delete-font-size);
} }
&--active { &--active {
background-color: @number-keyboard-key-active-color; background-color: var(--van-number-keyboard-key-active-color);
} }
&--blue { &--blue {
color: @number-keyboard-button-text-color; color: var(--van-number-keyboard-button-text-color);
background-color: @number-keyboard-button-background-color; background-color: var(--van-number-keyboard-button-background-color);
&.van-key--active { &.van-key--active {
background-color: darken(@number-keyboard-button-background-color, 10%); background-color: var(--van-number-keyboard-button-active-color);
} }
} }
@ -137,6 +154,6 @@
} }
&__loading-icon { &__loading-icon {
color: @number-keyboard-button-text-color; color: var(--van-number-keyboard-button-text-color);
} }
} }

4
src/number-keyboard/var.less
View File

@ -13,4 +13,8 @@
@number-keyboard-close-font-size: @font-size-md; @number-keyboard-close-font-size: @font-size-md;
@number-keyboard-button-text-color: @white; @number-keyboard-button-text-color: @white;
@number-keyboard-button-background-color: @blue; @number-keyboard-button-background-color: @blue;
@number-keyboard-button-active-color: darken(
@number-keyboard-button-background-color,
10%
);
@number-keyboard-z-index: 100; @number-keyboard-z-index: 100;

9
src/overlay/index.less
View File

@ -1,11 +1,16 @@
@import './var.less'; @import './var.less';
:root {
--van-overlay-z-index: @overlay-z-index;
--van-overlay-background-color: @overlay-background-color;
}
.van-overlay { .van-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: @overlay-z-index; z-index: var(--van-overlay-z-index);
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: @overlay-background-color; background-color: var(--van-overlay-background-color);
} }

36
src/pagination/index.less
View File

@ -1,8 +1,20 @@
@import './var.less'; @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 { .van-pagination {
display: flex; display: flex;
font-size: @pagination-font-size; font-size: var(--van-pagination-font-size);
&__item, &__item,
&__page-desc { &__page-desc {
@ -14,16 +26,16 @@
&__item { &__item {
flex: 1; flex: 1;
box-sizing: border-box; box-sizing: border-box;
min-width: @pagination-item-width; min-width: var(--van-pagination-item-width);
height: @pagination-height; height: var(--van-pagination-height);
color: @pagination-item-default-color; color: var(--van-pagination-item-default-color);
background-color: @pagination-background-color; background-color: var(--van-pagination-background-color);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:active { &:active {
color: @white; color: @white;
background-color: @pagination-item-default-color; background-color: var(--van-pagination-item-default-color);
} }
&::after { &::after {
@ -36,7 +48,7 @@
&--active { &--active {
color: @white; color: @white;
background-color: @pagination-item-default-color; background-color: var(--van-pagination-item-default-color);
} }
} }
@ -49,10 +61,10 @@
&__item--disabled { &__item--disabled {
&, &,
&:active { &:active {
color: @pagination-item-disabled-color; color: var(--van-pagination-item-disabled-color);
background-color: @pagination-item-disabled-background-color; background-color: var(--van-pagination-item-disabled-background-color);
cursor: not-allowed; cursor: not-allowed;
opacity: @pagination-disabled-opacity; opacity: var(--van-pagination-disabled-opacity);
} }
} }
@ -62,8 +74,8 @@
&__page-desc { &__page-desc {
flex: 1; flex: 1;
height: @pagination-height; height: var(--van-pagination-height);
color: @pagination-desc-color; color: var(--van-pagination-desc-color);
} }
&--simple { &--simple {

49
src/password-input/index.less
View File

@ -1,33 +1,50 @@
@import './var.less'; @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-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 { .van-password-input {
position: relative; position: relative;
margin: @password-input-margin; margin: var(--van-password-input-margin);
user-select: none; user-select: none;
&__info, &__info,
&__error-info { &__error-info {
margin-top: @padding-md; margin-top: @padding-md;
font-size: @password-input-info-font-size; font-size: var(--van-password-input-info-font-size);
text-align: center; text-align: center;
} }
&__info { &__info {
color: @password-input-info-color; color: var(--van-password-input-info-color);
} }
&__error-info { &__error-info {
color: @password-input-error-info-color; color: var(--van-password-input-error-info-color);
} }
&__security { &__security {
display: flex; display: flex;
width: 100%; width: 100%;
height: @password-input-height; height: var(--van-password-input-height);
cursor: pointer; cursor: pointer;
&::after { &::after {
border-radius: @password-input-border-radius; border-radius: var(--van-password-input-border-radius);
} }
li { li {
@ -37,18 +54,18 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
font-size: @password-input-font-size; font-size: var(--van-password-input-font-size);
line-height: 1.2; line-height: 1.2;
background-color: @password-input-background-color; background-color: var(--van-password-input-background-color);
} }
i { i {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: @password-input-dot-size; width: var(--van-password-input-dot-size);
height: @password-input-dot-size; height: var(--van-password-input-dot-size);
background-color: @password-input-dot-color; background-color: var(--van-password-input-dot-color);
border-radius: 100%; border-radius: 100%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
visibility: hidden; visibility: hidden;
@ -59,12 +76,12 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: @password-input-cursor-width; width: var(--van-password-input-cursor-width);
height: @password-input-cursor-height; height: var(--van-password-input-cursor-height);
background-color: @password-input-cursor-color; background-color: var(--van-password-input-cursor-color);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: @password-input-cursor-animation-duration van-cursor-flicker animation: var(--van-password-input-cursor-animation-duration)
infinite; van-cursor-flicker infinite;
} }
} }

42
src/picker/index.less
View File

@ -1,22 +1,38 @@
@import './var.less'; @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-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 { .van-picker {
position: relative; position: relative;
background-color: @picker-background-color; background-color: var(--van-picker-background-color);
user-select: none; user-select: none;
&__toolbar { &__toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: @picker-toolbar-height; height: var(--van-picker-toolbar-height);
} }
&__cancel, &__cancel,
&__confirm { &__confirm {
height: 100%; height: 100%;
padding: @picker-action-padding; padding: var(--van-picker-action-padding);
font-size: @picker-action-font-size; font-size: var(--van-picker-action-font-size);
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -27,18 +43,18 @@
} }
&__confirm { &__confirm {
color: @picker-confirm-action-color; color: var(--van-picker-confirm-action-color);
} }
&__cancel { &__cancel {
color: @picker-cancel-action-color; color: var(--van-picker-cancel-action-color);
} }
&__title { &__title {
max-width: 50%; max-width: 50%;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @picker-title-font-size; font-size: var(--van-picker-title-font-size);
line-height: @picker-title-line-height; line-height: var(--van-picker-title-line-height);
text-align: center; text-align: center;
} }
@ -58,8 +74,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @picker-loading-icon-color; color: var(--van-picker-loading-icon-color);
background-color: @picker-loading-mask-color; background-color: var(--van-picker-loading-mask-color);
} }
&__frame { &__frame {
@ -95,7 +111,7 @@
&-column { &-column {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
font-size: @picker-option-font-size; font-size: var(--van-picker-option-font-size);
&__wrapper { &__wrapper {
transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1); transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
@ -106,11 +122,11 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 @padding-base; padding: 0 @padding-base;
color: @picker-option-text-color; color: var(--van-picker-option-text-color);
&--disabled { &--disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: @picker-option-disabled-opacity; opacity: var(--van-picker-option-disabled-opacity);
} }
} }
} }

44
src/popover/index.less
View File

@ -1,5 +1,21 @@
@import './var.less'; @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 { .van-popover {
position: absolute; position: absolute;
overflow: visible; overflow: visible;
@ -16,12 +32,12 @@
height: 0; height: 0;
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
border-width: @popover-arrow-size; border-width: var(--van-popover-arrow-size);
} }
&__content { &__content {
overflow: hidden; overflow: hidden;
border-radius: @popover-border-radius; border-radius: var(--van-popover-border-radius);
} }
&__action { &__action {
@ -29,10 +45,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
width: @popover-action-width; width: var(--van-popover-action-width);
height: @popover-action-height; height: var(--van-popover-action-height);
padding: 0 @padding-md; padding: 0 @padding-md;
font-size: @popover-action-font-size; font-size: var(--van-popover-action-font-size);
line-height: @line-height-md; line-height: @line-height-md;
cursor: pointer; cursor: pointer;
@ -52,7 +68,7 @@
&-icon { &-icon {
margin-right: @padding-xs; margin-right: @padding-xs;
font-size: @popover-action-icon-size; font-size: var(--van-popover-action-icon-size);
} }
&--with-icon { &--with-icon {
@ -195,15 +211,15 @@
} }
&--light { &--light {
color: @popover-light-text-color; color: var(--van-popover-light-text-color);
.van-popover__content { .van-popover__content {
background-color: @popover-light-background-color; background-color: var(--van-popover-light-background-color);
box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12); box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
} }
.van-popover__arrow { .van-popover__arrow {
color: @popover-light-background-color; color: var(--van-popover-light-background-color);
} }
.van-popover__action { .van-popover__action {
@ -212,7 +228,7 @@
} }
&--disabled { &--disabled {
color: @popover-light-action-disabled-text-color; color: var(--van-popover-light-action-disabled-text-color);
cursor: not-allowed; cursor: not-allowed;
&:active { &:active {
@ -223,14 +239,14 @@
} }
&--dark { &--dark {
color: @popover-dark-text-color; color: var(--van-popover-dark-text-color);
.van-popover__content { .van-popover__content {
background-color: @popover-dark-background-color; background-color: var(--van-popover-dark-background-color);
} }
.van-popover__arrow { .van-popover__arrow {
color: @popover-dark-background-color; color: var(--van-popover-dark-background-color);
} }
.van-popover__action { .van-popover__action {
@ -239,7 +255,7 @@
} }
&--disabled { &--disabled {
color: @popover-dark-action-disabled-text-color; color: var(--van-popover-dark-action-disabled-text-color);
&:active { &:active {
background-color: transparent; background-color: transparent;

53
src/popup/index.less
View File

@ -1,6 +1,17 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/safe-area.less'; @import '../style/mixins/safe-area.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-active-color: @popup-close-icon-active-color;
--van-popup-close-icon-margin: @popup-close-icon-margin;
--van-popup-close-icon-z-index: @popup-close-icon-z-index;
}
.van { .van {
&-overflow-hidden { &-overflow-hidden {
overflow: hidden !important; overflow: hidden !important;
@ -10,8 +21,8 @@
position: fixed; position: fixed;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
background-color: @popup-background-color; background-color: var(--van-popup-background-color);
transition: @popup-transition; transition: var(--van-popup-transition);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&--center { &--center {
@ -20,7 +31,7 @@
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
&.van-popup--round { &.van-popup--round {
border-radius: @popup-round-border-radius; border-radius: var(--van-popup-round-border-radius);
} }
} }
@ -30,7 +41,8 @@
width: 100%; width: 100%;
&.van-popup--round { &.van-popup--round {
border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius; border-radius: 0 0 var(--van-popup-round-border-radius)
var(--van-popup-round-border-radius);
} }
} }
@ -40,7 +52,8 @@
transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);
&.van-popup--round { &.van-popup--round {
border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius; border-radius: var(--van-popup-round-border-radius) 0 0
var(--van-popup-round-border-radius);
} }
} }
@ -50,7 +63,8 @@
width: 100%; width: 100%;
&.van-popup--round { &.van-popup--round {
border-radius: @popup-round-border-radius @popup-round-border-radius 0 0; border-radius: var(--van-popup-round-border-radius)
var(--van-popup-round-border-radius) 0 0;
} }
} }
@ -60,7 +74,8 @@
transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0);
&.van-popup--round { &.van-popup--round {
border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0; border-radius: 0 var(--van-popup-round-border-radius)
var(--van-popup-round-border-radius) 0;
} }
} }
@ -104,33 +119,33 @@
&__close-icon { &__close-icon {
position: absolute; position: absolute;
z-index: @popup-close-icon-z-index; z-index: var(--van-popup-close-icon-z-index);
color: @popup-close-icon-color; color: var(--van-popup-close-icon-color);
font-size: @popup-close-icon-size; font-size: var(--van-popup-close-icon-size);
cursor: pointer; cursor: pointer;
&:active { &:active {
color: @popup-close-icon-active-color; color: var(--van-popup-close-icon-active-color);
} }
&--top-left { &--top-left {
top: @popup-close-icon-margin; top: var(--van-popup-close-icon-margin);
left: @popup-close-icon-margin; left: var(--van-popup-close-icon-margin);
} }
&--top-right { &--top-right {
top: @popup-close-icon-margin; top: var(--van-popup-close-icon-margin);
right: @popup-close-icon-margin; right: var(--van-popup-close-icon-margin);
} }
&--bottom-left { &--bottom-left {
bottom: @popup-close-icon-margin; bottom: var(--van-popup-close-icon-margin);
left: @popup-close-icon-margin; left: var(--van-popup-close-icon-margin);
} }
&--bottom-right { &--bottom-right {
right: @popup-close-icon-margin; right: var(--van-popup-close-icon-margin);
bottom: @popup-close-icon-margin; bottom: var(--van-popup-close-icon-margin);
} }
} }
} }

29
src/progress/index.less
View File

@ -1,16 +1,27 @@
@import './var.less'; @import './var.less';
:root {
--van-progress-height: @progress-height;
--van-progress-color: @progress-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 { .van-progress {
position: relative; position: relative;
height: @progress-height; height: var(--van-progress-height);
background: @progress-background-color; background: var(--van-progress-background-color);
border-radius: @progress-height; border-radius: var(--van-progress-height);
&__portion { &__portion {
position: absolute; position: absolute;
left: 0; left: 0;
height: 100%; height: 100%;
background: @progress-color; background: var(--van-progress-color);
border-radius: inherit; border-radius: inherit;
} }
@ -19,13 +30,13 @@
top: 50%; top: 50%;
box-sizing: border-box; box-sizing: border-box;
min-width: 3.6em; min-width: 3.6em;
padding: @progress-pivot-padding; padding: var(--van-progress-pivot-padding);
color: @progress-pivot-text-color; color: var(--van-progress-pivot-text-color);
font-size: @progress-pivot-font-size; font-size: var(--van-progress-pivot-font-size);
line-height: @progress-pivot-line-height; line-height: var(--van-progress-pivot-line-height);
text-align: center; text-align: center;
word-break: keep-all; word-break: keep-all;
background-color: @progress-pivot-background-color; background-color: var(--van-progress-pivot-background-color);
border-radius: 1em; border-radius: 1em;
transform: translate(0, -50%); transform: translate(0, -50%);
} }

19
src/pull-refresh/index.less
View File

@ -1,5 +1,12 @@
@import './var.less'; @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 { .van-pull-refresh {
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
@ -14,19 +21,19 @@
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
height: @pull-refresh-head-height; height: var(--van-pull-refresh-head-height);
overflow: hidden; overflow: hidden;
color: @pull-refresh-head-text-color; color: var(--van-pull-refresh-head-text-color);
font-size: @pull-refresh-head-font-size; font-size: var(--van-pull-refresh-head-font-size);
line-height: @pull-refresh-head-height; line-height: var(--van-pull-refresh-head-height);
text-align: center; text-align: center;
transform: translateY(-100%); transform: translateY(-100%);
} }
&__loading { &__loading {
.van-loading__spinner { .van-loading__spinner {
width: @pull-refresh-loading-icon-size; width: var(--van-pull-refresh-loading-icon-size);
height: @pull-refresh-loading-icon-size; height: var(--van-pull-refresh-loading-icon-size);
} }
} }
} }

38
src/radio/index.less
View File

@ -1,5 +1,17 @@
@import './var.less'; @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 { .van-radio {
display: flex; display: flex;
align-items: center; align-items: center;
@ -22,7 +34,7 @@
&__icon { &__icon {
flex: none; flex: none;
height: 1em; height: 1em;
font-size: @radio-size; font-size: var(--van-radio-size);
line-height: 1em; line-height: 1em;
cursor: pointer; cursor: pointer;
@ -35,8 +47,8 @@
font-size: 0.8em; font-size: 0.8em;
line-height: 1.25; line-height: 1.25;
text-align: center; text-align: center;
border: 1px solid @radio-border-color; border: 1px solid var(--van-radio-border-color);
transition-duration: @radio-transition-duration; transition-duration: var(--van-radio-transition-duration);
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
} }
@ -49,8 +61,8 @@
&--checked { &--checked {
.van-icon { .van-icon {
color: @white; color: @white;
background-color: @radio-checked-icon-color; background-color: var(--van-radio-checked-icon-color);
border-color: @radio-checked-icon-color; border-color: var(--van-radio-checked-icon-color);
} }
} }
@ -58,29 +70,29 @@
cursor: not-allowed; cursor: not-allowed;
.van-icon { .van-icon {
background-color: @radio-disabled-background-color; background-color: var(--van-radio-disabled-background-color);
border-color: @radio-disabled-icon-color; border-color: var(--van-radio-disabled-icon-color);
} }
} }
&--disabled&--checked { &--disabled&--checked {
.van-icon { .van-icon {
color: @radio-disabled-icon-color; color: var(--van-radio-disabled-icon-color);
} }
} }
} }
&__label { &__label {
margin-left: @radio-label-margin; margin-left: var(--van-radio-label-margin);
color: @radio-label-color; color: var(--van-radio-label-color);
line-height: @radio-size; line-height: var(--van-radio-size);
&--left { &--left {
margin: 0 @radio-label-margin 0 0; margin: 0 var(--van-radio-label-margin) 0 0;
} }
&--disabled { &--disabled {
color: @radio-disabled-label-color; color: var(--van-radio-disabled-label-color);
} }
} }
} }

18
src/rate/index.less
View File

@ -1,5 +1,13 @@
@import './var.less'; @import './var.less';
:root {
--van-rate-icon-size: @rate-icon-size;
--van-rate-icon-gutter: @rate-icon-gutter;
--van-rate-icon-void-color: @rate-icon-void-color;
--van-rate-icon-full-color: @rate-icon-full-color;
--van-rate-icon-disabled-color: @rate-icon-disabled-color;
}
.van-rate { .van-rate {
display: inline-flex; display: inline-flex;
cursor: pointer; cursor: pointer;
@ -9,15 +17,15 @@
position: relative; position: relative;
&:not(:last-child) { &:not(:last-child) {
padding-right: @rate-icon-gutter; padding-right: var(--van-rate-icon-gutter);
} }
} }
&__icon { &__icon {
display: block; display: block;
width: 1em; width: 1em;
color: @rate-icon-void-color; color: var(--van-rate-icon-void-color);
font-size: @rate-icon-size; font-size: var(--van-rate-icon-size);
&--half { &--half {
position: absolute; position: absolute;
@ -27,11 +35,11 @@
} }
&--full { &--full {
color: @rate-icon-full-color; color: var(--van-rate-icon-full-color);
} }
&--disabled { &--disabled {
color: @rate-icon-disabled-color; color: var(--van-rate-icon-disabled-color);
} }
} }

38
src/search/index.less
View File

@ -1,17 +1,31 @@
@import './var.less'; @import './var.less';
:root {
--van-search-padding: @search-padding;
--van-search-background-color: @search-background-color;
--van-search-content-background-color: @search-content-background-color;
--van-search-input-height: @search-input-height;
--van-search-label-padding: @search-label-padding;
--van-search-label-color: @search-label-color;
--van-search-label-font-size: @search-label-font-size;
--van-search-left-icon-color: @search-left-icon-color;
--van-search-action-padding: @search-action-padding;
--van-search-action-text-color: @search-action-text-color;
--van-search-action-font-size: @search-action-font-size;
}
.van-search { .van-search {
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: @search-padding; padding: var(--van-search-padding);
background-color: @search-background-color; background-color: var(--van-search-background-color);
&__content { &__content {
display: flex; display: flex;
flex: 1; flex: 1;
padding-left: @padding-sm; padding-left: @padding-sm;
background-color: @search-content-background-color; background-color: var(--van-search-content-background-color);
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
&--round { &--round {
@ -20,10 +34,10 @@
} }
&__label { &__label {
padding: @search-label-padding; padding: var(--van-search-label-padding);
color: @search-label-color; color: var(--van-search-label-color);
font-size: @search-label-font-size; font-size: var(--van-search-label-font-size);
line-height: @search-input-height; line-height: var(--van-search-input-height);
} }
.van-cell { .van-cell {
@ -32,7 +46,7 @@
background-color: transparent; background-color: transparent;
&__left-icon { &__left-icon {
color: @search-left-icon-color; color: var(--van-search-left-icon-color);
} }
} }
@ -50,10 +64,10 @@
} }
&__action { &__action {
padding: @search-action-padding; padding: var(--van-search-action-padding);
color: @search-action-text-color; color: var(--van-search-action-text-color);
font-size: @search-action-font-size; font-size: var(--van-search-action-font-size);
line-height: @search-input-height; line-height: var(--van-search-input-height);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;

50
src/share-sheet/index.less
View File

@ -1,26 +1,44 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/hairline'; @import '../style/mixins/hairline';
:root {
--van-share-sheet-header-padding: @share-sheet-header-padding;
--van-share-sheet-title-color: @share-sheet-title-color;
--van-share-sheet-title-font-size: @share-sheet-title-font-size;
--van-share-sheet-title-line-height: @share-sheet-title-line-height;
--van-share-sheet-description-color: @share-sheet-description-color;
--van-share-sheet-description-font-size: @share-sheet-description-font-size;
--van-share-sheet-description-line-height: @share-sheet-description-line-height;
--van-share-sheet-icon-size: @share-sheet-icon-size;
--van-share-sheet-option-name-color: @share-sheet-option-name-color;
--van-share-sheet-option-name-font-size: @share-sheet-option-name-font-size;
--van-share-sheet-option-description-color: @share-sheet-option-description-color;
--van-share-sheet-option-description-font-size: @share-sheet-option-description-font-size;
--van-share-sheet-cancel-button-font-size: @share-sheet-cancel-button-font-size;
--van-share-sheet-cancel-button-height: @share-sheet-cancel-button-height;
--van-share-sheet-cancel-button-background: @share-sheet-cancel-button-background;
}
.van-share-sheet { .van-share-sheet {
&__header { &__header {
padding: @share-sheet-header-padding; padding: var(--van-share-sheet-header-padding);
text-align: center; text-align: center;
} }
&__title { &__title {
margin-top: @padding-xs; margin-top: @padding-xs;
color: @share-sheet-title-color; color: var(--van-share-sheet-title-color);
font-weight: normal; font-weight: normal;
font-size: @share-sheet-title-font-size; font-size: var(--van-share-sheet-title-font-size);
line-height: @share-sheet-title-line-height; line-height: var(--van-share-sheet-title-line-height);
} }
&__description { &__description {
display: block; display: block;
margin-top: @padding-xs; margin-top: @padding-xs;
color: @share-sheet-description-color; color: var(--van-share-sheet-description-color);
font-size: @share-sheet-description-font-size; font-size: var(--van-share-sheet-description-font-size);
line-height: @share-sheet-description-line-height; line-height: var(--van-share-sheet-description-line-height);
} }
&__options { &__options {
@ -53,32 +71,32 @@
} }
&__icon { &__icon {
width: @share-sheet-icon-size; width: var(--van-share-sheet-icon-size);
height: @share-sheet-icon-size; height: var(--van-share-sheet-icon-size);
margin: 0 @padding-md; margin: 0 @padding-md;
} }
&__name { &__name {
margin-top: @padding-xs; margin-top: @padding-xs;
padding: 0 @padding-base; padding: 0 @padding-base;
color: @share-sheet-option-name-color; color: var(--van-share-sheet-option-name-color);
font-size: @share-sheet-option-name-font-size; font-size: var(--van-share-sheet-option-name-font-size);
} }
&__option-description { &__option-description {
padding: 0 @padding-base; padding: 0 @padding-base;
color: @share-sheet-option-description-color; color: var(--van-share-sheet-option-description-color);
font-size: @share-sheet-option-description-font-size; font-size: var(--van-share-sheet-option-description-font-size);
} }
&__cancel { &__cancel {
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
font-size: @share-sheet-cancel-button-font-size; font-size: var(--van-share-sheet-cancel-button-font-size);
line-height: @share-sheet-cancel-button-height; line-height: var(--van-share-sheet-cancel-button-height);
text-align: center; text-align: center;
background: @share-sheet-cancel-button-background; background: var(--van-share-sheet-cancel-button-background);
border: none; border: none;
cursor: pointer; cursor: pointer;

44
src/sidebar-item/index.less
View File

@ -1,20 +1,36 @@
@import './var.less'; @import './var.less';
:root {
--van-sidebar-font-size: @sidebar-font-size;
--van-sidebar-line-height: @sidebar-line-height;
--van-sidebar-text-color: @sidebar-text-color;
--van-sidebar-disabled-text-color: @sidebar-disabled-text-color;
--van-sidebar-padding: @sidebar-padding;
--van-sidebar-active-color: @sidebar-active-color;
--van-sidebar-background-color: @sidebar-background-color;
--van-sidebar-selected-font-weight: @sidebar-selected-font-weight;
--van-sidebar-selected-text-color: @sidebar-selected-text-color;
--van-sidebar-selected-border-width: @sidebar-selected-border-width;
--van-sidebar-selected-border-height: @sidebar-selected-border-height;
--van-sidebar-selected-border-color: @sidebar-selected-border-color;
--van-sidebar-selected-background-color: @sidebar-selected-background-color;
}
.van-sidebar-item { .van-sidebar-item {
position: relative; position: relative;
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
padding: @sidebar-padding; padding: var(--van-sidebar-padding);
overflow: hidden; overflow: hidden;
color: @sidebar-text-color; color: var(--van-sidebar-text-color);
font-size: @sidebar-font-size; font-size: var(--van-sidebar-font-size);
line-height: @sidebar-line-height; line-height: var(--van-sidebar-line-height);
background-color: @sidebar-background-color; background-color: var(--van-sidebar-background-color);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
&:active { &:active {
background-color: @sidebar-active-color; background-color: var(--van-sidebar-active-color);
} }
&:not(:last-child)::after { &:not(:last-child)::after {
@ -27,32 +43,32 @@
} }
&--select { &--select {
color: @sidebar-selected-text-color; color: var(--van-sidebar-selected-text-color);
font-weight: @sidebar-selected-font-weight; font-weight: var(--van-sidebar-selected-font-weight);
&, &,
&:active { &:active {
background-color: @sidebar-selected-background-color; background-color: var(--van-sidebar-selected-background-color);
} }
&::before { &::before {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
width: @sidebar-selected-border-width; width: var(--van-sidebar-selected-border-width);
height: @sidebar-selected-border-height; height: var(--van-sidebar-selected-border-height);
background-color: @sidebar-selected-border-color; background-color: var(--van-sidebar-selected-border-color);
transform: translateY(-50%); transform: translateY(-50%);
content: ''; content: '';
} }
} }
&--disabled { &--disabled {
color: @sidebar-disabled-text-color; color: var(--van-sidebar-disabled-text-color);
cursor: not-allowed; cursor: not-allowed;
&:active { &:active {
background-color: @sidebar-background-color; background-color: var(--van-sidebar-background-color);
} }
} }
} }

6
src/sidebar/index.less
View File

@ -1,7 +1,11 @@
@import './var.less'; @import './var.less';
:root {
--van-sidebar-width: @sidebar-width;
}
.van-sidebar { .van-sidebar {
width: @sidebar-width; width: var(--van-sidebar-width);
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }

28
src/skeleton/index.less
View File

@ -1,15 +1,25 @@
@import './var.less'; @import './var.less';
:root {
--van-skeleton-row-height: @skeleton-row-height;
--van-skeleton-row-background-color: @skeleton-row-background-color;
--van-skeleton-row-margin-top: @skeleton-row-margin-top;
--van-skeleton-title-width: @skeleton-title-width;
--van-skeleton-avatar-size: @skeleton-avatar-size;
--van-skeleton-avatar-background-color: @skeleton-avatar-background-color;
--van-skeleton-animation-duration: @skeleton-animation-duration;
}
.van-skeleton { .van-skeleton {
display: flex; display: flex;
padding: 0 @padding-md; padding: 0 @padding-md;
&__avatar { &__avatar {
flex-shrink: 0; flex-shrink: 0;
width: @skeleton-avatar-size; width: var(--van-skeleton-avatar-size);
height: @skeleton-avatar-size; height: var(--van-skeleton-avatar-size);
margin-right: @padding-md; margin-right: @padding-md;
background-color: @skeleton-avatar-background-color; background-color: var(--van-skeleton-avatar-background-color);
&--round { &--round {
border-radius: @border-radius-max; border-radius: @border-radius-max;
@ -26,18 +36,18 @@
&__row, &__row,
&__title { &__title {
height: @skeleton-row-height; height: var(--van-skeleton-row-height);
background-color: @skeleton-row-background-color; background-color: var(--van-skeleton-row-background-color);
} }
&__title { &__title {
width: @skeleton-title-width; width: var(--van-skeleton-title-width);
margin: 0; margin: 0;
} }
&__row { &__row {
&:not(:first-child) { &:not(:first-child) {
margin-top: @skeleton-row-margin-top; margin-top: var(--van-skeleton-row-margin-top);
} }
} }
@ -46,8 +56,8 @@
} }
&--animate { &--animate {
animation: van-skeleton-blink @skeleton-animation-duration ease-in-out animation: van-skeleton-blink var(--van-skeleton-animation-duration)
infinite; ease-in-out infinite;
} }
&--round { &--round {

32
src/slider/index.less
View File

@ -1,10 +1,22 @@
@import './var.less'; @import './var.less';
:root {
--van-slider-active-background-color: @slider-active-background-color;
--van-slider-inactive-background-color: @slider-inactive-background-color;
--van-slider-disabled-opacity: @slider-disabled-opacity;
--van-slider-bar-height: @slider-bar-height;
--van-slider-button-width: @slider-button-width;
--van-slider-button-height: @slider-button-height;
--van-slider-button-border-radius: @slider-button-border-radius;
--van-slider-button-background-color: @slider-button-background-color;
--van-slider-button-box-shadow: @slider-button-box-shadow;
}
.van-slider { .van-slider {
position: relative; position: relative;
width: 100%; width: 100%;
height: @slider-bar-height; height: var(--van-slider-bar-height);
background-color: @slider-inactive-background-color; background-color: var(--van-slider-inactive-background-color);
border-radius: @border-radius-max; border-radius: @border-radius-max;
cursor: pointer; cursor: pointer;
@ -22,17 +34,17 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: @slider-active-background-color; background-color: var(--van-slider-active-background-color);
border-radius: inherit; border-radius: inherit;
transition: all @animation-duration-fast; transition: all @animation-duration-fast;
} }
&__button { &__button {
width: @slider-button-width; width: var(--van-slider-button-width);
height: @slider-button-height; height: var(--van-slider-button-height);
background-color: @slider-button-background-color; background-color: var(--van-slider-button-background-color);
border-radius: @slider-button-border-radius; border-radius: var(--van-slider-button-border-radius);
box-shadow: @slider-button-box-shadow; box-shadow: var(--van-slider-button-box-shadow);
&-wrapper, &-wrapper,
&-wrapper-right { &-wrapper-right {
@ -54,7 +66,7 @@
&--disabled { &--disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: @slider-disabled-opacity; opacity: var(--van-slider-disabled-opacity);
.van-slider__button-wrapper, .van-slider__button-wrapper,
.van-slider__button-wrapper-left, .van-slider__button-wrapper-left,
@ -65,7 +77,7 @@
&--vertical { &--vertical {
display: inline-block; display: inline-block;
width: @slider-bar-height; width: var(--van-slider-bar-height);
height: 100%; height: 100%;
.van-slider__button-wrapper, .van-slider__button-wrapper,

44
src/step/index.less
View File

@ -1,22 +1,36 @@
@import './var.less'; @import './var.less';
:root {
--van-step-text-color: @step-text-color;
--van-step-active-color: @step-active-color;
--van-step-process-text-color: @step-process-text-color;
--van-step-font-size: @step-font-size;
--van-step-line-color: @step-line-color;
--van-step-finish-line-color: @step-finish-line-color;
--van-step-finish-text-color: @step-finish-text-color;
--van-step-icon-size: @step-icon-size;
--van-step-circle-size: @step-circle-size;
--van-step-circle-color: @step-circle-color;
--van-step-horizontal-title-font-size: @step-horizontal-title-font-size;
}
.van-step { .van-step {
position: relative; position: relative;
flex: 1; flex: 1;
color: @step-text-color; color: var(--van-step-text-color);
font-size: @step-font-size; font-size: var(--van-step-font-size);
&__circle { &__circle {
display: block; display: block;
width: @step-circle-size; width: var(--van-step-circle-size);
height: @step-circle-size; height: var(--van-step-circle-size);
background-color: @step-circle-color; background-color: var(--van-step-circle-color);
border-radius: 50%; border-radius: 50%;
} }
&__line { &__line {
position: absolute; position: absolute;
background-color: @step-line-color; background-color: var(--van-step-line-color);
transition: background-color @animation-duration-base; transition: background-color @animation-duration-base;
} }
@ -59,12 +73,8 @@
.van-step__title { .van-step__title {
display: inline-block; display: inline-block;
margin-left: 3px; margin-left: 3px;
font-size: @step-horizontal-title-font-size; font-size: var(--van-step-horizontal-title-font-size);
transform: translateX(-50%); transform: translateX(-50%);
@media (max-width: 321px) {
font-size: @step-horizontal-title-font-size - 1px;
}
} }
.van-step__line { .van-step__line {
@ -76,11 +86,11 @@
.van-step__icon { .van-step__icon {
display: block; display: block;
font-size: @step-icon-size; font-size: var(--van-step-icon-size);
} }
.van-step--process { .van-step--process {
color: @step-process-text-color; color: var(--van-step-process-text-color);
} }
} }
@ -112,7 +122,7 @@
top: 19px; top: 19px;
left: -15px; left: -15px;
z-index: 2; z-index: 2;
font-size: @step-icon-size; font-size: var(--van-step-icon-size);
line-height: 1; line-height: 1;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
@ -132,11 +142,11 @@
} }
&--finish { &--finish {
color: @step-finish-text-color; color: var(--van-step-finish-text-color);
.van-step__circle, .van-step__circle,
.van-step__line { .van-step__line {
background-color: @step-finish-line-color; background-color: var(--van-step-finish-line-color);
} }
} }
@ -146,7 +156,7 @@
&--active, &--active,
&--finish { &--finish {
color: @step-active-color; color: var(--van-step-active-color);
} }
} }
} }

63
src/stepper/index.less
View File

@ -1,5 +1,22 @@
@import './var.less'; @import './var.less';
:root {
--van-stepper-active-color: @stepper-active-color;
--van-stepper-background-color: @stepper-background-color;
--van-stepper-button-icon-color: @stepper-button-icon-color;
--van-stepper-button-disabled-color: @stepper-button-disabled-color;
--van-stepper-button-disabled-icon-color: @stepper-button-disabled-icon-color;
--van-stepper-button-round-theme-color: @stepper-button-round-theme-color;
--van-stepper-input-width: @stepper-input-width;
--van-stepper-input-height: @stepper-input-height;
--van-stepper-input-font-size: @stepper-input-font-size;
--van-stepper-input-line-height: @stepper-input-line-height;
--van-stepper-input-text-color: @stepper-input-text-color;
--van-stepper-input-disabled-text-color: @stepper-input-disabled-text-color;
--van-stepper-input-disabled-background-color: @stepper-input-disabled-background-color;
--van-stepper-border-radius: @stepper-border-radius;
}
.van-stepper { .van-stepper {
display: inline-block; display: inline-block;
user-select: none; user-select: none;
@ -8,13 +25,13 @@
&__plus { &__plus {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: @stepper-input-height; width: var(--van-stepper-input-height);
height: @stepper-input-height; height: var(--van-stepper-input-height);
margin: 0; margin: 0;
padding: 0; padding: 0;
color: @stepper-button-icon-color; color: var(--van-stepper-button-icon-color);
vertical-align: middle; vertical-align: middle;
background-color: @stepper-background-color; background-color: var(--van-stepper-background-color);
border: 0; border: 0;
cursor: pointer; cursor: pointer;
@ -39,22 +56,23 @@
} }
&:active { &:active {
background-color: @stepper-active-color; background-color: var(--van-stepper-active-color);
} }
&--disabled { &--disabled {
color: @stepper-button-disabled-icon-color; color: var(--van-stepper-button-disabled-icon-color);
background-color: @stepper-button-disabled-color; background-color: var(--van-stepper-button-disabled-color);
cursor: not-allowed; cursor: not-allowed;
&:active { &:active {
background-color: @stepper-button-disabled-color; background-color: var(--van-stepper-button-disabled-color);
} }
} }
} }
&__minus { &__minus {
border-radius: @stepper-border-radius 0 0 @stepper-border-radius; border-radius: var(--van-stepper-border-radius) 0 0
var(--van-stepper-border-radius);
&::after { &::after {
display: none; display: none;
@ -62,31 +80,32 @@
} }
&__plus { &__plus {
border-radius: 0 @stepper-border-radius @stepper-border-radius 0; border-radius: 0 var(--van-stepper-border-radius)
var(--van-stepper-border-radius) 0;
} }
&__input { &__input {
box-sizing: border-box; box-sizing: border-box;
width: @stepper-input-width; width: var(--van-stepper-input-width);
height: @stepper-input-height; height: var(--van-stepper-input-height);
margin: 0 2px; margin: 0 2px;
padding: 0; padding: 0;
color: @stepper-input-text-color; color: var(--van-stepper-input-text-color);
font-size: @stepper-input-font-size; font-size: var(--van-stepper-input-font-size);
line-height: @stepper-input-line-height; line-height: var(--van-stepper-input-line-height);
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
background-color: @stepper-background-color; background-color: var(--van-stepper-background-color);
border: 0; border: 0;
border-width: 1px 0; border-width: 1px 0;
border-radius: 0; border-radius: 0;
-webkit-appearance: none; -webkit-appearance: none;
&:disabled { &:disabled {
color: @stepper-input-disabled-text-color; color: var(--van-stepper-input-disabled-text-color);
background-color: @stepper-input-disabled-background-color; background-color: var(--van-stepper-input-disabled-background-color);
// fix disabled color in iOS // fix disabled color in iOS
-webkit-text-fill-color: @stepper-input-disabled-text-color; -webkit-text-fill-color: var(--van-stepper-input-disabled-text-color);
opacity: 1; opacity: 1;
} }
@ -118,13 +137,13 @@
.van-stepper__plus { .van-stepper__plus {
color: @white; color: @white;
background-color: @stepper-button-round-theme-color; background-color: var(--van-stepper-button-round-theme-color);
} }
.van-stepper__minus { .van-stepper__minus {
color: @stepper-button-round-theme-color; color: var(--van-stepper-button-round-theme-color);
background-color: @white; background-color: @white;
border: 1px solid @stepper-button-round-theme-color; border: 1px solid var(--van-stepper-button-round-theme-color);
} }
} }
} }

6
src/steps/index.less
View File

@ -1,8 +1,12 @@
@import './var.less'; @import './var.less';
:root {
--van-steps-background-color: @steps-background-color;
}
.van-steps { .van-steps {
overflow: hidden; overflow: hidden;
background-color: @steps-background-color; background-color: var(--van-steps-background-color);
&--horizontal { &--horizontal {
padding: 10px 10px 0; padding: 10px 10px 0;

6
src/sticky/index.less
View File

@ -1,8 +1,12 @@
@import './var.less'; @import './var.less';
:root {
--van-sticky-z-index: @sticky-z-index;
}
.van-sticky { .van-sticky {
&--fixed { &--fixed {
position: fixed; position: fixed;
z-index: @sticky-z-index; z-index: var(--van-sticky-z-index);
} }
} }

61
src/submit-bar/index.less
View File

@ -1,27 +1,50 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/safe-area.less'; @import '../style/mixins/safe-area.less';
:root {
--van-submit-bar-height: @submit-bar-height;
--van-submit-bar-z-index: @submit-bar-z-index;
--van-submit-bar-background-color: @submit-bar-background-color;
--van-submit-bar-button-width: @submit-bar-button-width;
--van-submit-bar-price-color: @submit-bar-price-color;
--van-submit-bar-price-font-size: @submit-bar-price-font-size;
--van-submit-bar-currency-font-size: @submit-bar-currency-font-size;
--van-submit-bar-text-color: @submit-bar-text-color;
--van-submit-bar-text-font-size: @submit-bar-text-font-size;
--van-submit-bar-tip-padding: @submit-bar-tip-padding;
--van-submit-bar-tip-font-size: @submit-bar-tip-font-size;
--van-submit-bar-tip-line-height: @submit-bar-tip-line-height;
--van-submit-bar-tip-color: @submit-bar-tip-color;
--van-submit-bar-tip-background-color: @submit-bar-tip-background-color;
--van-submit-bar-tip-icon-size: @submit-bar-tip-icon-size;
--van-submit-bar-button-height: @submit-bar-button-height;
--van-submit-bar-padding: @submit-bar-padding;
--van-submit-bar-price-font-size: @submit-bar-price-font-size;
--van-submit-bar-price-integer-font-size: @submit-bar-price-integer-font-size;
--van-submit-bar-price-font-family: @submit-bar-price-font-family;
}
.van-submit-bar { .van-submit-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @submit-bar-z-index; z-index: var(--van-submit-bar-z-index);
width: 100%; width: 100%;
background-color: @submit-bar-background-color; background-color: var(--van-submit-bar-background-color);
user-select: none; user-select: none;
.safe-area-inset-bottom(); .safe-area-inset-bottom();
&__tip { &__tip {
padding: @submit-bar-tip-padding; padding: var(--van-submit-bar-tip-padding);
color: @submit-bar-tip-color; color: var(--van-submit-bar-tip-color);
font-size: @submit-bar-tip-font-size; font-size: var(--van-submit-bar-tip-font-size);
line-height: @submit-bar-tip-line-height; line-height: var(--van-submit-bar-tip-line-height);
background-color: @submit-bar-tip-background-color; background-color: var(--van-submit-bar-tip-background-color);
} }
&__tip-icon { &__tip-icon {
min-width: @submit-bar-tip-icon-size * 1.5; min-width: calc(var(--van-submit-bar-tip-icon-size) * 1.5);
font-size: @submit-bar-tip-icon-size; font-size: var(--van-submit-bar-tip-icon-size);
vertical-align: middle; vertical-align: middle;
} }
@ -33,15 +56,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
height: @submit-bar-height; height: var(--van-submit-bar-height);
padding: @submit-bar-padding; padding: var(--van-submit-bar-padding);
font-size: @submit-bar-text-font-size; font-size: var(--van-submit-bar-text-font-size);
} }
&__text { &__text {
flex: 1; flex: 1;
padding-right: @padding-sm; padding-right: @padding-sm;
color: @submit-bar-text-color; color: var(--van-submit-bar-text-color);
text-align: right; text-align: right;
span { span {
@ -55,19 +78,19 @@
} }
&__price { &__price {
color: @submit-bar-price-color; color: var(--van-submit-bar-price-color);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
font-size: @submit-bar-price-font-size; font-size: var(--van-submit-bar-price-font-size);
&-integer { &-integer {
font-size: @submit-bar-price-integer-font-size; font-size: var(--van-submit-bar-price-integer-font-size);
font-family: @submit-bar-price-font-family; font-family: var(--van-submit-bar-price-font-family);
} }
} }
&__button { &__button {
width: @submit-bar-button-width; width: var(--van-submit-bar-button-width);
height: @submit-bar-button-height; height: var(--van-submit-bar-button-height);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
border: none; border: none;

2
src/swipe-item/index.less
View File

@ -1,5 +1,3 @@
@import './var.less';
.van-swipe-item { .van-swipe-item {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;

1
src/swipe-item/var.less
View File

@ -1 +0,0 @@
@import '../style/var.less';

29
src/swipe/index.less
View File

@ -1,5 +1,14 @@
@import './var.less'; @import './var.less';
:root {
--van-swipe-indicator-size: @swipe-indicator-size;
--van-swipe-indicator-margin: @swipe-indicator-margin;
--van-swipe-indicator-active-opacity: @swipe-indicator-active-opacity;
--van-swipe-indicator-inactive-opacity: @swipe-indicator-inactive-opacity;
--van-swipe-indicator-active-background-color: @swipe-indicator-active-background-color;
--van-swipe-indicator-inactive-background-color: @swipe-indicator-inactive-background-color;
}
.van-swipe { .van-swipe {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -17,7 +26,7 @@
&__indicators { &__indicators {
position: absolute; position: absolute;
bottom: @swipe-indicator-margin; bottom: var(--van-swipe-indicator-margin);
left: 50%; left: 50%;
display: flex; display: flex;
transform: translateX(-50%); transform: translateX(-50%);
@ -25,32 +34,32 @@
&--vertical { &--vertical {
top: 50%; top: 50%;
bottom: auto; bottom: auto;
left: @swipe-indicator-margin; left: var(--van-swipe-indicator-margin);
flex-direction: column; flex-direction: column;
transform: translateY(-50%); transform: translateY(-50%);
.van-swipe__indicator:not(:last-child) { .van-swipe__indicator:not(:last-child) {
margin-bottom: @swipe-indicator-size; margin-bottom: var(--van-swipe-indicator-size);
} }
} }
} }
&__indicator { &__indicator {
width: @swipe-indicator-size; width: var(--van-swipe-indicator-size);
height: @swipe-indicator-size; height: var(--van-swipe-indicator-size);
background-color: @swipe-indicator-inactive-background-color; background-color: var(--van-swipe-indicator-inactive-background-color);
border-radius: 100%; border-radius: 100%;
opacity: @swipe-indicator-inactive-opacity; opacity: var(--van-swipe-indicator-inactive-opacity);
transition: opacity @animation-duration-fast, transition: opacity @animation-duration-fast,
background-color @animation-duration-fast; background-color @animation-duration-fast;
&:not(:last-child) { &:not(:last-child) {
margin-right: @swipe-indicator-size; margin-right: var(--van-swipe-indicator-size);
} }
&--active { &--active {
background-color: @swipe-indicator-active-background-color; background-color: var(--van-swipe-indicator-active-background-color);
opacity: @swipe-indicator-active-opacity; opacity: var(--van-swipe-indicator-active-opacity);
} }
} }
} }

48
src/switch/index.less
View File

@ -1,28 +1,42 @@
@import './var.less'; @import './var.less';
:root {
--van-switch-size: @switch-size;
--van-switch-width: @switch-width;
--van-switch-height: @switch-height;
--van-switch-node-size: @switch-node-size;
--van-switch-node-background-color: @switch-node-background-color;
--van-switch-node-box-shadow: @switch-node-box-shadow;
--van-switch-background-color: @switch-background-color;
--van-switch-on-background-color: @switch-on-background-color;
--van-switch-transition-duration: @switch-transition-duration;
--van-switch-disabled-opacity: @switch-disabled-opacity;
--van-switch-border: @switch-border;
}
.van-switch { .van-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: content-box; box-sizing: content-box;
width: @switch-width; width: var(--van-switch-width);
height: @switch-height; height: var(--van-switch-height);
font-size: @switch-size; font-size: var(--van-switch-size);
background-color: @switch-background-color; background-color: var(--van-switch-background-color);
border: @switch-border; border: var(--van-switch-border);
border-radius: @switch-node-size; border-radius: var(--van-switch-node-size);
cursor: pointer; cursor: pointer;
transition: background-color @switch-transition-duration; transition: background-color var(--van-switch-transition-duration);
&__node { &__node {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: @switch-node-size; width: var(--van-switch-node-size);
height: @switch-node-size; height: var(--van-switch-node-size);
background-color: @switch-node-background-color; background-color: var(--van-switch-node-background-color);
border-radius: 100%; border-radius: 100%;
box-shadow: @switch-node-box-shadow; box-shadow: var(--van-switch-node-box-shadow);
transition: transform @switch-transition-duration transition: transform var(--van-switch-transition-duration)
cubic-bezier(0.3, 1.05, 0.4, 1.05); cubic-bezier(0.3, 1.05, 0.4, 1.05);
} }
@ -35,20 +49,22 @@
} }
&--on { &--on {
background-color: @switch-on-background-color; background-color: var(--van-switch-on-background-color);
.van-switch__node { .van-switch__node {
transform: translateX(@switch-width - @switch-node-size); transform: translateX(
calc(var(--van-switch-width) - var(--van-switch-node-size))
);
} }
.van-switch__loading { .van-switch__loading {
color: @switch-on-background-color; color: var(--van-switch-on-background-color);
} }
} }
&--disabled { &--disabled {
cursor: not-allowed; cursor: not-allowed;
opacity: @switch-disabled-opacity; opacity: var(--van-switch-disabled-opacity);
} }
&--loading { &--loading {

24
src/tabbar-item/index.less
View File

@ -1,19 +1,29 @@
@import './var.less'; @import './var.less';
:root {
--van-tabbar-item-font-size: @tabbar-item-font-size;
--van-tabbar-item-text-color: @tabbar-item-text-color;
--van-tabbar-item-active-color: @tabbar-item-active-color;
--van-tabbar-item-active-background-color: @tabbar-item-active-background-color;
--van-tabbar-item-line-height: @tabbar-item-line-height;
--van-tabbar-item-icon-size: @tabbar-item-icon-size;
--van-tabbar-item-margin-bottom: @tabbar-item-margin-bottom;
}
.van-tabbar-item { .van-tabbar-item {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @tabbar-item-text-color; color: var(--van-tabbar-item-text-color);
font-size: @tabbar-item-font-size; font-size: var(--van-tabbar-item-font-size);
line-height: @tabbar-item-line-height; line-height: var(--van-tabbar-item-line-height);
cursor: pointer; cursor: pointer;
&__icon { &__icon {
margin-bottom: @tabbar-item-margin-bottom; margin-bottom: var(--van-tabbar-item-margin-bottom);
font-size: @tabbar-item-icon-size; font-size: var(--van-tabbar-item-icon-size);
.van-icon { .van-icon {
display: block; display: block;
@ -26,8 +36,8 @@
} }
&--active { &--active {
color: @tabbar-item-active-color; color: var(--van-tabbar-item-active-color);
background-color: @tabbar-item-active-background-color; background-color: var(--van-tabbar-item-active-background-color);
} }
.van-badge { .van-badge {

12
src/tabbar/index.less
View File

@ -1,13 +1,19 @@
@import './var.less'; @import './var.less';
@import '../style/mixins/safe-area.less'; @import '../style/mixins/safe-area.less';
:root {
--van-tabbar-height: @tabbar-height;
--van-tabbar-z-index: @tabbar-z-index;
--van-tabbar-background-color: @tabbar-background-color;
}
.van-tabbar { .van-tabbar {
z-index: @tabbar-z-index; z-index: var(--van-tabbar-z-index);
display: flex; display: flex;
box-sizing: content-box; box-sizing: content-box;
width: 100%; width: 100%;
height: @tabbar-height; height: var(--van-tabbar-height);
background-color: @tabbar-background-color; background-color: var(--van-tabbar-background-color);
.safe-area-inset-bottom(); .safe-area-inset-bottom();
&--fixed { &--fixed {

51
src/tabs/index.less
View File

@ -1,5 +1,20 @@
@import './var.less'; @import './var.less';
:root {
--van-tab-text-color: @tab-text-color;
--van-tab-active-text-color: @tab-active-text-color;
--van-tab-disabled-text-color: @tab-disabled-text-color;
--van-tab-font-size: @tab-font-size;
--van-tab-line-height: @tab-line-height;
--van-tabs-default-color: @tabs-default-color;
--van-tabs-line-height: @tabs-line-height;
--van-tabs-card-height: @tabs-card-height;
--van-tabs-nav-background-color: @tabs-nav-background-color;
--van-tabs-bottom-bar-width: @tabs-bottom-bar-width;
--van-tabs-bottom-bar-height: @tabs-bottom-bar-height;
--van-tabs-bottom-bar-color: @tabs-bottom-bar-color;
}
.van-tab { .van-tab {
position: relative; position: relative;
display: flex; display: flex;
@ -8,18 +23,18 @@
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
padding: 0 @padding-base; padding: 0 @padding-base;
color: @tab-text-color; color: var(--van-tab-text-color);
font-size: @tab-font-size; font-size: var(--van-tab-font-size);
line-height: @tab-line-height; line-height: var(--van-tab-line-height);
cursor: pointer; cursor: pointer;
&--active { &--active {
color: @tab-active-text-color; color: var(--van-tab-active-text-color);
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
} }
&--disabled { &--disabled {
color: @tab-disabled-text-color; color: var(--van-tab-disabled-text-color);
cursor: not-allowed; cursor: not-allowed;
} }
@ -69,7 +84,7 @@
&__nav { &__nav {
position: relative; position: relative;
display: flex; display: flex;
background-color: @tabs-nav-background-color; background-color: var(--van-tabs-nav-background-color);
user-select: none; user-select: none;
&--line { &--line {
@ -85,14 +100,14 @@
&--card { &--card {
box-sizing: border-box; box-sizing: border-box;
height: @tabs-card-height; height: var(--van-tabs-card-height);
margin: 0 @padding-md; margin: 0 @padding-md;
border: @border-width-base solid @tabs-default-color; border: @border-width-base solid var(--van-tabs-default-color);
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
.van-tab { .van-tab {
color: @tabs-default-color; color: var(--van-tabs-default-color);
border-right: @border-width-base solid @tabs-default-color; border-right: @border-width-base solid var(--van-tabs-default-color);
&:last-child { &:last-child {
border-right: none; border-right: none;
@ -100,11 +115,11 @@
&.van-tab--active { &.van-tab--active {
color: @white; color: @white;
background-color: @tabs-default-color; background-color: var(--van-tabs-default-color);
} }
&--disabled { &--disabled {
color: @tab-disabled-text-color; color: var(--van-tab-disabled-text-color);
} }
} }
} }
@ -115,10 +130,10 @@
bottom: 15px; bottom: 15px;
left: 0; left: 0;
z-index: 1; z-index: 1;
width: @tabs-bottom-bar-width; width: var(--van-tabs-bottom-bar-width);
height: @tabs-bottom-bar-height; height: var(--van-tabs-bottom-bar-height);
background-color: @tabs-bottom-bar-color; background-color: var(--van-tabs-bottom-bar-color);
border-radius: @tabs-bottom-bar-height; border-radius: var(--van-tabs-bottom-bar-height);
} }
&__track { &__track {
@ -137,13 +152,13 @@
&--line { &--line {
.van-tabs__wrap { .van-tabs__wrap {
height: @tabs-line-height; height: var(--van-tabs-line-height);
} }
} }
&--card { &--card {
> .van-tabs__wrap { > .van-tabs__wrap {
height: @tabs-card-height; height: var(--van-tabs-card-height);
} }
} }
} }

64
src/tag/index.less
View File

@ -1,57 +1,76 @@
@import './var.less'; @import './var.less';
:root {
--van-tag-padding: @tag-padding;
--van-tag-text-color: @tag-text-color;
--van-tag-font-size: @tag-font-size;
--van-tag-border-radius: @tag-border-radius;
--van-tag-line-height: @tag-line-height;
--van-tag-medium-padding: @tag-medium-padding;
--van-tag-large-padding: @tag-large-padding;
--van-tag-large-border-radius: @tag-large-border-radius;
--van-tag-large-font-size: @tag-large-font-size;
--van-tag-round-border-radius: @tag-round-border-radius;
--van-tag-danger-color: @tag-danger-color;
--van-tag-primary-color: @tag-primary-color;
--van-tag-success-color: @tag-success-color;
--van-tag-warning-color: @tag-warning-color;
--van-tag-default-color: @tag-default-color;
--van-tag-plain-background-color: @tag-plain-background-color;
}
.van-tag { .van-tag {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: @tag-padding; padding: var(--van-tag-padding);
color: @tag-text-color; color: var(--van-tag-text-color);
font-size: @tag-font-size; font-size: var(--van-tag-font-size);
line-height: @tag-line-height; line-height: var(--van-tag-line-height);
border-radius: @tag-border-radius; border-radius: var(--van-tag-border-radius);
&--default { &--default {
background-color: @tag-default-color; background-color: var(--van-tag-default-color);
&.van-tag--plain { &.van-tag--plain {
color: @tag-default-color; color: var(--van-tag-default-color);
} }
} }
&--danger { &--danger {
background-color: @tag-danger-color; background-color: var(--van-tag-danger-color);
&.van-tag--plain { &.van-tag--plain {
color: @tag-danger-color; color: var(--van-tag-danger-color);
} }
} }
&--primary { &--primary {
background-color: @tag-primary-color; background-color: var(--van-tag-primary-color);
&.van-tag--plain { &.van-tag--plain {
color: @tag-primary-color; color: var(--van-tag-primary-color);
} }
} }
&--success { &--success {
background-color: @tag-success-color; background-color: var(--van-tag-success-color);
&.van-tag--plain { &.van-tag--plain {
color: @tag-success-color; color: var(--van-tag-success-color);
} }
} }
&--warning { &--warning {
background-color: @tag-warning-color; background-color: var(--van-tag-warning-color);
&.van-tag--plain { &.van-tag--plain {
color: @tag-warning-color; color: var(--van-tag-warning-color);
} }
} }
&--plain { &--plain {
background-color: @tag-plain-background-color; background-color: var(--van-tag-plain-background-color);
border-color: currentColor; border-color: currentColor;
&::before { &::before {
@ -69,17 +88,18 @@
} }
&--medium { &--medium {
padding: @tag-medium-padding; padding: var(--van-tag-medium-padding);
} }
&--large { &--large {
padding: @tag-large-padding; padding: var(--van-tag-large-padding);
font-size: @tag-large-font-size; font-size: var(--van-tag-large-font-size);
border-radius: @tag-large-border-radius; border-radius: var(--van-tag-large-border-radius);
} }
&--mark { &--mark {
border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0; border-radius: 0 var(--van-tag-round-border-radius)
var(--van-tag-round-border-radius) 0;
&::after { &::after {
display: block; display: block;
@ -89,7 +109,7 @@
} }
&--round { &--round {
border-radius: @tag-round-border-radius; border-radius: var(--van-tag-round-border-radius);
} }
&__close { &__close {

48
src/toast/index.less
View File

@ -1,5 +1,23 @@
@import './var.less'; @import './var.less';
:root {
--van-toast-max-width: @toast-max-width;
--van-toast-font-size: @toast-font-size;
--van-toast-text-color: @toast-text-color;
--van-toast-loading-icon-color: @toast-loading-icon-color;
--van-toast-line-height: @toast-line-height;
--van-toast-border-radius: @toast-border-radius;
--van-toast-background-color: @toast-background-color;
--van-toast-icon-size: @toast-icon-size;
--van-toast-text-min-width: @toast-text-min-width;
--van-toast-text-padding: @toast-text-padding;
--van-toast-default-padding: @toast-default-padding;
--van-toast-default-width: @toast-default-width;
--van-toast-default-min-height: @toast-default-min-height;
--van-toast-position-top-distance: @toast-position-top-distance;
--van-toast-position-bottom-distance: @toast-position-bottom-distance;
}
.van-toast { .van-toast {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -9,20 +27,20 @@
transition: all @animation-duration-fast; transition: all @animation-duration-fast;
// hack for avoid max-width when use left & fixed // hack for avoid max-width when use left & fixed
width: @toast-default-width; width: var(--van-toast-default-width);
max-width: @toast-max-width; max-width: var(--van-toast-max-width);
min-height: @toast-default-min-height; min-height: var(--van-toast-default-min-height);
padding: @toast-default-padding; padding: var(--van-toast-default-padding);
color: @toast-text-color; color: var(--van-toast-text-color);
font-size: @toast-font-size; font-size: var(--van-toast-font-size);
line-height: @toast-line-height; line-height: var(--van-toast-line-height);
// allow newline character // allow newline character
white-space: pre-wrap; white-space: pre-wrap;
text-align: center; text-align: center;
word-wrap: break-word; word-wrap: break-word;
background-color: @toast-background-color; background-color: var(--van-toast-background-color);
border-radius: @toast-border-radius; border-radius: var(--van-toast-border-radius);
&--unclickable { &--unclickable {
// lock scroll // lock scroll
@ -38,9 +56,9 @@
&--text, &--text,
&--html { &--html {
width: fit-content; width: fit-content;
min-width: @toast-text-min-width; min-width: var(--van-toast-text-min-width);
min-height: 0; min-height: 0;
padding: @toast-text-padding; padding: var(--van-toast-text-padding);
.van-toast__text { .van-toast__text {
margin-top: 0; margin-top: 0;
@ -48,21 +66,21 @@
} }
&--top { &--top {
top: @toast-position-top-distance; top: var(--van-toast-position-top-distance);
} }
&--bottom { &--bottom {
top: auto; top: auto;
bottom: @toast-position-bottom-distance; bottom: var(--van-toast-position-bottom-distance);
} }
&__icon { &__icon {
font-size: @toast-icon-size; font-size: var(--van-toast-icon-size);
} }
&__loading { &__loading {
padding: @padding-base; padding: @padding-base;
color: @toast-loading-icon-color; color: var(--van-toast-loading-icon-color);
} }
&__text { &__text {

27
src/tree-select/index.less
View File

@ -1,26 +1,37 @@
@import './var.less'; @import './var.less';
:root {
--van-tree-select-font-size: @tree-select-font-size;
--van-tree-select-nav-background-color: @tree-select-nav-background-color;
--van-tree-select-content-background-color: @tree-select-content-background-color;
--van-tree-select-nav-item-padding: @tree-select-nav-item-padding;
--van-tree-select-item-height: @tree-select-item-height;
--van-tree-select-item-active-color: @tree-select-item-active-color;
--van-tree-select-item-disabled-color: @tree-select-item-disabled-color;
--van-tree-select-item-selected-size: @tree-select-item-selected-size;
}
.van-tree-select { .van-tree-select {
position: relative; position: relative;
display: flex; display: flex;
font-size: @tree-select-font-size; font-size: var(--van-tree-select-font-size);
user-select: none; user-select: none;
&__nav { &__nav {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
background-color: @tree-select-nav-background-color; background-color: var(--van-tree-select-nav-background-color);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&-item { &-item {
padding: @tree-select-nav-item-padding; padding: var(--van-tree-select-nav-item-padding);
} }
} }
&__content { &__content {
flex: 2; flex: 2;
overflow-y: auto; overflow-y: auto;
background-color: @tree-select-content-background-color; background-color: var(--van-tree-select-content-background-color);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -28,11 +39,11 @@
position: relative; position: relative;
padding: 0 32px 0 @padding-md; padding: 0 32px 0 @padding-md;
font-weight: @font-weight-bold; font-weight: @font-weight-bold;
line-height: @tree-select-item-height; line-height: var(--van-tree-select-item-height);
cursor: pointer; cursor: pointer;
&--active { &--active {
color: @tree-select-item-active-color; color: var(--van-tree-select-item-active-color);
} }
&:active { &:active {
@ -40,7 +51,7 @@
} }
&--disabled { &--disabled {
color: @tree-select-item-disabled-color; color: var(--van-tree-select-item-disabled-color);
cursor: not-allowed; cursor: not-allowed;
&:active { &:active {
@ -54,6 +65,6 @@
top: 50%; top: 50%;
right: @padding-md; right: @padding-md;
margin-top: -@padding-xs; margin-top: -@padding-xs;
font-size: @tree-select-item-selected-size; font-size: var(--van-tree-select-item-selected-size);
} }
} }

92
src/uploader/index.less
View File

@ -1,5 +1,33 @@
@import './var.less'; @import './var.less';
:root {
--van-uploader-size: @uploader-size;
--van-uploader-icon-size: @uploader-icon-size;
--van-uploader-icon-color: @uploader-icon-color;
--van-uploader-text-color: @uploader-text-color;
--van-uploader-text-font-size: @uploader-text-font-size;
--van-uploader-upload-background-color: @uploader-upload-background-color;
--van-uploader-upload-active-color: @uploader-upload-active-color;
--van-uploader-delete-color: @uploader-delete-color;
--van-uploader-delete-icon-size: @uploader-delete-icon-size;
--van-uploader-delete-background-color: @uploader-delete-background-color;
--van-uploader-file-background-color: @uploader-file-background-color;
--van-uploader-file-icon-size: @uploader-file-icon-size;
--van-uploader-file-icon-color: @uploader-file-icon-color;
--van-uploader-file-name-padding: @uploader-file-name-padding;
--van-uploader-file-name-margin-top: @uploader-file-name-margin-top;
--van-uploader-file-name-font-size: @uploader-file-name-font-size;
--van-uploader-file-name-text-color: @uploader-file-name-text-color;
--van-uploader-mask-text-color: @uploader-mask-text-color;
--van-uploader-mask-background-color: @uploader-mask-background-color;
--van-uploader-mask-icon-size: @uploader-mask-icon-size;
--van-uploader-mask-message-font-size: @uploader-mask-message-font-size;
--van-uploader-mask-message-line-height: @uploader-mask-message-line-height;
--van-uploader-loading-icon-size: @uploader-loading-icon-size;
--van-uploader-loading-icon-color: @uploader-loading-icon-color;
--van-uploader-disabled-opacity: @uploader-disabled-opacity;
}
.van-uploader { .van-uploader {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -9,7 +37,7 @@
flex-wrap: wrap; flex-wrap: wrap;
&--disabled { &--disabled {
opacity: @uploader-disabled-opacity; opacity: var(--van-uploader-disabled-opacity);
} }
} }
@ -39,24 +67,24 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
width: @uploader-size; width: var(--van-uploader-size);
height: @uploader-size; height: var(--van-uploader-size);
margin: 0 @padding-xs @padding-xs 0; margin: 0 @padding-xs @padding-xs 0;
background-color: @uploader-upload-background-color; background-color: var(--van-uploader-upload-background-color);
&:active { &:active {
background-color: @uploader-upload-active-color; background-color: var(--van-uploader-upload-active-color);
} }
&-icon { &-icon {
color: @uploader-icon-color; color: var(--van-uploader-icon-color);
font-size: @uploader-icon-size; font-size: var(--van-uploader-icon-size);
} }
&-text { &-text {
margin-top: @padding-xs; margin-top: @padding-xs;
color: @uploader-text-color; color: var(--van-uploader-text-color);
font-size: @uploader-text-font-size; font-size: var(--van-uploader-text-font-size);
} }
} }
@ -67,8 +95,8 @@
&-image { &-image {
display: block; display: block;
width: @uploader-size; width: var(--van-uploader-size);
height: @uploader-size; height: var(--van-uploader-size);
overflow: hidden; overflow: hidden;
} }
@ -76,9 +104,9 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width: @uploader-delete-icon-size; width: var(--van-uploader-delete-icon-size);
height: @uploader-delete-icon-size; height: var(--van-uploader-delete-icon-size);
background-color: @uploader-delete-background-color; background-color: var(--van-uploader-delete-background-color);
border-radius: 0 0 0 12px; border-radius: 0 0 0 12px;
&-icon { &-icon {
@ -86,7 +114,7 @@
top: -2px; top: -2px;
right: -2px; right: -2px;
color: #fff; color: #fff;
color: @uploader-delete-color; color: var(--van-uploader-delete-color);
font-size: 16px; font-size: 16px;
transform: scale(0.5); transform: scale(0.5);
} }
@ -111,25 +139,25 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: @uploader-mask-text-color; color: var(--van-uploader-mask-text-color);
background-color: @uploader-mask-background-color; background-color: var(--van-uploader-mask-background-color);
&-icon { &-icon {
font-size: @uploader-mask-icon-size; font-size: var(--van-uploader-mask-icon-size);
} }
&-message { &-message {
margin-top: 6px; margin-top: 6px;
padding: 0 @padding-base; padding: 0 @padding-base;
font-size: @uploader-mask-message-font-size; font-size: var(--van-uploader-mask-message-font-size);
line-height: @uploader-mask-message-line-height; line-height: var(--van-uploader-mask-message-line-height);
} }
} }
&__loading { &__loading {
width: @uploader-loading-icon-size; width: var(--van-uploader-loading-icon-size);
height: @uploader-loading-icon-size; height: var(--van-uploader-loading-icon-size);
color: @uploader-loading-icon-color; color: var(--van-uploader-loading-icon-color);
} }
&__file { &__file {
@ -137,22 +165,22 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: @uploader-size; width: var(--van-uploader-size);
height: @uploader-size; height: var(--van-uploader-size);
background-color: @uploader-file-background-color; background-color: var(--van-uploader-file-background-color);
&-icon { &-icon {
color: @uploader-file-icon-color; color: var(--van-uploader-file-icon-color);
font-size: @uploader-file-icon-size; font-size: var(--van-uploader-file-icon-size);
} }
&-name { &-name {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
margin-top: @uploader-file-name-margin-top; margin-top: var(--van-uploader-file-name-margin-top);
padding: @uploader-file-name-padding; padding: var(--van-uploader-file-name-padding);
color: @uploader-file-name-text-color; color: var(--van-uploader-file-name-text-color);
font-size: @uploader-file-name-font-size; font-size: var(--van-uploader-file-name-font-size);
text-align: center; text-align: center;
} }
} }