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 {
flex: 1;
height: var(--van-action-bar-button-height);
font-weight: @font-weight-bold;
font-size: @font-size-md;
font-weight: var(--van-font-weight-bold);
font-size: var(--van-font-size-md);
border: none;
border-radius: 0;
&--first {
margin-left: 5px;
border-top-left-radius: @border-radius-max;
border-bottom-left-radius: @border-radius-max;
border-top-left-radius: var(--van-border-radius-max);
border-bottom-left-radius: var(--van-border-radius-max);
}
&--last {
margin-right: 5px;
border-top-right-radius: @border-radius-max;
border-bottom-right-radius: @border-radius-max;
border-top-right-radius: var(--van-border-radius-max);
border-bottom-right-radius: var(--van-border-radius-max);
}
&--warning {

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

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

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

@ -29,7 +29,7 @@
}
&__icon {
margin: 0 auto @padding-base;
margin: 0 auto var(--van-padding-base);
color: var(--van-action-bar-icon-color);
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-height: 100%;
@action-bar-icon-color: @text-color;
@action-bar-icon-color: var(--van-text-color);
@action-bar-icon-size: 18px;
@action-bar-icon-font-size: @font-size-xs;
@action-bar-icon-active-color: @active-color;
@action-bar-icon-text-color: @gray-7;
@action-bar-icon-background-color: @white;
@action-bar-icon-font-size: var(--van-font-size-xs);
@action-bar-icon-active-color: var(--van-active-color);
@action-bar-icon-text-color: var(--van-gray-7);
@action-bar-icon-background-color: var(--van-white);

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

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

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

@ -43,14 +43,14 @@
&__cancel {
display: block;
width: 100%;
padding: 14px @padding-md;
padding: 14px var(--van-padding-md);
font-size: var(--van-action-sheet-item-font-size);
background-color: var(--van-action-sheet-item-background);
border: none;
cursor: pointer;
&:active {
background-color: @active-color;
background-color: var(--van-active-color);
}
}
@ -82,7 +82,7 @@
}
&__subname {
margin-top: @padding-xs;
margin-top: var(--van-padding-xs);
color: var(--van-action-sheet-subname-color);
font-size: var(--van-action-sheet-subname-font-size);
line-height: var(--van-action-sheet-subname-line-height);
@ -96,7 +96,7 @@
&__header {
flex-shrink: 0;
font-weight: @font-weight-bold;
font-weight: var(--van-font-weight-bold);
font-size: var(--van-action-sheet-header-font-size);
line-height: var(--van-action-sheet-header-height);
text-align: center;
@ -105,14 +105,14 @@
&__description {
position: relative;
flex-shrink: 0;
padding: 20px @padding-md;
padding: 20px var(--van-padding-md);
color: var(--van-action-sheet-description-color);
font-size: var(--van-action-sheet-description-font-size);
line-height: var(--van-action-sheet-description-line-height);
text-align: center;
&::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-header-height: 48px;
@action-sheet-header-font-size: @font-size-lg;
@action-sheet-description-color: @gray-6;
@action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: @line-height-md;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-line-height: @line-height-lg;
@action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray-5;
@action-sheet-subname-color: @gray-6;
@action-sheet-subname-font-size: @font-size-sm;
@action-sheet-subname-line-height: @line-height-sm;
@action-sheet-header-font-size: var(--van-font-size-lg);
@action-sheet-description-color: var(--van-gray-6);
@action-sheet-description-font-size: var(--van-font-size-md);
@action-sheet-description-line-height: var(--van-line-height-md);
@action-sheet-item-background: var(--van-white);
@action-sheet-item-font-size: var(--van-font-size-lg);
@action-sheet-item-line-height: var(--van-line-height-lg);
@action-sheet-item-text-color: var(--van-text-color);
@action-sheet-item-disabled-text-color: var(--van-gray-5);
@action-sheet-subname-color: var(--van-gray-6);
@action-sheet-subname-font-size: var(--van-font-size-sm);
@action-sheet-subname-line-height: var(--van-line-height-sm);
@action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: @gray-5;
@action-sheet-close-icon-active-color: @gray-6;
@action-sheet-close-icon-padding: 0 @padding-md;
@action-sheet-cancel-text-color: @gray-7;
@action-sheet-cancel-padding-top: @padding-xs;
@action-sheet-cancel-padding-color: @background-color;
@action-sheet-close-icon-color: var(--van-gray-5);
@action-sheet-close-icon-active-color: var(--van-gray-6);
@action-sheet-close-icon-padding: 0 var(--van-padding-md);
@action-sheet-cancel-text-color: var(--van-gray-7);
@action-sheet-cancel-padding-top: var(--van-padding-xs);
@action-sheet-cancel-padding-color: var(--van-background-color);
@action-sheet-loading-icon-size: 22px;

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

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

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

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

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

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

4
src/badge/index.less
View File

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

12
src/badge/var.less
View File

@ -1,12 +1,12 @@
@import '../style/var.less';
@badge-size: 16px;
@badge-color: @white;
@badge-color: var(--van-white);
@badge-padding: 0 3px;
@badge-font-size: @font-size-sm;
@badge-font-weight: @font-weight-bold;
@badge-border-width: @border-width-base;
@badge-background-color: @red;
@badge-dot-color: @red;
@badge-font-size: var(--van-font-size-sm);
@badge-font-weight: var(--van-font-weight-bold);
@badge-border-width: var(--van-border-width-base);
@badge-background-color: var(--van-red);
@badge-dot-color: var(--van-red);
@badge-dot-size: 8px;
@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;
border-radius: var(--van-button-border-radius);
cursor: pointer;
transition: opacity @animation-duration-fast;
transition: opacity var(--van-animation-duration-fast);
-webkit-appearance: none;
&::before {
@ -58,9 +58,9 @@
left: 50%;
width: 100%;
height: 100%;
background-color: @black;
background-color: var(--van-black);
border: inherit;
border-color: @black;
border-color: var(--van-black);
border-radius: inherit; /* inherit parent's border radius */
transform: translate(-50%, -50%);
opacity: 0;
@ -166,7 +166,7 @@
font-size: var(--van-button-mini-font-size);
& + .van-button--mini {
margin-left: @padding-base;
margin-left: var(--van-padding-base);
}
}
@ -216,7 +216,7 @@
&__loading + &__text,
&__text + &__icon,
&__text + &__loading {
margin-left: @padding-base;
margin-left: var(--van-padding-base);
}
&--hairline {

52
src/button/var.less
View File

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

12
src/calendar/index.less
View File

@ -60,7 +60,7 @@
&__header-title,
&__header-subtitle {
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);
text-align: center;
}
@ -137,16 +137,16 @@
}
&--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 {
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,
&--multiple-selected {
border-radius: @border-radius-md;
border-radius: var(--van-border-radius-md);
}
&--middle {
@ -196,12 +196,12 @@
height: var(--van-calendar-selected-day-size);
color: var(--van-calendar-selected-day-color);
background-color: var(--van-calendar-selected-day-background-color);
border-radius: @border-radius-md;
border-radius: var(--van-border-radius-md);
}
&__footer {
flex-shrink: 0;
padding: 0 @padding-md;
padding: 0 var(--van-padding-md);
.safe-area-inset-bottom();
&--unfit {

30
src/calendar/var.less
View File

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

10
src/card/index.less
View File

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

28
src/card/var.less
View File

@ -1,18 +1,18 @@
@import '../style/var.less';
@card-padding: @padding-xs @padding-md;
@card-font-size: @font-size-sm;
@card-text-color: @text-color;
@card-background-color: @background-color-light;
@card-padding: var(--van-padding-xs) var(--van-padding-md);
@card-font-size: var(--van-font-size-sm);
@card-text-color: var(--van-text-color);
@card-background-color: var(--van-background-color-light);
@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-desc-color: @gray-7;
@card-desc-line-height: @line-height-md;
@card-price-color: @gray-8;
@card-origin-price-color: @gray-6;
@card-num-color: @gray-6;
@card-origin-price-font-size: @font-size-xs;
@card-price-font-size: @font-size-sm;
@card-price-integer-font-size: @font-size-lg;
@card-price-font-family: @price-integer-font-family;
@card-desc-color: var(--van-gray-7);
@card-desc-line-height: var(--van-line-height-md);
@card-price-color: var(--van-gray-8);
@card-origin-price-color: var(--van-gray-6);
@card-num-color: var(--van-gray-6);
@card-origin-price-font-size: var(--van-font-size-xs);
@card-price-font-size: var(--van-font-size-sm);
@card-price-integer-font-size: var(--van-font-size-lg);
@card-price-font-family: var(--van-price-integer-font-family);

14
src/cascader/index.less
View File

@ -26,7 +26,7 @@
}
&__title {
font-weight: @font-weight-bold;
font-weight: var(--van-font-weight-bold);
font-size: var(--van-cascader-title-font-size);
line-height: var(--van-cascader-title-line-height);
}
@ -58,7 +58,7 @@
&__tab {
color: var(--van-cascader-tab-color);
font-weight: @font-weight-bold;
font-weight: var(--van-font-weight-bold);
&--unselected {
color: var(--van-cascader-unselected-tab-color);
@ -70,17 +70,17 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px @padding-md;
font-size: @font-size-md;
line-height: @line-height-md;
padding: 10px var(--van-padding-md);
font-size: var(--van-font-size-md);
line-height: var(--van-line-height-md);
&:active {
background-color: @active-color;
background-color: var(--van-active-color);
}
&--selected {
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';
@cascader-header-height: 48px;
@cascader-header-padding: 0 @padding-md;
@cascader-title-font-size: @font-size-lg;
@cascader-header-padding: 0 var(--van-padding-md);
@cascader-title-font-size: var(--van-font-size-lg);
@cascader-title-line-height: 20px;
@cascader-close-icon-size: 22px;
@cascader-close-icon-color: @gray-5;
@cascader-close-icon-active-color: @gray-6;
@cascader-close-icon-color: var(--van-gray-5);
@cascader-close-icon-active-color: var(--van-gray-6);
@cascader-selected-icon-size: 18px;
@cascader-tabs-height: 48px;
@cascader-active-color: @red;
@cascader-active-color: var(--van-red);
@cascader-options-height: 384px;
@cascader-tab-color: @text-color;
@cascader-unselected-tab-color: @gray-6;
@cascader-tab-color: var(--van-text-color);
@cascader-unselected-tab-color: var(--van-gray-6);

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

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

10
src/cell/index.less
View File

@ -36,7 +36,7 @@
background-color: var(--van-cell-background-color);
&::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,
@ -65,7 +65,7 @@
word-wrap: break-word;
&--alone {
color: @text-color;
color: var(--van-text-color);
text-align: left;
}
}
@ -78,11 +78,11 @@
}
&__left-icon {
margin-right: @padding-base;
margin-right: var(--van-padding-base);
}
&__right-icon {
margin-left: @padding-base;
margin-left: var(--van-padding-base);
color: var(--van-cell-right-icon-color);
}
@ -99,7 +99,7 @@
&::before {
position: absolute;
left: @padding-xs;
left: var(--van-padding-xs);
color: var(--van-cell-required-color);
font-size: var(--van-cell-font-size);
content: '*';

32
src/cell/var.less
View File

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

4
src/checkbox/index.less
View File

@ -28,7 +28,7 @@
}
&--horizontal {
margin-right: @padding-sm;
margin-right: var(--van-padding-sm);
}
&__icon {
@ -60,7 +60,7 @@
&--checked {
.van-icon {
color: @white;
color: var(--van-white);
background-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';
@checkbox-size: 20px;
@checkbox-border-color: @gray-5;
@checkbox-transition-duration: @animation-duration-fast;
@checkbox-label-margin: @padding-xs;
@checkbox-label-color: @text-color;
@checkbox-checked-icon-color: @blue;
@checkbox-disabled-icon-color: @gray-5;
@checkbox-disabled-label-color: @gray-5;
@checkbox-disabled-background-color: @border-color;
@checkbox-border-color: var(--van-gray-5);
@checkbox-transition-duration: var(--van-animation-duration-fast);
@checkbox-label-margin: var(--van-padding-xs);
@checkbox-label-color: var(--van-text-color);
@checkbox-checked-icon-color: var(--van-blue);
@checkbox-disabled-icon-color: var(--van-gray-5);
@checkbox-disabled-label-color: var(--van-gray-5);
@checkbox-disabled-background-color: var(--van-border-color);

2
src/circle/index.less
View File

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

12
src/circle/var.less
View File

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

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

@ -16,7 +16,7 @@
&--border {
&::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 {
right: @padding-md;
right: var(--van-padding-md);
display: none;
}

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

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

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

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

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

@ -1,6 +1,6 @@
@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-color: @blue;
@contact-card-value-line-height: @line-height-md;
@contact-card-add-icon-color: var(--van-blue);
@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';
@contact-edit-padding: @padding-md;
@contact-edit-fields-radius: @border-radius-md;
@contact-edit-buttons-padding: @padding-xl 0;
@contact-edit-button-margin-bottom: @padding-sm;
@contact-edit-padding: var(--van-padding-md);
@contact-edit-fields-radius: var(--van-border-radius-md);
@contact-edit-buttons-padding: var(--van-padding-xl) 0;
@contact-edit-button-margin-bottom: var(--van-padding-sm);
@contact-edit-button-font-size: 16px;
@contact-edit-field-label-width: 4.1em;

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

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

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

@ -2,5 +2,5 @@
@contact-list-edit-icon-size: 16px;
@contact-list-add-button-z-index: 999;
@contact-list-item-padding: @padding-md;
@contact-list-item-radio-icon-color: @red;
@contact-list-item-padding: var(--van-padding-md);
@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';
@count-down-text-color: @text-color;
@count-down-font-size: @font-size-md;
@count-down-line-height: @line-height-md;
@count-down-text-color: var(--van-text-color);
@count-down-font-size: var(--van-font-size-md);
@count-down-line-height: var(--van-line-height-md);

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

@ -1,3 +1,3 @@
@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 {
height: 34px;
padding-left: @padding-sm;
padding-left: var(--van-padding-sm);
line-height: 34px;
background: @gray-1;
background: var(--van-gray-1);
border-radius: 17px;
&::placeholder {
color: @gray-5;
color: var(--van-gray-5);
}
}
@ -39,29 +39,29 @@
&__exchange-bar {
display: flex;
align-items: center;
background-color: @white;
background-color: var(--van-white);
}
&__exchange {
flex: none;
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);
border: 0;
}
.van-tabs__wrap {
box-shadow: 0 6px 12px -12px @gray-6;
box-shadow: 0 6px 12px -12px var(--van-gray-6);
}
&__list {
box-sizing: border-box;
padding: @padding-md 0 @padding-lg;
padding: var(--van-padding-md) 0 var(--van-padding-lg);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
&--with-bottom {
padding-bottom: @padding-md + 50px;
padding-bottom: calc(var(--van-padding-md) + 50px);
}
}
@ -72,9 +72,9 @@
z-index: 999;
box-sizing: border-box;
width: 100%;
padding: 5px @padding-md;
font-weight: @font-weight-bold;
background-color: @white;
padding: 5px var(--van-padding-md);
font-weight: var(--van-font-weight-bold);
background-color: var(--van-white);
}
&__close {
@ -86,7 +86,7 @@
text-align: center;
p {
margin: @padding-md 0;
margin: var(--van-padding-md) 0;
color: var(--van-coupon-list-empty-tip-color);
font-size: var(--van-coupon-list-empty-tip-font-size);
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';
@coupon-list-background-color: @background-color;
@coupon-list-field-padding: 5px 0 5px @padding-md;
@coupon-list-background-color: var(--van-background-color);
@coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
@coupon-list-exchange-button-height: 32px;
@coupon-list-close-button-height: 40px;
@coupon-list-empty-image-size: 200px;
@coupon-list-empty-tip-color: @gray-6;
@coupon-list-empty-tip-font-size: @font-size-md;
@coupon-list-empty-tip-line-height: @line-height-md;
@coupon-list-empty-tip-color: var(--van-gray-6);
@coupon-list-empty-tip-font-size: var(--van-font-size-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;
min-height: var(--van-coupon-content-height);
padding: var(--van-coupon-content-padding);
color: @gray-8;
color: var(--van-gray-8);
}
&__head {
position: relative;
min-width: var(--van-coupon-head-width);
padding: 0 @padding-xs;
padding: 0 var(--van-padding-xs);
color: var(--van-coupon-amount-color);
text-align: center;
}
@ -57,7 +57,7 @@
&__amount {
margin-bottom: 6px;
font-weight: @font-weight-bold;
font-weight: var(--van-font-weight-bold);
font-size: var(--van-coupon-amount-font-size);
.ellipsis();
@ -72,7 +72,7 @@
}
&__condition {
font-size: @font-size-sm;
font-size: var(--van-font-size-sm);
line-height: 16px;
white-space: pre-wrap;
}
@ -88,17 +88,17 @@
margin-bottom: 10px;
font-weight: bold;
font-size: var(--van-coupon-name-font-size);
line-height: @line-height-md;
line-height: var(--van-line-height-md);
}
&__valid {
font-size: @font-size-sm;
font-size: var(--van-font-size-sm);
}
&__corner {
position: absolute;
top: 0;
right: @padding-md;
right: var(--van-padding-md);
bottom: 0;
.van-checkbox__icon--checked .van-icon {
@ -109,7 +109,7 @@
&__description {
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);
}

20
src/coupon/var.less
View File

@ -1,18 +1,18 @@
@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-padding: 14px 0;
@coupon-background-color: @white;
@coupon-active-background-color: @active-color;
@coupon-border-radius: @border-radius-lg;
@coupon-background-color: var(--van-white);
@coupon-active-background-color: var(--van-active-color);
@coupon-border-radius: var(--van-border-radius-lg);
@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
@coupon-head-width: 96px;
@coupon-amount-color: @red;
@coupon-amount-color: var(--van-red);
@coupon-amount-font-size: 30px;
@coupon-currency-font-size: 40%;
@coupon-name-font-size: @font-size-md;
@coupon-disabled-text-color: @gray-6;
@coupon-description-padding: @padding-xs @padding-md;
@coupon-description-border-color: @border-color;
@coupon-corner-checkbox-icon-color: @red;
@coupon-name-font-size: var(--van-font-size-md);
@coupon-disabled-text-color: var(--van-gray-6);
@coupon-description-padding: var(--van-padding-xs) var(--van-padding-md);
@coupon-description-border-color: var(--van-border-color);
@coupon-corner-checkbox-icon-color: var(--van-red);

10
src/dialog/index.less
View File

@ -65,7 +65,7 @@
font-size: var(--van-dialog-message-font-size);
line-height: var(--van-dialog-message-line-height);
// allow newline charactor
// allow newline character
white-space: pre-wrap;
text-align: center;
word-wrap: break-word;
@ -110,12 +110,12 @@
.van-dialog__footer {
position: relative;
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 {
padding-bottom: @padding-md;
color: @text-color;
padding-bottom: var(--van-padding-md);
color: var(--van-text-color);
}
.van-dialog__confirm,
@ -124,7 +124,7 @@
}
.van-dialog__confirm {
color: @white;
color: var(--van-white);
}
}

22
src/dialog/var.less
View File

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

2
src/divider/index.less
View File

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

10
src/divider/var.less
View File

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

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

@ -21,10 +21,10 @@
text-align: left;
&--active {
color: @dropdown-menu-option-active-color;
color: var(--van-dropdown-menu-option-active-color);
.van-dropdown-item__icon {
color: @dropdown-menu-option-active-color;
color: var(--van-dropdown-menu-option-active-color);
}
}
}
@ -39,6 +39,6 @@
&__content {
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);
&--opened {
z-index: @dropdown-item-z-index + 1;
z-index: calc(var(--van-dropdown-item-z-index) + 1);
}
}
@ -39,7 +39,7 @@
cursor: pointer;
&:active {
opacity: @active-opacity;
opacity: var(--van-active-opacity);
}
&--disabled {
@ -68,7 +68,7 @@
right: -4px;
margin-top: -5px;
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);
opacity: 0.8;
content: '';

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

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

10
src/empty/var.less
View File

@ -1,10 +1,10 @@
@import '../style/var.less';
@empty-padding: @padding-xl 0;
@empty-padding: var(--van-padding-xl) 0;
@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-color: @gray-6;
@empty-description-font-size: @font-size-md;
@empty-description-line-height: @line-height-md;
@empty-description-color: var(--van-gray-6);
@empty-description-font-size: var(--van-font-size-md);
@empty-description-line-height: var(--van-line-height-md);
@empty-bottom-margin-top: 24px;

14
src/field/index.less
View File

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

24
src/field/var.less
View File

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

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

@ -30,7 +30,7 @@
}
&__icon + &__text {
margin-top: @padding-xs;
margin-top: var(--van-padding-xs);
}
&__content {
@ -43,7 +43,8 @@
&::after {
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 {
@ -63,13 +64,13 @@
.van-grid-item__icon + .van-grid-item__text {
margin-top: 0;
margin-left: @padding-xs;
margin-left: var(--van-padding-xs);
}
}
&--surround {
&::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';
@grid-item-content-padding: @padding-md @padding-xs;
@grid-item-content-background-color: @white;
@grid-item-content-active-color: @active-color;
@grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
@grid-item-content-background-color: var(--van-white);
@grid-item-content-active-color: var(--van-active-color);
@grid-item-icon-size: 28px;
@grid-item-text-color: @gray-7;
@grid-item-text-font-size: @font-size-sm;
@grid-item-text-color: var(--van-gray-7);
@grid-item-text-font-size: var(--van-font-size-sm);

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

@ -71,7 +71,7 @@
&__index {
position: absolute;
top: @padding-md;
top: var(--van-padding-md);
left: 50%;
color: var(--van-image-preview-index-text-color);
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';
@image-preview-index-text-color: @white;
@image-preview-index-font-size: @font-size-md;
@image-preview-index-line-height: @line-height-md;
@image-preview-index-text-shadow: 0 1px 1px @gray-8;
@image-preview-index-text-color: var(--van-white);
@image-preview-index-font-size: var(--van-font-size-md);
@image-preview-index-line-height: var(--van-line-height-md);
@image-preview-index-text-shadow: 0 1px 1px var(--van-gray-8);
@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
@image-preview-close-icon-size: 22px;
@image-preview-close-icon-color: @gray-5;
@image-preview-close-icon-active-color: @gray-6;
@image-preview-close-icon-margin: @padding-md;
@image-preview-close-icon-color: var(--van-gray-5);
@image-preview-close-icon-active-color: var(--van-gray-6);
@image-preview-close-icon-margin: var(--van-padding-md);
@image-preview-close-icon-z-index: 1;

10
src/image/var.less
View File

@ -1,9 +1,9 @@
@import '../style/var.less';
@image-placeholder-text-color: @gray-6;
@image-placeholder-font-size: @font-size-md;
@image-placeholder-background-color: @background-color;
@image-placeholder-text-color: var(--van-gray-6);
@image-placeholder-font-size: var(--van-font-size-md);
@image-placeholder-background-color: var(--van-background-color);
@image-loading-icon-size: 32px;
@image-loading-icon-color: @gray-4;
@image-loading-icon-color: var(--van-gray-4);
@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';
@index-anchor-z-index: 1;
@index-anchor-padding: 0 @padding-md;
@index-anchor-text-color: @text-color;
@index-anchor-font-weight: @font-weight-bold;
@index-anchor-font-size: @font-size-md;
@index-anchor-padding: 0 var(--van-padding-md);
@index-anchor-text-color: var(--van-text-color);
@index-anchor-font-weight: var(--van-font-weight-bold);
@index-anchor-font-size: var(--van-font-size-md);
@index-anchor-line-height: 32px;
@index-anchor-background-color: transparent;
@index-anchor-sticky-text-color: @red;
@index-anchor-sticky-background-color: @white;
@index-anchor-sticky-text-color: var(--van-red);
@index-anchor-sticky-background-color: var(--van-white);

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

@ -22,8 +22,8 @@
}
&__index {
padding: 0 @padding-xs 0 @padding-md;
font-weight: @font-weight-bold;
padding: 0 var(--van-padding-xs) 0 var(--van-padding-md);
font-weight: var(--van-font-weight-bold);
font-size: var(--van-index-bar-index-font-size);
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';
@index-bar-sidebar-z-index: 2;
@index-bar-index-font-size: @font-size-xs;
@index-bar-index-line-height: @line-height-xs;
@index-bar-index-active-color: @red;
@index-bar-index-font-size: var(--van-font-size-xs);
@index-bar-index-line-height: var(--van-line-height-xs);
@index-bar-index-active-color: var(--van-red);

4
src/list/var.less
View File

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

4
src/loading/index.less
View File

@ -68,7 +68,7 @@
&__text {
display: inline-block;
margin-left: @padding-xs;
margin-left: var(--van-padding-xs);
color: var(--van-loading-text-color);
font-size: var(--van-loading-text-font-size);
vertical-align: middle;
@ -80,7 +80,7 @@
align-items: center;
.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';
@loading-text-color: @gray-6;
@loading-text-font-size: @font-size-md;
@loading-spinner-color: @gray-5;
@loading-text-color: var(--van-gray-6);
@loading-text-font-size: var(--van-font-size-md);
@loading-spinner-color: var(--van-gray-5);
@loading-spinner-size: 30px;
@loading-spinner-animation-duration: 0.8s;

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

@ -14,7 +14,7 @@
.van-nav-bar {
position: relative;
z-index: var(--van-nav-bar-z-index);
line-height: @line-height-lg;
line-height: var(--van-line-height-lg);
text-align: center;
background-color: var(--van-nav-bar-background-color);
user-select: none;
@ -43,7 +43,7 @@
}
&__arrow {
margin-right: @padding-base;
margin-right: var(--van-padding-base);
font-size: var(--van-nav-bar-arrow-size);
}
@ -51,7 +51,7 @@
max-width: 60%;
margin: 0 auto;
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);
}
@ -62,12 +62,12 @@
bottom: 0;
display: flex;
align-items: center;
padding: 0 @padding-md;
font-size: @font-size-md;
padding: 0 var(--van-padding-md);
font-size: var(--van-font-size-md);
cursor: pointer;
&: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';
@nav-bar-height: 46px;
@nav-bar-background-color: @white;
@nav-bar-background-color: var(--van-white);
@nav-bar-arrow-size: 16px;
@nav-bar-icon-color: @blue;
@nav-bar-text-color: @blue;
@nav-bar-title-font-size: @font-size-lg;
@nav-bar-title-text-color: @text-color;
@nav-bar-icon-color: var(--van-blue);
@nav-bar-text-color: var(--van-blue);
@nav-bar-title-font-size: var(--van-font-size-lg);
@nav-bar-title-text-color: var(--van-text-color);
@nav-bar-z-index: 1;

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

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

2
src/notify/index.less
View File

@ -21,7 +21,7 @@
font-size: var(--van-notify-font-size);
line-height: var(--van-notify-line-height);
// allow newline charactor
// allow newline character
white-space: pre-wrap;
text-align: center;
word-wrap: break-word;

16
src/notify/var.less
View File

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

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

@ -76,7 +76,7 @@
cursor: pointer;
&:active {
opacity: @active-opacity;
opacity: var(--van-active-opacity);
}
}
@ -98,8 +98,8 @@
height: var(--van-number-keyboard-key-height);
font-size: var(--van-number-keyboard-key-font-size);
line-height: 1.5;
background-color: @white;
border-radius: @border-radius-lg;
background-color: var(--van-white);
border-radius: var(--van-border-radius-lg);
cursor: pointer;
&--large {
@ -127,7 +127,7 @@
background-color: var(--van-number-keyboard-button-background-color);
&.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';
@number-keyboard-background-color: @gray-2;
@number-keyboard-background-color: var(--van-gray-2);
@number-keyboard-key-height: 48px;
@number-keyboard-key-font-size: 28px;
@number-keyboard-key-active-color: @gray-3;
@number-keyboard-delete-font-size: @font-size-lg;
@number-keyboard-title-color: @gray-7;
@number-keyboard-key-active-color: var(--van-gray-3);
@number-keyboard-delete-font-size: var(--van-font-size-lg);
@number-keyboard-title-color: var(--van-gray-7);
@number-keyboard-title-height: 34px;
@number-keyboard-title-font-size: @font-size-lg;
@number-keyboard-close-padding: 0 @padding-md;
@number-keyboard-close-color: @text-link-color;
@number-keyboard-close-font-size: @font-size-md;
@number-keyboard-button-text-color: @white;
@number-keyboard-button-background-color: @blue;
@number-keyboard-button-active-color: darken(
@number-keyboard-button-background-color,
10%
);
@number-keyboard-title-font-size: var(--van-font-size-lg);
@number-keyboard-close-padding: 0 var(--van-padding-md);
@number-keyboard-close-color: var(--van-text-link-color);
@number-keyboard-close-font-size: var(--van-font-size-md);
@number-keyboard-button-text-color: var(--van-white);
@number-keyboard-button-background-color: var(--van-blue);
@number-keyboard-z-index: 100;

13
src/pagination/index.less
View File

@ -34,27 +34,28 @@
user-select: none;
&:active {
color: @white;
color: var(--van-white);
background-color: var(--van-pagination-item-default-color);
}
&::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 {
border-right-width: @border-width-base;
border-right-width: var(--van-border-width-base);
}
&--active {
color: @white;
color: var(--van-white);
background-color: var(--van-pagination-item-default-color);
}
}
&__prev,
&__next {
padding: 0 @padding-base;
padding: 0 var(--van-padding-base);
cursor: pointer;
}
@ -82,7 +83,7 @@
.van-pagination__prev,
.van-pagination__next {
&::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';
@pagination-height: 40px;
@pagination-font-size: @font-size-md;
@pagination-font-size: var(--van-font-size-md);
@pagination-item-width: 36px;
@pagination-item-default-color: @blue;
@pagination-item-disabled-color: @gray-7;
@pagination-item-disabled-background-color: @background-color;
@pagination-background-color: @white;
@pagination-desc-color: @gray-7;
@pagination-disabled-opacity: @disabled-opacity;
@pagination-item-default-color: var(--van-blue);
@pagination-item-disabled-color: var(--van-gray-7);
@pagination-item-disabled-background-color: var(--van-background-color);
@pagination-background-color: var(--van-white);
@pagination-desc-color: var(--van-gray-7);
@pagination-disabled-opacity: var(--van-disabled-opacity);

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

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

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

@ -1,16 +1,16 @@
@import '../style/var.less';
@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-border-radius: 6px;
@password-input-background-color: @white;
@password-input-info-color: @gray-6;
@password-input-info-font-size: @font-size-md;
@password-input-error-info-color: @red;
@password-input-background-color: var(--van-white);
@password-input-info-color: var(--van-gray-6);
@password-input-info-font-size: var(--van-font-size-md);
@password-input-error-info-color: var(--van-red);
@password-input-dot-size: 10px;
@password-input-dot-color: @black;
@password-input-cursor-color: @text-color;
@password-input-dot-color: var(--van-black);
@password-input-cursor-color: var(--van-text-color);
@password-input-cursor-width: 1px;
@password-input-cursor-height: 40%;
@password-input-cursor-animation-duration: 1s;

10
src/picker/index.less
View File

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

20
src/picker/var.less
View File

@ -1,15 +1,15 @@
@import '../style/var.less';
@picker-background-color: @white;
@picker-background-color: var(--van-white);
@picker-toolbar-height: 44px;
@picker-title-font-size: @font-size-lg;
@picker-title-line-height: @line-height-md;
@picker-action-padding: 0 @padding-md;
@picker-action-font-size: @font-size-md;
@picker-confirm-action-color: @text-link-color;
@picker-cancel-action-color: @gray-6;
@picker-option-font-size: @font-size-lg;
@picker-option-text-color: @black;
@picker-title-font-size: var(--van-font-size-lg);
@picker-title-line-height: var(--van-line-height-md);
@picker-action-padding: 0 var(--van-padding-md);
@picker-action-font-size: var(--van-font-size-md);
@picker-confirm-action-color: var(--van-text-link-color);
@picker-cancel-action-color: var(--van-gray-6);
@picker-option-font-size: var(--van-font-size-lg);
@picker-option-text-color: var(--van-black);
@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);

30
src/popover/index.less
View File

@ -47,9 +47,9 @@
box-sizing: border-box;
width: var(--van-popover-action-width);
height: var(--van-popover-action-height);
padding: 0 @padding-md;
padding: 0 var(--van-padding-md);
font-size: var(--van-popover-action-font-size);
line-height: @line-height-md;
line-height: var(--van-line-height-md);
cursor: pointer;
&:last-child {
@ -67,7 +67,7 @@
}
&-icon {
margin-right: @padding-xs;
margin-right: var(--van-padding-xs);
font-size: var(--van-popover-action-icon-size);
}
@ -99,7 +99,7 @@
transform-origin: 0 100%;
.van-popover__arrow {
left: @padding-md;
left: var(--van-padding-md);
}
}
@ -107,7 +107,7 @@
transform-origin: 100% 100%;
.van-popover__arrow {
right: @padding-md;
right: var(--van-padding-md);
}
}
@ -132,7 +132,7 @@
transform-origin: 100% 0;
.van-popover__arrow {
top: @padding-md;
top: var(--van-padding-md);
}
}
@ -140,7 +140,7 @@
transform-origin: 100% 100%;
.van-popover__arrow {
bottom: @padding-md;
bottom: var(--van-padding-md);
}
}
@ -165,7 +165,7 @@
transform-origin: 0 0;
.van-popover__arrow {
top: @padding-md;
top: var(--van-padding-md);
}
}
@ -173,7 +173,7 @@
transform-origin: 0 100%;
.van-popover__arrow {
bottom: @padding-md;
bottom: var(--van-padding-md);
}
}
@ -198,7 +198,7 @@
transform-origin: 0 0;
.van-popover__arrow {
left: @padding-md;
left: var(--van-padding-md);
}
}
@ -206,7 +206,7 @@
transform-origin: 100% 0;
.van-popover__arrow {
right: @padding-md;
right: var(--van-padding-md);
}
}
@ -224,7 +224,7 @@
.van-popover__action {
&:active {
background-color: @active-color;
background-color: var(--van-active-color);
}
&--disabled {
@ -265,7 +265,7 @@
.van-popover__action-text {
&::after {
border-color: @gray-7;
border-color: var(--van-gray-7);
}
}
}
@ -277,10 +277,10 @@
}
&-zoom-enter-active {
transition-timing-function: @animation-timing-function-enter;
transition-timing-function: var(--van-animation-timing-function-enter);
}
&-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';
@popover-arrow-size: 6px;
@popover-border-radius: @border-radius-lg;
@popover-border-radius: var(--van-border-radius-lg);
@popover-action-width: 128px;
@popover-action-height: 44px;
@popover-action-font-size: @font-size-md;
@popover-action-line-height: @line-height-md;
@popover-action-font-size: var(--van-font-size-md);
@popover-action-line-height: var(--van-line-height-md);
@popover-action-icon-size: 20px;
@popover-light-text-color: @text-color;
@popover-light-background-color: @white;
@popover-light-action-disabled-text-color: @gray-5;
@popover-dark-text-color: @white;
@popover-light-text-color: var(--van-text-color);
@popover-light-background-color: var(--van-white);
@popover-light-action-disabled-text-color: var(--van-gray-5);
@popover-dark-text-color: var(--van-white);
@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-right-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-left-leave-active,
&-slide-right-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,

