From 1a7889590fefa82f3b77133aabdc163f2c2645a8 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 23 Sep 2021 17:31:28 +0800 Subject: [PATCH] perf: remove CSS variables polyfill (#4487) * perf: remove CSS variables polyfill * style: fix missing calc value * perf: reduce some useless css vars --- example/pages/submit-bar/index.wxml | 2 +- packages/action-sheet/index.less | 99 ++++++++++---- packages/button/index.less | 123 ++++++++++++------ .../calendar/components/header/index.less | 18 +-- packages/calendar/components/month/index.less | 74 ++++++----- packages/calendar/index.less | 27 ++-- packages/card/index.less | 42 +++--- packages/cell-group/index.less | 25 ++-- packages/cell/index.less | 62 +++++---- packages/checkbox/index.less | 49 ++++--- packages/circle/index.less | 4 +- packages/collapse-item/index.less | 39 ++++-- packages/common/style/theme.less | 6 - packages/count-down/index.less | 7 +- packages/dialog/index.less | 40 +++--- packages/divider/index.less | 23 ++-- packages/dropdown-item/index.less | 6 +- packages/dropdown-menu/index.less | 35 +++-- packages/empty/index.less | 1 - packages/field/index.less | 73 ++++++----- packages/goods-action-button/index.less | 54 +++++--- packages/goods-action-icon/index.less | 20 +-- packages/goods-action/index.less | 8 +- packages/grid-item/index.less | 26 ++-- packages/image/index.less | 21 +-- packages/index-anchor/index.less | 26 ++-- packages/index-bar/index.less | 11 +- packages/info/index.less | 28 ++-- packages/loading/index.less | 24 ++-- packages/nav-bar/index.less | 31 +++-- packages/notice-bar/index.less | 28 ++-- packages/notify/index.less | 27 ++-- packages/overlay/index.less | 3 +- packages/panel/index.less | 7 +- packages/picker-column/index.less | 17 ++- packages/picker/index.less | 24 ++-- packages/popup/index.less | 71 +++++++--- packages/progress/index.less | 22 ++-- packages/radio/index.less | 43 +++--- packages/rate/index.less | 17 ++- packages/search/index.less | 31 +++-- packages/sidebar-item/index.less | 32 +++-- packages/sidebar/index.less | 3 +- packages/skeleton/index.less | 21 +-- packages/slider/index.less | 40 +++--- packages/stepper/index.less | 76 ++++++++--- packages/steps/index.less | 36 ++--- packages/submit-bar/README.md | 2 +- packages/submit-bar/index.less | 68 ++++++---- packages/switch/index.less | 44 ++++--- packages/tabbar-item/index.less | 13 +- packages/tabbar/index.less | 5 +- packages/tabs/index.less | 52 ++++---- packages/tag/index.less | 60 +++++---- packages/toast/index.less | 25 ++-- packages/tree-select/index.less | 30 +++-- packages/uploader/index.less | 121 ++++++++++------- 57 files changed, 1179 insertions(+), 743 deletions(-) delete mode 100644 packages/common/style/theme.less diff --git a/example/pages/submit-bar/index.wxml b/example/pages/submit-bar/index.wxml index 6d92cd63..e64650fe 100644 --- a/example/pages/submit-bar/index.wxml +++ b/example/pages/submit-bar/index.wxml @@ -14,7 +14,7 @@ price="{{ 3050 }}" button-text="提交订单" tip="您的收货地址不支持同城送, 我们已为您推荐快递" - tip-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png" + tip-icon="info-o" bind:submit="onClickButton" custom-class="van-submit-bar" safe-area-inset-bottom="{{ false }}" diff --git a/packages/action-sheet/index.less b/packages/action-sheet/index.less index 71028ba5..9071858e 100644 --- a/packages/action-sheet/index.less +++ b/packages/action-sheet/index.less @@ -1,20 +1,28 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-action-sheet { - .theme(max-height, '@action-sheet-max-height') !important; - .theme(color, '@action-sheet-item-text-color'); + max-height: var( + --action-sheet-max-height, + @action-sheet-max-height + ) !important; + color: var(--action-sheet-item-text-color, @action-sheet-item-text-color); &__item, &__cancel { padding: 14px @padding-md; text-align: center; - .theme(font-size, '@action-sheet-item-font-size'); - .theme(line-height, '@action-sheet-item-line-height'); - .theme(background-color, '@action-sheet-item-background'); + font-size: var(--action-sheet-item-font-size, @action-sheet-item-font-size); + line-height: var( + --action-sheet-item-line-height, + @action-sheet-item-line-height + ); + background-color: var( + --action-sheet-item-background, + @action-sheet-item-background + ); &--hover { - .theme(background-color, '@active-color'); + background-color: @active-color; } // reset weapp default border @@ -24,43 +32,76 @@ } &__cancel { - .theme(color, '@action-sheet-cancel-text-color'); + color: var( + --action-sheet-cancel-text-color, + @action-sheet-cancel-text-color + ); } &__gap { display: block; - .theme(height, '@action-sheet-cancel-padding-top'); - .theme(background-color, '@action-sheet-cancel-padding-color'); + height: var( + --action-sheet-cancel-padding-top, + @action-sheet-cancel-padding-top + ); + background-color: var( + --action-sheet-cancel-padding-color, + @action-sheet-cancel-padding-color + ); } &__item--disabled { - .theme(color, '@action-sheet-item-disabled-text-color'); + color: var( + --action-sheet-item-disabled-text-color, + @action-sheet-item-disabled-text-color + ); } &__item--disabled&__item--hover { - .theme(background-color, '@action-sheet-item-background'); + background-color: var( + --action-sheet-item-background, + @action-sheet-item-background + ); } &__subname { - .theme(margin-top, '@padding-xs'); - .theme(font-size, '@action-sheet-subname-font-size'); - .theme(color, '@action-sheet-subname-color'); - .theme(line-height, '@action-sheet-subname-line-height'); + margin-top: var(--padding-xs, @padding-xs); + font-size: var( + --action-sheet-subname-font-size, + @action-sheet-subname-font-size + ); + color: var(--action-sheet-subname-color, @action-sheet-subname-color); + line-height: var( + --action-sheet-subname-line-height, + @action-sheet-subname-line-height + ); } &__header { text-align: center; - .theme(font-weight, '@font-weight-bold'); - .theme(font-size, '@action-sheet-header-font-size'); - .theme(line-height, '@action-sheet-header-height'); + font-weight: var(--font-weight-bold, @font-weight-bold); + font-size: var( + --action-sheet-header-font-size, + @action-sheet-header-font-size + ); + line-height: var(--action-sheet-header-height, @action-sheet-header-height); } &__description { text-align: center; - .theme(padding, '20px @padding-md'); - .theme(color, '@action-sheet-description-color'); - .theme(font-size, '@action-sheet-description-font-size'); - .theme(line-height, '@action-sheet-description-line-height'); + padding: 20px var(--padding-md, @padding-md); + color: var( + --action-sheet-description-color, + @action-sheet-description-color + ); + font-size: var( + --action-sheet-description-font-size, + @action-sheet-description-font-size + ); + line-height: var( + --action-sheet-description-line-height, + @action-sheet-description-line-height + ); } &__close { @@ -68,9 +109,15 @@ top: 0; right: 0; line-height: inherit !important; - .theme(padding, '@action-sheet-close-icon-padding'); - .theme(font-size, '@action-sheet-close-icon-size') !important; - .theme(color, '@action-sheet-close-icon-color'); + padding: var( + --action-sheet-close-icon-padding, + @action-sheet-close-icon-padding + ); + font-size: var( + --action-sheet-close-icon-size, + @action-sheet-close-icon-size + ) !important; + color: var(--action-sheet-close-icon-color, @action-sheet-close-icon-color); } &__loading { diff --git a/packages/button/index.less b/packages/button/index.less index 356b203e..cbf9ae7a 100644 --- a/packages/button/index.less +++ b/packages/button/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-button { position: relative; @@ -12,12 +11,11 @@ vertical-align: middle; -webkit-appearance: none; -webkit-text-size-adjust: 100%; - - .theme(height, '@button-default-height'); - .theme(line-height, '@button-line-height'); - .theme(font-size, '@button-default-font-size'); - .theme(transition, 'opacity @animation-duration-fast'); - .theme(border-radius, '@button-border-radius'); + height: var(--button-default-height, @button-default-height); + line-height: var(--button-line-height, @button-line-height); + font-size: var(--button-default-font-size, @button-default-font-size); + transition: opacity @animation-duration-fast; + border-radius: var(--button-border-radius, @button-border-radius); &::before { position: absolute; @@ -30,9 +28,8 @@ transform: translate(-50%, -50%); opacity: 0; content: ' '; - - .theme(background-color, '@black'); - .theme(border-color, '@black'); + background-color: @black; + border-color: @black; } // reset weapp default border @@ -49,78 +46,110 @@ } &--default { - .theme(color, '@button-default-color'); - .theme(background, '@button-default-background-color'); - .theme(border, '@button-border-width solid @button-default-border-color'); + color: var(--button-default-color, @button-default-color); + background: var( + --button-default-background-color, + @button-default-background-color + ); + border: var(--button-border-width, @button-border-width) solid + var(--button-default-border-color, @button-default-border-color); } &--primary { - .theme(color, '@button-primary-color'); - .theme(background, '@button-primary-background-color'); - .theme(border, '@button-border-width solid @button-primary-border-color'); + color: var(--button-primary-color, @button-primary-color); + background: var( + --button-primary-background-color, + @button-primary-background-color + ); + border: var(--button-border-width, @button-border-width) solid + var(--button-primary-border-color, @button-primary-border-color); } &--info { - .theme(color, '@button-info-color'); - .theme(background, '@button-info-background-color'); - .theme(border, '@button-border-width solid @button-info-border-color'); + color: var(--button-info-color, @button-info-color); + background: var( + --button-info-background-color, + @button-info-background-color + ); + border: var(--button-border-width, @button-border-width) solid + var(--button-info-border-color, @button-info-border-color); } &--danger { - .theme(color, '@button-danger-color'); - .theme(background, '@button-danger-background-color'); - .theme(border, '@button-border-width solid @button-danger-border-color'); + color: var(--button-danger-color, @button-danger-color); + background: var( + --button-danger-background-color, + @button-danger-background-color + ); + border: var(--button-border-width, @button-border-width) solid + var(--button-danger-border-color, @button-danger-border-color); } &--warning { - .theme(color, '@button-warning-color'); - .theme(background, '@button-warning-background-color'); - .theme(border, '@button-border-width solid @button-warning-border-color'); + color: var(--button-warning-color, @button-warning-color); + background: var( + --button-warning-background-color, + @button-warning-background-color + ); + border: var(--button-border-width, @button-border-width) solid + var(--button-warning-border-color, @button-warning-border-color); } &--plain { - .theme(background, '@button-plain-background-color'); + background: var( + --button-plain-background-color, + @button-plain-background-color + ); &.van-button--primary { - .theme(color, '@button-primary-background-color'); + color: var( + --button-primary-background-color, + @button-primary-background-color + ); } &.van-button--info { - .theme(color, '@button-info-background-color'); + color: var(--button-info-background-color, @button-info-background-color); } &.van-button--danger { - .theme(color, '@button-danger-background-color'); + color: var( + --button-danger-background-color, + @button-danger-background-color + ); } &.van-button--warning { - .theme(color, '@button-warning-background-color'); + color: var( + --button-warning-background-color, + @button-warning-background-color + ); } } &--large { width: 100%; - .theme(height, '@button-large-height'); + height: var(--button-large-height, @button-large-height); } &--normal { padding: 0 15px; - .theme(font-size, '@button-normal-font-size'); + font-size: var(--button-normal-font-size, @button-normal-font-size); } &--small { - .theme(min-width, '@button-small-min-width'); - .theme(height, '@button-small-height'); - .theme(padding, '0 @padding-xs'); - .theme(font-size, '@button-small-font-size'); + min-width: var(--button-small-min-width, @button-small-min-width); + height: var(--button-small-height, @button-small-height); + padding: 0 var(--padding-xs, @padding-xs); + font-size: var(--button-small-font-size, @button-small-font-size); } // mini图标默认宽度50px，文字不能超过4个 &--mini { display: inline-block; - .theme(min-width, '@button-mini-min-width'); - .theme(height, '@button-mini-height'); - .theme(font-size, '@button-mini-font-size'); + min-width: var(--button-mini-min-width, @button-mini-min-width); + height: var(--button-mini-height, @button-mini-height); + font-size: var(--button-mini-font-size, @button-mini-font-size); & + .van-button--mini { margin-left: 5px; @@ -133,7 +162,10 @@ } &--round { - .theme(border-radius, '@button-round-border-radius'); + border-radius: var( + --button-round-border-radius, + @button-round-border-radius + ); } &--square { @@ -141,7 +173,7 @@ } &--disabled { - .theme(opacity, '@button-disabled-opacity'); + opacity: var(--button-disabled-opacity, @button-disabled-opacity); } &__text { @@ -166,11 +198,16 @@ &::after { border-color: inherit; border-width: 1px; - .theme(border-radius, 'calc(@button-border-radius * 2)'); + border-radius: calc( + var(--button-border-radius, @button-border-radius) * 2 + ); } &.van-button--round::after { - .theme(border-radius, '@button-round-border-radius'); + border-radius: var( + --button-round-border-radius, + @button-round-border-radius + ); } &.van-button--square::after { diff --git a/packages/calendar/components/header/index.less b/packages/calendar/components/header/index.less index c270ac34..7bcd940e 100644 --- a/packages/calendar/components/header/index.less +++ b/packages/calendar/components/header/index.less @@ -1,19 +1,20 @@ @import '../../../common/style/var.less'; -@import '../../../common/style/theme.less'; .van-calendar { &__header { flex-shrink: 0; - .theme(box-shadow, '@calendar-header-box-shadow'); + box-shadow: var(--calendar-header-box-shadow, @calendar-header-box-shadow); } &__header-title, &__header-subtitle { text-align: center; - - .theme(height, '@calendar-header-title-height'); - .theme(font-weight, '@font-weight-bold'); - .theme(line-height, '@calendar-header-title-height'); + height: var(--calendar-header-title-height, @calendar-header-title-height); + font-weight: var(--font-weight-bold, @font-weight-bold); + line-height: var( + --calendar-header-title-height, + @calendar-header-title-height + ); } &__header-title:empty, @@ -32,8 +33,7 @@ &__weekday { flex: 1; text-align: center; - - .theme(font-size, '@calendar-weekdays-font-size'); - .theme(line-height, '@calendar-weekdays-height'); + font-size: var(--calendar-weekdays-font-size, @calendar-weekdays-font-size); + line-height: var(--calendar-weekdays-height, @calendar-weekdays-height); } } diff --git a/packages/calendar/components/month/index.less b/packages/calendar/components/month/index.less index 0be00465..fc8ab648 100644 --- a/packages/calendar/components/month/index.less +++ b/packages/calendar/components/month/index.less @@ -1,18 +1,26 @@ @import '../../../common/style/var'; -@import '../../../common/style/theme.less'; .van-calendar { display: flex; flex-direction: column; height: 100%; - .theme(background-color, '@calendar-background-color'); + background-color: var( + --calendar-background-color, + @calendar-background-color + ); &__month-title { text-align: center; - .theme(height, '@calendar-header-title-height'); - .theme(font-weight, '@font-weight-bold'); - .theme(font-size, '@calendar-month-title-font-size'); - .theme(line-height, '@calendar-header-title-height'); + height: var(--calendar-header-title-height, @calendar-header-title-height); + font-weight: var(--font-weight-bold, @font-weight-bold); + font-size: var( + --calendar-month-title-font-size, + @calendar-month-title-font-size + ); + line-height: var( + --calendar-header-title-height, + @calendar-header-title-height + ); } &__days { @@ -29,9 +37,11 @@ z-index: 0; transform: translate(-50%, -50%); pointer-events: none; - - .theme(color, '@calendar-month-mark-color'); - .theme(font-size, '@calendar-month-mark-font-size'); + color: var(--calendar-month-mark-color, @calendar-month-mark-color); + font-size: var( + --calendar-month-mark-font-size, + @calendar-month-mark-font-size + ); } &__day, @@ -45,34 +55,36 @@ &__day { position: relative; width: 14.285%; - - .theme(height, '@calendar-day-height'); - .theme(font-size, '@calendar-day-font-size'); + height: var(--calendar-day-height, @calendar-day-height); + font-size: var(--calendar-day-font-size, @calendar-day-font-size); &--end, &--start, &--start-end, &--multiple-middle, &--multiple-selected { - .theme(color, '@calendar-range-edge-color'); - .theme(background-color, '@calendar-range-edge-background-color'); + color: var(--calendar-range-edge-color, @calendar-range-edge-color); + background-color: var( + --calendar-range-edge-background-color, + @calendar-range-edge-background-color + ); } &--start { - .theme(border-radius, '@border-radius-md 0 0 @border-radius-md'); + border-radius: @border-radius-md 0 0 @border-radius-md; } &--end { - .theme(border-radius, '0 @border-radius-md @border-radius-md 0'); + border-radius: 0 @border-radius-md @border-radius-md 0; } &--start-end, &--multiple-selected { - .theme(border-radius, '@border-radius-md'); + border-radius: @border-radius-md; } &--middle { - .theme(color, '@calendar-range-middle-color'); + color: var(--calendar-range-middle-color, @calendar-range-middle-color); &::after { position: absolute; @@ -82,15 +94,16 @@ left: 0; background-color: currentColor; content: ''; - - .theme(opacity, '@calendar-range-middle-background-opacity'); + opacity: var( + --calendar-range-middle-background-opacity, + @calendar-range-middle-background-opacity + ); } } &--disabled { cursor: default; - - .theme(color, '@calendar-day-disabled-color'); + color: var(--calendar-day-disabled-color, @calendar-day-disabled-color); } } @@ -99,8 +112,8 @@ position: absolute; right: 0; left: 0; - .theme(font-size, '@calendar-info-font-size'); - .theme(line-height, '@calendar-info-line-height'); + font-size: var(--calendar-info-font-size, @calendar-info-font-size); + line-height: var(--calendar-info-line-height, @calendar-info-line-height); @media (max-width: 350px) { font-size: 9px; @@ -116,10 +129,13 @@ } &__selected-day { - .theme(width, '@calendar-selected-day-size'); - .theme(height, '@calendar-selected-day-size'); - .theme(color, '@calendar-selected-day-color'); - .theme(background-color, '@calendar-selected-day-background-color'); - .theme(border-radius, '@border-radius-md'); + width: var(--calendar-selected-day-size, @calendar-selected-day-size); + height: var(--calendar-selected-day-size, @calendar-selected-day-size); + color: var(--calendar-selected-day-color, @calendar-selected-day-color); + background-color: var( + --calendar-selected-day-background-color, + @calendar-selected-day-background-color + ); + border-radius: @border-radius-md; } } diff --git a/packages/calendar/index.less b/packages/calendar/index.less index 0c3d4cce..535f9bde 100644 --- a/packages/calendar/index.less +++ b/packages/calendar/index.less @@ -1,11 +1,13 @@ @import '../common/style/var'; -@import '../common/style/theme.less'; .van-calendar { display: flex; flex-direction: column; - .theme(height, '@calendar-height'); - .theme(background-color, '@calendar-background-color'); + height: var(--calendar-height, @calendar-height); + background-color: var( + --calendar-background-color, + @calendar-background-color + ); &__close-icon { top: 11px; @@ -13,7 +15,7 @@ &__popup--top, &__popup--bottom { - .theme(height, '@calendar-popup-height'); + height: var(--calendar-popup-height, @calendar-popup-height); } &__popup--left, @@ -29,7 +31,7 @@ &__footer { flex-shrink: 0; - .theme(padding, '0 @padding-md'); + padding: 0 var(--padding-md, @padding-md); &--safe-area-inset-bottom { padding-bottom: constant(safe-area-inset-bottom); @@ -47,8 +49,17 @@ } &__confirm { - .theme(height, '@calendar-confirm-button-height') !important; - .theme(margin, '@calendar-confirm-button-margin') !important; - .theme(line-height, '@calendar-confirm-button-line-height') !important; + height: var( + --calendar-confirm-button-height, + @calendar-confirm-button-height + ) !important; + margin: var( + --calendar-confirm-button-margin, + @calendar-confirm-button-margin + ) !important; + line-height: var( + --calendar-confirm-button-line-height, + @calendar-confirm-button-line-height + ) !important; } } diff --git a/packages/card/index.less b/packages/card/index.less index d7ab616f..b65f8d0d 100644 --- a/packages/card/index.less +++ b/packages/card/index.less @@ -1,13 +1,12 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-card { position: relative; box-sizing: border-box; - .theme(padding, '@card-padding'); - .theme(font-size, '@card-font-size'); - .theme(color, '@card-text-color'); - .theme(background-color, '@card-background-color'); + padding: var(--card-padding, @card-padding); + font-size: var(--card-font-size, @card-font-size); + color: var(--card-text-color, @card-text-color); + background-color: var(--card-background-color, @card-background-color); &__header { display: flex; @@ -21,9 +20,9 @@ &__thumb { position: relative; flex: none; - .theme(width, '@card-thumb-size'); - .theme(height, '@card-thumb-size'); - .theme(margin-right, '@padding-xs'); + width: var(--card-thumb-size, @card-thumb-size); + height: var(--card-thumb-size, @card-thumb-size); + margin-right: var(--padding-xs, @padding-xs); &:empty { display: none; @@ -33,7 +32,7 @@ &__img { width: 100%; height: 100%; - .theme(border-radius, '@border-radius-lg'); + border-radius: @border-radius-lg; } &__content { @@ -43,7 +42,7 @@ flex-direction: column; justify-content: space-between; min-width: 0; /* hack for flex box ellipsis */ - .theme(min-height, '@card-thumb-size'); + min-height: var(--card-thumb-size, @card-thumb-size); &--center { justify-content: center; @@ -57,12 +56,12 @@ &__title { font-weight: bold; - .theme(line-height, '@card-title-line-height'); + line-height: var(--card-title-line-height, @card-title-line-height); } &__desc { - .theme(line-height, '@card-desc-line-height'); - .theme(color, '@card-desc-color'); + line-height: var(--card-desc-line-height, @card-desc-line-height); + color: var(--card-desc-color, @card-desc-color); } &__bottom { @@ -72,16 +71,19 @@ &__price { display: inline-block; font-weight: bold; - .theme(color, '@card-price-color'); - .theme(font-size, '@card-price-font-size'); + color: var(--card-price-color, @card-price-color); + font-size: var(--card-price-font-size, @card-price-font-size); &-integer { - .theme(font-size, '@card-price-integer-font-size'); - .theme(font-family, '@card-price-font-family'); + font-size: var( + --card-price-integer-font-size, + @card-price-integer-font-size + ); + font-family: var(--card-price-font-family, @card-price-font-family); } &-decimal { - .theme(font-family, '@card-price-font-family'); + font-family: var(--card-price-font-family, @card-price-font-family); } } @@ -89,8 +91,8 @@ display: inline-block; margin-left: 5px; text-decoration: line-through; - .theme(font-size, '@card-origin-price-font-size'); - .theme(color, '@card-origin-price-color'); + font-size: var(--card-origin-price-font-size, @card-origin-price-font-size); + color: var(--card-origin-price-color, @card-origin-price-color); } &__num { diff --git a/packages/cell-group/index.less b/packages/cell-group/index.less index 1b6dab4d..92cd8e70 100644 --- a/packages/cell-group/index.less +++ b/packages/cell-group/index.less @@ -1,22 +1,29 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-cell-group { &--inset { - .theme(margin, '@cell-group-inset-padding'); - .theme(border-radius, '@cell-group-inset-border-radius'); - + margin: var(--cell-group-inset-padding, @cell-group-inset-padding); + border-radius: var( + --cell-group-inset-border-radius, + @cell-group-inset-border-radius + ); overflow: hidden; } &__title { - .theme(padding, '@cell-group-title-padding'); - .theme(font-size, '@cell-group-title-font-size'); - .theme(line-height, '@cell-group-title-line-height'); - .theme(color, '@cell-group-title-color'); + padding: var(--cell-group-title-padding, @cell-group-title-padding); + font-size: var(--cell-group-title-font-size, @cell-group-title-font-size); + line-height: var( + --cell-group-title-line-height, + @cell-group-title-line-height + ); + color: var(--cell-group-title-color, @cell-group-title-color); &--inset { - .theme(padding, '@cell-group-inset-title-padding'); + padding: var( + --cell-group-inset-title-padding, + @cell-group-inset-title-padding + ); } } } diff --git a/packages/cell/index.less b/packages/cell/index.less index 32ef1b8f..7bb15adf 100644 --- a/packages/cell/index.less +++ b/packages/cell/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; @import '../common/style/mixins/hairline.less'; .van-cell { @@ -7,11 +6,12 @@ display: flex; box-sizing: border-box; width: 100%; - .theme(padding, '@cell-vertical-padding @cell-horizontal-padding'); - .theme(font-size, '@cell-font-size'); - .theme(line-height, '@cell-line-height'); - .theme(color, '@cell-text-color'); - .theme(background-color, '@cell-background-color'); + padding: var(--cell-vertical-padding, @cell-vertical-padding) + var(--cell-horizontal-padding, @cell-horizontal-padding); + font-size: var(--cell-font-size, @cell-font-size); + line-height: var(--cell-line-height, @cell-line-height); + color: var(--cell-text-color, @cell-text-color); + background-color: var(--cell-background-color, @cell-background-color); &::after { .hairline-bottom(@border-color, @padding-md, @padding-md); @@ -22,21 +22,21 @@ } &-group { - .theme(background-color, '@cell-background-color'); + background-color: var(--cell-background-color, @cell-background-color); } &__label { - .theme(margin-top, '@cell-label-margin-top'); - .theme(font-size, '@cell-label-font-size'); - .theme(line-height, '@cell-label-line-height'); - .theme(color, '@cell-label-color'); + margin-top: var(--cell-label-margin-top, @cell-label-margin-top); + font-size: var(--cell-label-font-size, @cell-label-font-size); + line-height: var(--cell-label-line-height, @cell-label-line-height); + color: var(--cell-label-color, @cell-label-color); } &__value { overflow: hidden; text-align: right; vertical-align: middle; - .theme(color, '@cell-value-color'); + color: var(--cell-value-color, @cell-value-color); } &__title, @@ -52,30 +52,30 @@ &__right-icon-wrap { display: flex; align-items: center; - .theme(height, '@cell-line-height'); - .theme(font-size, '@cell-icon-size'); + height: var(--cell-line-height, @cell-line-height); + font-size: var(--cell-icon-size, @cell-icon-size); } &__left-icon-wrap { - .theme(margin-right, '@padding-base'); + margin-right: var(--padding-base, @padding-base); } &__right-icon-wrap { - .theme(margin-left, '@padding-base'); - .theme(color, '@cell-right-icon-color'); + margin-left: var(--padding-base, @padding-base); + color: var(--cell-right-icon-color, @cell-right-icon-color); } &__left-icon { vertical-align: middle; - .theme(line-height, '@cell-line-height'); + line-height: var(--cell-line-height, @cell-line-height); } &__right-icon { - .theme(line-height, '@cell-line-height'); + line-height: var(--cell-line-height, @cell-line-height); } &--clickable&--hover { - .theme(background-color, '@cell-active-color'); + background-color: var(--cell-active-color, @cell-active-color); } &--required { @@ -84,9 +84,9 @@ &::before { position: absolute; content: '*'; - .theme(left, '@padding-xs'); - .theme(font-size, '@cell-font-size'); - .theme(color, '@cell-required-color'); + left: var(--padding-xs, @padding-xs); + font-size: var(--cell-font-size, @cell-font-size); + color: var(--cell-required-color, @cell-required-color); } } @@ -95,19 +95,25 @@ } &--large { - .theme(padding-top, '@cell-large-vertical-padding'); - .theme(padding-bottom, '@cell-large-vertical-padding'); + padding-top: var( + --cell-large-vertical-padding, + @cell-large-vertical-padding + ); + padding-bottom: var( + --cell-large-vertical-padding, + @cell-large-vertical-padding + ); .van-cell__title { - .theme(font-size, '@cell-large-title-font-size'); + font-size: var(--cell-large-title-font-size, @cell-large-title-font-size); } .van-cell__value { - .theme(font-size, '@cell-large-value-font-size'); + font-size: var(--cell-large-value-font-size, @cell-large-value-font-size); } .van-cell__label { - .theme(font-size, '@cell-large-label-font-size'); + font-size: var(--cell-large-label-font-size, @cell-large-label-font-size); } } } diff --git a/packages/checkbox/index.less b/packages/checkbox/index.less index d4ad6fa7..a8fea85a 100644 --- a/packages/checkbox/index.less +++ b/packages/checkbox/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-checkbox { display: flex; @@ -13,7 +12,7 @@ &__icon-wrap, &__label { - .theme(line-height, '@checkbox-size'); + line-height: var(--checkbox-size, @checkbox-size); } &__icon-wrap { @@ -30,44 +29,60 @@ color: transparent; text-align: center; transition-property: color, border-color, background-color; - - .theme(font-size, '@checkbox-size'); - .theme(border, '1px solid @checkbox-border-color'); - .theme(transition-duration, '@checkbox-transition-duration'); + font-size: var(--checkbox-size, @checkbox-size); + border: 1px solid var(--checkbox-border-color, @checkbox-border-color); + transition-duration: var( + --checkbox-transition-duration, + @checkbox-transition-duration + ); &--round { border-radius: 100%; } &--checked { - .theme(color, '@white'); - .theme(background-color, '@checkbox-checked-icon-color'); - .theme(border-color, '@checkbox-checked-icon-color'); + color: @white; + background-color: var( + --checkbox-checked-icon-color, + @checkbox-checked-icon-color + ); + border-color: var( + --checkbox-checked-icon-color, + @checkbox-checked-icon-color + ); } &--disabled { - .theme(background-color, '@checkbox-disabled-background-color'); - .theme(border-color, '@checkbox-disabled-icon-color'); + background-color: var( + --checkbox-disabled-background-color, + @checkbox-disabled-background-color + ); + border-color: var( + --checkbox-disabled-icon-color, + @checkbox-disabled-icon-color + ); } &--disabled&--checked { - .theme(color, '@checkbox-disabled-icon-color'); + color: var(--checkbox-disabled-icon-color, @checkbox-disabled-icon-color); } } &__label { word-wrap: break-word; - - .theme(padding-left, '@checkbox-label-margin'); - .theme(color, '@checkbox-label-color'); + padding-left: var(--checkbox-label-margin, @checkbox-label-margin); + color: var(--checkbox-label-color, @checkbox-label-color); &--left { float: left; - .theme(margin, '0 @checkbox-label-margin 0 0'); + margin: 0 var(--checkbox-label-margin, @checkbox-label-margin) 0 0; } &--disabled { - .theme(color, '@checkbox-disabled-label-color'); + color: var( + --checkbox-disabled-label-color, + @checkbox-disabled-label-color + ); } &:empty { diff --git a/packages/circle/index.less b/packages/circle/index.less index 2bae9811..b2c1eb05 100644 --- a/packages/circle/index.less +++ b/packages/circle/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-circle { position: relative; @@ -12,7 +11,6 @@ left: 0; width: 100%; transform: translateY(-50%); - - .theme(color, '@circle-text-color'); + color: var(--circle-text-color, @circle-text-color); } } diff --git a/packages/collapse-item/index.less b/packages/collapse-item/index.less index ab89bab1..290a661b 100644 --- a/packages/collapse-item/index.less +++ b/packages/collapse-item/index.less @@ -1,11 +1,14 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-collapse-item { &__title { .van-cell__right-icon { transform: rotate(90deg); - .theme(transition, 'transform @collapse-item-transition-duration'); + transition: transform + var( + --collapse-item-transition-duration, + @collapse-item-transition-duration + ); } &--expanded { @@ -17,11 +20,14 @@ &--disabled { .van-cell, .van-cell__right-icon { - .theme(color, '@collapse-item-title-disabled-color') !important; + color: var( + --collapse-item-title-disabled-color, + @collapse-item-title-disabled-color + ) !important; } .van-cell--hover { - .theme(background-color, '@white') !important; + background-color: @white !important; } } } @@ -31,10 +37,25 @@ } &__content { - .theme(padding, '@collapse-item-content-padding'); - .theme(color, '@collapse-item-content-text-color'); - .theme(font-size, '@collapse-item-content-font-size'); - .theme(line-height, '@collapse-item-content-line-height'); - .theme(background-color, '@collapse-item-content-background-color'); + padding: var( + --collapse-item-content-padding, + @collapse-item-content-padding + ); + color: var( + --collapse-item-content-text-color, + @collapse-item-content-text-color + ); + font-size: var( + --collapse-item-content-font-size, + @collapse-item-content-font-size + ); + line-height: var( + --collapse-item-content-line-height, + @collapse-item-content-line-height + ); + background-color: var( + --collapse-item-content-background-color, + @collapse-item-content-background-color + ); } } diff --git a/packages/common/style/theme.less b/packages/common/style/theme.less deleted file mode 100644 index 2b5d502b..00000000 --- a/packages/common/style/theme.less +++ /dev/null @@ -1,6 +0,0 @@ -@import (reference) './var.less'; - -.theme(@property, @imp) { - @{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig')); - @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig')); -} diff --git a/packages/count-down/index.less b/packages/count-down/index.less index fd28ec2b..eb3fe42b 100644 --- a/packages/count-down/index.less +++ b/packages/count-down/index.less @@ -1,8 +1,7 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-count-down { - .theme(color, '@count-down-text-color'); - .theme(font-size, '@count-down-font-size'); - .theme(line-height, '@count-down-line-height'); + color: var(--count-down-text-color, @count-down-text-color); + font-size: var(--count-down-font-size, @count-down-font-size); + line-height: var(--count-down-line-height, @count-down-line-height); } diff --git a/packages/dialog/index.less b/packages/dialog/index.less index aef455e5..3cb7180d 100644 --- a/packages/dialog/index.less +++ b/packages/dialog/index.less @@ -1,26 +1,28 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-dialog { top: 45% !important; overflow: hidden; - .theme(width, '@dialog-width'); - .theme(font-size, '@dialog-font-size'); - .theme(border-radius, '@dialog-border-radius'); - .theme(background-color, '@dialog-background-color'); + width: var(--dialog-width, @dialog-width); + font-size: var(--dialog-font-size, @dialog-font-size); + border-radius: var(--dialog-border-radius, @dialog-border-radius); + background-color: var(--dialog-background-color, @dialog-background-color); @media (max-width: 321px) { - .theme(width, '@dialog-small-screen-width'); + width: var(--dialog-small-screen-width, @dialog-small-screen-width); } &__header { text-align: center; - .theme(padding-top, '@dialog-header-padding-top'); - .theme(font-weight, '@dialog-header-font-weight'); - .theme(line-height, '@dialog-header-line-height'); + padding-top: var(--dialog-header-padding-top, @dialog-header-padding-top); + font-weight: var(--dialog-header-font-weight, @dialog-header-font-weight); + line-height: var(--dialog-header-line-height, @dialog-header-line-height); &--isolated { - .theme(padding, '@dialog-header-isolated-padding'); + padding: var( + --dialog-header-isolated-padding, + @dialog-header-isolated-padding + ); } } @@ -28,18 +30,24 @@ overflow-y: auto; text-align: center; -webkit-overflow-scrolling: touch; - .theme(font-size, '@dialog-message-font-size'); - .theme(line-height, '@dialog-message-line-height'); - .theme(max-height, '@dialog-message-max-height'); - .theme(padding, '@dialog-message-padding'); + font-size: var(--dialog-message-font-size, @dialog-message-font-size); + line-height: var(--dialog-message-line-height, @dialog-message-line-height); + max-height: var(--dialog-message-max-height, @dialog-message-max-height); + padding: var(--dialog-message-padding, @dialog-message-padding); &-text { word-wrap: break-word; } &--hasTitle { - .theme(padding-top, '@dialog-has-title-message-padding-top'); - .theme(color, '@dialog-has-title-message-text-color'); + padding-top: var( + --dialog-has-title-message-padding-top, + @dialog-has-title-message-padding-top + ); + color: var( + --dialog-has-title-message-text-color, + @dialog-has-title-message-text-color + ); } &--round-button { diff --git a/packages/divider/index.less b/packages/divider/index.less index 8bbbbdb0..b5b83536 100644 --- a/packages/divider/index.less +++ b/packages/divider/index.less @@ -1,17 +1,15 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-divider { display: flex; align-items: center; border-style: solid; border-width: 0; - - .theme(margin, '@divider-margin'); - .theme(color, '@divider-text-color'); - .theme(font-size, '@divider-font-size'); - .theme(line-height, '@divider-line-height'); - .theme(border-color, '@divider-border-color'); + margin: var(--divider-margin, @divider-margin); + color: var(--divider-text-color, @divider-text-color); + font-size: var(--divider-font-size, @divider-font-size); + line-height: var(--divider-line-height, @divider-line-height); + border-color: var(--divider-border-color, @divider-border-color); &::before, &::after { @@ -43,24 +41,27 @@ &--left, &--right { &::before { - .theme(margin-right, '@divider-content-padding'); + margin-right: var(--divider-content-padding, @divider-content-padding); } &::after { content: ''; - .theme(margin-left, '@divider-content-padding'); + margin-left: var(--divider-content-padding, @divider-content-padding); } } &--left { &::before { - .theme(max-width, '@divider-content-left-width'); + max-width: var(--divider-content-left-width, @divider-content-left-width); } } &--right { &::after { - .theme(max-width, '@divider-content-right-width'); + max-width: var( + --divider-content-right-width, + @divider-content-right-width + ); } } } diff --git a/packages/dropdown-item/index.less b/packages/dropdown-item/index.less index 818d6e4c..03104a97 100644 --- a/packages/dropdown-item/index.less +++ b/packages/dropdown-item/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-dropdown-item { position: fixed; @@ -13,7 +12,10 @@ &--active { .van-dropdown-item__title, .van-dropdown-item__icon { - .theme(color, '@dropdown-menu-option-active-color'); + color: var( + --dropdown-menu-option-active-color, + @dropdown-menu-option-active-color + ); } } } diff --git a/packages/dropdown-menu/index.less b/packages/dropdown-menu/index.less index ada4c47b..5f18e1fb 100644 --- a/packages/dropdown-menu/index.less +++ b/packages/dropdown-menu/index.less @@ -1,12 +1,14 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-dropdown-menu { display: flex; box-shadow: 0 2px 12px fade(@gray-7, 12); user-select: none; - .theme(height, '@dropdown-menu-height'); - .theme(background-color, '@dropdown-menu-background-color'); + height: var(--dropdown-menu-height, @dropdown-menu-height); + background-color: var( + --dropdown-menu-background-color, + @dropdown-menu-background-color + ); &__item { display: flex; @@ -25,7 +27,10 @@ } .van-dropdown-menu__title { - .theme(color, '@dropdown-menu-title-disabled-text-color'); + color: var( + --dropdown-menu-title-disabled-text-color, + @dropdown-menu-title-disabled-text-color + ); } } } @@ -34,10 +39,19 @@ position: relative; box-sizing: border-box; max-width: 100%; - .theme(padding, '@dropdown-menu-title-padding'); - .theme(color, '@dropdown-menu-title-text-color'); - .theme(font-size,'@dropdown-menu-title-font-size'); - .theme(line-height,'@dropdown-menu-title-line-height'); + padding: var(--dropdown-menu-title-padding, @dropdown-menu-title-padding); + color: var( + --dropdown-menu-title-text-color, + @dropdown-menu-title-text-color + ); + font-size: var( + --dropdown-menu-title-font-size, + @dropdown-menu-title-font-size + ); + line-height: var( + --dropdown-menu-title-line-height, + @dropdown-menu-title-line-height + ); &::after { position: absolute; @@ -52,7 +66,10 @@ } &--active { - .theme(color,'@dropdown-menu-title-active-text-color'); + color: var( + --dropdown-menu-title-active-text-color, + @dropdown-menu-title-active-text-color + ); } &--down { diff --git a/packages/empty/index.less b/packages/empty/index.less index 62b827e5..beee0c08 100644 --- a/packages/empty/index.less +++ b/packages/empty/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-empty { display: flex; diff --git a/packages/field/index.less b/packages/field/index.less index 082b579b..3cbb0284 100644 --- a/packages/field/index.less +++ b/packages/field/index.less @@ -1,14 +1,13 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-field { - .theme(--cell-icon-size, '@field-icon-size'); + --cell-icon-size: var(--field-icon-size, @field-icon-size); &__label { - .theme(color, '@field-label-color'); + color: var(--field-label-color, @field-label-color); &--disabled { - .theme(color, '@field-disabled-text-color'); + color: var(--field-disabled-text-color, @field-disabled-text-color); } } @@ -20,7 +19,7 @@ box-sizing: border-box; padding: 3.6px 0; line-height: 1.2em; - .theme(min-height, '@cell-line-height'); + min-height: var(--cell-line-height, @cell-line-height); } } @@ -40,28 +39,33 @@ background-color: transparent; border: 0; resize: none; - - .theme(color, '@field-input-text-color'); - .theme(height, '@cell-line-height'); - .theme(min-height, '@cell-line-height'); + color: var(--field-input-text-color, @field-input-text-color); + height: var(--cell-line-height, @cell-line-height); + min-height: var(--cell-line-height, @cell-line-height); &:empty { display: none; } &--textarea { - .theme(height, '@field-text-area-min-height'); - .theme(min-height, '@field-text-area-min-height'); + height: var(--field-text-area-min-height, @field-text-area-min-height); + min-height: var( + --field-text-area-min-height, + @field-text-area-min-height + ); } &--error { - .theme(color, '@field-input-error-text-color'); + color: var(--field-input-error-text-color, @field-input-error-text-color); } &--disabled { background-color: transparent; opacity: 1; - .theme(color, '@field-input-disabled-text-color'); + color: var( + --field-input-disabled-text-color, + @field-input-disabled-text-color + ); } &--center { @@ -75,8 +79,7 @@ &--custom { display: flex; align-items: center; - - .theme(min-height, '@cell-line-height'); + min-height: var(--cell-line-height, @cell-line-height); } } @@ -86,25 +89,25 @@ right: 0; left: 0; pointer-events: none; - .theme(color, '@field-placeholder-text-color'); + color: var(--field-placeholder-text-color, @field-placeholder-text-color); &--error { - .theme(color, '@field-error-message-color'); + color: var(--field-error-message-color, @field-error-message-color); } } &__icon-root { display: flex; align-items: center; - .theme(min-height, '@cell-line-height'); + min-height: var(--cell-line-height, @cell-line-height); } &__clear-root, &__icon-container { line-height: inherit; vertical-align: middle; - .theme(padding, '0 @padding-xs'); - .theme(margin-right, '-@padding-xs'); + padding: 0 var(--padding-xs, @padding-xs); + margin-right: calc(-1 * var(--padding-xs, @padding-xs)); } &__clear-root, @@ -114,13 +117,13 @@ } &__clear-root { - .theme(font-size, '@field-clear-icon-size'); - .theme(color, '@field-clear-icon-color'); + font-size: var(--field-clear-icon-size, @field-clear-icon-size); + color: var(--field-clear-icon-color, @field-clear-icon-color); } &__icon-container { - .theme(font-size, '@field-icon-size'); - .theme(color, '@field-icon-container-color'); + font-size: var(--field-icon-size, @field-icon-size); + color: var(--field-icon-container-color, @field-icon-container-color); &:empty { display: none; @@ -128,7 +131,7 @@ } &__button { - .theme(padding-left, '@padding-xs'); + padding-left: var(--padding-xs, @padding-xs); &:empty { display: none; @@ -137,8 +140,11 @@ &__error-message { text-align: left; - .theme(font-size, '@field-error-message-text-font-size'); - .theme(color, '@field-error-message-color'); + font-size: var( + --field-error-message-text-font-size, + @field-error-message-text-font-size + ); + color: var(--field-error-message-color, @field-error-message-color); &--center { text-align: center; @@ -151,17 +157,20 @@ &__word-limit { text-align: right; - .theme(margin-top, '@padding-base'); - .theme(color, '@field-word-limit-color'); - .theme(font-size, '@field-word-limit-font-size'); - .theme(line-height, '@field-word-limit-line-height'); + margin-top: var(--padding-base, @padding-base); + color: var(--field-word-limit-color, @field-word-limit-color); + font-size: var(--field-word-limit-font-size, @field-word-limit-font-size); + line-height: var( + --field-word-limit-line-height, + @field-word-limit-line-height + ); } &__word-num { display: inline; &--full { - .theme(color, '@field-word-num-full-color'); + color: var(--field-word-num-full-color, @field-word-num-full-color); } } } diff --git a/packages/goods-action-button/index.less b/packages/goods-action-button/index.less index e1939e39..f5e37eac 100644 --- a/packages/goods-action-button/index.less +++ b/packages/goods-action-button/index.less @@ -1,19 +1,30 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; :host { flex: 1; } .van-goods-action-button { - .theme( - --button-warning-background-color, - '@goods-action-button-warning-color' + --button-warning-background-color: var( + --goods-action-button-warning-color, + @goods-action-button-warning-color + ); + --button-danger-background-color: var( + --goods-action-button-danger-color, + @goods-action-button-danger-color + ); + --button-default-height: var( + --goods-action-button-height, + @goods-action-button-height + ); + --button-line-height: var( + --goods-action-button-line-height, + @goods-action-button-line-height + ); + --button-plain-background-color: var( + --goods-action-button-plain-color, + @goods-action-button-plain-color ); - .theme(--button-danger-background-color, '@goods-action-button-danger-color'); - .theme(--button-default-height, '@goods-action-button-height'); - .theme(--button-line-height, '@goods-action-button-line-height'); - .theme(--button-plain-background-color, '@goods-action-button-plain-color'); display: block; @@ -22,22 +33,29 @@ &--first { margin-left: 5px; - .theme( - --button-border-radius, - '@goods-action-button-border-radius 0 0 @goods-action-button-border-radius' - ); + --button-border-radius: @goods-action-button-border-radius 0 0 + var( + --goods-action-button-border-radius, + @goods-action-button-border-radius + ); } &--last { margin-right: 5px; - .theme( - --button-border-radius, - '0 @goods-action-button-border-radius @goods-action-button-border-radius 0' - ); + + --button-border-radius: 0 @goods-action-button-border-radius + var( + --goods-action-button-border-radius, + @goods-action-button-border-radius + ) + 0; } &--first&--last { - .theme(--button-border-radius, '@goods-action-button-border-radius'); + --button-border-radius: var( + --goods-action-button-border-radius, + @goods-action-button-border-radius + ); } &--plain { @@ -46,7 +64,7 @@ &__inner { width: 100%; - .theme(font-weight, '@font-weight-bold') !important; + font-weight: var(--font-weight-bold, @font-weight-bold) !important; } @media (max-width: 321px) { diff --git a/packages/goods-action-icon/index.less b/packages/goods-action-icon/index.less index f757e20a..91a62b5e 100644 --- a/packages/goods-action-icon/index.less +++ b/packages/goods-action-icon/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-goods-action-icon { display: flex !important; @@ -7,16 +6,21 @@ justify-content: center !important; line-height: 1 !important; border: none !important; - - .theme(font-size, '@goods-action-icon-font-size') !important; - .theme(color, '@goods-action-icon-text-color') !important; - .theme(min-width, '@goods-action-icon-width'); - .theme(height, '@goods-action-icon-height') !important; + font-size: var( + --goods-action-icon-font-size, + @goods-action-icon-font-size + ) !important; + color: var( + --goods-action-icon-text-color, + @goods-action-icon-text-color + ) !important; + min-width: var(--goods-action-icon-width, @goods-action-icon-width); + height: var(--goods-action-icon-height, @goods-action-icon-height) !important; &__icon { display: flex; margin: 0 auto 5px; - .theme(color, '@goods-action-icon-color'); - .theme(font-size, '@goods-action-icon-size'); + color: var(--goods-action-icon-color, @goods-action-icon-color); + font-size: var(--goods-action-icon-size, @goods-action-icon-size); } } diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less index 84a72217..6da991aa 100644 --- a/packages/goods-action/index.less +++ b/packages/goods-action/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-goods-action { position: fixed; @@ -9,8 +8,11 @@ display: flex; align-items: center; box-sizing: content-box; - .theme(height, '@goods-action-height'); - .theme(background-color, '@goods-action-background-color'); + height: var(--goods-action-height, @goods-action-height); + background-color: var( + --goods-action-background-color, + @goods-action-background-color + ); &--safe { padding-bottom: constant(safe-area-inset-bottom); diff --git a/packages/grid-item/index.less b/packages/grid-item/index.less index 5a58511e..80e97421 100644 --- a/packages/grid-item/index.less +++ b/packages/grid-item/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-grid-item { position: relative; @@ -15,17 +14,20 @@ flex-direction: column; box-sizing: border-box; height: 100%; - .theme(padding, '@grid-item-content-padding'); - .theme(background-color, '@grid-item-content-background-color'); + padding: var(--grid-item-content-padding, @grid-item-content-padding); + background-color: var( + --grid-item-content-background-color, + @grid-item-content-background-color + ); &::after { z-index: 1; - .theme(border-width,'0 @border-width-base @border-width-base 0'); + border-width: 0 @border-width-base @border-width-base 0; } &--surround { &::after { - .theme(border-width,'@border-width-base'); + border-width: @border-width-base; } } @@ -66,22 +68,24 @@ } &--clickable:active { - .theme(background-color, '@grid-item-content-active-color'); + background-color: var( + --grid-item-content-active-color, + @grid-item-content-active-color + ); } } &__icon { display: flex; align-items: center; - - .theme(font-size, '@grid-item-icon-size'); - .theme(height, '@grid-item-icon-size'); + font-size: var(--grid-item-icon-size, @grid-item-icon-size); + height: var(--grid-item-icon-size, @grid-item-icon-size); } &__text { word-wrap: break-word; - .theme(color, '@grid-item-text-color'); - .theme(font-size, '@grid-item-text-font-size'); + color: var(--grid-item-text-color, @grid-item-text-color); + font-size: var(--grid-item-text-font-size, @grid-item-text-font-size); } &__icon + &__text { diff --git a/packages/image/index.less b/packages/image/index.less index f7008a83..6bb42748 100644 --- a/packages/image/index.less +++ b/packages/image/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-image { position: relative; @@ -31,18 +30,24 @@ flex-direction: column; align-items: center; justify-content: center; - .theme(color, '@image-placeholder-text-color'); - .theme(font-size, '@image-placeholder-font-size'); - .theme(background-color, '@image-placeholder-background-color'); + color: var(--image-placeholder-text-color, @image-placeholder-text-color); + font-size: var(--image-placeholder-font-size, @image-placeholder-font-size); + background-color: var( + --image-placeholder-background-color, + @image-placeholder-background-color + ); } &__loading-icon { - .theme(color, '@image-loading-icon-color'); - .theme(font-size, '@image-loading-icon-size') !important; + color: var(--image-loading-icon-color, @image-loading-icon-color); + font-size: var( + --image-loading-icon-size, + @image-loading-icon-size + ) !important; } &__error-icon { - .theme(color, '@image-error-icon-color'); - .theme(font-size, '@image-error-icon-size') !important; + color: var(--image-error-icon-color, @image-error-icon-color); + font-size: var(--image-error-icon-size, @image-error-icon-size) !important; } } diff --git a/packages/index-anchor/index.less b/packages/index-anchor/index.less index 829f6b28..fddfee56 100644 --- a/packages/index-anchor/index.less +++ b/packages/index-anchor/index.less @@ -1,18 +1,26 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-index-anchor { - .theme(padding, '@index-anchor-padding'); - .theme(color, '@index-anchor-text-color'); - .theme(font-weight, '@index-anchor-font-weight'); - .theme(font-size, '@index-anchor-font-size'); - .theme(line-height, '@index-anchor-line-height'); - .theme(background-color, '@index-anchor-background-color'); + padding: var(--index-anchor-padding, @index-anchor-padding); + color: var(--index-anchor-text-color, @index-anchor-text-color); + font-weight: var(--index-anchor-font-weight, @index-anchor-font-weight); + font-size: var(--index-anchor-font-size, @index-anchor-font-size); + line-height: var(--index-anchor-line-height, @index-anchor-line-height); + background-color: var( + --index-anchor-background-color, + @index-anchor-background-color + ); &--active { right: 0; left: 0; - .theme(color, '@index-anchor-active-text-color'); - .theme(background-color, '@index-anchor-active-background-color'); + color: var( + --index-anchor-active-text-color, + @index-anchor-active-text-color + ); + background-color: var( + --index-anchor-active-background-color, + @index-anchor-active-background-color + ); } } diff --git a/packages/index-bar/index.less b/packages/index-bar/index.less index 8cd20846..8b72387d 100644 --- a/packages/index-bar/index.less +++ b/packages/index-bar/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-index-bar { position: relative; @@ -17,8 +16,12 @@ &__index { font-weight: 500; - .theme(padding, '0 @padding-base 0 @padding-md'); - .theme(font-size, '@index-bar-index-font-size'); - .theme(line-height, '@index-bar-index-line-height'); + padding: 0 var(--padding-base, @padding-base) 0 + var(--padding-md, @padding-md); + font-size: var(--index-bar-index-font-size, @index-bar-index-font-size); + line-height: var( + --index-bar-index-line-height, + @index-bar-index-line-height + ); } } diff --git a/packages/info/index.less b/packages/info/index.less index 9ec06be1..016f3471 100644 --- a/packages/info/index.less +++ b/packages/info/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-info { position: absolute; @@ -12,23 +11,22 @@ white-space: nowrap; transform: translate(50%, -50%); transform-origin: 100%; - - .theme(height, '@info-size'); - .theme(min-width, '@info-size'); - .theme(padding, '@info-padding'); - .theme(color, '@info-color'); - .theme(font-weight, '@info-font-weight'); - .theme(font-size, '@info-font-size'); - .theme(font-family, '@info-font-family'); - .theme(background-color, '@info-background-color'); - .theme(border, '@info-border-width solid @white'); - .theme(border-radius, '@info-size'); + height: var(--info-size, @info-size); + min-width: var(--info-size, @info-size); + padding: var(--info-padding, @info-padding); + color: var(--info-color, @info-color); + font-weight: var(--info-font-weight, @info-font-weight); + font-size: var(--info-font-size, @info-font-size); + font-family: var(--info-font-family, @info-font-family); + background-color: var(--info-background-color, @info-background-color); + border: var(--info-border-width, @info-border-width) solid @white; + border-radius: var(--info-size, @info-size); &--dot { min-width: 0; border-radius: 100%; - .theme(width, '@info-dot-size'); - .theme(height, '@info-dot-size'); - .theme(background-color, '@info-dot-color'); + width: var(--info-dot-size, @info-dot-size); + height: var(--info-dot-size, @info-dot-size); + background-color: var(--info-dot-color, @info-dot-color); } } diff --git a/packages/loading/index.less b/packages/loading/index.less index 565f85b2..fa71d1ed 100644 --- a/packages/loading/index.less +++ b/packages/loading/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; :host { font-size: 0; @@ -10,17 +9,22 @@ display: inline-flex; align-items: center; justify-content: center; - .theme(color, '@loading-spinner-color'); + color: var(--loading-spinner-color, @loading-spinner-color); &__spinner { position: relative; box-sizing: border-box; - .theme(width, '@loading-spinner-size'); + width: var(--loading-spinner-size, @loading-spinner-size); // compatible for 0.x, users may set width or height in root element max-width: 100%; max-height: 100%; - .theme(height, '@loading-spinner-size'); - .theme(animation, 'van-rotate @loading-spinner-animation-duration linear infinite'); + height: var(--loading-spinner-size, @loading-spinner-size); + animation: van-rotate + var( + --loading-spinner-animation-duration, + @loading-spinner-animation-duration + ) + linear infinite; &--spinner { animation-timing-function: steps(12); @@ -34,10 +38,10 @@ } &__text { - .theme(margin-left, '@padding-xs'); - .theme(color, '@loading-text-color'); - .theme(font-size, '@loading-text-font-size'); - .theme(line-height, '@loading-text-line-height'); + margin-left: var(--padding-xs, @padding-xs); + color: var(--loading-text-color, @loading-text-color); + font-size: var(--loading-text-font-size, @loading-text-font-size); + line-height: var(--loading-text-line-height, @loading-text-line-height); &:empty { display: none; @@ -48,7 +52,7 @@ flex-direction: column; .van-loading__text { - .theme(margin, '@padding-xs 0 0'); + margin: var(--padding-xs, @padding-xs) 0 0; } } diff --git a/packages/nav-bar/index.less b/packages/nav-bar/index.less index b475ad2a..13720184 100644 --- a/packages/nav-bar/index.less +++ b/packages/nav-bar/index.less @@ -1,13 +1,12 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-nav-bar { position: relative; text-align: center; user-select: none; - .theme(height, '@nav-bar-height'); - .theme(line-height, '@nav-bar-height'); - .theme(background-color, '@nav-bar-background-color'); + height: var(--nav-bar-height, @nav-bar-height); + line-height: var(--nav-bar-height, @nav-bar-height); + background-color: var(--nav-bar-background-color, @nav-bar-background-color); &__content { position: relative; @@ -17,19 +16,19 @@ &__text { display: inline-block; vertical-align: middle; - .theme(margin, '0 -@padding-md'); - .theme(padding, '0 @padding-md'); - .theme(color, '@nav-bar-text-color'); + margin: 0 calc(-1 * var(--padding-md, @padding-md)); + padding: 0 var(--padding-md, @padding-md); + color: var(--nav-bar-text-color, @nav-bar-text-color); &--hover { - .theme(background-color, '@active-color'); + background-color: @active-color; } } &__arrow { vertical-align: middle; - .theme(font-size, '@nav-bar-arrow-size') !important; - .theme(color, '@nav-bar-icon-color') !important; + font-size: var(--nav-bar-arrow-size, @nav-bar-arrow-size) !important; + color: var(--nav-bar-icon-color, @nav-bar-icon-color) !important; + .van-nav-bar__text { margin-left: -20px; @@ -47,9 +46,9 @@ &__title { max-width: 60%; margin: 0 auto; - .theme(color, '@nav-bar-title-text-color'); - .theme(font-weight, '@font-weight-bold'); - .theme(font-size, '@nav-bar-title-font-size'); + color: var(--nav-bar-title-text-color, @nav-bar-title-text-color); + font-weight: var(--font-weight-bold, @font-weight-bold); + font-size: var(--nav-bar-title-font-size, @nav-bar-title-font-size); } &__left, @@ -59,14 +58,14 @@ bottom: 0; display: flex; align-items: center; - .theme(font-size, '@font-size-md'); + font-size: var(--font-size-md, @font-size-md); } &__left { - .theme(left, '@padding-md'); + left: var(--padding-md, @padding-md); } &__right { - .theme(right, '@padding-md'); + right: var(--padding-md, @padding-md); } } diff --git a/packages/notice-bar/index.less b/packages/notice-bar/index.less index 990de481..51a627a6 100644 --- a/packages/notice-bar/index.less +++ b/packages/notice-bar/index.less @@ -1,15 +1,17 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-notice-bar { display: flex; align-items: center; - .theme(height, '@notice-bar-height'); - .theme(padding, '@notice-bar-padding'); - .theme(font-size, '@notice-bar-font-size'); - .theme(color, '@notice-bar-text-color'); - .theme(line-height, '@notice-bar-line-height'); - .theme(background-color, '@notice-bar-background-color'); + height: var(--notice-bar-height, @notice-bar-height); + padding: var(--notice-bar-padding, @notice-bar-padding); + font-size: var(--notice-bar-font-size, @notice-bar-font-size); + color: var(--notice-bar-text-color, @notice-bar-text-color); + line-height: var(--notice-bar-line-height, @notice-bar-line-height); + background-color: var( + --notice-bar-background-color, + @notice-bar-background-color + ); &--withicon { position: relative; @@ -18,7 +20,7 @@ &--wrapable { height: auto; - .theme(padding, '@notice-bar-wrapable-padding'); + padding: var(--notice-bar-wrapable-padding, @notice-bar-wrapable-padding); .van-notice-bar { &__wrap { @@ -37,23 +39,23 @@ align-items: center; margin-right: 4px; vertical-align: middle; - .theme(font-size, '@notice-bar-icon-size'); - .theme(min-width, '@notice-bar-icon-min-width'); + font-size: var(--notice-bar-icon-size, @notice-bar-icon-size); + min-width: var(--notice-bar-icon-min-width, @notice-bar-icon-min-width); } &__right-icon { position: absolute; top: 10px; right: 15px; - .theme(font-size, '@notice-bar-icon-size'); - .theme(min-width, '@notice-bar-icon-min-width'); + font-size: var(--notice-bar-icon-size, @notice-bar-icon-size); + min-width: var(--notice-bar-icon-min-width, @notice-bar-icon-min-width); } &__wrap { position: relative; flex: 1; overflow: hidden; - .theme(height, '@notice-bar-line-height'); + height: var(--notice-bar-line-height, @notice-bar-line-height); } &__content { diff --git a/packages/notify/index.less b/packages/notify/index.less index a2ee0216..9f296841 100644 --- a/packages/notify/index.less +++ b/packages/notify/index.less @@ -1,12 +1,11 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-notify { text-align: center; word-wrap: break-word; - .theme(padding, '@notify-padding'); - .theme(font-size, '@notify-font-size'); - .theme(line-height, '@notify-line-height'); + padding: var(--notify-padding, @notify-padding); + font-size: var(--notify-font-size, @notify-font-size); + line-height: var(--notify-line-height, @notify-line-height); &__container { position: fixed; @@ -17,18 +16,30 @@ } &--primary { - .theme(background-color, '@notify-primary-background-color'); + background-color: var( + --notify-primary-background-color, + @notify-primary-background-color + ); } &--success { - .theme(background-color, '@notify-success-background-color'); + background-color: var( + --notify-success-background-color, + @notify-success-background-color + ); } &--danger { - .theme(background-color, '@notify-danger-background-color'); + background-color: var( + --notify-danger-background-color, + @notify-danger-background-color + ); } &--warning { - .theme(background-color, '@notify-warning-background-color'); + background-color: var( + --notify-warning-background-color, + @notify-warning-background-color + ); } } diff --git a/packages/overlay/index.less b/packages/overlay/index.less index 1a9df069..934bacb3 100644 --- a/packages/overlay/index.less +++ b/packages/overlay/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-overlay { position: fixed; @@ -7,5 +6,5 @@ left: 0; width: 100%; height: 100%; - .theme(background-color, '@overlay-background-color'); + background-color: var(--overlay-background-color, @overlay-background-color); } diff --git a/packages/panel/index.less b/packages/panel/index.less index 243a81bf..57a83605 100644 --- a/packages/panel/index.less +++ b/packages/panel/index.less @@ -1,15 +1,14 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-panel { - .theme(background, '@panel-background-color'); + background: var(--panel-background-color, @panel-background-color); &__header-value { - .theme(color, '@panel-header-value-color'); + color: var(--panel-header-value-color, @panel-header-value-color); } &__footer { - .theme(padding,'@panel-footer-padding'); + padding: var(--panel-footer-padding, @panel-footer-padding); &:empty { display: none; diff --git a/packages/picker-column/index.less b/packages/picker-column/index.less index 797b098f..6e9ea4db 100644 --- a/packages/picker-column/index.less +++ b/packages/picker-column/index.less @@ -1,22 +1,27 @@ @import '../common/style/var'; -@import '../common/style/theme'; .van-picker-column { overflow: hidden; text-align: center; - .theme(color, '@picker-option-text-color'); - .theme(font-size, '@picker-option-font-size'); + color: var(--picker-option-text-color, @picker-option-text-color); + font-size: var(--picker-option-font-size, @picker-option-font-size); &__item { padding: 0 5px; &--selected { - .theme(font-weight, '@font-weight-bold'); - .theme(color, '@picker-option-selected-text-color'); + font-weight: var(--font-weight-bold, @font-weight-bold); + color: var( + --picker-option-selected-text-color, + @picker-option-selected-text-color + ); } &--disabled { - .theme(opacity, '@picker-option-disabled-opacity'); + opacity: var( + --picker-option-disabled-opacity, + @picker-option-disabled-opacity + ); } } } diff --git a/packages/picker/index.less b/packages/picker/index.less index efe78241..a750c507 100644 --- a/packages/picker/index.less +++ b/packages/picker/index.less @@ -1,24 +1,23 @@ @import '../common/style/var'; -@import '../common/style/theme.less'; .van-picker { position: relative; overflow: hidden; -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */ user-select: none; - .theme(background-color, '@picker-background-color'); + background-color: var(--picker-background-color, @picker-background-color); &__toolbar { display: flex; justify-content: space-between; - .theme(height, '@picker-toolbar-height'); - .theme(line-height, '@picker-toolbar-height'); + height: var(--picker-toolbar-height, @picker-toolbar-height); + line-height: var(--picker-toolbar-height, @picker-toolbar-height); } &__cancel, &__confirm { - .theme(padding, '@picker-action-padding'); - .theme(font-size, '@picker-action-font-size'); + padding: var(--picker-action-padding, @picker-action-padding); + font-size: var(--picker-action-font-size, @picker-action-font-size); &--hover { opacity: @active-opacity; @@ -26,18 +25,18 @@ } &__confirm { - .theme(color, '@picker-confirm-action-color'); + color: var(--picker-confirm-action-color, @picker-confirm-action-color); } &__cancel { - .theme(color, '@picker-cancel-action-color'); + color: var(--picker-cancel-action-color, @picker-cancel-action-color); } &__title { max-width: 50%; text-align: center; - .theme(font-weight, '@font-weight-bold'); - .theme(font-size, '@picker-option-font-size'); + font-weight: var(--font-weight-bold, @font-weight-bold); + font-size: var(--picker-option-font-size, @picker-option-font-size); } &__columns { @@ -60,7 +59,10 @@ display: flex; align-items: center; justify-content: center; - .theme(background-color, '@picker-loading-mask-color'); + background-color: var( + --picker-loading-mask-color, + @picker-loading-mask-color + ); } &__mask { diff --git a/packages/popup/index.less b/packages/popup/index.less index 8fd62a2d..40688957 100644 --- a/packages/popup/index.less +++ b/packages/popup/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-popup { position: fixed; @@ -9,7 +8,7 @@ transition-timing-function: ease; animation: ease both; -webkit-overflow-scrolling: touch; - .theme(background-color, '@popup-background-color'); + background-color: var(--popup-background-color, @popup-background-color); &--center { top: 50%; @@ -17,7 +16,10 @@ transform: translate3d(-50%, -50%, 0); &.van-popup--round { - .theme(border-radius, '@popup-round-border-radius'); + border-radius: var( + --popup-round-border-radius, + @popup-round-border-radius + ); } } @@ -27,7 +29,15 @@ width: 100%; &.van-popup--round { - .theme(border-radius, '0 0 @popup-round-border-radius @popup-round-border-radius'); + border-radius: 0 0 + var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ) + var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ); } } @@ -37,7 +47,15 @@ transform: translate3d(0, -50%, 0); &.van-popup--round { - .theme(border-radius, '@popup-round-border-radius 0 0 @popup-round-border-radius'); + border-radius: var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ) + 0 0 + var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ); } } @@ -47,7 +65,15 @@ width: 100%; &.van-popup--round { - .theme(border-radius, '@popup-round-border-radius @popup-round-border-radius 0 0'); + border-radius: var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ) + var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ) + 0 0; } } @@ -57,7 +83,16 @@ transform: translate3d(0, -50%, 0); &.van-popup--round { - .theme(border-radius, '0 @popup-round-border-radius @popup-round-border-radius 0'); + border-radius: 0 + var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ) + var( + --popup-round-border-radius, + var(--popup-round-border-radius, @popup-round-border-radius) + ) + 0; } } @@ -73,28 +108,28 @@ &__close-icon { position: absolute; - .theme(z-index, '@popup-close-icon-z-index'); - .theme(color, '@popup-close-icon-color'); - .theme(font-size, '@popup-close-icon-size'); + z-index: var(--popup-close-icon-z-index, @popup-close-icon-z-index); + color: var(--popup-close-icon-color, @popup-close-icon-color); + font-size: var(--popup-close-icon-size, @popup-close-icon-size); &--top-left { - .theme(top, '@popup-close-icon-margin'); - .theme(left, '@popup-close-icon-margin'); + top: var(--popup-close-icon-margin, @popup-close-icon-margin); + left: var(--popup-close-icon-margin, @popup-close-icon-margin); } &--top-right { - .theme(top, '@popup-close-icon-margin'); - .theme(right, '@popup-close-icon-margin'); + top: var(--popup-close-icon-margin, @popup-close-icon-margin); + right: var(--popup-close-icon-margin, @popup-close-icon-margin); } &--bottom-left { - .theme(bottom, '@popup-close-icon-margin'); - .theme(left, '@popup-close-icon-margin'); + bottom: var(--popup-close-icon-margin, @popup-close-icon-margin); + left: var(--popup-close-icon-margin, @popup-close-icon-margin); } &--bottom-right { - .theme(right, '@popup-close-icon-margin'); - .theme(bottom, '@popup-close-icon-margin'); + right: var(--popup-close-icon-margin, @popup-close-icon-margin); + bottom: var(--popup-close-icon-margin, @popup-close-icon-margin); } &:active { diff --git a/packages/progress/index.less b/packages/progress/index.less index 9bec5dae..8fb2c503 100644 --- a/packages/progress/index.less +++ b/packages/progress/index.less @@ -1,18 +1,17 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-progress { position: relative; - .theme(height, '@progress-height'); - .theme(border-radius, '@progress-height'); - .theme(background, '@progress-background-color'); + height: var(--progress-height, @progress-height); + border-radius: var(--progress-height, @progress-height); + background: var(--progress-background-color, @progress-background-color); &__portion { position: absolute; left: 0; height: 100%; border-radius: inherit; - .theme(background, '@progress-color'); + background: var(--progress-color, @progress-color); } &__pivot { @@ -24,10 +23,13 @@ word-break: keep-all; border-radius: 1em; transform: translate(0, -50%); - .theme(color, '@progress-pivot-text-color'); - .theme(padding, '@progress-pivot-padding'); - .theme(font-size, '@progress-pivot-font-size'); - .theme(line-height, '@progress-pivot-line-height'); - .theme(background-color, '@progress-pivot-background-color'); + color: var(--progress-pivot-text-color, @progress-pivot-text-color); + padding: var(--progress-pivot-padding, @progress-pivot-padding); + font-size: var(--progress-pivot-font-size, @progress-pivot-font-size); + line-height: var(--progress-pivot-line-height, @progress-pivot-line-height); + background-color: var( + --progress-pivot-background-color, + @progress-pivot-background-color + ); } } diff --git a/packages/radio/index.less b/packages/radio/index.less index a51c263e..08d1f77f 100644 --- a/packages/radio/index.less +++ b/packages/radio/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-radio { display: flex; @@ -12,7 +11,7 @@ } &--horizontal { - .theme(margin-right, '@padding-sm'); + margin-right: var(--padding-sm, @padding-sm); } &__icon { @@ -25,43 +24,55 @@ color: transparent; text-align: center; transition-property: color, border-color, background-color; - .theme(border, '1px solid @radio-border-color'); - .theme(font-size, '@radio-size'); - .theme(transition-duration, '@radio-transition-duration'); + border: 1px solid var(--radio-border-color, @radio-border-color); + font-size: var(--radio-size, @radio-size); + transition-duration: var( + --radio-transition-duration, + @radio-transition-duration + ); &--round { border-radius: 100%; } &--checked { - .theme(color, '@white'); - .theme(background-color, '@radio-checked-icon-color'); - .theme(border-color, '@radio-checked-icon-color'); + color: @white; + background-color: var( + --radio-checked-icon-color, + @radio-checked-icon-color + ); + border-color: var(--radio-checked-icon-color, @radio-checked-icon-color); } &--disabled { - .theme(background-color, '@radio-disabled-background-color'); - .theme(border-color, '@radio-disabled-icon-color'); + background-color: var( + --radio-disabled-background-color, + @radio-disabled-background-color + ); + border-color: var( + --radio-disabled-icon-color, + @radio-disabled-icon-color + ); } &--disabled&--checked { - .theme(color, '@radio-disabled-icon-color'); + color: var(--radio-disabled-icon-color, @radio-disabled-icon-color); } } &__label { word-wrap: break-word; - .theme(padding-left, '@radio-label-margin'); - .theme(color, '@radio-label-color'); - .theme(line-height, '@radio-size'); + padding-left: var(--radio-label-margin, @radio-label-margin); + color: var(--radio-label-color, @radio-label-color); + line-height: var(--radio-size, @radio-size); &--left { float: left; - .theme(margin, '0 @radio-label-margin 0 0'); + margin: 0 var(--radio-label-margin, @radio-label-margin) 0 0; } &--disabled { - .theme(color, '@radio-disabled-label-color'); + color: var(--radio-disabled-label-color, @radio-disabled-label-color); } &:empty { diff --git a/packages/rate/index.less b/packages/rate/index.less index 2fc09747..491f39f7 100644 --- a/packages/rate/index.less +++ b/packages/rate/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-rate { display: inline-flex; @@ -7,34 +6,34 @@ &__item { position: relative; - .theme(padding, '0 @rate-horizontal-padding'); + padding: 0 var(--rate-horizontal-padding, @rate-horizontal-padding); &:not(:last-child) { - .theme(padding-right, '@rate-icon-gutter'); + padding-right: var(--rate-icon-gutter, @rate-icon-gutter); } } &__icon { display: block; height: 1em; - .theme(color, '@rate-icon-void-color'); - .theme(font-size, '@rate-icon-size'); + color: var(--rate-icon-void-color, @rate-icon-void-color); + font-size: var(--rate-icon-size, @rate-icon-size); &--half { position: absolute; top: 0; width: 0.5em; overflow: hidden; - .theme(left, '@rate-horizontal-padding'); - .theme(color, '@rate-icon-full-color'); + left: var(--rate-horizontal-padding, @rate-horizontal-padding); + color: var(--rate-icon-full-color, @rate-icon-full-color); } &--full { - .theme(color, '@rate-icon-full-color'); + color: var(--rate-icon-full-color, @rate-icon-full-color); } &--disabled { - .theme(color, '@rate-icon-disabled-color'); + color: var(--rate-icon-disabled-color, @rate-icon-disabled-color); } } } diff --git a/packages/search/index.less b/packages/search/index.less index 15fd6bc4..5fc44e05 100644 --- a/packages/search/index.less +++ b/packages/search/index.less @@ -1,36 +1,35 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-search { display: flex; align-items: center; box-sizing: border-box; - .theme(padding, '@search-padding'); + padding: var(--search-padding, @search-padding); &__content { display: flex; flex: 1; - .theme(padding-left, '@padding-sm'); - .theme(border-radius, '@border-radius-sm'); - .theme(background-color, '@search-background-color'); + padding-left: var(--padding-sm, @padding-sm); + border-radius: @border-radius-sm; + background-color: var(--search-background-color, @search-background-color); &--round { - .theme(border-radius, '@border-radius-max'); + border-radius: @border-radius-max; } } &__label { - .theme(padding, '@search-label-padding'); - .theme(font-size, '@search-label-font-size'); - .theme(line-height, '@search-input-height'); - .theme(color, '@search-label-color'); + padding: var(--search-label-padding, @search-label-padding); + font-size: var(--search-label-font-size, @search-label-font-size); + line-height: var(--search-input-height, @search-input-height); + color: var(--search-label-color, @search-label-color); } &__field { flex: 1; &__left-icon { - .theme(color, '@search-left-icon-color'); + color: var(--search-left-icon-color, @search-left-icon-color); } } @@ -39,13 +38,13 @@ } &__action { - .theme(padding, '@search-action-padding'); - .theme(font-size, '@search-action-font-size'); - .theme(line-height, '@search-input-height'); - .theme(color, '@search-action-text-color'); + padding: var(--search-action-padding, @search-action-padding); + font-size: var(--search-action-font-size, @search-action-font-size); + line-height: var(--search-input-height, @search-input-height); + color: var(--search-action-text-color, @search-action-text-color); &--hover { - .theme(background-color, '@active-color'); + background-color: @active-color; } } } diff --git a/packages/sidebar-item/index.less b/packages/sidebar-item/index.less index b418315e..2e84dbf9 100644 --- a/packages/sidebar-item/index.less +++ b/packages/sidebar-item/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-sidebar-item { display: block; @@ -7,11 +6,11 @@ overflow: hidden; border-left: 3px solid transparent; user-select: none; - .theme(padding, '@sidebar-padding'); - .theme(font-size, '@sidebar-font-size'); - .theme(line-height, '@sidebar-line-height'); - .theme(color, '@sidebar-text-color'); - .theme(background-color, '@sidebar-background-color'); + padding: var(--sidebar-padding, @sidebar-padding); + font-size: var(--sidebar-font-size, @sidebar-font-size); + line-height: var(--sidebar-line-height, @sidebar-line-height); + color: var(--sidebar-text-color, @sidebar-text-color); + background-color: var(--sidebar-background-color, @sidebar-background-color); &__text { position: relative; @@ -20,7 +19,7 @@ } &--hover:not(&--disabled) { - .theme(background-color, '@sidebar-active-color'); + background-color: var(--sidebar-active-color, @sidebar-active-color); } &::after { @@ -28,9 +27,15 @@ } &--selected { - .theme(color, '@sidebar-selected-text-color'); - .theme(font-weight, '@sidebar-selected-font-weight'); - .theme(border-color, '@sidebar-selected-border-color'); + color: var(--sidebar-selected-text-color, @sidebar-selected-text-color); + font-weight: var( + --sidebar-selected-font-weight, + @sidebar-selected-font-weight + ); + border-color: var( + --sidebar-selected-border-color, + @sidebar-selected-border-color + ); &::after { border-right-width: 1px; @@ -39,10 +44,13 @@ &--selected, &--selected&--hover { - .theme(background-color, '@sidebar-selected-background-color'); + background-color: var( + --sidebar-selected-background-color, + @sidebar-selected-background-color + ); } &--disabled { - .theme(color, '@sidebar-disabled-text-color'); + color: var(--sidebar-disabled-text-color, @sidebar-disabled-text-color); } } diff --git a/packages/sidebar/index.less b/packages/sidebar/index.less index 5e73a745..ec50e0ea 100644 --- a/packages/sidebar/index.less +++ b/packages/sidebar/index.less @@ -1,6 +1,5 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-sidebar { - .theme(width, '@sidebar-width'); + width: var(--sidebar-width, @sidebar-width); } diff --git a/packages/skeleton/index.less b/packages/skeleton/index.less index 300d0df3..44624d51 100644 --- a/packages/skeleton/index.less +++ b/packages/skeleton/index.less @@ -1,16 +1,18 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-skeleton { display: flex; box-sizing: border-box; width: 100%; - .theme(padding, '@skeleton-padding'); + padding: var(--skeleton-padding, @skeleton-padding); &__avatar { flex-shrink: 0; - .theme(margin-right, '@padding-md'); - .theme(background-color, '@skeleton-avatar-background-color'); + margin-right: var(--padding-md, @padding-md); + background-color: var( + --skeleton-avatar-background-color, + @skeleton-avatar-background-color + ); &--round { border-radius: 100%; @@ -22,13 +24,16 @@ } &__avatar + &__content { - .theme(padding-top, '@padding-xs'); + padding-top: var(--padding-xs, @padding-xs); } &__row, &__title { - .theme(height, '@skeleton-row-height'); - .theme(background-color, '@skeleton-row-background-color'); + height: var(--skeleton-row-height, @skeleton-row-height); + background-color: var( + --skeleton-row-background-color, + @skeleton-row-background-color + ); } &__title { @@ -37,7 +42,7 @@ &__row { &:not(:first-child) { - .theme(margin-top, '@skeleton-row-margin-top'); + margin-top: var(--skeleton-row-margin-top, @skeleton-row-margin-top); } } diff --git a/packages/slider/index.less b/packages/slider/index.less index fd6796ee..805f5ada 100644 --- a/packages/slider/index.less +++ b/packages/slider/index.less @@ -1,11 +1,13 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-slider { position: relative; - .theme(height, '@slider-bar-height'); - .theme(border-radius, '@border-radius-max'); - .theme(background-color, '@slider-inactive-background-color'); + height: var(--slider-bar-height, @slider-bar-height); + border-radius: @border-radius-max; + background-color: var( + --slider-inactive-background-color, + @slider-inactive-background-color + ); // use pseudo element to expand click area &::before { @@ -13,26 +15,34 @@ right: 0; left: 0; content: ''; - .theme(top, '-@padding-xs'); - .theme(bottom, '-@padding-xs'); + top: calc(-1 * var(--padding-xs, @padding-xs)); + bottom: calc(-1 * var(--padding-xs, @padding-xs)); } &__bar { position: relative; width: 100%; height: 100%; - .theme(background-color, '@slider-active-background-color'); - + background-color: var( + --slider-active-background-color, + @slider-active-background-color + ); border-radius: inherit; - .theme(transition, 'all @animation-duration-fast'); + transition: all @animation-duration-fast; } &__button { - .theme(width, '@slider-button-width'); - .theme(height, '@slider-button-height'); - .theme(border-radius, '@slider-button-border-radius'); - .theme(box-shadow, '@slider-button-box-shadow'); - .theme(background-color, '@slider-button-background-color'); + width: var(--slider-button-width, @slider-button-width); + height: var(--slider-button-height, @slider-button-height); + border-radius: var( + --slider-button-border-radius, + @slider-button-border-radius + ); + box-shadow: var(--slider-button-box-shadow, @slider-button-box-shadow); + background-color: var( + --slider-button-background-color, + @slider-button-background-color + ); &-wrapper, &-wrapper-right { @@ -51,6 +61,6 @@ } &--disabled { - .theme(opacity, '@slider-disabled-opacity'); + opacity: var(--slider-disabled-opacity, @slider-disabled-opacity); } } diff --git a/packages/stepper/index.less b/packages/stepper/index.less index cbeb7ca5..9e300438 100644 --- a/packages/stepper/index.less +++ b/packages/stepper/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-stepper { font-size: 0; @@ -12,11 +11,14 @@ margin: 1px; vertical-align: middle; border: 0; - .theme(background-color, '@stepper-background-color'); - .theme(color, '@stepper-button-icon-color'); - .theme(width, '@stepper-input-height'); - .theme(height, '@stepper-input-height'); - .theme(padding, '@padding-base'); + background-color: var( + --stepper-background-color, + @stepper-background-color + ); + color: var(--stepper-button-icon-color, @stepper-button-icon-color); + width: var(--stepper-input-height, @stepper-input-height); + height: var(--stepper-input-height, @stepper-input-height); + padding: var(--padding-base, @padding-base); &::before { width: 9px; @@ -41,21 +43,38 @@ } &--hover { - .theme(background-color, '@stepper-active-color'); + background-color: var(--stepper-active-color, @stepper-active-color); } &--disabled { - .theme(color, '@stepper-button-disabled-icon-color'); - .theme(background-color, '@stepper-button-disabled-color'); + color: var( + --stepper-button-disabled-icon-color, + @stepper-button-disabled-icon-color + ); + background-color: var( + --stepper-button-disabled-color, + @stepper-button-disabled-color + ); } &--disabled&--hover { - .theme(background-color, '@stepper-button-disabled-color'); + background-color: var( + --stepper-button-disabled-color, + @stepper-button-disabled-color + ); } } &__minus { - .theme(border-radius, '@stepper-border-radius 0 0 @stepper-border-radius'); + border-radius: var( + --stepper-border-radius, + var(--stepper-border-radius, @stepper-border-radius) + ) + 0 0 + var( + --stepper-border-radius, + var(--stepper-border-radius, @stepper-border-radius) + ); &::after { display: none; @@ -63,7 +82,16 @@ } &__plus { - .theme(border-radius, '0 @stepper-border-radius @stepper-border-radius 0'); + border-radius: 0 + var( + --stepper-border-radius, + var(--stepper-border-radius, @stepper-border-radius) + ) + var( + --stepper-border-radius, + var(--stepper-border-radius, @stepper-border-radius) + ) + 0; } &--round { @@ -107,22 +135,30 @@ min-height: 0; margin: 1px; padding: 1px; - font-size: 14px; text-align: center; vertical-align: middle; border: 0; border-width: 1px 0; border-radius: 0; -webkit-appearance: none; - .theme(font-size, '@stepper-input-font-size'); - .theme(color, '@stepper-input-text-color'); - .theme(background-color, '@stepper-background-color'); - .theme(width, '@stepper-input-width'); - .theme(height, '@stepper-input-height'); + font-size: var(--stepper-input-font-size, @stepper-input-font-size); + color: var(--stepper-input-text-color, @stepper-input-text-color); + background-color: var( + --stepper-background-color, + @stepper-background-color + ); + width: var(--stepper-input-width, @stepper-input-width); + height: var(--stepper-input-height, @stepper-input-height); &--disabled { - .theme(color, '@stepper-input-disabled-text-color'); - .theme(background-color, '@stepper-input-disabled-background-color'); + color: var( + --stepper-input-disabled-text-color, + @stepper-input-disabled-text-color + ); + background-color: var( + --stepper-input-disabled-background-color, + @stepper-input-disabled-background-color + ); } } } diff --git a/packages/steps/index.less b/packages/steps/index.less index 6315b529..c3924f7f 100644 --- a/packages/steps/index.less +++ b/packages/steps/index.less @@ -1,9 +1,8 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-steps { overflow: hidden; - .theme(background-color, '@steps-background-color'); + background-color: var(--steps-background-color, @steps-background-color); &--horizontal { padding: 10px; @@ -27,18 +26,18 @@ .van-step { position: relative; flex: 1; - .theme(font-size, '@step-font-size'); - .theme(color, '@step-text-color'); + font-size: var(--step-font-size, @step-font-size); + color: var(--step-text-color, @step-text-color); &--finish { - .theme(color, '@step-finish-text-color'); + color: var(--step-finish-text-color, @step-finish-text-color); } &__circle { border-radius: 50%; - .theme(width, '@step-circle-size'); - .theme(height, '@step-circle-size'); - .theme(background-color, '@step-circle-color'); + width: var(--step-circle-size, @step-circle-size); + height: var(--step-circle-size, @step-circle-size); + background-color: var(--step-circle-color, @step-circle-color); } &--horizontal { @@ -77,14 +76,17 @@ bottom: 6px; z-index: 1; transform: translate3d(-50%, 50%, 0); - .theme(background-color, '@white'); - .theme(padding, '0 @padding-xs'); + background-color: @white; + padding: 0 var(--padding-xs, @padding-xs); } .van-step__title { display: inline-block; transform: translate3d(-50%, 0, 0); - .theme(font-size, '@step-horizontal-title-font-size'); + font-size: var( + --step-horizontal-title-font-size, + @step-horizontal-title-font-size + ); } .van-step__line { @@ -94,16 +96,16 @@ left: 0; height: 1px; transform: translate3d(0, 50%, 0); - .theme(background-color, '@step-line-color'); + background-color: var(--step-line-color, @step-line-color); } &.van-step--process { - .theme(color, '@step-process-text-color'); + color: var(--step-process-text-color, @step-process-text-color); .van-step__icon { display: block; line-height: 1; - .theme(font-size, '@step-icon-size'); + font-size: var(--step-icon-size, @step-icon-size); } } } @@ -129,7 +131,7 @@ width: 1px; height: 20px; content: ''; - .theme(background-color, '@white'); + background-color: @white; } } @@ -145,7 +147,7 @@ .van-step__icon { line-height: 1; - .theme(font-size, '@step-icon-size'); + font-size: var(--step-icon-size, @step-icon-size); } .van-step__line { @@ -153,7 +155,7 @@ width: 1px; height: 100%; transform: translate3d(-50%, 0, 0); - .theme(background-color, '@step-line-color'); + background-color: var(--step-line-color, @step-line-color); } } } diff --git a/packages/submit-bar/README.md b/packages/submit-bar/README.md index c5e6361a..7bd704b6 100644 --- a/packages/submit-bar/README.md +++ b/packages/submit-bar/README.md @@ -36,7 +36,7 @@ price="{{ 3050 }}" button-text="提交订单" tip="您的收货地址不支持同城送, 我们已为您推荐快递" - tip-icon="https://img.yzcdn.cn/1.png" + tip-icon="info-o" bind:submit="onSubmit" /> ``` diff --git a/packages/submit-bar/index.less b/packages/submit-bar/index.less index d578335c..ee28c543 100644 --- a/packages/submit-bar/index.less +++ b/packages/submit-bar/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-submit-bar { position: fixed; @@ -7,15 +6,21 @@ left: 0; width: 100%; user-select: none; - .theme(z-index, '@submit-bar-z-index'); - .theme(background-color, '@submit-bar-background-color'); + z-index: var(--submit-bar-z-index, @submit-bar-z-index); + background-color: var( + --submit-bar-background-color, + @submit-bar-background-color + ); &__tip { - .theme(padding, '@submit-bar-tip-padding'); - .theme(color, '@submit-bar-tip-color'); - .theme(font-size, '@submit-bar-tip-font-size'); - .theme(line-height, '@submit-bar-tip-line-height'); - .theme(background-color, '@submit-bar-tip-background-color'); + padding: var(--submit-bar-tip-padding, @submit-bar-tip-padding); + color: var(--submit-bar-tip-color, @submit-bar-tip-color); + font-size: var(--submit-bar-tip-font-size, @submit-bar-tip-font-size); + line-height: var(--submit-bar-tip-line-height, @submit-bar-tip-line-height); + background-color: var( + --submit-bar-tip-background-color, + @submit-bar-tip-background-color + ); &:empty { display: none; @@ -23,12 +28,8 @@ } &__tip-icon { - width: 12px; - height: 12px; margin-right: 4px; vertical-align: middle; - .theme(font-size, '@submit-bar-tip-icon-size'); - .theme(min-width, 'calc(@submit-bar-tip-icon-size * 1.5)'); } &__tip-text { @@ -40,10 +41,13 @@ display: flex; align-items: center; justify-content: flex-end; - .theme(padding, '@submit-bar-padding'); - .theme(height, '@submit-bar-height'); - .theme(font-size, '@submit-bar-text-font-size'); - .theme(background-color, '@submit-bar-background-color'); + padding: var(--submit-bar-padding, @submit-bar-padding); + height: var(--submit-bar-height, @submit-bar-height); + font-size: var(--submit-bar-text-font-size, @submit-bar-text-font-size); + background-color: var( + --submit-bar-background-color, + @submit-bar-background-color + ); } &__safe { @@ -54,15 +58,15 @@ &__text { flex: 1; text-align: right; - .theme(color, '@submit-bar-text-color'); - .theme(padding-right, '@padding-sm'); - .theme(font-weight, '@font-weight-bold'); + color: var(--submit-bar-text-color, @submit-bar-text-color); + padding-right: var(--padding-sm, @padding-sm); + font-weight: var(--font-weight-bold, @font-weight-bold); } &__price { - .theme(color, '@submit-bar-price-color'); - .theme(font-weight, '@font-weight-bold'); - .theme(font-size, '@submit-bar-price-font-size'); + color: var(--submit-bar-price-color, @submit-bar-price-color); + font-weight: var(--font-weight-bold, @font-weight-bold); + font-size: var(--submit-bar-price-font-size, @submit-bar-price-font-size); &-integer { font-size: @submit-bar-price-integer-font-size; @@ -71,7 +75,10 @@ } &__currency { - .theme(font-size, '@submit-bar-currency-font-size'); + font-size: var( + --submit-bar-currency-font-size, + @submit-bar-currency-font-size + ); } &__suffix-label { @@ -79,9 +86,16 @@ } &__button { - .theme(width,'@submit-bar-button-width'); - .theme(font-weight, '@font-weight-bold'); - .theme(--button-default-height, '@submit-bar-button-height') !important; - .theme(--button-line-height, '@submit-bar-button-height') !important; + width: var(--submit-bar-button-width, @submit-bar-button-width); + font-weight: var(--font-weight-bold, @font-weight-bold); + + --button-default-height: var( + --submit-bar-button-height, + @submit-bar-button-height + ) !important; + --button-line-height: var( + --submit-bar-button-height, + @submit-bar-button-height + ) !important; } } diff --git a/packages/switch/index.less b/packages/switch/index.less index 01ec9a70..db738b8e 100644 --- a/packages/switch/index.less +++ b/packages/switch/index.less @@ -1,28 +1,32 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-switch { position: relative; display: inline-block; box-sizing: content-box; - .theme(width, '@switch-width'); - .theme(height, '@switch-height'); - .theme(background-color, '@switch-background-color'); - .theme(border, '@switch-border'); - .theme(border-radius, '@switch-node-size'); - .theme(transition, 'background-color @switch-transition-duration'); + width: var(--switch-width, @switch-width); + height: var(--switch-height, @switch-height); + background-color: var(--switch-background-color, @switch-background-color); + border: var(--switch-border, @switch-border); + border-radius: var(--switch-node-size, @switch-node-size); + transition: background-color + var(--switch-transition-duration, @switch-transition-duration); &__node { position: absolute; top: 0; left: 0; border-radius: 100%; - .theme(z-index, '@switch-node-z-index'); - .theme(width, '@switch-node-size'); - .theme(height, '@switch-node-size'); - .theme(background-color, '@switch-node-background-color'); - .theme(box-shadow, '@switch-node-box-shadow'); - .theme(transition, 'transform @switch-transition-duration cubic-bezier(.3, 1.05, .4, 1.05)'); + z-index: var(--switch-node-z-index, @switch-node-z-index); + width: var(--switch-node-size, @switch-node-size); + height: var(--switch-node-size, @switch-node-size); + background-color: var( + --switch-node-background-color, + @switch-node-background-color + ); + box-shadow: var(--switch-node-box-shadow, @switch-node-box-shadow); + transition: var(--switch-transition-duration, @switch-transition-duration) + cubic-bezier(0.3, 1.05, 0.4, 1.05); } &__loading { @@ -34,14 +38,22 @@ } &--on { - .theme(background-color, '@switch-on-background-color'); + background-color: var( + --switch-on-background-color, + @switch-on-background-color + ); .van-switch__node { - .theme(transform, 'translateX(calc(@switch-width - @switch-node-size))'); + transform: translateX( + calc( + var(--switch-width, @switch-width) - + var(--switch-node-size, @switch-node-size) + ) + ); } } &--disabled { - .theme(opacity, '@switch-disabled-opacity'); + opacity: var(--switch-disabled-opacity, @switch-disabled-opacity); } } diff --git a/packages/tabbar-item/index.less b/packages/tabbar-item/index.less index 726448b2..80d68e69 100644 --- a/packages/tabbar-item/index.less +++ b/packages/tabbar-item/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; :host { flex: 1; @@ -11,14 +10,14 @@ align-items: center; justify-content: center; height: 100%; - .theme(color, '@tabbar-item-text-color'); - .theme(font-size, '@tabbar-item-font-size'); - .theme(line-height, '@tabbar-item-line-height'); + color: var(--tabbar-item-text-color, @tabbar-item-text-color); + font-size: var(--tabbar-item-font-size, @tabbar-item-font-size); + line-height: var(--tabbar-item-line-height, @tabbar-item-line-height); &__icon { position: relative; - .theme(margin-bottom, '@tabbar-item-margin-bottom'); - .theme(font-size, '@tabbar-item-icon-size'); + margin-bottom: var(--tabbar-item-margin-bottom, @tabbar-item-margin-bottom); + font-size: var(--tabbar-item-icon-size, @tabbar-item-icon-size); &__inner { display: block; @@ -27,7 +26,7 @@ } &--active { - .theme(color, '@tabbar-item-active-color'); + color: var(--tabbar-item-active-color, @tabbar-item-active-color); } &__info { diff --git a/packages/tabbar/index.less b/packages/tabbar/index.less index 53132bf3..cbc39dc8 100644 --- a/packages/tabbar/index.less +++ b/packages/tabbar/index.less @@ -1,12 +1,11 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-tabbar { display: flex; box-sizing: content-box; width: 100%; - .theme(height, '@tabbar-height'); - .theme(background-color, '@tabbar-background-color'); + height: var(--tabbar-height, @tabbar-height); + background-color: var(--tabbar-background-color, @tabbar-background-color); &--fixed { position: fixed; diff --git a/packages/tabs/index.less b/packages/tabs/index.less index cd01d78d..462c1ed5 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-tabs { position: relative; @@ -29,7 +28,10 @@ } &__scroll { - .theme(background-color, '@tabs-nav-background-color'); + background-color: var( + --tabs-nav-background-color, + @tabs-nav-background-color + ); &--line { box-sizing: content-box; @@ -38,7 +40,7 @@ } &--card { - .theme(margin, '0 @padding-md'); + margin: 0 var(--padding-md, @padding-md); } &::-webkit-scrollbar { @@ -53,26 +55,30 @@ &--card { box-sizing: border-box; - .theme(height, '@tabs-card-height'); - .theme(border, '@border-width-base solid @tabs-default-color'); - .theme(border-radius, '@border-radius-sm'); + height: var(--tabs-card-height, @tabs-card-height); + border: @border-width-base solid + var(--tabs-default-color, @tabs-default-color); + border-radius: @border-radius-sm; .van-tab { - .theme(color, '@tabs-default-color'); - .theme(line-height, 'calc(@tabs-card-height - 2 * @border-width-base)'); - .theme(border-right, '@border-width-base solid @tabs-default-color'); + color: var(--tabs-default-color, @tabs-default-color); + line-height: calc( + var(--tabs-card-height, @tabs-card-height) - 2 * @border-width-base + ); + border-right: @border-width-base solid + var(--tabs-default-color, @tabs-default-color); &:last-child { border-right: none; } &.van-tab--active { - .theme(color, '@white'); - .theme(background-color, '@tabs-default-color'); + color: @white; + background-color: var(--tabs-default-color, @tabs-default-color); } &--disabled { - .theme(color, '@tab-disabled-text-color'); + color: var(--tab-disabled-text-color, @tab-disabled-text-color); } } } @@ -83,9 +89,9 @@ bottom: 0; left: 0; z-index: 1; - .theme(height, '@tabs-bottom-bar-height'); - .theme(border-radius, '@tabs-bottom-bar-height'); - .theme(background-color, '@tabs-bottom-bar-color'); + height: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height); + border-radius: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height); + background-color: var(--tabs-bottom-bar-color, @tabs-bottom-bar-color); } &__track { @@ -105,13 +111,13 @@ &--line { .van-tabs__wrap { - .theme(height, '@tabs-line-height'); + height: var(--tabs-line-height, @tabs-line-height); } } &--card { .van-tabs__wrap { - .theme(height, '@tabs-card-height'); + height: var(--tabs-card-height, @tabs-card-height); } } } @@ -124,17 +130,17 @@ padding: 0 5px; text-align: center; cursor: pointer; - .theme(color, '@tab-text-color'); - .theme(font-size, '@tab-font-size'); - .theme(line-height, '@tabs-line-height'); + color: var(--tab-text-color, @tab-text-color); + font-size: var(--tab-font-size, @tab-font-size); + line-height: var(--tabs-line-height, @tabs-line-height); &--active { - .theme(font-weight, '@font-weight-bold'); - .theme(color, '@tab-active-text-color'); + font-weight: var(--font-weight-bold, @font-weight-bold); + color: var(--tab-active-text-color, @tab-active-text-color); } &--disabled { - .theme(color, '@tab-disabled-text-color'); + color: var(--tab-disabled-text-color, @tab-disabled-text-color); } &__title { diff --git a/packages/tag/index.less b/packages/tag/index.less index 1864f789..768d54c8 100644 --- a/packages/tag/index.less +++ b/packages/tag/index.less @@ -1,58 +1,60 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-tag { position: relative; display: inline-flex; align-items: center; - .theme(padding, '@tag-padding'); - .theme(color, '@tag-text-color'); - .theme(font-size, '@tag-font-size'); - .theme(line-height, '@tag-line-height'); - .theme(border-radius, '@tag-border-radius'); + padding: var(--tag-padding, @tag-padding); + color: var(--tag-text-color, @tag-text-color); + font-size: var(--tag-font-size, @tag-font-size); + line-height: var(--tag-line-height, @tag-line-height); + border-radius: var(--tag-border-radius, @tag-border-radius); &--default { - .theme(background-color, '@tag-default-color'); + background-color: var(--tag-default-color, @tag-default-color); &.van-tag--plain { - .theme(color, '@tag-default-color'); + color: var(--tag-default-color, @tag-default-color); } } &--danger { - .theme(background-color, '@tag-danger-color'); + background-color: var(--tag-danger-color, @tag-danger-color); &.van-tag--plain { - .theme(color, '@tag-danger-color'); + color: var(--tag-danger-color, @tag-danger-color); } } &--primary { - .theme(background-color, '@tag-primary-color'); + background-color: var(--tag-primary-color, @tag-primary-color); &.van-tag--plain { - .theme(color, '@tag-primary-color'); + color: var(--tag-primary-color, @tag-primary-color); } } &--success { - .theme(background-color, '@tag-success-color'); + background-color: var(--tag-success-color, @tag-success-color); &.van-tag--plain { - .theme(color, '@tag-success-color'); + color: var(--tag-success-color, @tag-success-color); } } &--warning { - .theme(background-color, '@tag-warning-color'); + background-color: var(--tag-warning-color, @tag-warning-color); &.van-tag--plain { - .theme(color, '@tag-warning-color'); + color: var(--tag-warning-color, @tag-warning-color); } } &--plain { - .theme(background-color, '@tag-plain-background-color'); + background-color: var( + --tag-plain-background-color, + @tag-plain-background-color + ); &::before { position: absolute; @@ -68,20 +70,26 @@ } &--medium { - .theme(padding, '@tag-medium-padding'); + padding: var(--tag-medium-padding, @tag-medium-padding); } &--large { - .theme(padding, '@tag-large-padding'); - .theme(font-size, '@tag-large-font-size'); - .theme(border-radius, '@tag-large-border-radius'); + padding: var(--tag-large-padding, @tag-large-padding); + font-size: var(--tag-large-font-size, @tag-large-font-size); + border-radius: var(--tag-large-border-radius, @tag-large-border-radius); } &--mark { - .theme( - border-radius, - '0 @tag-round-border-radius @tag-round-border-radius 0' - ); + border-radius: 0 + var( + --tag-round-border-radius, + var(--tag-round-border-radius, @tag-round-border-radius) + ) + var( + --tag-round-border-radius, + var(--tag-round-border-radius, @tag-round-border-radius) + ) + 0; &::after { display: block; @@ -91,7 +99,7 @@ } &--round { - .theme(border-radius, '@tag-round-border-radius'); + border-radius: var(--tag-round-border-radius, @tag-round-border-radius); } &__close { diff --git a/packages/toast/index.less b/packages/toast/index.less index a48edf00..f6603c70 100644 --- a/packages/toast/index.less +++ b/packages/toast/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-toast { display: flex; @@ -7,15 +6,15 @@ align-items: center; justify-content: center; box-sizing: content-box; - .theme(color, '@toast-text-color'); - .theme(font-size, '@toast-font-size'); - .theme(line-height, '@toast-line-height'); + color: var(--toast-text-color, @toast-text-color); + font-size: var(--toast-font-size, @toast-font-size); + line-height: var(--toast-line-height, @toast-line-height); // allow newline charactor white-space: pre-wrap; word-wrap: break-word; - .theme(background-color, '@toast-background-color'); - .theme(border-radius, '@toast-border-radius'); + background-color: var(--toast-background-color, @toast-background-color); + border-radius: var(--toast-border-radius, @toast-border-radius); &__container { position: fixed; @@ -24,21 +23,21 @@ // hack for avoid max-width when use left & fixed width: fit-content; transform: translate(-50%, -50%); - .theme(max-width, '@toast-max-width'); + max-width: var(--toast-max-width, @toast-max-width); } &--text { - .theme(min-width, '@toast-text-min-width'); - .theme(padding, '@toast-text-padding'); + min-width: var(--toast-text-min-width, @toast-text-min-width); + padding: var(--toast-text-padding, @toast-text-padding); } &--icon { - .theme(width, '@toast-default-width'); - .theme(min-height, '@toast-default-min-height'); - .theme(padding, '@toast-default-padding'); + width: var(--toast-default-width, @toast-default-width); + min-height: var(--toast-default-min-height, @toast-default-min-height); + padding: var(--toast-default-padding, @toast-default-padding); .van-toast__icon { - .theme(font-size, '@toast-icon-size'); + font-size: var(--toast-icon-size, @toast-icon-size); } .van-toast__text { diff --git a/packages/tree-select/index.less b/packages/tree-select/index.less index 62dfc741..286c59ac 100644 --- a/packages/tree-select/index.less +++ b/packages/tree-select/index.less @@ -1,15 +1,17 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-tree-select { position: relative; display: flex; user-select: none; - .theme(font-size, '@tree-select-font-size'); + font-size: var(--tree-select-font-size, @tree-select-font-size); &__nav { flex: 1; - .theme(background-color, '@tree-select-nav-background-color'); + background-color: var( + --tree-select-nav-background-color, + @tree-select-nav-background-color + ); &__inner { width: 100% !important; @@ -21,22 +23,30 @@ &__content { flex: 2; - .theme(background-color, '@tree-select-content-background-color'); + background-color: var( + --tree-select-content-background-color, + @tree-select-content-background-color + ); } &__item { position: relative; font-weight: bold; - - .theme(padding, '0 32px 0 @padding-md'); - .theme(line-height, '@tree-select-item-height'); + padding: 0 32px 0 var(--padding-md, @padding-md); + line-height: var(--tree-select-item-height, @tree-select-item-height); &--active { - .theme(color, '@tree-select-item-active-color'); + color: var( + --tree-select-item-active-color, + @tree-select-item-active-color + ); } &--disabled { - .theme(color, '@tree-select-item-disabled-color'); + color: var( + --tree-select-item-disabled-color, + @tree-select-item-disabled-color + ); } } @@ -44,6 +54,6 @@ position: absolute; top: 50%; transform: translateY(-50%); - .theme(right, '@padding-md'); + right: var(--padding-md, @padding-md); } } diff --git a/packages/uploader/index.less b/packages/uploader/index.less index dcae2f4c..4a2e86da 100644 --- a/packages/uploader/index.less +++ b/packages/uploader/index.less @@ -1,5 +1,4 @@ @import '../common/style/var.less'; -@import '../common/style/theme.less'; .van-uploader { position: relative; @@ -25,70 +24,78 @@ align-items: center; justify-content: center; box-sizing: border-box; - .theme(width, '@uploader-size'); - .theme(height, '@uploader-size'); - .theme(margin, '0 @padding-xs @padding-xs 0'); - .theme(background-color, '@uploader-upload-background-color'); + width: var(--uploader-size, @uploader-size); + height: var(--uploader-size, @uploader-size); + margin: 0 @padding-xs @padding-xs 0; + background-color: var( + --uploader-upload-background-color, + @uploader-upload-background-color + ); &:active { - .theme(background-color, '@uploader-upload-active-color'); + background-color: var( + --uploader-upload-active-color, + @uploader-upload-active-color + ); } &-icon { - .theme(color, '@uploader-icon-color'); - .theme(font-size, '@uploader-icon-size'); + color: var(--uploader-icon-color, @uploader-icon-color); + font-size: var(--uploader-icon-size, @uploader-icon-size); } &-text { - .theme(margin-top, '@padding-xs'); - .theme(color, '@uploader-text-color'); - .theme(font-size, '@uploader-text-font-size'); + margin-top: var(--padding-xs, @padding-xs); + color: var(--uploader-text-color, @uploader-text-color); + font-size: var(--uploader-text-font-size, @uploader-text-font-size); } &--disabled { - .theme(opacity, '@uploader-disabled-opacity'); + opacity: var(--uploader-disabled-opacity, @uploader-disabled-opacity); } } &__preview { position: relative; cursor: pointer; - .theme(margin, '0 @padding-xs @padding-xs 0'); + margin: 0 @padding-xs @padding-xs 0; &-image { display: block; overflow: hidden; - .theme(width, '@uploader-size'); - .theme(height, '@uploader-size'); + width: var(--uploader-size, @uploader-size); + height: var(--uploader-size, @uploader-size); } &-delete { position: absolute; top: 0; right: 0; - .theme(width, '@uploader-delete-icon-size'); - .theme(height, '@uploader-delete-icon-size'); - .theme(padding, '0 0 @padding-xs @padding-xs'); + width: var(--uploader-delete-icon-size, @uploader-delete-icon-size); + height: var(--uploader-delete-icon-size, @uploader-delete-icon-size); &::after { position: absolute; top: 0; right: 0; content: ''; - .theme(width, '@uploader-delete-icon-size'); - .theme(height, '@uploader-delete-icon-size'); - .theme(background-color, '@uploader-delete-background-color'); - .theme(border-radius, '0 0 0 calc(@uploader-delete-icon-size - 2px)'); + width: var(--uploader-delete-icon-size, @uploader-delete-icon-size); + height: var(--uploader-delete-icon-size, @uploader-delete-icon-size); + background-color: var( + --uploader-delete-background-color, + @uploader-delete-background-color + ); + border-radius: 0 0 0 12px; } &-icon { position: absolute; - top: -2px; - right: -2px; + top: 0; + right: 0; z-index: 1; - transform: scale(0.5); - .theme(font-size, 'calc(@uploader-delete-icon-size + 2px)'); - .theme(color, '@uploader-delete-color'); + color: var(--uploader-delete-color, @uploader-delete-color); + font-size: var(--uploader-delete-icon-size, @uploader-delete-icon-size); + transform: scale(0.7) translate(10%, -10%); } } } @@ -98,23 +105,35 @@ flex-direction: column; align-items: center; justify-content: center; - .theme(width, '@uploader-size'); - .theme(height, '@uploader-size'); - .theme(background-color, '@uploader-file-background-color'); + width: var(--uploader-size, @uploader-size); + height: var(--uploader-size, @uploader-size); + background-color: var( + --uploader-file-background-color, + @uploader-file-background-color + ); &-icon { - .theme(color, '@uploader-file-icon-color'); - .theme(font-size, '@uploader-file-icon-size'); + color: var(--uploader-file-icon-color, @uploader-file-icon-color); + font-size: var(--uploader-file-icon-size, @uploader-file-icon-size); } &-name { box-sizing: border-box; width: 100%; text-align: center; - .theme(margin-top, '@uploader-file-name-margin-top'); - .theme(padding, '@uploader-file-name-padding'); - .theme(color, '@uploader-file-name-text-color'); - .theme(font-size, '@uploader-file-name-font-size'); + margin-top: var( + --uploader-file-name-margin-top, + @uploader-file-name-margin-top + ); + padding: var(--uploader-file-name-padding, @uploader-file-name-padding); + color: var( + --uploader-file-name-text-color, + @uploader-file-name-text-color + ); + font-size: var( + --uploader-file-name-font-size, + @uploader-file-name-font-size + ); } } @@ -128,24 +147,36 @@ flex-direction: column; align-items: center; justify-content: center; - .theme(color, '@white'); - .theme(background-color, '@uploader-mask-background-color'); + color: @white; + background-color: var( + --uploader-mask-background-color, + @uploader-mask-background-color + ); &-icon { - .theme(font-size, '@uploader-mask-icon-size'); + font-size: var(--uploader-mask-icon-size, @uploader-mask-icon-size); } &-message { margin-top: 6px; - .theme(padding, '0 @padding-base'); - .theme(font-size, '@uploader-mask-message-font-size'); - .theme(line-height, '@uploader-mask-message-line-height'); + padding: 0 var(--padding-base, @padding-base); + font-size: var( + --uploader-mask-message-font-size, + @uploader-mask-message-font-size + ); + line-height: var( + --uploader-mask-message-line-height, + @uploader-mask-message-line-height + ); } } &__loading { - .theme(width, '@uploader-loading-icon-size'); - .theme(height, '@uploader-loading-icon-size'); - .theme(color, '@uploader-loading-icon-color !important'); + width: var(--uploader-loading-icon-size, @uploader-loading-icon-size); + height: var(--uploader-loading-icon-size, @uploader-loading-icon-size); + color: var( + --uploader-loading-icon-color, + @uploader-loading-icon-color + ) !important; } }