diff --git a/src/action-bar-button/index.less b/src/action-bar-button/index.less index 2f7742a71..cab607d6e 100644 --- a/src/action-bar-button/index.less +++ b/src/action-bar-button/index.less @@ -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 { diff --git a/src/action-bar-button/var.less b/src/action-bar-button/var.less index 8246a39d9..0280d21a8 100644 --- a/src/action-bar-button/var.less +++ b/src/action-bar-button/var.less @@ -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); diff --git a/src/action-bar-icon/index.less b/src/action-bar-icon/index.less index 44b491750..627aa3e22 100644 --- a/src/action-bar-icon/index.less +++ b/src/action-bar-icon/index.less @@ -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); } diff --git a/src/action-bar-icon/var.less b/src/action-bar-icon/var.less index 071f9daa3..ff00e23dd 100644 --- a/src/action-bar-icon/var.less +++ b/src/action-bar-icon/var.less @@ -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); diff --git a/src/action-bar/var.less b/src/action-bar/var.less index 7f9df153c..eb5000e63 100644 --- a/src/action-bar/var.less +++ b/src/action-bar/var.less @@ -1,4 +1,4 @@ @import '../style/var.less'; -@action-bar-background-color: @white; +@action-bar-background-color: var(--van-white); @action-bar-height: 50px; diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less index bf27ee1c8..c6523d482 100644 --- a/src/action-sheet/index.less +++ b/src/action-sheet/index.less @@ -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)); } } diff --git a/src/action-sheet/var.less b/src/action-sheet/var.less index 13dd7eaf0..6f2191f94 100644 --- a/src/action-sheet/var.less +++ b/src/action-sheet/var.less @@ -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; diff --git a/src/address-edit/index.less b/src/address-edit/index.less index f7e4c440f..9283566cf 100644 --- a/src/address-edit/index.less +++ b/src/address-edit/index.less @@ -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 { diff --git a/src/address-edit/var.less b/src/address-edit/var.less index a1edb1c6c..b2e4ca4a8 100644 --- a/src/address-edit/var.less +++ b/src/address-edit/var.less @@ -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); diff --git a/src/address-list/index.less b/src/address-list/index.less index 0d31e9220..6e41cd1b2 100644 --- a/src/address-list/index.less +++ b/src/address-list/index.less @@ -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 { diff --git a/src/address-list/var.less b/src/address-list/var.less index 6b67c5f6f..33920e306 100644 --- a/src/address-list/var.less +++ b/src/address-list/var.less @@ -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; diff --git a/src/badge/index.less b/src/badge/index.less index a76d49b9c..84f84f3bc 100644 --- a/src/badge/index.less +++ b/src/badge/index.less @@ -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; diff --git a/src/badge/var.less b/src/badge/var.less index 141c4dfd4..fa4de9787 100644 --- a/src/badge/var.less +++ b/src/badge/var.less @@ -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; diff --git a/src/button/index.less b/src/button/index.less index 8c0731b1d..3babf50b6 100644 --- a/src/button/index.less +++ b/src/button/index.less @@ -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 { diff --git a/src/button/var.less b/src/button/var.less index 541b3ad17..229bee315 100644 --- a/src/button/var.less +++ b/src/button/var.less @@ -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; diff --git a/src/calendar/index.less b/src/calendar/index.less index fca849eb0..6c4c8edfe 100644 --- a/src/calendar/index.less +++ b/src/calendar/index.less @@ -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 { diff --git a/src/calendar/var.less b/src/calendar/var.less index 95ee046ef..6d27607cf 100644 --- a/src/calendar/var.less +++ b/src/calendar/var.less @@ -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; diff --git a/src/card/index.less b/src/card/index.less index 31f996a95..82848e341 100644 --- a/src/card/index.less +++ b/src/card/index.less @@ -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); } diff --git a/src/card/var.less b/src/card/var.less index 3e7369ccd..f06250d93 100644 --- a/src/card/var.less +++ b/src/card/var.less @@ -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); diff --git a/src/cascader/index.less b/src/cascader/index.less index caf80be34..d76f502d3 100644 --- a/src/cascader/index.less +++ b/src/cascader/index.less @@ -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); } } diff --git a/src/cascader/var.less b/src/cascader/var.less index f0d5f481d..75b7a0195 100644 --- a/src/cascader/var.less +++ b/src/cascader/var.less @@ -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); diff --git a/src/cell-group/var.less b/src/cell-group/var.less index fa0e5efa1..756320535 100644 --- a/src/cell-group/var.less +++ b/src/cell-group/var.less @@ -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; diff --git a/src/cell/index.less b/src/cell/index.less index fafea7526..bf1cb2786 100644 --- a/src/cell/index.less +++ b/src/cell/index.less @@ -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: '*'; diff --git a/src/cell/var.less b/src/cell/var.less index 616fc9581..66b436b52 100644 --- a/src/cell/var.less +++ b/src/cell/var.less @@ -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); diff --git a/src/checkbox/index.less b/src/checkbox/index.less index 85288f71b..912085b66 100644 --- a/src/checkbox/index.less +++ b/src/checkbox/index.less @@ -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); } diff --git a/src/checkbox/var.less b/src/checkbox/var.less index 651284854..f8e077e46 100644 --- a/src/checkbox/var.less +++ b/src/checkbox/var.less @@ -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); diff --git a/src/circle/index.less b/src/circle/index.less index ea2cb68af..4d9ee3640 100644 --- a/src/circle/index.less +++ b/src/circle/index.less @@ -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); diff --git a/src/circle/var.less b/src/circle/var.less index 6bdef611e..9ac4ea764 100644 --- a/src/circle/var.less +++ b/src/circle/var.less @@ -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); diff --git a/src/collapse-item/index.less b/src/collapse-item/index.less index b3da11aeb..1da4e72c7 100644 --- a/src/collapse-item/index.less +++ b/src/collapse-item/index.less @@ -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; } diff --git a/src/collapse-item/var.less b/src/collapse-item/var.less index 4ca1c9ee2..2d9d8478f 100644 --- a/src/collapse-item/var.less +++ b/src/collapse-item/var.less @@ -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); diff --git a/src/contact-card/index.less b/src/contact-card/index.less index 6c6e8b239..02fb81e19 100644 --- a/src/contact-card/index.less +++ b/src/contact-card/index.less @@ -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% ); diff --git a/src/contact-card/var.less b/src/contact-card/var.less index f1acacdee..ff91ec88e 100644 --- a/src/contact-card/var.less +++ b/src/contact-card/var.less @@ -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); diff --git a/src/contact-edit/var.less b/src/contact-edit/var.less index a74f19f0d..3cb85fcf4 100644 --- a/src/contact-edit/var.less +++ b/src/contact-edit/var.less @@ -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; diff --git a/src/contact-list/index.less b/src/contact-list/index.less index 005b3568d..dbe80c629 100644 --- a/src/contact-list/index.less +++ b/src/contact-list/index.less @@ -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(); } diff --git a/src/contact-list/var.less b/src/contact-list/var.less index 042a14a30..3b6ef8008 100644 --- a/src/contact-list/var.less +++ b/src/contact-list/var.less @@ -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); diff --git a/src/count-down/var.less b/src/count-down/var.less index cb97d9dad..0a5c3fe08 100644 --- a/src/count-down/var.less +++ b/src/count-down/var.less @@ -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); diff --git a/src/coupon-cell/var.less b/src/coupon-cell/var.less index 361bb2b0c..db0b5ea31 100644 --- a/src/coupon-cell/var.less +++ b/src/coupon-cell/var.less @@ -1,3 +1,3 @@ @import '../style/var.less'; -@coupon-cell-selected-text-color: @text-color; +@coupon-cell-selected-text-color: var(--van-text-color); diff --git a/src/coupon-list/index.less b/src/coupon-list/index.less index 6f3c3e7d8..818983e72 100644 --- a/src/coupon-list/index.less +++ b/src/coupon-list/index.less @@ -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); diff --git a/src/coupon-list/var.less b/src/coupon-list/var.less index bf2d15341..32184ad1f 100644 --- a/src/coupon-list/var.less +++ b/src/coupon-list/var.less @@ -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); diff --git a/src/coupon/index.less b/src/coupon/index.less index d0a66d8a1..4051111c1 100644 --- a/src/coupon/index.less +++ b/src/coupon/index.less @@ -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); } diff --git a/src/coupon/var.less b/src/coupon/var.less index b904885aa..5e4e0fcdc 100644 --- a/src/coupon/var.less +++ b/src/coupon/var.less @@ -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); diff --git a/src/dialog/index.less b/src/dialog/index.less index f47084a75..18131d1b2 100644 --- a/src/dialog/index.less +++ b/src/dialog/index.less @@ -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); } } diff --git a/src/dialog/var.less b/src/dialog/var.less index eea227d35..bc4e01a3b 100644 --- a/src/dialog/var.less +++ b/src/dialog/var.less @@ -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); diff --git a/src/divider/index.less b/src/divider/index.less index 8b4bc6e47..1753439da 100644 --- a/src/divider/index.less +++ b/src/divider/index.less @@ -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 { diff --git a/src/divider/var.less b/src/divider/var.less index 87bb0c87c..3913aafcf 100644 --- a/src/divider/var.less +++ b/src/divider/var.less @@ -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%; diff --git a/src/dropdown-item/index.less b/src/dropdown-item/index.less index c74e1dfc6..e5326a792 100644 --- a/src/dropdown-item/index.less +++ b/src/dropdown-item/index.less @@ -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); } } diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less index 3d8afa224..d194a57e7 100644 --- a/src/dropdown-menu/index.less +++ b/src/dropdown-menu/index.less @@ -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: ''; diff --git a/src/dropdown-menu/var.less b/src/dropdown-menu/var.less index b83cd4392..db39ebc31 100644 --- a/src/dropdown-menu/var.less +++ b/src/dropdown-menu/var.less @@ -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%; diff --git a/src/empty/var.less b/src/empty/var.less index 5e8ac18db..fb80fedc5 100644 --- a/src/empty/var.less +++ b/src/empty/var.less @@ -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; diff --git a/src/field/index.less b/src/field/index.less index 1cde05725..dc718dbb2 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -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); diff --git a/src/field/var.less b/src/field/var.less index abf97681b..2819ff8eb 100644 --- a/src/field/var.less +++ b/src/field/var.less @@ -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); diff --git a/src/grid-item/index.less b/src/grid-item/index.less index d97c1dbce..181c480cf 100644 --- a/src/grid-item/index.less +++ b/src/grid-item/index.less @@ -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); } } diff --git a/src/grid-item/var.less b/src/grid-item/var.less index d6b8589a9..bbe6fdec3 100644 --- a/src/grid-item/var.less +++ b/src/grid-item/var.less @@ -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); diff --git a/src/image-preview/index.less b/src/image-preview/index.less index 03779f019..757eba02a 100644 --- a/src/image-preview/index.less +++ b/src/image-preview/index.less @@ -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); diff --git a/src/image-preview/var.less b/src/image-preview/var.less index 1d27eb74b..a6cb62cd5 100644 --- a/src/image-preview/var.less +++ b/src/image-preview/var.less @@ -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; diff --git a/src/image/var.less b/src/image/var.less index 5d95688d7..cbfee2c9e 100644 --- a/src/image/var.less +++ b/src/image/var.less @@ -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); diff --git a/src/index-anchor/var.less b/src/index-anchor/var.less index 4e263d3a3..9ab40ddd7 100644 --- a/src/index-anchor/var.less +++ b/src/index-anchor/var.less @@ -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); diff --git a/src/index-bar/index.less b/src/index-bar/index.less index 5df331aa9..ba7b17a0b 100644 --- a/src/index-bar/index.less +++ b/src/index-bar/index.less @@ -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); diff --git a/src/index-bar/var.less b/src/index-bar/var.less index 107f7d76f..d2ca963e1 100644 --- a/src/index-bar/var.less +++ b/src/index-bar/var.less @@ -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); diff --git a/src/list/var.less b/src/list/var.less index fd24ad7a2..c18cd8317 100644 --- a/src/list/var.less +++ b/src/list/var.less @@ -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; diff --git a/src/loading/index.less b/src/loading/index.less index 9cb5a8133..cd3c2324f 100644 --- a/src/loading/index.less +++ b/src/loading/index.less @@ -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; } } } diff --git a/src/loading/var.less b/src/loading/var.less index 76883935f..430162829 100644 --- a/src/loading/var.less +++ b/src/loading/var.less @@ -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; diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index 5f67e5acf..b4a4e3c3a 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -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); } } diff --git a/src/nav-bar/var.less b/src/nav-bar/var.less index 6878c2098..92d69e917 100644 --- a/src/nav-bar/var.less +++ b/src/nav-bar/var.less @@ -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; diff --git a/src/notice-bar/var.less b/src/notice-bar/var.less index cf4b038ca..1a3896751 100644 --- a/src/notice-bar/var.less +++ b/src/notice-bar/var.less @@ -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; diff --git a/src/notify/index.less b/src/notify/index.less index b0e270395..bf5b45565 100644 --- a/src/notify/index.less +++ b/src/notify/index.less @@ -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; diff --git a/src/notify/var.less b/src/notify/var.less index 3fb554ecd..ca3ea3eb6 100644 --- a/src/notify/var.less +++ b/src/notify/var.less @@ -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); diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index 73692c17d..6c8579b29 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -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); } } diff --git a/src/number-keyboard/var.less b/src/number-keyboard/var.less index 37a6a57b1..8ab4bde01 100644 --- a/src/number-keyboard/var.less +++ b/src/number-keyboard/var.less @@ -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; diff --git a/src/pagination/index.less b/src/pagination/index.less index a534bf913..4fd8a00a2 100644 --- a/src/pagination/index.less +++ b/src/pagination/index.less @@ -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); } } } diff --git a/src/pagination/var.less b/src/pagination/var.less index ba95aa0eb..229927a89 100644 --- a/src/pagination/var.less +++ b/src/pagination/var.less @@ -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); diff --git a/src/password-input/index.less b/src/password-input/index.less index 97cfe07e0..14cbea59a 100644 --- a/src/password-input/index.less +++ b/src/password-input/index.less @@ -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; } diff --git a/src/password-input/var.less b/src/password-input/var.less index e628caee0..a0e83c30d 100644 --- a/src/password-input/var.less +++ b/src/password-input/var.less @@ -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; diff --git a/src/picker/index.less b/src/picker/index.less index b73459273..ecdfb22ef 100644 --- a/src/picker/index.less +++ b/src/picker/index.less @@ -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 { diff --git a/src/picker/var.less b/src/picker/var.less index a2960decf..7e0642d66 100644 --- a/src/picker/var.less +++ b/src/picker/var.less @@ -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); diff --git a/src/popover/index.less b/src/popover/index.less index f12bf6aa4..ea223efd6 100644 --- a/src/popover/index.less +++ b/src/popover/index.less @@ -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); } } diff --git a/src/popover/var.less b/src/popover/var.less index 001909261..ce49ecada 100644 --- a/src/popover/var.less +++ b/src/popover/var.less @@ -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); diff --git a/src/popup/index.less b/src/popup/index.less index cd6699249..1d0c966fd 100644 --- a/src/popup/index.less +++ b/src/popup/index.less @@ -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, diff --git a/src/popup/var.less b/src/popup/var.less index c82b0cb18..d5ce6b9f6 100644 --- a/src/popup/var.less +++ b/src/popup/var.less @@ -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; diff --git a/src/progress/var.less b/src/progress/var.less index 1b5332917..01bedb8b7 100644 --- a/src/progress/var.less +++ b/src/progress/var.less @@ -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); diff --git a/src/pull-refresh/var.less b/src/pull-refresh/var.less index 85fa8eb8b..504c542b7 100644 --- a/src/pull-refresh/var.less +++ b/src/pull-refresh/var.less @@ -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; diff --git a/src/radio/index.less b/src/radio/index.less index ac8715e9b..65be3bc34 100644 --- a/src/radio/index.less +++ b/src/radio/index.less @@ -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); } diff --git a/src/radio/var.less b/src/radio/var.less index 544e67093..d6f109c5e 100644 --- a/src/radio/var.less +++ b/src/radio/var.less @@ -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); diff --git a/src/rate/var.less b/src/rate/var.less index a1e68bf8a..f8cb10c26 100644 --- a/src/rate/var.less +++ b/src/rate/var.less @@ -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); diff --git a/src/search/index.less b/src/search/index.less index 7091199c0..c12269149 100644 --- a/src/search/index.less +++ b/src/search/index.less @@ -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); } } } diff --git a/src/search/var.less b/src/search/var.less index 2ef29754d..dd182aea8 100644 --- a/src/search/var.less +++ b/src/search/var.less @@ -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); diff --git a/src/share-sheet/index.less b/src/share-sheet/index.less index eb358cf0f..e4d0b6c66 100644 --- a/src/share-sheet/index.less +++ b/src/share-sheet/index.less @@ -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); } } } diff --git a/src/share-sheet/var.less b/src/share-sheet/var.less index 1d5aba303..5a6f8b8d8 100644 --- a/src/share-sheet/var.less +++ b/src/share-sheet/var.less @@ -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); diff --git a/src/sidebar-item/var.less b/src/sidebar-item/var.less index f1bd1c13b..1741d9856 100644 --- a/src/sidebar-item/var.less +++ b/src/sidebar-item/var.less @@ -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); diff --git a/src/skeleton/index.less b/src/skeleton/index.less index cd6a1a888..bfcf03090 100644 --- a/src/skeleton/index.less +++ b/src/skeleton/index.less @@ -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); } } } diff --git a/src/skeleton/var.less b/src/skeleton/var.less index ae78d88d4..0de3b5093 100644 --- a/src/skeleton/var.less +++ b/src/skeleton/var.less @@ -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; diff --git a/src/slider/index.less b/src/slider/index.less index 03fb408f3..e7e9d728c 100644 --- a/src/slider/index.less +++ b/src/slider/index.less @@ -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); } } } diff --git a/src/slider/var.less b/src/slider/var.less index e5c71f06b..137231ca9 100644 --- a/src/slider/var.less +++ b/src/slider/var.less @@ -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); diff --git a/src/step/index.less b/src/step/index.less index f20c07fbd..5eb2b78f4 100644 --- a/src/step/index.less +++ b/src/step/index.less @@ -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 { diff --git a/src/step/var.less b/src/step/var.less index 7bd45dd62..5d1571032 100644 --- a/src/step/var.less +++ b/src/step/var.less @@ -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); diff --git a/src/stepper/index.less b/src/stepper/index.less index 6d6921fb0..7e3b5e9a1 100644 --- a/src/stepper/index.less +++ b/src/stepper/index.less @@ -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); } } diff --git a/src/stepper/var.less b/src/stepper/var.less index 2cec1ed34..44f8eb026 100644 --- a/src/stepper/var.less +++ b/src/stepper/var.less @@ -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); diff --git a/src/steps/index.less b/src/steps/index.less index b8a7816c0..96ff6907b 100644 --- a/src/steps/index.less +++ b/src/steps/index.less @@ -20,6 +20,6 @@ } &--vertical { - padding: 0 0 0 @padding-xl; + padding: 0 0 0 var(--van-padding-xl); } } diff --git a/src/steps/var.less b/src/steps/var.less index 21a61ff37..dc0bf0707 100644 --- a/src/steps/var.less +++ b/src/steps/var.less @@ -1,3 +1,3 @@ @import '../style/var.less'; -@steps-background-color: @white; +@steps-background-color: var(--van-white); diff --git a/src/style/css-variables.less b/src/style/css-variables.less index 4b4c99575..96038dc03 100644 --- a/src/style/css-variables.less +++ b/src/style/css-variables.less @@ -1,4 +1,4 @@ -:host { +:root { // Color Palette --van-black: @black; --van-white: @white; diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less index 1369d5d53..e0f43755a 100644 --- a/src/submit-bar/index.less +++ b/src/submit-bar/index.less @@ -63,7 +63,7 @@ &__text { flex: 1; - padding-right: @padding-sm; + padding-right: var(--van-padding-sm); color: var(--van-submit-bar-text-color); text-align: right; @@ -73,13 +73,13 @@ } &__suffix-label { - margin-left: @padding-base; - font-weight: @font-weight-bold; + margin-left: var(--van-padding-base); + font-weight: var(--van-font-weight-bold); } &__price { color: var(--van-submit-bar-price-color); - font-weight: @font-weight-bold; + font-weight: var(--van-font-weight-bold); font-size: var(--van-submit-bar-price-font-size); &-integer { @@ -91,11 +91,11 @@ &__button { width: var(--van-submit-bar-button-width); height: var(--van-submit-bar-button-height); - font-weight: @font-weight-bold; + font-weight: var(--van-font-weight-bold); border: none; &--danger { - background: @gradient-red; + background: var(--van-gradient-red); } } diff --git a/src/submit-bar/var.less b/src/submit-bar/var.less index d5d6c2b52..958719ab0 100644 --- a/src/submit-bar/var.less +++ b/src/submit-bar/var.less @@ -2,21 +2,21 @@ @submit-bar-height: 50px; @submit-bar-z-index: 100; -@submit-bar-background-color: @white; +@submit-bar-background-color: var(--van-white); @submit-bar-button-width: 110px; -@submit-bar-price-color: @red; -@submit-bar-price-font-size: @font-size-md; -@submit-bar-currency-font-size: @font-size-md; -@submit-bar-text-color: @text-color; -@submit-bar-text-font-size: @font-size-md; -@submit-bar-tip-padding: @padding-xs @padding-sm; -@submit-bar-tip-font-size: @font-size-sm; +@submit-bar-price-color: var(--van-red); +@submit-bar-price-font-size: var(--van-font-size-md); +@submit-bar-currency-font-size: var(--van-font-size-md); +@submit-bar-text-color: var(--van-text-color); +@submit-bar-text-font-size: var(--van-font-size-md); +@submit-bar-tip-padding: var(--van-padding-xs) var(--van-padding-sm); +@submit-bar-tip-font-size: var(--van-font-size-sm); @submit-bar-tip-line-height: 1.5; @submit-bar-tip-color: #f56723; @submit-bar-tip-background-color: #fff7cc; @submit-bar-tip-icon-size: 12px; @submit-bar-button-height: 40px; -@submit-bar-padding: 0 @padding-md; -@submit-bar-price-font-size: @font-size-sm; +@submit-bar-padding: 0 var(--van-padding-md); +@submit-bar-price-font-size: var(--van-font-size-sm); @submit-bar-price-integer-font-size: 20px; -@submit-bar-price-font-family: @price-integer-font-family; +@submit-bar-price-font-family: var(--van-price-integer-font-family); diff --git a/src/swipe/index.less b/src/swipe/index.less index 8fdf7e0e8..6bb38358a 100644 --- a/src/swipe/index.less +++ b/src/swipe/index.less @@ -50,8 +50,8 @@ background-color: var(--van-swipe-indicator-inactive-background-color); border-radius: 100%; opacity: var(--van-swipe-indicator-inactive-opacity); - transition: opacity @animation-duration-fast, - background-color @animation-duration-fast; + transition: opacity var(--van-animation-duration-fast), + background-color var(--van-animation-duration-fast); &:not(:last-child) { margin-right: var(--van-swipe-indicator-size); diff --git a/src/swipe/var.less b/src/swipe/var.less index e4bf1e6a1..5c5b4ec86 100644 --- a/src/swipe/var.less +++ b/src/swipe/var.less @@ -1,8 +1,8 @@ @import '../style/var.less'; @swipe-indicator-size: 6px; -@swipe-indicator-margin: @padding-sm; +@swipe-indicator-margin: var(--van-padding-sm); @swipe-indicator-active-opacity: 1; @swipe-indicator-inactive-opacity: 0.3; -@swipe-indicator-active-background-color: @blue; -@swipe-indicator-inactive-background-color: @border-color; +@swipe-indicator-active-background-color: var(--van-blue); +@swipe-indicator-inactive-background-color: var(--van-border-color); diff --git a/src/switch/var.less b/src/switch/var.less index 612486243..572d8a6c8 100644 --- a/src/switch/var.less +++ b/src/switch/var.less @@ -4,11 +4,11 @@ @switch-width: 2em; @switch-height: 1em; @switch-node-size: 1em; -@switch-node-background-color: @white; +@switch-node-background-color: var(--van-white); @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); -@switch-background-color: @white; -@switch-on-background-color: @blue; -@switch-transition-duration: @animation-duration-base; -@switch-disabled-opacity: @disabled-opacity; -@switch-border: @border-width-base solid rgba(0, 0, 0, 0.1); +@switch-background-color: var(--van-white); +@switch-on-background-color: var(--van-blue); +@switch-transition-duration: var(--van-animation-duration-base); +@switch-disabled-opacity: var(--van-disabled-opacity); +@switch-border: var(--van-border-width-base) solid rgba(0, 0, 0, 0.1); diff --git a/src/tabbar-item/index.less b/src/tabbar-item/index.less index ce32b2afb..2dd1fcd53 100644 --- a/src/tabbar-item/index.less +++ b/src/tabbar-item/index.less @@ -41,6 +41,6 @@ } .van-badge { - margin-top: @padding-base; + margin-top: var(--van-padding-base); } } diff --git a/src/tabbar-item/var.less b/src/tabbar-item/var.less index be40c3869..45fb4503d 100644 --- a/src/tabbar-item/var.less +++ b/src/tabbar-item/var.less @@ -1,9 +1,9 @@ @import '../style/var.less'; -@tabbar-item-font-size: @font-size-sm; -@tabbar-item-text-color: @gray-7; -@tabbar-item-active-color: @blue; -@tabbar-item-active-background-color: @white; +@tabbar-item-font-size: var(--van-font-size-sm); +@tabbar-item-text-color: var(--van-gray-7); +@tabbar-item-active-color: var(--van-blue); +@tabbar-item-active-background-color: var(--van-white); @tabbar-item-line-height: 1; @tabbar-item-icon-size: 22px; @tabbar-item-margin-bottom: 4px; diff --git a/src/tabbar/var.less b/src/tabbar/var.less index 3a636ddbf..aaf04270c 100644 --- a/src/tabbar/var.less +++ b/src/tabbar/var.less @@ -2,4 +2,4 @@ @tabbar-height: 50px; @tabbar-z-index: 1; -@tabbar-background-color: @white; +@tabbar-background-color: var(--van-white); diff --git a/src/tabs/index.less b/src/tabs/index.less index d27acf603..7d724c730 100644 --- a/src/tabs/index.less +++ b/src/tabs/index.less @@ -22,7 +22,7 @@ align-items: center; justify-content: center; box-sizing: border-box; - padding: 0 @padding-base; + padding: 0 var(--van-padding-base); color: var(--van-tab-text-color); font-size: var(--van-tab-font-size); line-height: var(--van-tab-line-height); @@ -30,7 +30,7 @@ &--active { color: var(--van-tab-active-text-color); - font-weight: @font-weight-bold; + font-weight: var(--van-font-weight-bold); } &--disabled { @@ -66,7 +66,7 @@ &--scrollable { .van-tab { flex: 1 0 auto; - padding: 0 @padding-sm; + padding: 0 var(--van-padding-sm); } .van-tabs__nav { @@ -94,27 +94,28 @@ } &--complete { - padding-right: @padding-xs; - padding-left: @padding-xs; + padding-right: var(--van-padding-xs); + padding-left: var(--van-padding-xs); } &--card { box-sizing: border-box; height: var(--van-tabs-card-height); - margin: 0 @padding-md; - border: @border-width-base solid var(--van-tabs-default-color); - border-radius: @border-radius-sm; + margin: 0 var(--van-padding-md); + border: var(--van-border-width-base) solid var(--van-tabs-default-color); + border-radius: var(--van-border-radius-sm); .van-tab { color: var(--van-tabs-default-color); - border-right: @border-width-base solid var(--van-tabs-default-color); + border-right: var(--van-border-width-base) solid + var(--van-tabs-default-color); &:last-child { border-right: none; } &.van-tab--active { - color: @white; + color: var(--van-white); background-color: var(--van-tabs-default-color); } diff --git a/src/tabs/var.less b/src/tabs/var.less index 94adf9966..2ecbd9efe 100644 --- a/src/tabs/var.less +++ b/src/tabs/var.less @@ -1,14 +1,14 @@ @import '../style/var.less'; -@tab-text-color: @gray-7; -@tab-active-text-color: @text-color; -@tab-disabled-text-color: @gray-5; -@tab-font-size: @font-size-md; -@tab-line-height: @line-height-md; -@tabs-default-color: @red; +@tab-text-color: var(--van-gray-7); +@tab-active-text-color: var(--van-text-color); +@tab-disabled-text-color: var(--van-gray-5); +@tab-font-size: var(--van-font-size-md); +@tab-line-height: var(--van-line-height-md); +@tabs-default-color: var(--van-red); @tabs-line-height: 44px; @tabs-card-height: 30px; -@tabs-nav-background-color: @white; +@tabs-nav-background-color: var(--van-white); @tabs-bottom-bar-width: 40px; @tabs-bottom-bar-height: 3px; @tabs-bottom-bar-color: @tabs-default-color; diff --git a/src/tag/var.less b/src/tag/var.less index 6afaaa3ba..4d77fe25c 100644 --- a/src/tag/var.less +++ b/src/tag/var.less @@ -1,18 +1,18 @@ @import '../style/var.less'; -@tag-padding: 0 @padding-base; -@tag-text-color: @white; -@tag-font-size: @font-size-sm; +@tag-padding: 0 var(--van-padding-base); +@tag-text-color: var(--van-white); +@tag-font-size: var(--van-font-size-sm); @tag-border-radius: 2px; @tag-line-height: 16px; @tag-medium-padding: 2px 6px; -@tag-large-padding: @padding-base @padding-xs; -@tag-large-border-radius: @border-radius-md; -@tag-large-font-size: @font-size-md; -@tag-round-border-radius: @border-radius-max; -@tag-danger-color: @red; -@tag-primary-color: @blue; -@tag-success-color: @green; -@tag-warning-color: @orange; -@tag-default-color: @gray-6; -@tag-plain-background-color: @white; +@tag-large-padding: var(--van-padding-base) var(--van-padding-xs); +@tag-large-border-radius: var(--van-border-radius-md); +@tag-large-font-size: var(--van-font-size-md); +@tag-round-border-radius: var(--van-border-radius-max); +@tag-danger-color: var(--van-red); +@tag-primary-color: var(--van-blue); +@tag-success-color: var(--van-green); +@tag-warning-color: var(--van-orange); +@tag-default-color: var(--van-gray-6); +@tag-plain-background-color: var(--van-white); diff --git a/src/toast/index.less b/src/toast/index.less index 7c8638611..92a4d1d07 100644 --- a/src/toast/index.less +++ b/src/toast/index.less @@ -24,7 +24,7 @@ align-items: center; justify-content: center; box-sizing: content-box; - transition: all @animation-duration-fast; + transition: all var(--van-animation-duration-fast); // hack for avoid max-width when use left & fixed width: var(--van-toast-default-width); @@ -79,11 +79,11 @@ } &__loading { - padding: @padding-base; + padding: var(--van-padding-base); color: var(--van-toast-loading-icon-color); } &__text { - margin-top: @padding-xs; + margin-top: var(--van-padding-xs); } } diff --git a/src/toast/var.less b/src/toast/var.less index 6d406c40c..f897043d2 100644 --- a/src/toast/var.less +++ b/src/toast/var.less @@ -1,16 +1,16 @@ @import '../style/var.less'; @toast-max-width: 70%; -@toast-font-size: @font-size-md; -@toast-text-color: @white; -@toast-loading-icon-color: @white; -@toast-line-height: @line-height-md; -@toast-border-radius: @border-radius-lg; -@toast-background-color: fade(@black, 70%); +@toast-font-size: var(--van-font-size-md); +@toast-text-color: var(--van-white); +@toast-loading-icon-color: var(--van-white); +@toast-line-height: var(--van-line-height-md); +@toast-border-radius: var(--van-border-radius-lg); +@toast-background-color: rgba(0, 0, 0, 0.7); @toast-icon-size: 36px; @toast-text-min-width: 96px; -@toast-text-padding: @padding-xs @padding-sm; -@toast-default-padding: @padding-md; +@toast-text-padding: var(--van-padding-xs) var(--van-padding-sm); +@toast-default-padding: var(--van-padding-md); @toast-default-width: 88px; @toast-default-min-height: 88px; @toast-position-top-distance: 20%; diff --git a/src/tree-select/index.less b/src/tree-select/index.less index d2df6b6f6..cfbcdd58f 100644 --- a/src/tree-select/index.less +++ b/src/tree-select/index.less @@ -37,8 +37,8 @@ &__item { position: relative; - padding: 0 32px 0 @padding-md; - font-weight: @font-weight-bold; + padding: 0 32px 0 var(--van-padding-md); + font-weight: var(--van-font-weight-bold); line-height: var(--van-tree-select-item-height); cursor: pointer; @@ -47,7 +47,7 @@ } &:active { - background-color: @active-color; + background-color: var(--van-active-color); } &--disabled { @@ -63,8 +63,8 @@ &__selected { position: absolute; top: 50%; - right: @padding-md; - margin-top: -@padding-xs; + right: var(--van-padding-md); + margin-top: -var(--van-padding-xs); font-size: var(--van-tree-select-item-selected-size); } } diff --git a/src/tree-select/var.less b/src/tree-select/var.less index 670927ca1..bc9156868 100644 --- a/src/tree-select/var.less +++ b/src/tree-select/var.less @@ -1,10 +1,10 @@ @import '../style/var.less'; -@tree-select-font-size: @font-size-md; -@tree-select-nav-background-color: @background-color; -@tree-select-content-background-color: @white; -@tree-select-nav-item-padding: 14px @padding-sm; +@tree-select-font-size: var(--van-font-size-md); +@tree-select-nav-background-color: var(--van-background-color); +@tree-select-content-background-color: var(--van-white); +@tree-select-nav-item-padding: 14px var(--van-padding-sm); @tree-select-item-height: 48px; -@tree-select-item-active-color: @red; -@tree-select-item-disabled-color: @gray-5; +@tree-select-item-active-color: var(--van-red); +@tree-select-item-disabled-color: var(--van-gray-5); @tree-select-item-selected-size: 16px; diff --git a/src/uploader/index.less b/src/uploader/index.less index 1a846399a..9bf9766cb 100644 --- a/src/uploader/index.less +++ b/src/uploader/index.less @@ -69,7 +69,7 @@ box-sizing: border-box; width: var(--van-uploader-size); height: var(--van-uploader-size); - margin: 0 @padding-xs @padding-xs 0; + margin: 0 var(--van-padding-xs) var(--van-padding-xs) 0; background-color: var(--van-uploader-upload-background-color); &:active { @@ -82,7 +82,7 @@ } &-text { - margin-top: @padding-xs; + margin-top: var(--van-padding-xs); color: var(--van-uploader-text-color); font-size: var(--van-uploader-text-font-size); } @@ -90,7 +90,7 @@ &__preview { position: relative; - margin: 0 @padding-xs @padding-xs 0; + margin: 0 var(--van-padding-xs) var(--van-padding-xs) 0; cursor: pointer; &-image { @@ -148,7 +148,7 @@ &-message { margin-top: 6px; - padding: 0 @padding-base; + padding: 0 var(--van-padding-base); font-size: var(--van-uploader-mask-message-font-size); line-height: var(--van-uploader-mask-message-line-height); } diff --git a/src/uploader/var.less b/src/uploader/var.less index bc8d328f1..7115fe9f2 100644 --- a/src/uploader/var.less +++ b/src/uploader/var.less @@ -2,26 +2,26 @@ @uploader-size: 80px; @uploader-icon-size: 24px; -@uploader-icon-color: @gray-4; -@uploader-text-color: @gray-6; -@uploader-text-font-size: @font-size-sm; -@uploader-upload-background-color: @gray-1; -@uploader-upload-active-color: @active-color; -@uploader-delete-color: @white; +@uploader-icon-color: var(--van-gray-4); +@uploader-text-color: var(--van-gray-6); +@uploader-text-font-size: var(--van-font-size-sm); +@uploader-upload-background-color: var(--van-gray-1); +@uploader-upload-active-color: var(--van-active-color); +@uploader-delete-color: var(--van-white); @uploader-delete-icon-size: 14px; @uploader-delete-background-color: rgba(0, 0, 0, 0.7); -@uploader-file-background-color: @background-color; +@uploader-file-background-color: var(--van-background-color); @uploader-file-icon-size: 20px; -@uploader-file-icon-color: @gray-7; -@uploader-file-name-padding: 0 @padding-base; -@uploader-file-name-margin-top: @padding-xs; -@uploader-file-name-font-size: @font-size-sm; -@uploader-file-name-text-color: @gray-7; -@uploader-mask-text-color: @white; -@uploader-mask-background-color: fade(@gray-8, 88%); +@uploader-file-icon-color: var(--van-gray-7); +@uploader-file-name-padding: 0 var(--van-padding-base); +@uploader-file-name-margin-top: var(--van-padding-xs); +@uploader-file-name-font-size: var(--van-font-size-sm); +@uploader-file-name-text-color: var(--van-gray-7); +@uploader-mask-text-color: var(--van-white); +@uploader-mask-background-color: rgba(50, 50, 51, 0.88); @uploader-mask-icon-size: 22px; -@uploader-mask-message-font-size: @font-size-sm; -@uploader-mask-message-line-height: @line-height-xs; +@uploader-mask-message-font-size: var(--van-font-size-sm); +@uploader-mask-message-line-height: var(--van-line-height-xs); @uploader-loading-icon-size: 22px; -@uploader-loading-icon-color: @white; -@uploader-disabled-opacity: @disabled-opacity; +@uploader-loading-icon-color: var(--van-white); +@uploader-disabled-opacity: var(--van-disabled-opacity);