8
src/popup/var.less
View File

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

10
src/progress/var.less
View File

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

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

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

4
src/radio/index.less
View File

@ -28,7 +28,7 @@
}
&--horizontal {
margin-right: @padding-sm;
margin-right: var(--van-padding-sm);
}
&__icon {
@ -60,7 +60,7 @@
&--checked {
.van-icon {
color: @white;
color: var(--van-white);
background-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';
@radio-size: 20px;
@radio-border-color: @gray-5;
@radio-transition-duration: @animation-duration-fast;
@radio-label-margin: @padding-xs;
@radio-label-color: @text-color;
@radio-checked-icon-color: @blue;
@radio-disabled-icon-color: @gray-5;
@radio-disabled-label-color: @gray-5;
@radio-disabled-background-color: @border-color;
@radio-border-color: var(--van-gray-5);
@radio-transition-duration: var(--van-animation-duration-fast);
@radio-label-margin: var(--van-padding-xs);
@radio-label-color: var(--van-text-color);
@radio-checked-icon-color: var(--van-blue);
@radio-disabled-icon-color: var(--van-gray-5);
@radio-disabled-label-color: var(--van-gray-5);
@radio-disabled-background-color: var(--van-border-color);

8
src/rate/var.less
View File

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

10
src/search/index.less
View File

@ -24,12 +24,12 @@
&__content {
display: flex;
flex: 1;
padding-left: @padding-sm;
padding-left: var(--van-padding-sm);
background-color: var(--van-search-content-background-color);
border-radius: @border-radius-sm;
border-radius: var(--van-border-radius-sm);
&--round {
border-radius: @border-radius-max;
border-radius: var(--van-border-radius-max);
}
}
@ -42,7 +42,7 @@
.van-cell {
flex: 1;
padding: 5px @padding-xs 5px 0;
padding: 5px var(--van-padding-xs) 5px 0;
background-color: transparent;
&__left-icon {
@ -72,7 +72,7 @@
user-select: none;
&: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';
@search-padding: 10px @padding-sm;
@search-background-color: @white;
@search-content-background-color: @gray-1;
@search-padding: 10px var(--van-padding-sm);
@search-background-color: var(--van-white);
@search-content-background-color: var(--van-gray-1);
@search-input-height: 34px;
@search-label-padding: 0 5px;
@search-label-color: @text-color;
@search-label-font-size: @font-size-md;
@search-left-icon-color: @gray-6;
@search-action-padding: 0 @padding-xs;
@search-action-text-color: @text-color;
@search-action-font-size: @font-size-md;
@search-label-color: var(--van-text-color);
@search-label-font-size: var(--van-font-size-md);
@search-left-icon-color: var(--van-gray-6);
@search-action-padding: 0 var(--van-padding-xs);
@search-action-text-color: var(--van-text-color);
@search-action-font-size: var(--van-font-size-md);

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

@ -26,7 +26,7 @@
}
&__title {
margin-top: @padding-xs;
margin-top: var(--van-padding-xs);
color: var(--van-share-sheet-title-color);
font-weight: normal;
font-size: var(--van-share-sheet-title-font-size);
@ -35,7 +35,7 @@
&__description {
display: block;
margin-top: @padding-xs;
margin-top: var(--van-padding-xs);
color: var(--van-share-sheet-description-color);
font-size: var(--van-share-sheet-description-font-size);
line-height: var(--van-share-sheet-description-line-height);
@ -44,13 +44,13 @@
&__options {
position: relative;
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-y: visible;
-webkit-overflow-scrolling: touch;
&--border::before {
.hairline-top(@border-color, @padding-md);
.hairline-top(var(--van-border-color), var(--van-padding-md));
}
&::-webkit-scrollbar {
@ -66,25 +66,25 @@
user-select: none;
&:active {
opacity: @active-opacity;
opacity: var(--van-active-opacity);
}
}
&__icon {
width: var(--van-share-sheet-icon-size);
height: var(--van-share-sheet-icon-size);
margin: 0 @padding-md;
margin: 0 var(--van-padding-md);
}
&__name {
margin-top: @padding-xs;
padding: 0 @padding-base;
margin-top: var(--van-padding-xs);
padding: 0 var(--van-padding-base);
color: var(--van-share-sheet-option-name-color);
font-size: var(--van-share-sheet-option-name-font-size);
}
&__option-description {
padding: 0 @padding-base;
padding: 0 var(--van-padding-base);
color: var(--van-share-sheet-option-description-color);
font-size: var(--van-share-sheet-option-description-font-size);
}
@ -102,13 +102,13 @@
&::before {
display: block;
height: @padding-xs;
background-color: @background-color;
height: var(--van-padding-xs);
background-color: var(--van-background-color);
content: ' ';
}
&: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';
@share-sheet-header-padding: @padding-sm @padding-md @padding-base;
@share-sheet-title-color: @text-color;
@share-sheet-title-font-size: @font-size-md;
@share-sheet-title-line-height: @line-height-md;
@share-sheet-description-color: @gray-6;
@share-sheet-description-font-size: @font-size-sm;
@share-sheet-header-padding: var(--van-padding-sm) var(--van-padding-md)
var(--van-padding-base);
@share-sheet-title-color: var(--van-text-color);
@share-sheet-title-font-size: var(--van-font-size-md);
@share-sheet-title-line-height: var(--van-line-height-md);
@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-icon-size: 48px;
@share-sheet-option-name-color: @gray-7;
@share-sheet-option-name-font-size: @font-size-sm;
@share-sheet-option-description-color: @gray-5;
@share-sheet-option-description-font-size: @font-size-sm;
@share-sheet-cancel-button-font-size: @font-size-lg;
@share-sheet-option-name-color: var(--van-gray-7);
@share-sheet-option-name-font-size: var(--van-font-size-sm);
@share-sheet-option-description-color: var(--van-gray-5);
@share-sheet-option-description-font-size: var(--van-font-size-sm);
@share-sheet-cancel-button-font-size: var(--van-font-size-lg);
@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';
@sidebar-font-size: @font-size-md;
@sidebar-line-height: @line-height-md;
@sidebar-text-color: @text-color;
@sidebar-disabled-text-color: @gray-5;
@sidebar-padding: 20px @padding-sm;
@sidebar-active-color: @active-color;
@sidebar-background-color: @background-color;
@sidebar-selected-font-weight: @font-weight-bold;
@sidebar-selected-text-color: @text-color;
@sidebar-font-size: var(--van-font-size-md);
@sidebar-line-height: var(--van-line-height-md);
@sidebar-text-color: var(--van-text-color);
@sidebar-disabled-text-color: var(--van-gray-5);
@sidebar-padding: 20px var(--van-padding-sm);
@sidebar-active-color: var(--van-active-color);
@sidebar-background-color: var(--van-background-color);
@sidebar-selected-font-weight: var(--van-font-weight-bold);
@sidebar-selected-text-color: var(--van-text-color);
@sidebar-selected-border-width: 4px;
@sidebar-selected-border-height: 16px;
@sidebar-selected-border-color: @red;
@sidebar-selected-background-color: @white;
@sidebar-selected-border-color: var(--van-red);
@sidebar-selected-background-color: var(--van-white);

10
src/skeleton/index.less
View File

@ -12,17 +12,17 @@
.van-skeleton {
display: flex;
padding: 0 @padding-md;
padding: 0 var(--van-padding-md);
&__avatar {
flex-shrink: 0;
width: 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);
&--round {
border-radius: @border-radius-max;
border-radius: var(--van-border-radius-max);
}
}
@ -31,7 +31,7 @@
}
&__avatar + &__content {
padding-top: @padding-xs;
padding-top: var(--van-padding-xs);
}
&__row,
@ -63,7 +63,7 @@
&--round {
.van-skeleton__row,
.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';
@skeleton-row-height: 16px;
@skeleton-row-background-color: @active-color;
@skeleton-row-margin-top: @padding-sm;
@skeleton-row-background-color: var(--van-active-color);
@skeleton-row-margin-top: var(--van-padding-sm);
@skeleton-title-width: 40%;
@skeleton-avatar-size: 32px;
@skeleton-avatar-background-color: @active-color;
@skeleton-avatar-background-color: var(--van-active-color);
@skeleton-animation-duration: 1.2s;

12
src/slider/index.less
View File

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

14
src/step/index.less
View File

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

18
src/step/var.less
View File

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

6
src/stepper/index.less
View File

@ -124,7 +124,7 @@
border-radius: 100%;
&:active {
opacity: @active-opacity;
opacity: var(--van-active-opacity);
}
&--disabled {
@ -136,13 +136,13 @@
}
.van-stepper__plus {
color: @white;
color: var(--van-white);
background-color: var(--van-stepper-button-round-theme-color);
}
.van-stepper__minus {
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);
}
}

20
src/stepper/var.less
View File

@ -1,16 +1,16 @@
@import '../style/var.less';
@stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color;
@stepper-button-icon-color: @text-color;
@stepper-button-disabled-color: @background-color;
@stepper-button-disabled-icon-color: @gray-5;
@stepper-button-round-theme-color: @red;
@stepper-background-color: var(--van-active-color);
@stepper-button-icon-color: var(--van-text-color);
@stepper-button-disabled-color: var(--van-background-color);
@stepper-button-disabled-icon-color: var(--van-gray-5);
@stepper-button-round-theme-color: var(--van-red);
@stepper-input-width: 32px;
@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-text-color: @text-color;
@stepper-input-disabled-text-color: @gray-5;
@stepper-input-disabled-background-color: @active-color;
@stepper-border-radius: @border-radius-md;
@stepper-input-text-color: var(--van-text-color);
@stepper-input-disabled-text-color: var(--van-gray-5);
@stepper-input-disabled-background-color: var(--van-active-color);
@stepper-border-radius: var(--van-border-radius-md);

2
src/steps/index.less
View File

@ -20,6 +20,6 @@
}
&--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';
@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
--van-black: @black;
--van-white: @white;

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