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

feat(style): component using basic css variables

Browse Source
This commit is contained in:
chenjiahan 2021-06-12 15:40:08 +08:00 committed by neverland
parent aef2579a95
commit 710aebaee4
117 changed files with 707 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

4
src/action-bar-button/var.less
View File

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

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

@ -29,7 +29,7 @@
} }
&__icon { &__icon {
margin: 0 auto @padding-base; margin: 0 auto var(--van-padding-base);
color: var(--van-action-bar-icon-color); color: var(--van-action-bar-icon-color);
font-size: var(--van-action-bar-icon-size); font-size: var(--van-action-bar-icon-size);
} }

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

@ -2,9 +2,9 @@
@action-bar-icon-width: 48px; @action-bar-icon-width: 48px;
@action-bar-icon-height: 100%; @action-bar-icon-height: 100%;
@action-bar-icon-color: @text-color; @action-bar-icon-color: var(--van-text-color);
@action-bar-icon-size: 18px; @action-bar-icon-size: 18px;
@action-bar-icon-font-size: @font-size-xs; @action-bar-icon-font-size: var(--van-font-size-xs);
@action-bar-icon-active-color: @active-color; @action-bar-icon-active-color: var(--van-active-color);
@action-bar-icon-text-color: @gray-7; @action-bar-icon-text-color: var(--van-gray-7);
@action-bar-icon-background-color: @white; @action-bar-icon-background-color: var(--van-white);

2
src/action-bar/var.less
View File

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

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

@ -43,14 +43,14 @@
&__cancel { &__cancel {
display: block; display: block;
width: 100%; width: 100%;
padding: 14px @padding-md; padding: 14px var(--van-padding-md);
font-size: var(--van-action-sheet-item-font-size); font-size: var(--van-action-sheet-item-font-size);
background-color: var(--van-action-sheet-item-background); background-color: var(--van-action-sheet-item-background);
border: none; border: none;
cursor: pointer; cursor: pointer;
&:active { &:active {
background-color: @active-color; background-color: var(--van-active-color);
} }
} }
@ -82,7 +82,7 @@
} }
&__subname { &__subname {
margin-top: @padding-xs; margin-top: var(--van-padding-xs);
color: var(--van-action-sheet-subname-color); color: var(--van-action-sheet-subname-color);
font-size: var(--van-action-sheet-subname-font-size); font-size: var(--van-action-sheet-subname-font-size);
line-height: var(--van-action-sheet-subname-line-height); line-height: var(--van-action-sheet-subname-line-height);
@ -96,7 +96,7 @@
&__header { &__header {
flex-shrink: 0; flex-shrink: 0;
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
font-size: var(--van-action-sheet-header-font-size); font-size: var(--van-action-sheet-header-font-size);
line-height: var(--van-action-sheet-header-height); line-height: var(--van-action-sheet-header-height);
text-align: center; text-align: center;
@ -105,14 +105,14 @@
&__description { &__description {
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
padding: 20px @padding-md; padding: 20px var(--van-padding-md);
color: var(--van-action-sheet-description-color); color: var(--van-action-sheet-description-color);
font-size: var(--van-action-sheet-description-font-size); font-size: var(--van-action-sheet-description-font-size);
line-height: var(--van-action-sheet-description-line-height); line-height: var(--van-action-sheet-description-line-height);
text-align: center; text-align: center;
&::after { &::after {
.hairline-bottom(@border-color, @padding-md, @padding-md); .hairline-bottom(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
} }
} }

36
src/action-sheet/var.less
View File

@ -2,23 +2,23 @@
@action-sheet-max-height: 80%; @action-sheet-max-height: 80%;
@action-sheet-header-height: 48px; @action-sheet-header-height: 48px;
@action-sheet-header-font-size: @font-size-lg; @action-sheet-header-font-size: var(--van-font-size-lg);
@action-sheet-description-color: @gray-6; @action-sheet-description-color: var(--van-gray-6);
@action-sheet-description-font-size: @font-size-md; @action-sheet-description-font-size: var(--van-font-size-md);
@action-sheet-description-line-height: @line-height-md; @action-sheet-description-line-height: var(--van-line-height-md);
@action-sheet-item-background: @white; @action-sheet-item-background: var(--van-white);
@action-sheet-item-font-size: @font-size-lg; @action-sheet-item-font-size: var(--van-font-size-lg);
@action-sheet-item-line-height: @line-height-lg; @action-sheet-item-line-height: var(--van-line-height-lg);
@action-sheet-item-text-color: @text-color; @action-sheet-item-text-color: var(--van-text-color);
@action-sheet-item-disabled-text-color: @gray-5; @action-sheet-item-disabled-text-color: var(--van-gray-5);
@action-sheet-subname-color: @gray-6; @action-sheet-subname-color: var(--van-gray-6);
@action-sheet-subname-font-size: @font-size-sm; @action-sheet-subname-font-size: var(--van-font-size-sm);
@action-sheet-subname-line-height: @line-height-sm; @action-sheet-subname-line-height: var(--van-line-height-sm);
@action-sheet-close-icon-size: 22px; @action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: @gray-5; @action-sheet-close-icon-color: var(--van-gray-5);
@action-sheet-close-icon-active-color: @gray-6; @action-sheet-close-icon-active-color: var(--van-gray-6);
@action-sheet-close-icon-padding: 0 @padding-md; @action-sheet-close-icon-padding: 0 var(--van-padding-md);
@action-sheet-cancel-text-color: @gray-7; @action-sheet-cancel-text-color: var(--van-gray-7);
@action-sheet-cancel-padding-top: @padding-xs; @action-sheet-cancel-padding-top: var(--van-padding-xs);
@action-sheet-cancel-padding-color: @background-color; @action-sheet-cancel-padding-color: var(--van-background-color);
@action-sheet-loading-icon-size: 22px; @action-sheet-loading-icon-size: 22px;

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

@ -13,7 +13,7 @@
&__fields { &__fields {
overflow: hidden; overflow: hidden;
border-radius: @padding-xs; border-radius: var(--van-padding-xs);
.van-field__label { .van-field__label {
width: 4.1em; width: 4.1em;
@ -21,9 +21,9 @@
} }
&__default { &__default {
margin-top: @padding-sm; margin-top: var(--van-padding-sm);
overflow: hidden; overflow: hidden;
border-radius: @padding-xs; border-radius: var(--van-padding-xs);
} }
&__buttons { &__buttons {
@ -36,11 +36,11 @@
&-detail { &-detail {
&__search-item { &__search-item {
background-color: @gray-2; background-color: var(--van-gray-2);
} }
&__keyword { &__keyword {
color: @red; color: var(--van-red);
} }
&__finish { &__finish {

10
src/address-edit/var.less
View File

@ -1,7 +1,7 @@
@import '../style/var.less'; @import '../style/var.less';
@address-edit-padding: @padding-sm; @address-edit-padding: var(--van-padding-sm);
@address-edit-buttons-padding: @padding-xl @padding-base; @address-edit-buttons-padding: var(--van-padding-xl) var(--van-padding-base);
@address-edit-button-margin-bottom: @padding-sm; @address-edit-button-margin-bottom: var(--van-padding-sm);
@address-edit-detail-finish-color: @blue; @address-edit-detail-finish-color: var(--van-blue);
@address-edit-detail-finish-font-size: @font-size-sm; @address-edit-detail-finish-font-size: var(--van-font-size-sm);

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

@ -29,8 +29,8 @@
z-index: var(--van-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 var(--van-padding-md);
background-color: @white; background-color: var(--van-white);
.safe-area-inset-bottom(); .safe-area-inset-bottom();
} }
@ -49,11 +49,11 @@
.van-address-item { .van-address-item {
padding: var(--van-address-list-item-padding); padding: var(--van-address-list-item-padding);
background-color: @white; background-color: var(--van-white);
border-radius: @border-radius-lg; border-radius: var(--van-border-radius-lg);
&:not(:last-child) { &:not(:last-child) {
margin-bottom: @padding-sm; margin-bottom: var(--van-padding-sm);
} }
&__value { &__value {
@ -63,14 +63,14 @@
&__name { &__name {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: @padding-xs; margin-bottom: var(--van-padding-xs);
font-size: @font-size-lg; font-size: var(--van-font-size-lg);
line-height: @line-height-lg; line-height: var(--van-line-height-lg);
} }
&__tag { &__tag {
flex: none; flex: none;
margin-left: @padding-xs; margin-left: var(--van-padding-xs);
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
line-height: 1.4em; line-height: 1.4em;
@ -92,8 +92,8 @@
&__edit { &__edit {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: @padding-md; right: var(--van-padding-md);
color: @gray-6; color: var(--van-gray-6);
font-size: var(--van-address-list-edit-icon-size); font-size: var(--van-address-list-edit-icon-size);
transform: translate(0, -50%); transform: translate(0, -50%);
} }
@ -103,7 +103,7 @@
} }
.van-radio__label { .van-radio__label {
margin-left: @padding-sm; margin-left: var(--van-padding-sm);
} }
.van-radio__icon--checked .van-icon { .van-radio__icon--checked .van-icon {

21
src/address-list/var.less
View File

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

4
src/badge/index.less
View File

@ -25,8 +25,8 @@
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
background-color: var(--van-badge-background-color); background-color: var(--van-badge-background-color);
border: var(--van-badge-border-width) solid @white; border: var(--van-badge-border-width) solid var(--van-white);
border-radius: @border-radius-max; border-radius: var(--van-border-radius-max);
&--fixed { &--fixed {
position: absolute; position: absolute;

12
src/badge/var.less
View File

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

10
src/button/index.less
View File

@ -49,7 +49,7 @@
text-align: center; text-align: center;
border-radius: var(--van-button-border-radius); border-radius: var(--van-button-border-radius);
cursor: pointer; cursor: pointer;
transition: opacity @animation-duration-fast; transition: opacity var(--van-animation-duration-fast);
-webkit-appearance: none; -webkit-appearance: none;
&::before { &::before {
@ -58,9 +58,9 @@
left: 50%; left: 50%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: @black; background-color: var(--van-black);
border: inherit; border: inherit;
border-color: @black; border-color: var(--van-black);
border-radius: inherit; /* inherit parent's border radius */ border-radius: inherit; /* inherit parent's border radius */
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: 0; opacity: 0;
@ -166,7 +166,7 @@
font-size: var(--van-button-mini-font-size); font-size: var(--van-button-mini-font-size);
& + .van-button--mini { & + .van-button--mini {
margin-left: @padding-base; margin-left: var(--van-padding-base);
} }
} }
@ -216,7 +216,7 @@
&__loading + &__text, &__loading + &__text,
&__text + &__icon, &__text + &__icon,
&__text + &__loading { &__text + &__loading {
margin-left: @padding-base; margin-left: var(--van-padding-base);
} }
&--hairline { &--hairline {

52
src/button/var.less
View File

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

12
src/calendar/index.less
View File

@ -60,7 +60,7 @@
&__header-title, &__header-title,
&__header-subtitle { &__header-subtitle {
height: var(--van-calendar-header-title-height); height: var(--van-calendar-header-title-height);
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
line-height: var(--van-calendar-header-title-height); line-height: var(--van-calendar-header-title-height);
text-align: center; text-align: center;
} }
@ -137,16 +137,16 @@
} }
&--start { &--start {
border-radius: @border-radius-md 0 0 @border-radius-md; border-radius: var(--van-border-radius-md) 0 0 var(--van-border-radius-md);
} }
&--end { &--end {
border-radius: 0 @border-radius-md @border-radius-md 0; border-radius: 0 var(--van-border-radius-md) var(--van-border-radius-md) 0;
} }
&--start-end, &--start-end,
&--multiple-selected { &--multiple-selected {
border-radius: @border-radius-md; border-radius: var(--van-border-radius-md);
} }
&--middle { &--middle {
@ -196,12 +196,12 @@
height: var(--van-calendar-selected-day-size); height: var(--van-calendar-selected-day-size);
color: var(--van-calendar-selected-day-color); color: var(--van-calendar-selected-day-color);
background-color: var(--van-calendar-selected-day-background-color); background-color: var(--van-calendar-selected-day-background-color);
border-radius: @border-radius-md; border-radius: var(--van-border-radius-md);
} }
&__footer { &__footer {
flex-shrink: 0; flex-shrink: 0;
padding: 0 @padding-md; padding: 0 var(--van-padding-md);
.safe-area-inset-bottom(); .safe-area-inset-bottom();
&--unfit { &--unfit {

30
src/calendar/var.less
View File

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

10
src/card/index.less
View File

@ -28,7 +28,7 @@
background-color: var(--van-card-background-color); background-color: var(--van-card-background-color);
&:not(:first-child) { &:not(:first-child) {
margin-top: @padding-xs; margin-top: var(--van-padding-xs);
} }
&__header { &__header {
@ -40,7 +40,7 @@
flex: none; flex: none;
width: var(--van-card-thumb-size); width: var(--van-card-thumb-size);
height: var(--van-card-thumb-size); height: var(--van-card-thumb-size);
margin-right: @padding-xs; margin-right: var(--van-padding-xs);
img { img {
border-radius: var(--van-card-thumb-border-radius); border-radius: var(--van-card-thumb-border-radius);
@ -68,7 +68,7 @@
&__title { &__title {
max-height: 32px; max-height: 32px;
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
line-height: var(--van-card-title-line-height); line-height: var(--van-card-title-line-height);
} }
@ -79,13 +79,13 @@
} }
&__bottom { &__bottom {
line-height: @line-height-md; line-height: var(--van-line-height-md);
} }
&__price { &__price {
display: inline-block; display: inline-block;
color: var(--van-card-price-color); color: var(--van-card-price-color);
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
font-size: var(--van-card-price-font-size); font-size: var(--van-card-price-font-size);
} }

28
src/card/var.less
View File

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

14
src/cascader/index.less
View File

@ -26,7 +26,7 @@
} }
&__title { &__title {
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
font-size: var(--van-cascader-title-font-size); font-size: var(--van-cascader-title-font-size);
line-height: var(--van-cascader-title-line-height); line-height: var(--van-cascader-title-line-height);
} }
@ -58,7 +58,7 @@
&__tab { &__tab {
color: var(--van-cascader-tab-color); color: var(--van-cascader-tab-color);
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
&--unselected { &--unselected {
color: var(--van-cascader-unselected-tab-color); color: var(--van-cascader-unselected-tab-color);
@ -70,17 +70,17 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px @padding-md; padding: 10px var(--van-padding-md);
font-size: @font-size-md; font-size: var(--van-font-size-md);
line-height: @line-height-md; line-height: var(--van-line-height-md);
&:active { &:active {
background-color: @active-color; background-color: var(--van-active-color);
} }
&--selected { &--selected {
color: var(--van-cascader-active-color); color: var(--van-cascader-active-color);
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
} }
} }

14
src/cascader/var.less
View File

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

9
src/cell-group/var.less
View File

@ -1,7 +1,8 @@
@import '../style/var.less'; @import '../style/var.less';
@cell-group-background-color: @white; @cell-group-background-color: var(--van-white);
@cell-group-title-color: @gray-6; @cell-group-title-color: var(--van-gray-6);
@cell-group-title-padding: @padding-md @padding-md @padding-xs; @cell-group-title-padding: var(--van-padding-md) var(--van-padding-md)
@cell-group-title-font-size: @font-size-md; var(--van-padding-xs);
@cell-group-title-font-size: var(--van-font-size-md);
@cell-group-title-line-height: 16px; @cell-group-title-line-height: 16px;

10
src/cell/index.less
View File

@ -36,7 +36,7 @@
background-color: var(--van-cell-background-color); background-color: var(--van-cell-background-color);
&::after { &::after {
.hairline-bottom(var(--van-cell-border-color), @padding-md, @padding-md); .hairline-bottom(var(--van-cell-border-color), var(--van-padding-md), var(--van-padding-md));
} }
&:last-child::after, &:last-child::after,
@ -65,7 +65,7 @@
word-wrap: break-word; word-wrap: break-word;
&--alone { &--alone {
color: @text-color; color: var(--van-text-color);
text-align: left; text-align: left;
} }
} }
@ -78,11 +78,11 @@
} }
&__left-icon { &__left-icon {
margin-right: @padding-base; margin-right: var(--van-padding-base);
} }
&__right-icon { &__right-icon {
margin-left: @padding-base; margin-left: var(--van-padding-base);
color: var(--van-cell-right-icon-color); color: var(--van-cell-right-icon-color);
} }
@ -99,7 +99,7 @@
&::before { &::before {
position: absolute; position: absolute;
left: @padding-xs; left: var(--van-padding-xs);
color: var(--van-cell-required-color); color: var(--van-cell-required-color);
font-size: var(--van-cell-font-size); font-size: var(--van-cell-font-size);
content: '*'; content: '*';

32
src/cell/var.less
View File

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

4
src/checkbox/index.less
View File

@ -28,7 +28,7 @@
} }
&--horizontal { &--horizontal {
margin-right: @padding-sm; margin-right: var(--van-padding-sm);
} }
&__icon { &__icon {
@ -60,7 +60,7 @@
&--checked { &--checked {
.van-icon { .van-icon {
color: @white; color: var(--van-white);
background-color: var(--van-checkbox-checked-icon-color); background-color: var(--van-checkbox-checked-icon-color);
border-color: var(--van-checkbox-checked-icon-color); border-color: var(--van-checkbox-checked-icon-color);
} }

16
src/checkbox/var.less
View File

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

2
src/circle/index.less
View File

@ -41,7 +41,7 @@
left: 0; left: 0;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 0 @padding-base; padding: 0 var(--van-padding-base);
color: var(--van-circle-text-color); color: var(--van-circle-text-color);
font-weight: var(--van-circle-text-font-weight); font-weight: var(--van-circle-text-font-weight);
font-size: var(--van-circle-text-font-size); font-size: var(--van-circle-text-font-size);

12
src/circle/var.less
View File

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

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

@ -16,7 +16,7 @@
&--border { &--border {
&::after { &::after {
.hairline-top(@border-color, @padding-md, @padding-md); .hairline-top(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
} }
} }
@ -29,7 +29,7 @@
} }
&::after { &::after {
right: @padding-md; right: var(--van-padding-md);
display: none; display: none;
} }

12
src/collapse-item/var.less
View File

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

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

@ -38,8 +38,8 @@
#ff6c6c 20%, #ff6c6c 20%,
transparent 0, transparent 0,
transparent 25%, transparent 25%,
@blue 0, var(--van-blue) 0,
@blue 45%, var(--van-blue) 45%,
transparent 0, transparent 0,
transparent 50% transparent 50%
); );

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

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

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

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

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

@ -20,13 +20,13 @@
&__item-value { &__item-value {
display: flex; display: flex;
align-items: center; align-items: center;
padding-right: @padding-xl; padding-right: var(--van-padding-xl);
padding-left: @padding-xs; padding-left: var(--van-padding-xs);
} }
&__item-tag { &__item-tag {
flex: none; flex: none;
margin-left: @padding-xs; margin-left: var(--van-padding-xs);
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
line-height: 1.4em; line-height: 1.4em;
@ -56,8 +56,8 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: var(--van-contact-list-add-button-z-index); z-index: var(--van-contact-list-add-button-z-index);
padding: 0 @padding-md; padding: 0 var(--van-padding-md);
background-color: @white; background-color: var(--van-white);
.safe-area-inset-bottom(); .safe-area-inset-bottom();
} }

4
src/contact-list/var.less
View File

@ -2,5 +2,5 @@
@contact-list-edit-icon-size: 16px; @contact-list-edit-icon-size: 16px;
@contact-list-add-button-z-index: 999; @contact-list-add-button-z-index: 999;
@contact-list-item-padding: @padding-md; @contact-list-item-padding: var(--van-padding-md);
@contact-list-item-radio-icon-color: @red; @contact-list-item-radio-icon-color: var(--van-red);

6
src/count-down/var.less
View File

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

2
src/coupon-cell/var.less
View File

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

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

@ -21,13 +21,13 @@
.van-field__body { .van-field__body {
height: 34px; height: 34px;
padding-left: @padding-sm; padding-left: var(--van-padding-sm);
line-height: 34px; line-height: 34px;
background: @gray-1; background: var(--van-gray-1);
border-radius: 17px; border-radius: 17px;
&::placeholder { &::placeholder {
color: @gray-5; color: var(--van-gray-5);
} }
} }
@ -39,29 +39,29 @@
&__exchange-bar { &__exchange-bar {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: @white; background-color: var(--van-white);
} }
&__exchange { &__exchange {
flex: none; flex: none;
height: var(--van-coupon-list-exchange-button-height); height: var(--van-coupon-list-exchange-button-height);
font-size: @font-size-lg; font-size: var(--van-font-size-lg);
line-height: calc(var(--van-coupon-list-exchange-button-height) - 2px); line-height: calc(var(--van-coupon-list-exchange-button-height) - 2px);
border: 0; border: 0;
} }
.van-tabs__wrap { .van-tabs__wrap {
box-shadow: 0 6px 12px -12px @gray-6; box-shadow: 0 6px 12px -12px var(--van-gray-6);
} }
&__list { &__list {
box-sizing: border-box; box-sizing: border-box;
padding: @padding-md 0 @padding-lg; padding: var(--van-padding-md) 0 var(--van-padding-lg);
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&--with-bottom { &--with-bottom {
padding-bottom: @padding-md + 50px; padding-bottom: calc(var(--van-padding-md) + 50px);
} }
} }
@ -72,9 +72,9 @@
z-index: 999; z-index: 999;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 5px @padding-md; padding: 5px var(--van-padding-md);
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
background-color: @white; background-color: var(--van-white);
} }
&__close { &__close {
@ -86,7 +86,7 @@
text-align: center; text-align: center;
p { p {
margin: @padding-md 0; margin: var(--van-padding-md) 0;
color: var(--van-coupon-list-empty-tip-color); color: var(--van-coupon-list-empty-tip-color);
font-size: var(--van-coupon-list-empty-tip-font-size); font-size: var(--van-coupon-list-empty-tip-font-size);
line-height: var(--van-coupon-list-empty-tip-line-height); line-height: var(--van-coupon-list-empty-tip-line-height);

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

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

16
src/coupon/index.less
View File

@ -37,13 +37,13 @@
box-sizing: border-box; box-sizing: border-box;
min-height: var(--van-coupon-content-height); min-height: var(--van-coupon-content-height);
padding: var(--van-coupon-content-padding); padding: var(--van-coupon-content-padding);
color: @gray-8; color: var(--van-gray-8);
} }
&__head { &__head {
position: relative; position: relative;
min-width: var(--van-coupon-head-width); min-width: var(--van-coupon-head-width);
padding: 0 @padding-xs; padding: 0 var(--van-padding-xs);
color: var(--van-coupon-amount-color); color: var(--van-coupon-amount-color);
text-align: center; text-align: center;
} }
@ -57,7 +57,7 @@
&__amount { &__amount {
margin-bottom: 6px; margin-bottom: 6px;
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
font-size: var(--van-coupon-amount-font-size); font-size: var(--van-coupon-amount-font-size);
.ellipsis(); .ellipsis();
@ -72,7 +72,7 @@
} }
&__condition { &__condition {
font-size: @font-size-sm; font-size: var(--van-font-size-sm);
line-height: 16px; line-height: 16px;
white-space: pre-wrap; white-space: pre-wrap;
} }
@ -88,17 +88,17 @@
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
font-size: var(--van-coupon-name-font-size); font-size: var(--van-coupon-name-font-size);
line-height: @line-height-md; line-height: var(--van-line-height-md);
} }
&__valid { &__valid {
font-size: @font-size-sm; font-size: var(--van-font-size-sm);
} }
&__corner { &__corner {
position: absolute; position: absolute;
top: 0; top: 0;
right: @padding-md; right: var(--van-padding-md);
bottom: 0; bottom: 0;
.van-checkbox__icon--checked .van-icon { .van-checkbox__icon--checked .van-icon {
@ -109,7 +109,7 @@
&__description { &__description {
padding: var(--van-coupon-description-padding); padding: var(--van-coupon-description-padding);
font-size: @font-size-sm; font-size: var(--van-font-size-sm);
border-top: 1px dashed var(--van-coupon-description-border-color); border-top: 1px dashed var(--van-coupon-description-border-color);
} }

20
src/coupon/var.less
View File

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

10
src/dialog/index.less
View File

@ -65,7 +65,7 @@
font-size: var(--van-dialog-message-font-size); font-size: var(--van-dialog-message-font-size);
line-height: var(--van-dialog-message-line-height); line-height: var(--van-dialog-message-line-height);
// allow newline charactor // 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;
@ -110,12 +110,12 @@
.van-dialog__footer { .van-dialog__footer {
position: relative; position: relative;
height: auto; height: auto;
padding: @padding-xs @padding-lg @padding-md; padding: var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md);
} }
.van-dialog__message { .van-dialog__message {
padding-bottom: @padding-md; padding-bottom: var(--van-padding-md);
color: @text-color; color: var(--van-text-color);
} }
.van-dialog__confirm, .van-dialog__confirm,
@ -124,7 +124,7 @@
} }
.van-dialog__confirm { .van-dialog__confirm {
color: @white; color: var(--van-white);
} }
} }

22
src/dialog/var.less
View File

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

2
src/divider/index.less
View File

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

10
src/divider/var.less
View File

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

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

@ -21,10 +21,10 @@
text-align: left; text-align: left;
&--active { &--active {
color: @dropdown-menu-option-active-color; color: var(--van-dropdown-menu-option-active-color);
.van-dropdown-item__icon { .van-dropdown-item__icon {
color: @dropdown-menu-option-active-color; color: var(--van-dropdown-menu-option-active-color);
} }
} }
} }
@ -39,6 +39,6 @@
&__content { &__content {
position: absolute; position: absolute;
max-height: @dropdown-menu-content-max-height; max-height: var(--van-dropdown-menu-content-max-height);
} }
} }

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

@ -26,7 +26,7 @@
box-shadow: var(--van-dropdown-menu-box-shadow); box-shadow: var(--van-dropdown-menu-box-shadow);
&--opened { &--opened {
z-index: @dropdown-item-z-index + 1; z-index: calc(var(--van-dropdown-item-z-index) + 1);
} }
} }
@ -39,7 +39,7 @@
cursor: pointer; cursor: pointer;
&:active { &:active {
opacity: @active-opacity; opacity: var(--van-active-opacity);
} }
&--disabled { &--disabled {
@ -68,7 +68,7 @@
right: -4px; right: -4px;
margin-top: -5px; margin-top: -5px;
border: 3px solid; border: 3px solid;
border-color: transparent transparent @gray-4 @gray-4; border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
transform: rotate(-45deg); transform: rotate(-45deg);
opacity: 0.8; opacity: 0.8;
content: ''; content: '';

16
src/dropdown-menu/var.less
View File

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

10
src/empty/var.less
View File

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

14
src/field/index.less
View File

@ -99,14 +99,14 @@
&--custom { &--custom {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: @cell-line-height; min-height: var(--van-cell-line-height);
} }
// for ios wechat // for ios wechat
&[type='date'], &[type='date'],
&[type='time'], &[type='time'],
&[type='datetime-local'] { &[type='datetime-local'] {
min-height: @cell-line-height; min-height: var(--van-cell-line-height);
} }
// for safari // for safari
@ -124,8 +124,8 @@
&__clear, &__clear,
&__right-icon { &__right-icon {
margin-right: -@padding-xs; margin-right: -var(--van-padding-xs);
padding: 0 @padding-xs; padding: 0 var(--van-padding-xs);
line-height: inherit; line-height: inherit;
} }
@ -143,7 +143,7 @@
} }
&__left-icon { &__left-icon {
margin-right: @padding-base; margin-right: var(--van-padding-base);
} }
&__right-icon { &__right-icon {
@ -151,7 +151,7 @@
} }
&__button { &__button {
padding-left: @padding-xs; padding-left: var(--van-padding-xs);
} }
&__error-message { &__error-message {
@ -169,7 +169,7 @@
} }
&__word-limit { &__word-limit {
margin-top: @padding-base; margin-top: var(--van-padding-base);
color: var(--van-field-word-limit-color); color: var(--van-field-word-limit-color);
font-size: var(--van-field-word-limit-font-size); font-size: var(--van-field-word-limit-font-size);
line-height: var(--van-field-word-limit-line-height); line-height: var(--van-field-word-limit-line-height);

24
src/field/var.less
View File

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

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

@ -30,7 +30,7 @@
} }
&__icon + &__text { &__icon + &__text {
margin-top: @padding-xs; margin-top: var(--van-padding-xs);
} }
&__content { &__content {
@ -43,7 +43,8 @@
&::after { &::after {
z-index: 1; z-index: 1;
border-width: 0 @border-width-base @border-width-base 0; border-width: 0 var(--van-border-width-base) var(--van-border-width-base)
0;
} }
&--square { &--square {
@ -63,13 +64,13 @@
.van-grid-item__icon + .van-grid-item__text { .van-grid-item__icon + .van-grid-item__text {
margin-top: 0; margin-top: 0;
margin-left: @padding-xs; margin-left: var(--van-padding-xs);
} }
} }
&--surround { &--surround {
&::after { &::after {
border-width: @border-width-base; border-width: var(--van-border-width-base);
} }
} }

10
src/grid-item/var.less
View File

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

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

@ -71,7 +71,7 @@
&__index { &__index {
position: absolute; position: absolute;
top: @padding-md; top: var(--van-padding-md);
left: 50%; left: 50%;
color: var(--van-image-preview-index-text-color); color: var(--van-image-preview-index-text-color);
font-size: var(--van-image-preview-index-font-size); font-size: var(--van-image-preview-index-font-size);

14
src/image-preview/var.less
View File

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

10
src/image/var.less
View File

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

12
src/index-anchor/var.less
View File

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

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

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

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

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

4
src/list/var.less
View File

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

4
src/loading/index.less
View File

@ -68,7 +68,7 @@
&__text { &__text {
display: inline-block; display: inline-block;
margin-left: @padding-xs; margin-left: var(--van-padding-xs);
color: var(--van-loading-text-color); color: var(--van-loading-text-color);
font-size: var(--van-loading-text-font-size); font-size: var(--van-loading-text-font-size);
vertical-align: middle; vertical-align: middle;
@ -80,7 +80,7 @@
align-items: center; align-items: center;
.van-loading__text { .van-loading__text {
margin: @padding-xs 0 0; margin: var(--van-padding-xs) 0 0;
} }
} }
} }

6
src/loading/var.less
View File

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

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

@ -14,7 +14,7 @@
.van-nav-bar { .van-nav-bar {
position: relative; position: relative;
z-index: var(--van-nav-bar-z-index); z-index: var(--van-nav-bar-z-index);
line-height: @line-height-lg; line-height: var(--van-line-height-lg);
text-align: center; text-align: center;
background-color: var(--van-nav-bar-background-color); background-color: var(--van-nav-bar-background-color);
user-select: none; user-select: none;
@ -43,7 +43,7 @@
} }
&__arrow { &__arrow {
margin-right: @padding-base; margin-right: var(--van-padding-base);
font-size: var(--van-nav-bar-arrow-size); font-size: var(--van-nav-bar-arrow-size);
} }
@ -51,7 +51,7 @@
max-width: 60%; max-width: 60%;
margin: 0 auto; margin: 0 auto;
color: var(--van-nav-bar-title-text-color); color: var(--van-nav-bar-title-text-color);
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
font-size: var(--van-nav-bar-title-font-size); font-size: var(--van-nav-bar-title-font-size);
} }
@ -62,12 +62,12 @@
bottom: 0; bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 @padding-md; padding: 0 var(--van-padding-md);
font-size: @font-size-md; font-size: var(--van-font-size-md);
cursor: pointer; cursor: pointer;
&:active { &:active {
opacity: @active-opacity; opacity: var(--van-active-opacity);
} }
} }

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

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

10
src/notice-bar/var.less
View File

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

2
src/notify/index.less
View File

@ -21,7 +21,7 @@
font-size: var(--van-notify-font-size); font-size: var(--van-notify-font-size);
line-height: var(--van-notify-line-height); line-height: var(--van-notify-line-height);
// allow newline charactor // 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;

16
src/notify/var.less
View File

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

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

@ -76,7 +76,7 @@
cursor: pointer; cursor: pointer;
&:active { &:active {
opacity: @active-opacity; opacity: var(--van-active-opacity);
} }
} }
@ -98,8 +98,8 @@
height: var(--van-number-keyboard-key-height); height: var(--van-number-keyboard-key-height);
font-size: var(--van-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: var(--van-white);
border-radius: @border-radius-lg; border-radius: var(--van-border-radius-lg);
cursor: pointer; cursor: pointer;
&--large { &--large {
@ -127,7 +127,7 @@
background-color: var(--van-number-keyboard-button-background-color); background-color: var(--van-number-keyboard-button-background-color);
&.van-key--active { &.van-key--active {
background-color: var(--van-number-keyboard-button-active-color); opacity: var(--van-active-opacity);
} }
} }

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

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

13
src/pagination/index.less
View File

@ -34,27 +34,28 @@
user-select: none; user-select: none;
&:active { &:active {
color: @white; color: var(--van-white);
background-color: var(--van-pagination-item-default-color); background-color: var(--van-pagination-item-default-color);
} }
&::after { &::after {
border-width: @border-width-base 0 @border-width-base @border-width-base; border-width: var(--van-border-width-base) 0 var(--van-border-width-base)
var(--van-border-width-base);
} }
&:last-child::after { &:last-child::after {
border-right-width: @border-width-base; border-right-width: var(--van-border-width-base);
} }
&--active { &--active {
color: @white; color: var(--van-white);
background-color: var(--van-pagination-item-default-color); background-color: var(--van-pagination-item-default-color);
} }
} }
&__prev, &__prev,
&__next { &__next {
padding: 0 @padding-base; padding: 0 var(--van-padding-base);
cursor: pointer; cursor: pointer;
} }
@ -82,7 +83,7 @@
.van-pagination__prev, .van-pagination__prev,
.van-pagination__next { .van-pagination__next {
&::after { &::after {
border-width: @border-width-base; border-width: var(--van-border-width-base);
} }
} }
} }

14
src/pagination/var.less
View File

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

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

@ -24,7 +24,7 @@
&__info, &__info,
&__error-info { &__error-info {
margin-top: @padding-md; margin-top: var(--van-padding-md);
font-size: var(--van-password-input-info-font-size); font-size: var(--van-password-input-info-font-size);
text-align: center; text-align: center;
} }

14
src/password-input/var.less
View File

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

10
src/picker/index.less
View File

@ -38,7 +38,7 @@
cursor: pointer; cursor: pointer;
&:active { &:active {
opacity: @active-opacity; opacity: var(--van-active-opacity);
} }
} }
@ -52,7 +52,7 @@
&__title { &__title {
max-width: 50%; max-width: 50%;
font-weight: @font-weight-bold; font-weight: var(--van-font-weight-bold);
font-size: var(--van-picker-title-font-size); font-size: var(--van-picker-title-font-size);
line-height: var(--van-picker-title-line-height); line-height: var(--van-picker-title-line-height);
text-align: center; text-align: center;
@ -81,8 +81,8 @@
&__frame { &__frame {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: @padding-md; right: var(--van-padding-md);
left: @padding-md; left: var(--van-padding-md);
z-index: 2; z-index: 2;
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; pointer-events: none;
@ -121,7 +121,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 @padding-base; padding: 0 var(--van-padding-base);
color: var(--van-picker-option-text-color); color: var(--van-picker-option-text-color);
&--disabled { &--disabled {

20
src/picker/var.less
View File

@ -1,15 +1,15 @@
@import '../style/var.less'; @import '../style/var.less';
@picker-background-color: @white; @picker-background-color: var(--van-white);
@picker-toolbar-height: 44px; @picker-toolbar-height: 44px;
@picker-title-font-size: @font-size-lg; @picker-title-font-size: var(--van-font-size-lg);
@picker-title-line-height: @line-height-md; @picker-title-line-height: var(--van-line-height-md);
@picker-action-padding: 0 @padding-md; @picker-action-padding: 0 var(--van-padding-md);
@picker-action-font-size: @font-size-md; @picker-action-font-size: var(--van-font-size-md);
@picker-confirm-action-color: @text-link-color; @picker-confirm-action-color: var(--van-text-link-color);
@picker-cancel-action-color: @gray-6; @picker-cancel-action-color: var(--van-gray-6);
@picker-option-font-size: @font-size-lg; @picker-option-font-size: var(--van-font-size-lg);
@picker-option-text-color: @black; @picker-option-text-color: var(--van-black);
@picker-option-disabled-opacity: 0.3; @picker-option-disabled-opacity: 0.3;
@picker-loading-icon-color: @blue; @picker-loading-icon-color: var(--van-blue);
@picker-loading-mask-color: rgba(255, 255, 255, 0.9); @picker-loading-mask-color: rgba(255, 255, 255, 0.9);

30
src/popover/index.less
View File

@ -47,9 +47,9 @@
box-sizing: border-box; box-sizing: border-box;
width: var(--van-popover-action-width); width: var(--van-popover-action-width);
height: var(--van-popover-action-height); height: var(--van-popover-action-height);
padding: 0 @padding-md; padding: 0 var(--van-padding-md);
font-size: var(--van-popover-action-font-size); font-size: var(--van-popover-action-font-size);
line-height: @line-height-md; line-height: var(--van-line-height-md);
cursor: pointer; cursor: pointer;
&:last-child { &:last-child {
@ -67,7 +67,7 @@
} }
&-icon { &-icon {
margin-right: @padding-xs; margin-right: var(--van-padding-xs);
font-size: var(--van-popover-action-icon-size); font-size: var(--van-popover-action-icon-size);
} }
@ -99,7 +99,7 @@
transform-origin: 0 100%; transform-origin: 0 100%;
.van-popover__arrow { .van-popover__arrow {
left: @padding-md; left: var(--van-padding-md);
} }
} }
@ -107,7 +107,7 @@
transform-origin: 100% 100%; transform-origin: 100% 100%;
.van-popover__arrow { .van-popover__arrow {
right: @padding-md; right: var(--van-padding-md);
} }
} }
@ -132,7 +132,7 @@
transform-origin: 100% 0; transform-origin: 100% 0;
.van-popover__arrow { .van-popover__arrow {
top: @padding-md; top: var(--van-padding-md);
} }
} }
@ -140,7 +140,7 @@
transform-origin: 100% 100%; transform-origin: 100% 100%;
.van-popover__arrow { .van-popover__arrow {
bottom: @padding-md; bottom: var(--van-padding-md);
} }
} }
@ -165,7 +165,7 @@
transform-origin: 0 0; transform-origin: 0 0;
.van-popover__arrow { .van-popover__arrow {
top: @padding-md; top: var(--van-padding-md);
} }
} }
@ -173,7 +173,7 @@
transform-origin: 0 100%; transform-origin: 0 100%;
.van-popover__arrow { .van-popover__arrow {
bottom: @padding-md; bottom: var(--van-padding-md);
} }
} }
@ -198,7 +198,7 @@
transform-origin: 0 0; transform-origin: 0 0;
.van-popover__arrow { .van-popover__arrow {
left: @padding-md; left: var(--van-padding-md);
} }
} }
@ -206,7 +206,7 @@
transform-origin: 100% 0; transform-origin: 100% 0;
.van-popover__arrow { .van-popover__arrow {
right: @padding-md; right: var(--van-padding-md);
} }
} }
@ -224,7 +224,7 @@
.van-popover__action { .van-popover__action {
&:active { &:active {
background-color: @active-color; background-color: var(--van-active-color);
} }
&--disabled { &--disabled {
@ -265,7 +265,7 @@
.van-popover__action-text { .van-popover__action-text {
&::after { &::after {
border-color: @gray-7; border-color: var(--van-gray-7);
} }
} }
} }
@ -277,10 +277,10 @@
} }
&-zoom-enter-active { &-zoom-enter-active {
transition-timing-function: @animation-timing-function-enter; transition-timing-function: var(--van-animation-timing-function-enter);
} }
&-zoom-leave-active { &-zoom-leave-active {
transition-timing-function: @animation-timing-function-leave; transition-timing-function: var(--van-animation-timing-function-leave);
} }
} }

16
src/popover/var.less
View File

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

4
src/popup/index.less
View File

@ -87,14 +87,14 @@
&-slide-left-enter-active, &-slide-left-enter-active,
&-slide-right-enter-active, &-slide-right-enter-active,
&-slide-bottom-enter-active { &-slide-bottom-enter-active {
transition-timing-function: @animation-timing-function-enter; transition-timing-function: var(--van-animation-timing-function-enter);
} }
&-slide-top-leave-active, &-slide-top-leave-active,
&-slide-left-leave-active, &-slide-left-leave-active,
&-slide-right-leave-active, &-slide-right-leave-active,
&-slide-bottom-leave-active { &-slide-bottom-leave-active {
transition-timing-function: @animation-timing-function-leave; transition-timing-function: var(--van-animation-timing-function-leave);
} }
&-slide-top-enter-from, &-slide-top-enter-from,

8
src/popup/var.less
View File

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

10
src/progress/var.less
View File

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

4
src/pull-refresh/var.less
View File

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

4
src/radio/index.less
View File

@ -28,7 +28,7 @@
} }
&--horizontal { &--horizontal {
margin-right: @padding-sm; margin-right: var(--van-padding-sm);
} }
&__icon { &__icon {
@ -60,7 +60,7 @@
&--checked { &--checked {
.van-icon { .van-icon {
color: @white; color: var(--van-white);
background-color: var(--van-radio-checked-icon-color); background-color: var(--van-radio-checked-icon-color);
border-color: var(--van-radio-checked-icon-color); border-color: var(--van-radio-checked-icon-color);
} }

16
src/radio/var.less
View File

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

8
src/rate/var.less
View File

@ -1,7 +1,7 @@
@import '../style/var.less'; @import '../style/var.less';
@rate-icon-size: 20px; @rate-icon-size: 20px;
@rate-icon-gutter: @padding-base; @rate-icon-gutter: var(--van-padding-base);
@rate-icon-void-color: @gray-5; @rate-icon-void-color: var(--van-gray-5);
@rate-icon-full-color: @red; @rate-icon-full-color: var(--van-red);
@rate-icon-disabled-color: @gray-5; @rate-icon-disabled-color: var(--van-gray-5);

10
src/search/index.less
View File

@ -24,12 +24,12 @@
&__content { &__content {
display: flex; display: flex;
flex: 1; flex: 1;
padding-left: @padding-sm; padding-left: var(--van-padding-sm);
background-color: var(--van-search-content-background-color); background-color: var(--van-search-content-background-color);
border-radius: @border-radius-sm; border-radius: var(--van-border-radius-sm);
&--round { &--round {
border-radius: @border-radius-max; border-radius: var(--van-border-radius-max);
} }
} }
@ -42,7 +42,7 @@
.van-cell { .van-cell {
flex: 1; flex: 1;
padding: 5px @padding-xs 5px 0; padding: 5px var(--van-padding-xs) 5px 0;
background-color: transparent; background-color: transparent;
&__left-icon { &__left-icon {
@ -72,7 +72,7 @@
user-select: none; user-select: none;
&:active { &:active {
background-color: @active-color; background-color: var(--van-active-color);
} }
} }
} }

18
src/search/var.less
View File

@ -1,13 +1,13 @@
@import '../style/var.less'; @import '../style/var.less';
@search-padding: 10px @padding-sm; @search-padding: 10px var(--van-padding-sm);
@search-background-color: @white; @search-background-color: var(--van-white);
@search-content-background-color: @gray-1; @search-content-background-color: var(--van-gray-1);
@search-input-height: 34px; @search-input-height: 34px;
@search-label-padding: 0 5px; @search-label-padding: 0 5px;
@search-label-color: @text-color; @search-label-color: var(--van-text-color);
@search-label-font-size: @font-size-md; @search-label-font-size: var(--van-font-size-md);
@search-left-icon-color: @gray-6; @search-left-icon-color: var(--van-gray-6);
@search-action-padding: 0 @padding-xs; @search-action-padding: 0 var(--van-padding-xs);
@search-action-text-color: @text-color; @search-action-text-color: var(--van-text-color);
@search-action-font-size: @font-size-md; @search-action-font-size: var(--van-font-size-md);

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

@ -26,7 +26,7 @@
} }
&__title { &__title {
margin-top: @padding-xs; margin-top: var(--van-padding-xs);
color: var(--van-share-sheet-title-color); color: var(--van-share-sheet-title-color);
font-weight: normal; font-weight: normal;
font-size: var(--van-share-sheet-title-font-size); font-size: var(--van-share-sheet-title-font-size);
@ -35,7 +35,7 @@
&__description { &__description {
display: block; display: block;
margin-top: @padding-xs; margin-top: var(--van-padding-xs);
color: var(--van-share-sheet-description-color); color: var(--van-share-sheet-description-color);
font-size: var(--van-share-sheet-description-font-size); font-size: var(--van-share-sheet-description-font-size);
line-height: var(--van-share-sheet-description-line-height); line-height: var(--van-share-sheet-description-line-height);
@ -44,13 +44,13 @@
&__options { &__options {
position: relative; position: relative;
display: flex; display: flex;
padding: @padding-md 0 @padding-md @padding-xs; padding: var(--van-padding-md) 0 var(--van-padding-md) var(--van-padding-xs);
overflow-x: auto; overflow-x: auto;
overflow-y: visible; overflow-y: visible;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
&--border::before { &--border::before {
.hairline-top(@border-color, @padding-md); .hairline-top(var(--van-border-color), var(--van-padding-md));
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -66,25 +66,25 @@
user-select: none; user-select: none;
&:active { &:active {
opacity: @active-opacity; opacity: var(--van-active-opacity);
} }
} }
&__icon { &__icon {
width: var(--van-share-sheet-icon-size); width: var(--van-share-sheet-icon-size);
height: var(--van-share-sheet-icon-size); height: var(--van-share-sheet-icon-size);
margin: 0 @padding-md; margin: 0 var(--van-padding-md);
} }
&__name { &__name {
margin-top: @padding-xs; margin-top: var(--van-padding-xs);
padding: 0 @padding-base; padding: 0 var(--van-padding-base);
color: var(--van-share-sheet-option-name-color); color: var(--van-share-sheet-option-name-color);
font-size: var(--van-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 var(--van-padding-base);
color: var(--van-share-sheet-option-description-color); color: var(--van-share-sheet-option-description-color);
font-size: var(--van-share-sheet-option-description-font-size); font-size: var(--van-share-sheet-option-description-font-size);
} }
@ -102,13 +102,13 @@
&::before { &::before {
display: block; display: block;
height: @padding-xs; height: var(--van-padding-xs);
background-color: @background-color; background-color: var(--van-background-color);
content: ' '; content: ' ';
} }
&:active { &:active {
background-color: @active-color; background-color: var(--van-active-color);
} }
} }
} }

25
src/share-sheet/var.less
View File

@ -1,17 +1,18 @@
@import '../style/var.less'; @import '../style/var.less';
@share-sheet-header-padding: @padding-sm @padding-md @padding-base; @share-sheet-header-padding: var(--van-padding-sm) var(--van-padding-md)
@share-sheet-title-color: @text-color; var(--van-padding-base);
@share-sheet-title-font-size: @font-size-md; @share-sheet-title-color: var(--van-text-color);
@share-sheet-title-line-height: @line-height-md; @share-sheet-title-font-size: var(--van-font-size-md);
@share-sheet-description-color: @gray-6; @share-sheet-title-line-height: var(--van-line-height-md);
@share-sheet-description-font-size: @font-size-sm; @share-sheet-description-color: var(--van-gray-6);
@share-sheet-description-font-size: var(--van-font-size-sm);
@share-sheet-description-line-height: 16px; @share-sheet-description-line-height: 16px;
@share-sheet-icon-size: 48px; @share-sheet-icon-size: 48px;
@share-sheet-option-name-color: @gray-7; @share-sheet-option-name-color: var(--van-gray-7);
@share-sheet-option-name-font-size: @font-size-sm; @share-sheet-option-name-font-size: var(--van-font-size-sm);
@share-sheet-option-description-color: @gray-5; @share-sheet-option-description-color: var(--van-gray-5);
@share-sheet-option-description-font-size: @font-size-sm; @share-sheet-option-description-font-size: var(--van-font-size-sm);
@share-sheet-cancel-button-font-size: @font-size-lg; @share-sheet-cancel-button-font-size: var(--van-font-size-lg);
@share-sheet-cancel-button-height: 48px; @share-sheet-cancel-button-height: 48px;
@share-sheet-cancel-button-background: @white; @share-sheet-cancel-button-background: var(--van-white);

22
src/sidebar-item/var.less
View File

@ -1,15 +1,15 @@
@import '../style/var.less'; @import '../style/var.less';
@sidebar-font-size: @font-size-md; @sidebar-font-size: var(--van-font-size-md);
@sidebar-line-height: @line-height-md; @sidebar-line-height: var(--van-line-height-md);
@sidebar-text-color: @text-color; @sidebar-text-color: var(--van-text-color);
@sidebar-disabled-text-color: @gray-5; @sidebar-disabled-text-color: var(--van-gray-5);
@sidebar-padding: 20px @padding-sm; @sidebar-padding: 20px var(--van-padding-sm);
@sidebar-active-color: @active-color; @sidebar-active-color: var(--van-active-color);
@sidebar-background-color: @background-color; @sidebar-background-color: var(--van-background-color);
@sidebar-selected-font-weight: @font-weight-bold; @sidebar-selected-font-weight: var(--van-font-weight-bold);
@sidebar-selected-text-color: @text-color; @sidebar-selected-text-color: var(--van-text-color);
@sidebar-selected-border-width: 4px; @sidebar-selected-border-width: 4px;
@sidebar-selected-border-height: 16px; @sidebar-selected-border-height: 16px;
@sidebar-selected-border-color: @red; @sidebar-selected-border-color: var(--van-red);
@sidebar-selected-background-color: @white; @sidebar-selected-background-color: var(--van-white);

10
src/skeleton/index.less
View File

@ -12,17 +12,17 @@
.van-skeleton { .van-skeleton {
display: flex; display: flex;
padding: 0 @padding-md; padding: 0 var(--van-padding-md);
&__avatar { &__avatar {
flex-shrink: 0; flex-shrink: 0;
width: var(--van-skeleton-avatar-size); width: var(--van-skeleton-avatar-size);
height: var(--van-skeleton-avatar-size); height: var(--van-skeleton-avatar-size);
margin-right: @padding-md; margin-right: var(--van-padding-md);
background-color: var(--van-skeleton-avatar-background-color); background-color: var(--van-skeleton-avatar-background-color);
&--round { &--round {
border-radius: @border-radius-max; border-radius: var(--van-border-radius-max);
} }
} }
@ -31,7 +31,7 @@
} }
&__avatar + &__content { &__avatar + &__content {
padding-top: @padding-xs; padding-top: var(--van-padding-xs);
} }
&__row, &__row,
@ -63,7 +63,7 @@
&--round { &--round {
.van-skeleton__row, .van-skeleton__row,
.van-skeleton__title { .van-skeleton__title {
border-radius: @border-radius-max; border-radius: var(--van-border-radius-max);
} }
} }
} }

6
src/skeleton/var.less
View File

@ -1,9 +1,9 @@
@import '../style/var.less'; @import '../style/var.less';
@skeleton-row-height: 16px; @skeleton-row-height: 16px;
@skeleton-row-background-color: @active-color; @skeleton-row-background-color: var(--van-active-color);
@skeleton-row-margin-top: @padding-sm; @skeleton-row-margin-top: var(--van-padding-sm);
@skeleton-title-width: 40%; @skeleton-title-width: 40%;
@skeleton-avatar-size: 32px; @skeleton-avatar-size: 32px;
@skeleton-avatar-background-color: @active-color; @skeleton-avatar-background-color: var(--van-active-color);
@skeleton-animation-duration: 1.2s; @skeleton-animation-duration: 1.2s;

12
src/slider/index.less
View File

@ -17,15 +17,15 @@
width: 100%; width: 100%;
height: var(--van-slider-bar-height); height: var(--van-slider-bar-height);
background-color: var(--van-slider-inactive-background-color); background-color: var(--van-slider-inactive-background-color);
border-radius: @border-radius-max; border-radius: var(--van-border-radius-max);
cursor: pointer; cursor: pointer;
// use pseudo element to expand click area // use pseudo element to expand click area
&::before { &::before {
position: absolute; position: absolute;
top: -@padding-xs; top: -var(--van-padding-xs);
right: 0; right: 0;
bottom: -@padding-xs; bottom: -var(--van-padding-xs);
left: 0; left: 0;
content: ''; content: '';
} }
@ -36,7 +36,7 @@
height: 100%; height: 100%;
background-color: var(--van-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 var(--van-animation-duration-fast);
} }
&__button { &__button {
@ -98,9 +98,9 @@
// use pseudo element to expand click area // use pseudo element to expand click area
&::before { &::before {
top: 0; top: 0;
right: -@padding-xs; right: -var(--van-padding-xs);
bottom: 0; bottom: 0;
left: -@padding-xs; left: -var(--van-padding-xs);
} }
} }
} }

8
src/slider/var.less
View File

@ -1,11 +1,11 @@
@import '../style/var.less'; @import '../style/var.less';
@slider-active-background-color: @blue; @slider-active-background-color: var(--van-blue);
@slider-inactive-background-color: @gray-3; @slider-inactive-background-color: var(--van-gray-3);
@slider-disabled-opacity: @disabled-opacity; @slider-disabled-opacity: var(--van-disabled-opacity);
@slider-bar-height: 2px; @slider-bar-height: 2px;
@slider-button-width: 24px; @slider-button-width: 24px;
@slider-button-height: 24px; @slider-button-height: 24px;
@slider-button-border-radius: 50%; @slider-button-border-radius: 50%;
@slider-button-background-color: @white; @slider-button-background-color: var(--van-white);
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

14
src/step/index.less
View File

@ -31,7 +31,7 @@
&__line { &__line {
position: absolute; position: absolute;
background-color: var(--van-step-line-color); background-color: var(--van-step-line-color);
transition: background-color @animation-duration-base; transition: background-color var(--van-animation-duration-base);
} }
&--horizontal { &--horizontal {
@ -63,10 +63,10 @@
.van-step__circle-container { .van-step__circle-container {
position: absolute; position: absolute;
top: 30px; top: 30px;
left: -@padding-xs; left: -var(--van-padding-xs);
z-index: 1; z-index: 1;
padding: 0 @padding-xs; padding: 0 var(--van-padding-xs);
background-color: @white; background-color: var(--van-white);
transform: translateY(-50%); transform: translateY(-50%);
} }
@ -98,7 +98,7 @@
display: block; display: block;
float: none; float: none;
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
line-height: @line-height-sm; line-height: var(--van-line-height-sm);
&:not(:last-child)::after { &:not(:last-child)::after {
border-bottom-width: 1px; border-bottom-width: 1px;
@ -112,7 +112,7 @@
z-index: 1; z-index: 1;
width: 1px; width: 1px;
height: 20px; height: 20px;
background-color: @white; background-color: var(--van-white);
content: ''; content: '';
} }
} }
@ -152,7 +152,7 @@
&__icon, &__icon,
&__title { &__title {
transition: color @animation-duration-base; transition: color var(--van-animation-duration-base);
&--active, &--active,
&--finish { &--finish {

18
src/step/var.less
View File

@ -1,13 +1,13 @@
@import '../style/var.less'; @import '../style/var.less';
@step-text-color: @gray-6; @step-text-color: var(--van-gray-6);
@step-active-color: @green; @step-active-color: var(--van-green);
@step-process-text-color: @text-color; @step-process-text-color: var(--van-text-color);
@step-font-size: @font-size-md; @step-font-size: var(--van-font-size-md);
@step-line-color: @border-color; @step-line-color: var(--van-border-color);
@step-finish-line-color: @green; @step-finish-line-color: var(--van-green);
@step-finish-text-color: @text-color; @step-finish-text-color: var(--van-text-color);
@step-icon-size: 12px; @step-icon-size: 12px;
@step-circle-size: 5px; @step-circle-size: 5px;
@step-circle-color: @gray-6; @step-circle-color: var(--van-gray-6);
@step-horizontal-title-font-size: @font-size-sm; @step-horizontal-title-font-size: var(--van-font-size-sm);

6
src/stepper/index.less
View File

@ -124,7 +124,7 @@
border-radius: 100%; border-radius: 100%;
&:active { &:active {
opacity: @active-opacity; opacity: var(--van-active-opacity);
} }
&--disabled { &--disabled {
@ -136,13 +136,13 @@
} }
.van-stepper__plus { .van-stepper__plus {
color: @white; color: var(--van-white);
background-color: var(--van-stepper-button-round-theme-color); background-color: var(--van-stepper-button-round-theme-color);
} }
.van-stepper__minus { .van-stepper__minus {
color: var(--van-stepper-button-round-theme-color); color: var(--van-stepper-button-round-theme-color);
background-color: @white; background-color: var(--van-white);
border: 1px solid var(--van-stepper-button-round-theme-color); border: 1px solid var(--van-stepper-button-round-theme-color);
} }
} }

20
src/stepper/var.less
View File

@ -1,16 +1,16 @@
@import '../style/var.less'; @import '../style/var.less';
@stepper-active-color: #e8e8e8; @stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color; @stepper-background-color: var(--van-active-color);
@stepper-button-icon-color: @text-color; @stepper-button-icon-color: var(--van-text-color);
@stepper-button-disabled-color: @background-color; @stepper-button-disabled-color: var(--van-background-color);
@stepper-button-disabled-icon-color: @gray-5; @stepper-button-disabled-icon-color: var(--van-gray-5);
@stepper-button-round-theme-color: @red; @stepper-button-round-theme-color: var(--van-red);
@stepper-input-width: 32px; @stepper-input-width: 32px;
@stepper-input-height: 28px; @stepper-input-height: 28px;
@stepper-input-font-size: @font-size-md; @stepper-input-font-size: var(--van-font-size-md);
@stepper-input-line-height: normal; @stepper-input-line-height: normal;
@stepper-input-text-color: @text-color; @stepper-input-text-color: var(--van-text-color);
@stepper-input-disabled-text-color: @gray-5; @stepper-input-disabled-text-color: var(--van-gray-5);
@stepper-input-disabled-background-color: @active-color; @stepper-input-disabled-background-color: var(--van-active-color);
@stepper-border-radius: @border-radius-md; @stepper-border-radius: var(--van-border-radius-md);

2
src/steps/index.less
View File

@ -20,6 +20,6 @@
} }
&--vertical { &--vertical {
padding: 0 0 0 @padding-xl; padding: 0 0 0 var(--van-padding-xl);
} }
} }

2
src/steps/var.less
View File

@ -1,3 +1,3 @@
@import '../style/var.less'; @import '../style/var.less';
@steps-background-color: @white; @steps-background-color: var(--van-white);

2
src/style/css-variables.less
View File

@ -1,4 +1,4 @@
:host { :root {
// Color Palette // Color Palette
--van-black: @black; --van-black: @black;
--van-white: @white; --van-white: @white;

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