diff --git a/src/action-bar-button/index.less b/src/action-bar-button/index.less index 8d17bd889..2f7742a71 100644 --- a/src/action-bar-button/index.less +++ b/src/action-bar-button/index.less @@ -1,8 +1,14 @@ @import './var.less'; +:root { + --van-action-bar-button-height: @action-bar-button-height; + --van-action-bar-button-warning-color: @action-bar-button-warning-color; + --van-action-bar-button-danger-color: @action-bar-button-danger-color; +} + .van-action-bar-button { flex: 1; - height: @action-bar-button-height; + height: var(--van-action-bar-button-height); font-weight: @font-weight-bold; font-size: @font-size-md; border: none; @@ -21,11 +27,11 @@ } &--warning { - background: @action-bar-button-warning-color; + background: var(--van-action-bar-button-warning-color); } &--danger { - background: @action-bar-button-danger-color; + background: var(--van-action-bar-button-danger-color); } @media (max-width: 321px) { diff --git a/src/action-bar-icon/index.less b/src/action-bar-icon/index.less index 0a9ba0c89..44b491750 100644 --- a/src/action-bar-icon/index.less +++ b/src/action-bar-icon/index.less @@ -1,25 +1,36 @@ @import './var.less'; +:root { + --van-action-bar-icon-width: @action-bar-icon-width; + --van-action-bar-icon-height: @action-bar-icon-height; + --van-action-bar-icon-color: @action-bar-icon-color; + --van-action-bar-icon-size: @action-bar-icon-size; + --van-action-bar-icon-font-size: @action-bar-icon-font-size; + --van-action-bar-icon-active-color: @action-bar-icon-active-color; + --van-action-bar-icon-text-color: @action-bar-icon-text-color; + --van-action-bar-icon-background-color: @action-bar-icon-background-color; +} + .van-action-bar-icon { display: flex; flex-direction: column; justify-content: center; - min-width: @action-bar-icon-width; - height: @action-bar-icon-height; - color: @action-bar-icon-text-color; - font-size: @action-bar-icon-font-size; + min-width: var(--van-action-bar-icon-width); + height: var(--van-action-bar-icon-height); + color: var(--van-action-bar-icon-text-color); + font-size: var(--van-action-bar-icon-font-size); line-height: 1; text-align: center; - background-color: @action-bar-icon-background-color; + background-color: var(--van-action-bar-icon-background-color); cursor: pointer; &:active { - background-color: @action-bar-icon-active-color; + background-color: var(--van-action-bar-icon-active-color); } &__icon { margin: 0 auto @padding-base; - color: @action-bar-icon-color; - font-size: @action-bar-icon-size; + color: var(--van-action-bar-icon-color); + font-size: var(--van-action-bar-icon-size); } } diff --git a/src/action-bar/index.less b/src/action-bar/index.less index 70d58ed46..eb91a1910 100644 --- a/src/action-bar/index.less +++ b/src/action-bar/index.less @@ -1,6 +1,11 @@ @import './var.less'; @import '../style/mixins/safe-area.less'; +:root { + --van-action-bar-background-color: @action-bar-background-color; + --van-action-bar-height: @action-bar-height; +} + .van-action-bar { position: fixed; right: 0; @@ -9,8 +14,8 @@ display: flex; align-items: center; box-sizing: content-box; - height: @action-bar-height; - background-color: @action-bar-background-color; + height: var(--van-action-bar-height); + background-color: var(--van-action-bar-background-color); .safe-area-inset-bottom(); &--unfit { diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less index 1202a9a7e..bf27ee1c8 100644 --- a/src/action-sheet/index.less +++ b/src/action-sheet/index.less @@ -1,12 +1,37 @@ @import './var.less'; @import '../style/mixins/hairline'; +:root { + --van-action-sheet-max-height: @action-sheet-max-height; + --van-action-sheet-header-height: @action-sheet-header-height; + --van-action-sheet-header-font-size: @action-sheet-header-font-size; + --van-action-sheet-description-color: @action-sheet-description-color; + --van-action-sheet-description-font-size: @action-sheet-description-font-size; + --van-action-sheet-description-line-height: @action-sheet-description-line-height; + --van-action-sheet-item-background: @action-sheet-item-background; + --van-action-sheet-item-font-size: @action-sheet-item-font-size; + --van-action-sheet-item-line-height: @action-sheet-item-line-height; + --van-action-sheet-item-text-color: @action-sheet-item-text-color; + --van-action-sheet-item-disabled-text-color: @action-sheet-item-disabled-text-color; + --van-action-sheet-subname-color: @action-sheet-subname-color; + --van-action-sheet-subname-font-size: @action-sheet-subname-font-size; + --van-action-sheet-subname-line-height: @action-sheet-subname-line-height; + --van-action-sheet-close-icon-size: @action-sheet-close-icon-size; + --van-action-sheet-close-icon-color: @action-sheet-close-icon-color; + --van-action-sheet-close-icon-active-color: @action-sheet-close-icon-active-color; + --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding; + --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color; + --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top; + --van-action-sheet-cancel-padding-color: @action-sheet-cancel-padding-color; + --van-action-sheet-loading-icon-size: @action-sheet-loading-icon-size; +} + .van-action-sheet { display: flex; flex-direction: column; - max-height: @action-sheet-max-height; + max-height: var(--van-action-sheet-max-height); overflow: hidden; - color: @action-sheet-item-text-color; + color: var(--van-action-sheet-item-text-color); &__content { flex: 1 auto; @@ -19,8 +44,8 @@ display: block; width: 100%; padding: 14px @padding-md; - font-size: @action-sheet-item-font-size; - background-color: @action-sheet-item-background; + font-size: var(--van-action-sheet-item-font-size); + background-color: var(--van-action-sheet-item-background); border: none; cursor: pointer; @@ -30,14 +55,14 @@ } &__item { - line-height: @action-sheet-item-line-height; + line-height: var(--van-action-sheet-item-line-height); &--loading, &--disabled { - color: @action-sheet-item-disabled-text-color; + color: var(--van-action-sheet-item-disabled-text-color); &:active { - background-color: @action-sheet-item-background; + background-color: var(--van-action-sheet-item-background); } } @@ -53,27 +78,27 @@ &__cancel { flex-shrink: 0; box-sizing: border-box; - color: @action-sheet-cancel-text-color; + color: var(--van-action-sheet-cancel-text-color); } &__subname { margin-top: @padding-xs; - color: @action-sheet-subname-color; - font-size: @action-sheet-subname-font-size; - line-height: @action-sheet-subname-line-height; + color: var(--van-action-sheet-subname-color); + font-size: var(--van-action-sheet-subname-font-size); + line-height: var(--van-action-sheet-subname-line-height); } &__gap { display: block; - height: @action-sheet-cancel-padding-top; - background-color: @action-sheet-cancel-padding-color; + height: var(--van-action-sheet-cancel-padding-top); + background-color: var(--van-action-sheet-cancel-padding-color); } &__header { flex-shrink: 0; font-weight: @font-weight-bold; - font-size: @action-sheet-header-font-size; - line-height: @action-sheet-header-height; + font-size: var(--van-action-sheet-header-font-size); + line-height: var(--van-action-sheet-header-height); text-align: center; } @@ -81,9 +106,9 @@ position: relative; flex-shrink: 0; padding: 20px @padding-md; - color: @action-sheet-description-color; - font-size: @action-sheet-description-font-size; - line-height: @action-sheet-description-line-height; + color: var(--van-action-sheet-description-color); + font-size: var(--van-action-sheet-description-font-size); + line-height: var(--van-action-sheet-description-line-height); text-align: center; &::after { @@ -92,21 +117,21 @@ } &__loading-icon .van-loading__spinner { - width: @action-sheet-loading-icon-size; - height: @action-sheet-loading-icon-size; + width: var(--van-action-sheet-loading-icon-size); + height: var(--van-action-sheet-loading-icon-size); } &__close { position: absolute; top: 0; right: 0; - padding: @action-sheet-close-icon-padding; - color: @action-sheet-close-icon-color; - font-size: @action-sheet-close-icon-size; + padding: var(--van-action-sheet-close-icon-padding); + color: var(--van-action-sheet-close-icon-color); + font-size: var(--van-action-sheet-close-icon-size); line-height: inherit; &:active { - color: @action-sheet-close-icon-active-color; + color: var(--van-action-sheet-close-icon-active-color); } } } diff --git a/src/address-edit/index.less b/src/address-edit/index.less index 509bd8cd6..f7e4c440f 100644 --- a/src/address-edit/index.less +++ b/src/address-edit/index.less @@ -1,7 +1,15 @@ @import './var.less'; +:root { + --van-address-edit-padding: @address-edit-padding; + --van-address-edit-buttons-padding: @address-edit-buttons-padding; + --van-address-edit-button-margin-bottom: @address-edit-button-margin-bottom; + --van-address-edit-detail-finish-color: @address-edit-detail-finish-color; + --van-address-edit-detail-finish-font-size: @address-edit-detail-finish-font-size; +} + .van-address-edit { - padding: @address-edit-padding; + padding: var(--van-address-edit-padding); &__fields { overflow: hidden; @@ -19,10 +27,10 @@ } &__buttons { - padding: @address-edit-buttons-padding; + padding: var(--van-address-edit-buttons-padding); .van-button { - margin-bottom: @address-edit-button-margin-bottom; + margin-bottom: var(--van-address-edit-button-margin-bottom); } } @@ -36,8 +44,8 @@ } &__finish { - color: @address-edit-detail-finish-color; - font-size: @address-edit-detail-finish-font-size; + color: var(--van-address-edit-detail-finish-color); + font-size: var(--van-address-edit-detail-finish-font-size); } } } diff --git a/src/address-list/index.less b/src/address-list/index.less index c9858b177..0d31e9220 100644 --- a/src/address-list/index.less +++ b/src/address-list/index.less @@ -1,16 +1,32 @@ @import './var.less'; @import '../style/mixins/safe-area.less'; +:root { + --van-address-list-padding: @address-list-padding; + --van-address-list-disabled-text-color: @address-list-disabled-text-color; + --van-address-list-disabled-text-padding: @address-list-disabled-text-padding; + --van-address-list-disabled-text-font-size: @address-list-disabled-text-font-size; + --van-address-list-disabled-text-line-height: @address-list-disabled-text-line-height; + --van-address-list-add-button-z-index: @address-list-add-button-z-index; + --van-address-list-item-padding: @address-list-item-padding; + --van-address-list-item-text-color: @address-list-item-text-color; + --van-address-list-item-disabled-text-color: @address-list-item-disabled-text-color; + --van-address-list-item-font-size: @address-list-item-font-size; + --van-address-list-item-line-height: @address-list-item-line-height; + --van-address-list-item-radio-icon-color: @address-list-item-radio-icon-color; + --van-address-list-edit-icon-size: @address-list-edit-icon-size; +} + .van-address-list { box-sizing: border-box; height: 100%; - padding: @address-list-padding; + padding: var(--van-address-list-padding); &__bottom { position: fixed; bottom: 0; left: 0; - z-index: @address-list-add-button-z-index; + z-index: var(--van-address-list-add-button-z-index); box-sizing: border-box; width: 100%; padding: 0 @padding-md; @@ -24,15 +40,15 @@ } &__disabled-text { - padding: @address-list-disabled-text-padding; - color: @address-list-disabled-text-color; - font-size: @address-list-disabled-text-font-size; - line-height: @address-list-disabled-text-line-height; + padding: var(--van-address-list-disabled-text-padding); + color: var(--van-address-list-disabled-text-color); + font-size: var(--van-address-list-disabled-text-font-size); + line-height: var(--van-address-list-disabled-text-line-height); } } .van-address-item { - padding: @address-list-item-padding; + padding: var(--van-address-list-item-padding); background-color: @white; border-radius: @border-radius-lg; @@ -61,15 +77,15 @@ } &__address { - color: @address-list-item-text-color; - font-size: @address-list-item-font-size; - line-height: @address-list-item-line-height; + color: var(--van-address-list-item-text-color); + font-size: var(--van-address-list-item-font-size); + line-height: var(--van-address-list-item-line-height); } &--disabled { .van-address-item__name, .van-address-item__address { - color: @address-list-item-disabled-text-color; + color: var(--van-address-list-item-disabled-text-color); } } @@ -78,7 +94,7 @@ top: 50%; right: @padding-md; color: @gray-6; - font-size: @address-list-edit-icon-size; + font-size: var(--van-address-list-edit-icon-size); transform: translate(0, -50%); } @@ -91,7 +107,7 @@ } .van-radio__icon--checked .van-icon { - background-color: @address-list-item-radio-icon-color; - border-color: @address-list-item-radio-icon-color; + background-color: var(--van-address-list-item-radio-icon-color); + border-color: var(--van-address-list-item-radio-icon-color); } } diff --git a/src/badge/index.less b/src/badge/index.less index 51df56491..a76d49b9c 100644 --- a/src/badge/index.less +++ b/src/badge/index.less @@ -1,18 +1,31 @@ @import './var.less'; +:root { + --van-badge-size: @badge-size; + --van-badge-color: @badge-color; + --van-badge-padding: @badge-padding; + --van-badge-font-size: @badge-font-size; + --van-badge-font-weight: @badge-font-weight; + --van-badge-border-width: @badge-border-width; + --van-badge-background-color: @badge-background-color; + --van-badge-dot-color: @badge-dot-color; + --van-badge-dot-size: @badge-dot-size; + --van-badge-font-family: @badge-font-family; +} + .van-badge { display: inline-block; box-sizing: border-box; - min-width: @badge-size; - padding: @badge-padding; - color: @badge-color; - font-weight: @badge-font-weight; - font-size: @badge-font-size; - font-family: @badge-font-family; + min-width: var(--van-badge-size); + padding: var(--van-badge-padding); + color: var(--van-badge-color); + font-weight: var(--van-badge-font-weight); + font-size: var(--van-badge-font-size); + font-family: var(--van-badge-font-family); line-height: 1.2; text-align: center; - background-color: @badge-background-color; - border: @badge-border-width solid @white; + background-color: var(--van-badge-background-color); + border: var(--van-badge-border-width) solid @white; border-radius: @border-radius-max; &--fixed { @@ -24,10 +37,10 @@ } &--dot { - width: @badge-dot-size; + width: var(--van-badge-dot-size); min-width: 0; - height: @badge-dot-size; - background-color: @badge-dot-color; + height: var(--van-badge-dot-size); + background-color: var(--van-badge-dot-color); border-radius: 100%; } diff --git a/src/button/index.less b/src/button/index.less index e3bb13976..8c0731b1d 100644 --- a/src/button/index.less +++ b/src/button/index.less @@ -1,16 +1,53 @@ @import './var.less'; +:root { + --van-button-mini-height: @button-mini-height; + --van-button-mini-padding: @button-mini-padding; + --van-button-mini-font-size: @button-mini-font-size; + --van-button-small-height: @button-small-height; + --van-button-small-padding: @button-small-padding; + --van-button-small-font-size: @button-small-font-size; + --van-button-normal-padding: @button-normal-padding; + --van-button-normal-font-size: @button-normal-font-size; + --van-button-large-height: @button-large-height; + --van-button-default-height: @button-default-height; + --van-button-default-line-height: @button-default-line-height; + --van-button-default-font-size: @button-default-font-size; + --van-button-default-color: @button-default-color; + --van-button-default-background-color: @button-default-background-color; + --van-button-default-border-color: @button-default-border-color; + --van-button-primary-color: @button-primary-color; + --van-button-primary-background-color: @button-primary-background-color; + --van-button-primary-border-color: @button-primary-border-color; + --van-button-success-color: @button-success-color; + --van-button-success-background-color: @button-success-background-color; + --van-button-success-border-color: @button-success-border-color; + --van-button-danger-color: @button-danger-color; + --van-button-danger-background-color: @button-danger-background-color; + --van-button-danger-border-color: @button-danger-border-color; + --van-button-warning-color: @button-warning-color; + --van-button-warning-background-color: @button-warning-background-color; + --van-button-warning-border-color: @button-warning-border-color; + --van-button-border-width: @button-border-width; + --van-button-border-radius: @button-border-radius; + --van-button-round-border-radius: @button-round-border-radius; + --van-button-plain-background-color: @button-plain-background-color; + --van-button-disabled-opacity: @button-disabled-opacity; + --van-button-icon-size: @button-icon-size; + --van-button-loading-icon-size: @button-loading-icon-size; +} + .van-button { position: relative; display: inline-block; box-sizing: border-box; - height: @button-default-height; + height: var(--van-button-default-height); margin: 0; padding: 0; - font-size: @button-default-font-size; - line-height: @button-default-line-height; + font-size: var(--van-button-default-font-size); + line-height: var(--van-button-default-line-height); text-align: center; - border-radius: @button-border-radius; + border-radius: var(--van-button-border-radius); cursor: pointer; transition: opacity @animation-duration-fast; -webkit-appearance: none; @@ -42,69 +79,74 @@ } &--default { - color: @button-default-color; - background-color: @button-default-background-color; - border: @button-border-width solid @button-default-border-color; + color: var(--van-button-default-color); + background-color: var(--van-button-default-background-color); + border: var(--van-button-border-width) solid + var(--van-button-default-border-color); } &--primary { - color: @button-primary-color; - background-color: @button-primary-background-color; - border: @button-border-width solid @button-primary-border-color; + color: var(--van-button-primary-color); + background-color: var(--van-button-primary-background-color); + border: var(--van-button-border-width) solid + var(--van-button-primary-border-color); } &--success { - color: @button-success-color; - background-color: @button-success-background-color; - border: @button-border-width solid @button-success-border-color; + color: var(--van-button-success-color); + background-color: var(--van-button-success-background-color); + border: var(--van-button-border-width) solid + var(--van-button-success-border-color); } &--danger { - color: @button-danger-color; - background-color: @button-danger-background-color; - border: @button-border-width solid @button-danger-border-color; + color: var(--van-button-danger-color); + background-color: var(--van-button-danger-background-color); + border: var(--van-button-border-width) solid + var(--van-button-danger-border-color); } &--warning { - color: @button-warning-color; - background-color: @button-warning-background-color; - border: @button-border-width solid @button-warning-border-color; + color: var(--van-button-warning-color); + background-color: var(--van-button-warning-background-color); + border: var(--van-button-border-width) solid + var(--van-button-warning-border-color); } &--plain { - background-color: @button-plain-background-color; + background-color: var(--van-button-plain-background-color); &.van-button--primary { - color: @button-primary-background-color; + color: var(--van-button-primary-background-color); } &.van-button--success { - color: @button-success-background-color; + color: var(--van-button-success-background-color); } &.van-button--danger { - color: @button-danger-background-color; + color: var(--van-button-danger-background-color); } &.van-button--warning { - color: @button-warning-background-color; + color: var(--van-button-warning-background-color); } } &--large { width: 100%; - height: @button-large-height; + height: var(--van-button-large-height); } &--normal { - padding: @button-normal-padding; - font-size: @button-normal-font-size; + padding: var(--van-button-normal-padding); + font-size: var(--van-button-normal-font-size); } &--small { - height: @button-small-height; - padding: @button-small-padding; - font-size: @button-small-font-size; + height: var(--van-button-small-height); + padding: var(--van-button-small-padding); + font-size: var(--van-button-small-font-size); } &__loading { @@ -113,15 +155,15 @@ .van-loading__spinner { color: currentColor; - width: @button-loading-icon-size; - height: @button-loading-icon-size; + width: var(--van-button-loading-icon-size); + height: var(--van-button-loading-icon-size); } } &--mini { - height: @button-mini-height; - padding: @button-mini-padding; - font-size: @button-mini-font-size; + height: var(--van-button-mini-height); + padding: var(--van-button-mini-padding); + font-size: var(--van-button-mini-font-size); & + .van-button--mini { margin-left: @padding-base; @@ -135,7 +177,7 @@ &--disabled { cursor: not-allowed; - opacity: @button-disabled-opacity; + opacity: var(--van-button-disabled-opacity); } &--loading { @@ -143,7 +185,7 @@ } &--round { - border-radius: @button-round-border-radius; + border-radius: var(--van-button-round-border-radius); } &--square { @@ -166,7 +208,7 @@ } &__icon { - font-size: @button-icon-size; + font-size: var(--van-button-icon-size); line-height: inherit; } @@ -182,11 +224,11 @@ &::after { border-color: inherit; - border-radius: @button-border-radius * 2; + border-radius: calc(var(--van-button-border-radius) * 2); } &.van-button--round::after { - border-radius: @button-round-border-radius; + border-radius: var(--van-button-round-border-radius); } &.van-button--square::after { diff --git a/src/calendar/index.less b/src/calendar/index.less index 3dfe0d3ea..fca849eb0 100644 --- a/src/calendar/index.less +++ b/src/calendar/index.less @@ -1,16 +1,44 @@ @import './var.less'; @import '../style/mixins/safe-area.less'; +:root { + --van-calendar-background-color: @calendar-background-color; + --van-calendar-popup-height: @calendar-popup-height; + --van-calendar-header-box-shadow: @calendar-header-box-shadow; + --van-calendar-header-title-height: @calendar-header-title-height; + --van-calendar-header-title-font-size: @calendar-header-title-font-size; + --van-calendar-header-subtitle-font-size: @calendar-header-subtitle-font-size; + --van-calendar-weekdays-height: @calendar-weekdays-height; + --van-calendar-weekdays-font-size: @calendar-weekdays-font-size; + --van-calendar-month-title-font-size: @calendar-month-title-font-size; + --van-calendar-month-mark-color: @calendar-month-mark-color; + --van-calendar-month-mark-font-size: @calendar-month-mark-font-size; + --van-calendar-day-height: @calendar-day-height; + --van-calendar-day-font-size: @calendar-day-font-size; + --van-calendar-range-edge-color: @calendar-range-edge-color; + --van-calendar-range-edge-background-color: @calendar-range-edge-background-color; + --van-calendar-range-middle-color: @calendar-range-middle-color; + --van-calendar-range-middle-background-opacity: @calendar-range-middle-background-opacity; + --van-calendar-selected-day-size: @calendar-selected-day-size; + --van-calendar-selected-day-color: @calendar-selected-day-color; + --van-calendar-info-font-size: @calendar-info-font-size; + --van-calendar-info-line-height: @calendar-info-line-height; + --van-calendar-selected-day-background-color: @calendar-selected-day-background-color; + --van-calendar-day-disabled-color: @calendar-day-disabled-color; + --van-calendar-confirm-button-height: @calendar-confirm-button-height; + --van-calendar-confirm-button-margin: @calendar-confirm-button-margin; +} + .van-calendar { display: flex; flex-direction: column; height: 100%; - background-color: @calendar-background-color; + background-color: var(--van-calendar-background-color); &__popup { &.van-popup--top, &.van-popup--bottom { - height: @calendar-popup-height; + height: var(--van-calendar-popup-height); } &.van-popup--left, @@ -25,28 +53,28 @@ &__header { flex-shrink: 0; - box-shadow: @calendar-header-box-shadow; + box-shadow: var(--van-calendar-header-box-shadow); } &__month-title, &__header-title, &__header-subtitle { - height: @calendar-header-title-height; + height: var(--van-calendar-header-title-height); font-weight: @font-weight-bold; - line-height: @calendar-header-title-height; + line-height: var(--van-calendar-header-title-height); text-align: center; } &__header-title { - font-size: @calendar-header-title-font-size; + font-size: var(--van-calendar-header-title-font-size); } &__header-subtitle { - font-size: @calendar-header-subtitle-font-size; + font-size: var(--van-calendar-header-subtitle-font-size); } &__month-title { - font-size: @calendar-month-title-font-size; + font-size: var(--van-calendar-month-title-font-size); } &__weekdays { @@ -55,8 +83,8 @@ &__weekday { flex: 1; - font-size: @calendar-weekdays-font-size; - line-height: @calendar-weekdays-height; + font-size: var(--van-calendar-weekdays-font-size); + line-height: var(--van-calendar-weekdays-height); text-align: center; } @@ -78,8 +106,8 @@ top: 50%; left: 50%; z-index: 0; - color: @calendar-month-mark-color; - font-size: @calendar-month-mark-font-size; + color: var(--van-calendar-month-mark-color); + font-size: var(--van-calendar-month-mark-font-size); transform: translate(-50%, -50%); pointer-events: none; } @@ -95,8 +123,8 @@ &__day { position: relative; width: 14.285%; - height: @calendar-day-height; - font-size: @calendar-day-font-size; + height: var(--van-calendar-day-height); + font-size: var(--van-calendar-day-font-size); cursor: pointer; &--end, @@ -104,8 +132,8 @@ &--start-end, &--multiple-middle, &--multiple-selected { - color: @calendar-range-edge-color; - background-color: @calendar-range-edge-background-color; + color: var(--van-calendar-range-edge-color); + background-color: var(--van-calendar-range-edge-background-color); } &--start { @@ -122,7 +150,7 @@ } &--middle { - color: @calendar-range-middle-color; + color: var(--van-calendar-range-middle-color); &::after { position: absolute; @@ -131,13 +159,13 @@ bottom: 0; left: 0; background-color: currentColor; - opacity: @calendar-range-middle-background-opacity; + opacity: var(--van-calendar-range-middle-background-opacity); content: ''; } } &--disabled { - color: @calendar-day-disabled-color; + color: var(--van-calendar-day-disabled-color); cursor: default; } } @@ -147,8 +175,8 @@ position: absolute; right: 0; left: 0; - font-size: @calendar-info-font-size; - line-height: @calendar-info-line-height; + font-size: var(--van-calendar-info-font-size); + line-height: var(--van-calendar-info-line-height); @media (max-width: 350px) { font-size: 9px; @@ -164,10 +192,10 @@ } &__selected-day { - width: @calendar-selected-day-size; - height: @calendar-selected-day-size; - color: @calendar-selected-day-color; - background-color: @calendar-selected-day-background-color; + width: var(--van-calendar-selected-day-size); + height: var(--van-calendar-selected-day-size); + color: var(--van-calendar-selected-day-color); + background-color: var(--van-calendar-selected-day-background-color); border-radius: @border-radius-md; } @@ -182,7 +210,7 @@ } &__confirm { - height: @calendar-confirm-button-height; - margin: @calendar-confirm-button-margin; + height: var(--van-calendar-confirm-button-height); + margin: var(--van-calendar-confirm-button-margin); } } diff --git a/src/card/index.less b/src/card/index.less index 0fd72a59b..31f996a95 100644 --- a/src/card/index.less +++ b/src/card/index.less @@ -1,12 +1,31 @@ @import './var.less'; +:root { + --van-card-padding: @card-padding; + --van-card-font-size: @card-font-size; + --van-card-text-color: @card-text-color; + --van-card-background-color: @card-background-color; + --van-card-thumb-size: @card-thumb-size; + --van-card-thumb-border-radius: @card-thumb-border-radius; + --van-card-title-line-height: @card-title-line-height; + --van-card-desc-color: @card-desc-color; + --van-card-desc-line-height: @card-desc-line-height; + --van-card-price-color: @card-price-color; + --van-card-origin-price-color: @card-origin-price-color; + --van-card-num-color: @card-num-color; + --van-card-origin-price-font-size: @card-origin-price-font-size; + --van-card-price-font-size: @card-price-font-size; + --van-card-price-integer-font-size: @card-price-integer-font-size; + --van-card-price-font-family: @card-price-font-family; +} + .van-card { position: relative; box-sizing: border-box; - padding: @card-padding; - color: @card-text-color; - font-size: @card-font-size; - background-color: @card-background-color; + padding: var(--van-card-padding); + color: var(--van-card-text-color); + font-size: var(--van-card-font-size); + background-color: var(--van-card-background-color); &:not(:first-child) { margin-top: @padding-xs; @@ -19,12 +38,12 @@ &__thumb { position: relative; flex: none; - width: @card-thumb-size; - height: @card-thumb-size; + width: var(--van-card-thumb-size); + height: var(--van-card-thumb-size); margin-right: @padding-xs; img { - border-radius: @card-thumb-border-radius; + border-radius: var(--van-card-thumb-border-radius); } } @@ -35,7 +54,7 @@ flex-direction: column; justify-content: space-between; min-width: 0; /* hack for flex box ellipsis */ - min-height: @card-thumb-size; + min-height: var(--van-card-thumb-size); &--centered { justify-content: center; @@ -50,13 +69,13 @@ &__title { max-height: 32px; font-weight: @font-weight-bold; - line-height: @card-title-line-height; + line-height: var(--van-card-title-line-height); } &__desc { - max-height: @card-desc-line-height; - color: @card-desc-color; - line-height: @card-desc-line-height; + max-height: var(--van-card-desc-line-height); + color: var(--van-card-desc-color); + line-height: var(--van-card-desc-line-height); } &__bottom { @@ -65,31 +84,31 @@ &__price { display: inline-block; - color: @card-price-color; + color: var(--van-card-price-color); font-weight: @font-weight-bold; - font-size: @card-price-font-size; + font-size: var(--van-card-price-font-size); } &__price-integer { - font-size: @card-price-integer-font-size; - font-family: @card-price-font-family; + font-size: var(--van-card-price-integer-font-size); + font-family: var(--van-card-price-font-family); } &__price-decimal { - font-family: @card-price-font-family; + font-family: var(--van-card-price-font-family); } &__origin-price { display: inline-block; margin-left: 5px; - color: @card-origin-price-color; - font-size: @card-origin-price-font-size; + color: var(--van-card-origin-price-color); + font-size: var(--van-card-origin-price-font-size); text-decoration: line-through; } &__num { float: right; - color: @card-num-color; + color: var(--van-card-num-color); } &__tag { diff --git a/src/cascader/index.less b/src/cascader/index.less index afd49c6c7..caf80be34 100644 --- a/src/cascader/index.less +++ b/src/cascader/index.less @@ -1,26 +1,42 @@ @import './var.less'; +:root { + --van-cascader-header-height: @cascader-header-height; + --van-cascader-header-padding: @cascader-header-padding; + --van-cascader-title-font-size: @cascader-title-font-size; + --van-cascader-title-line-height: @cascader-title-line-height; + --van-cascader-close-icon-size: @cascader-close-icon-size; + --van-cascader-close-icon-color: @cascader-close-icon-color; + --van-cascader-close-icon-active-color: @cascader-close-icon-active-color; + --van-cascader-selected-icon-size: @cascader-selected-icon-size; + --van-cascader-tabs-height: @cascader-tabs-height; + --van-cascader-active-color: @cascader-active-color; + --van-cascader-options-height: @cascader-options-height; + --van-cascader-tab-color: @cascader-tab-color; + --van-cascader-unselected-tab-color: @cascader-unselected-tab-color; +} + .van-cascader { &__header { display: flex; align-items: center; justify-content: space-between; - height: @cascader-header-height; - padding: @cascader-header-padding; + height: var(--van-cascader-header-height); + padding: var(--van-cascader-header-padding); } &__title { font-weight: @font-weight-bold; - font-size: @cascader-title-font-size; - line-height: @cascader-title-line-height; + font-size: var(--van-cascader-title-font-size); + line-height: var(--van-cascader-title-line-height); } &__close-icon { - color: @cascader-close-icon-color; - font-size: @cascader-close-icon-size; + color: var(--van-cascader-close-icon-color); + font-size: var(--van-cascader-close-icon-size); &:active { - color: @cascader-close-icon-active-color; + color: var(--van-cascader-close-icon-active-color); } } @@ -31,7 +47,7 @@ } &.van-tabs--line .van-tabs__wrap { - height: @cascader-tabs-height; + height: var(--van-cascader-tabs-height); } .van-tabs__nav--complete { @@ -41,11 +57,11 @@ } &__tab { - color: @cascader-tab-color; + color: var(--van-cascader-tab-color); font-weight: @font-weight-bold; &--unselected { - color: @cascader-unselected-tab-color; + color: var(--van-cascader-unselected-tab-color); font-weight: normal; } } @@ -63,18 +79,18 @@ } &--selected { - color: @cascader-active-color; + color: var(--van-cascader-active-color); font-weight: @font-weight-bold; } } &__selected-icon { - font-size: @cascader-selected-icon-size; + font-size: var(--van-cascader-selected-icon-size); } &__options { box-sizing: border-box; - height: @cascader-options-height; + height: var(--van-cascader-options-height); padding-top: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; diff --git a/src/cell-group/index.less b/src/cell-group/index.less index 9f5e5d095..c1c192716 100644 --- a/src/cell-group/index.less +++ b/src/cell-group/index.less @@ -1,12 +1,20 @@ @import './var.less'; +:root { + --van-cell-group-background-color: @cell-group-background-color; + --van-cell-group-title-color: @cell-group-title-color; + --van-cell-group-title-padding: @cell-group-title-padding; + --van-cell-group-title-font-size: @cell-group-title-font-size; + --van-cell-group-title-line-height: @cell-group-title-line-height; +} + .van-cell-group { - background-color: @cell-group-background-color; + background-color: var(--van-cell-group-background-color); &__title { - padding: @cell-group-title-padding; - color: @cell-group-title-color; - font-size: @cell-group-title-font-size; - line-height: @cell-group-title-line-height; + padding: var(--van-cell-group-title-padding); + color: var(--van-cell-group-title-color); + font-size: var(--van-cell-group-title-font-size); + line-height: var(--van-cell-group-title-line-height); } } diff --git a/src/cell/index.less b/src/cell/index.less index fcd4287d9..fafea7526 100644 --- a/src/cell/index.less +++ b/src/cell/index.less @@ -1,20 +1,42 @@ @import './var.less'; @import '../style/mixins/hairline'; +:root { + --van-cell-font-size: @cell-font-size; + --van-cell-line-height: @cell-line-height; + --van-cell-vertical-padding: @cell-vertical-padding; + --van-cell-horizontal-padding: @cell-horizontal-padding; + --van-cell-text-color: @cell-text-color; + --van-cell-background-color: @cell-background-color; + --van-cell-border-color: @cell-border-color; + --van-cell-active-color: @cell-active-color; + --van-cell-required-color: @cell-required-color; + --van-cell-label-color: @cell-label-color; + --van-cell-label-font-size: @cell-label-font-size; + --van-cell-label-line-height: @cell-label-line-height; + --van-cell-label-margin-top: @cell-label-margin-top; + --van-cell-value-color: @cell-value-color; + --van-cell-icon-size: @cell-icon-size; + --van-cell-right-icon-color: @cell-right-icon-color; + --van-cell-large-vertical-padding: @cell-large-vertical-padding; + --van-cell-large-title-font-size: @cell-large-title-font-size; + --van-cell-large-label-font-size: @cell-large-label-font-size; +} + .van-cell { position: relative; display: flex; box-sizing: border-box; width: 100%; - padding: @cell-vertical-padding @cell-horizontal-padding; + padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding); overflow: hidden; - color: @cell-text-color; - font-size: @cell-font-size; - line-height: @cell-line-height; - background-color: @cell-background-color; + color: var(--van-cell-text-color); + font-size: var(--van-cell-font-size); + line-height: var(--van-cell-line-height); + background-color: var(--van-cell-background-color); &::after { - .hairline-bottom(@cell-border-color, @padding-md, @padding-md); + .hairline-bottom(var(--van-cell-border-color), @padding-md, @padding-md); } &:last-child::after, @@ -23,10 +45,10 @@ } &__label { - margin-top: @cell-label-margin-top; - color: @cell-label-color; - font-size: @cell-label-font-size; - line-height: @cell-label-line-height; + margin-top: var(--van-cell-label-margin-top); + color: var(--van-cell-label-color); + font-size: var(--van-cell-label-font-size); + line-height: var(--van-cell-label-line-height); } &__title, @@ -37,7 +59,7 @@ &__value { position: relative; overflow: hidden; - color: @cell-value-color; + color: var(--van-cell-value-color); text-align: right; vertical-align: middle; word-wrap: break-word; @@ -50,9 +72,9 @@ &__left-icon, &__right-icon { - height: @cell-line-height; - font-size: @cell-icon-size; - line-height: @cell-line-height; + height: var(--van-cell-line-height); + font-size: var(--van-cell-icon-size); + line-height: var(--van-cell-line-height); } &__left-icon { @@ -61,14 +83,14 @@ &__right-icon { margin-left: @padding-base; - color: @cell-right-icon-color; + color: var(--van-cell-right-icon-color); } &--clickable { cursor: pointer; &:active { - background-color: @cell-active-color; + background-color: var(--van-cell-active-color); } } @@ -78,8 +100,8 @@ &::before { position: absolute; left: @padding-xs; - color: @cell-required-color; - font-size: @cell-font-size; + color: var(--van-cell-required-color); + font-size: var(--van-cell-font-size); content: '*'; } } @@ -89,15 +111,15 @@ } &--large { - padding-top: @cell-large-vertical-padding; - padding-bottom: @cell-large-vertical-padding; + padding-top: var(--van-cell-large-vertical-padding); + padding-bottom: var(--van-cell-large-vertical-padding); .van-cell__title { - font-size: @cell-large-title-font-size; + font-size: var(--van-cell-large-title-font-size); } .van-cell__label { - font-size: @cell-large-label-font-size; + font-size: var(--van-cell-large-label-font-size); } } } diff --git a/src/checkbox/index.less b/src/checkbox/index.less index e2fc3e71a..85288f71b 100644 --- a/src/checkbox/index.less +++ b/src/checkbox/index.less @@ -1,5 +1,17 @@ @import './var.less'; +:root { + --van-checkbox-size: @checkbox-size; + --van-checkbox-border-color: @checkbox-border-color; + --van-checkbox-transition-duration: @checkbox-transition-duration; + --van-checkbox-label-margin: @checkbox-label-margin; + --van-checkbox-label-color: @checkbox-label-color; + --van-checkbox-checked-icon-color: @checkbox-checked-icon-color; + --van-checkbox-disabled-icon-color: @checkbox-disabled-icon-color; + --van-checkbox-disabled-label-color: @checkbox-disabled-label-color; + --van-checkbox-disabled-background-color: @checkbox-disabled-background-color; +} + .van-checkbox { display: flex; align-items: center; @@ -22,7 +34,7 @@ &__icon { flex: none; height: 1em; - font-size: @checkbox-size; + font-size: var(--van-checkbox-size); line-height: 1em; cursor: pointer; @@ -35,8 +47,8 @@ font-size: 0.8em; line-height: 1.25; text-align: center; - border: 1px solid @checkbox-border-color; - transition-duration: @checkbox-transition-duration; + border: 1px solid var(--van-checkbox-border-color); + transition-duration: var(--van-checkbox-transition-duration); transition-property: color, border-color, background-color; } @@ -49,8 +61,8 @@ &--checked { .van-icon { color: @white; - background-color: @checkbox-checked-icon-color; - border-color: @checkbox-checked-icon-color; + background-color: var(--van-checkbox-checked-icon-color); + border-color: var(--van-checkbox-checked-icon-color); } } @@ -58,29 +70,29 @@ cursor: not-allowed; .van-icon { - background-color: @checkbox-disabled-background-color; - border-color: @checkbox-disabled-icon-color; + background-color: var(--van-checkbox-disabled-background-color); + border-color: var(--van-checkbox-disabled-icon-color); } } &--disabled&--checked { .van-icon { - color: @checkbox-disabled-icon-color; + color: var(--van-checkbox-disabled-icon-color); } } } &__label { - margin-left: @checkbox-label-margin; - color: @checkbox-label-color; - line-height: @checkbox-size; + margin-left: var(--van-checkbox-label-margin); + color: var(--van-checkbox-label-color); + line-height: var(--van-checkbox-size); &--left { - margin: 0 @checkbox-label-margin 0 0; + margin: 0 var(--van-checkbox-label-margin) 0 0; } &--disabled { - color: @checkbox-disabled-label-color; + color: var(--van-checkbox-disabled-label-color); } } } diff --git a/src/circle/index.less b/src/circle/index.less index 48672476c..ea2cb68af 100644 --- a/src/circle/index.less +++ b/src/circle/index.less @@ -1,10 +1,20 @@ @import './var.less'; +:root { + --van-circle-size: @circle-size; + --van-circle-color: @circle-color; + --van-circle-layer-color: @circle-layer-color; + --van-circle-text-color: @circle-text-color; + --van-circle-text-font-weight: @circle-text-font-weight; + --van-circle-text-font-size: @circle-text-font-size; + --van-circle-text-line-height: @circle-text-line-height; +} + .van-circle { position: relative; display: inline-block; - width: @circle-size; - height: @circle-size; + width: var(--van-circle-size); + height: var(--van-circle-size); text-align: center; svg { @@ -16,12 +26,12 @@ } &__layer { - stroke: @circle-layer-color; + stroke: var(--van-circle-layer-color); } &__hover { fill: none; - stroke: @circle-color; + stroke: var(--van-circle-color); stroke-linecap: round; } @@ -32,10 +42,10 @@ box-sizing: border-box; width: 100%; padding: 0 @padding-base; - color: @circle-text-color; - font-weight: @circle-text-font-weight; - font-size: @circle-text-font-size; - line-height: @circle-text-line-height; + color: var(--van-circle-text-color); + font-weight: var(--van-circle-text-font-weight); + font-size: var(--van-circle-text-font-size); + line-height: var(--van-circle-text-line-height); transform: translateY(-50%); } } diff --git a/src/collapse-item/index.less b/src/collapse-item/index.less index 0f0ad1285..b3da11aeb 100644 --- a/src/collapse-item/index.less +++ b/src/collapse-item/index.less @@ -1,6 +1,16 @@ @import './var.less'; @import '../style/mixins/hairline'; +:root { + --van-collapse-item-transition-duration: @collapse-item-transition-duration; + --van-collapse-item-content-padding: @collapse-item-content-padding; + --van-collapse-item-content-font-size: @collapse-item-content-font-size; + --van-collapse-item-content-line-height: @collapse-item-content-line-height; + --van-collapse-item-content-text-color: @collapse-item-content-text-color; + --van-collapse-item-content-background-color: @collapse-item-content-background-color; + --van-collapse-item-title-disabled-color: @collapse-item-title-disabled-color; +} + .van-collapse-item { position: relative; @@ -15,7 +25,7 @@ // using translateZ to fix safari rendering issues // see: https://github.com/youzan/vant/issues/8608 transform: rotate(90deg) translateZ(0); - transition: transform @collapse-item-transition-duration; + transition: transform var(--van-collapse-item-transition-duration); } &::after { @@ -44,22 +54,22 @@ &, & .van-cell__right-icon { - color: @collapse-item-title-disabled-color; + color: var(--van-collapse-item-title-disabled-color); } } } &__wrapper { overflow: hidden; - transition: height @collapse-item-transition-duration ease-in-out; + transition: height var(--van-collapse-item-transition-duration) ease-in-out; will-change: height; } &__content { - padding: @collapse-item-content-padding; - color: @collapse-item-content-text-color; - font-size: @collapse-item-content-font-size; - line-height: @collapse-item-content-line-height; - background-color: @collapse-item-content-background-color; + padding: var(--van-collapse-item-content-padding); + color: var(--van-collapse-item-content-text-color); + font-size: var(--van-collapse-item-content-font-size); + line-height: var(--van-collapse-item-content-line-height); + background-color: var(--van-collapse-item-content-background-color); } } diff --git a/src/contact-card/index.less b/src/contact-card/index.less index 58913eb77..6c6e8b239 100644 --- a/src/contact-card/index.less +++ b/src/contact-card/index.less @@ -1,21 +1,28 @@ @import './var.less'; +:root { + --van-contact-card-padding: @contact-card-padding; + --van-contact-card-add-icon-size: @contact-card-add-icon-size; + --van-contact-card-add-icon-color: @contact-card-add-icon-color; + --van-contact-card-value-line-height: @contact-card-value-line-height; +} + .van-contact-card { - padding: @contact-card-padding; + padding: var(--van-contact-card-padding); &__value { margin-left: 5px; - line-height: @contact-card-value-line-height; + line-height: var(--van-contact-card-value-line-height); } &--add { .van-contact-card__value { - line-height: @contact-card-add-icon-size; + line-height: var(--van-contact-card-add-icon-size); } .van-cell__left-icon { - color: @contact-card-add-icon-color; - font-size: @contact-card-add-icon-size; + color: var(--van-contact-card-add-icon-color); + font-size: var(--van-contact-card-add-icon-size); } } diff --git a/src/contact-edit/index.less b/src/contact-edit/index.less index b891a46c3..4bd587412 100644 --- a/src/contact-edit/index.less +++ b/src/contact-edit/index.less @@ -1,14 +1,23 @@ @import './var.less'; +:root { + --van-contact-edit-padding: @contact-edit-padding; + --van-contact-edit-fields-radius: @contact-edit-fields-radius; + --van-contact-edit-buttons-padding: @contact-edit-buttons-padding; + --van-contact-edit-button-margin-bottom: @contact-edit-button-margin-bottom; + --van-contact-edit-button-font-size: @contact-edit-button-font-size; + --van-contact-edit-field-label-width: @contact-edit-field-label-width; +} + .van-contact-edit { - padding: @contact-edit-padding; + padding: var(--van-contact-edit-padding); &__fields { overflow: hidden; - border-radius: @contact-edit-fields-radius; + border-radius: var(--van-contact-edit-fields-radius); .van-field__label { - width: @contact-edit-field-label-width; + width: var(--van-contact-edit-field-label-width); } } @@ -16,15 +25,15 @@ margin-top: 10px; padding-top: 9px; padding-bottom: 9px; - border-radius: @contact-edit-fields-radius; + border-radius: var(--van-contact-edit-fields-radius); } &__buttons { - padding: @contact-edit-buttons-padding; + padding: var(--van-contact-edit-buttons-padding); } .van-button { - margin-bottom: @contact-edit-button-margin-bottom; - font-size: @contact-edit-button-font-size; + margin-bottom: var(--van-contact-edit-button-margin-bottom); + font-size: var(--van-contact-edit-button-font-size); } } diff --git a/src/contact-list/index.less b/src/contact-list/index.less index c51c7a88c..005b3568d 100644 --- a/src/contact-list/index.less +++ b/src/contact-list/index.less @@ -1,13 +1,20 @@ @import './var.less'; @import '../style/mixins/safe-area.less'; +:root { + --van-contact-list-edit-icon-size: @contact-list-edit-icon-size; + --van-contact-list-add-button-z-index: @contact-list-add-button-z-index; + --van-contact-list-item-padding: @contact-list-item-padding; + --van-contact-list-item-radio-icon-color: @contact-list-item-radio-icon-color; +} + .van-contact-list { box-sizing: border-box; height: 100%; padding-bottom: 80px; &__item { - padding: @contact-list-item-padding; + padding: var(--van-contact-list-item-padding); } &__item-value { @@ -33,13 +40,13 @@ } &__edit { - font-size: @contact-list-edit-icon-size; + font-size: var(--van-contact-list-edit-icon-size); } &__radio { .van-radio__icon--checked .van-icon { - background-color: @contact-list-item-radio-icon-color; - border-color: @contact-list-item-radio-icon-color; + background-color: var(--van-contact-list-item-radio-icon-color); + border-color: var(--van-contact-list-item-radio-icon-color); } } @@ -48,7 +55,7 @@ right: 0; bottom: 0; left: 0; - z-index: @contact-list-add-button-z-index; + z-index: var(--van-contact-list-add-button-z-index); padding: 0 @padding-md; background-color: @white; .safe-area-inset-bottom(); diff --git a/src/count-down/index.less b/src/count-down/index.less index 153420c03..95076e1d2 100644 --- a/src/count-down/index.less +++ b/src/count-down/index.less @@ -1,7 +1,13 @@ @import './var.less'; -.van-count-down { - color: @count-down-text-color; - font-size: @count-down-font-size; - line-height: @count-down-line-height; +:root { + --van-count-down-text-color: @count-down-text-color; + --van-count-down-font-size: @count-down-font-size; + --van-count-down-line-height: @count-down-line-height; +} + +.van-count-down { + color: var(--van-count-down-text-color); + font-size: var(--van-count-down-font-size); + line-height: var(--van-count-down-line-height); } diff --git a/src/coupon-cell/index.less b/src/coupon-cell/index.less index 31b0cdab0..834325991 100644 --- a/src/coupon-cell/index.less +++ b/src/coupon-cell/index.less @@ -1,7 +1,11 @@ @import './var.less'; +:root { + --van-coupon-cell-selected-text-color: @coupon-cell-selected-text-color; +} + .van-coupon-cell { &__value--selected { - color: @coupon-cell-selected-text-color; + color: var(--van-coupon-cell-selected-text-color); } } diff --git a/src/coupon-list/index.less b/src/coupon-list/index.less index 260193a58..6f3c3e7d8 100644 --- a/src/coupon-list/index.less +++ b/src/coupon-list/index.less @@ -1,12 +1,23 @@ @import './var.less'; +:root { + --van-coupon-list-background-color: @coupon-list-background-color; + --van-coupon-list-field-padding: @coupon-list-field-padding; + --van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height; + --van-coupon-list-close-button-height: @coupon-list-close-button-height; + --van-coupon-list-empty-image-size: @coupon-list-empty-image-size; + --van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color; + --van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size; + --van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height; +} + .van-coupon-list { position: relative; height: 100%; - background-color: @coupon-list-background-color; + background-color: var(--van-coupon-list-background-color); &__field { - padding: @coupon-list-field-padding; + padding: var(--van-coupon-list-field-padding); .van-field__body { height: 34px; @@ -33,9 +44,9 @@ &__exchange { flex: none; - height: @coupon-list-exchange-button-height; + height: var(--van-coupon-list-exchange-button-height); font-size: @font-size-lg; - line-height: @coupon-list-exchange-button-height - 2px; + line-height: calc(var(--van-coupon-list-exchange-button-height) - 2px); border: 0; } @@ -67,7 +78,7 @@ } &__close { - height: @coupon-list-close-button-height; + height: var(--van-coupon-list-close-button-height); } &__empty { @@ -76,14 +87,14 @@ p { margin: @padding-md 0; - color: @coupon-list-empty-tip-color; - font-size: @coupon-list-empty-tip-font-size; - line-height: @coupon-list-empty-tip-line-height; + color: var(--van-coupon-list-empty-tip-color); + font-size: var(--van-coupon-list-empty-tip-font-size); + line-height: var(--van-coupon-list-empty-tip-line-height); } img { - width: @coupon-list-empty-image-size; - height: @coupon-list-empty-image-size; + width: var(--van-coupon-list-empty-image-size); + height: var(--van-coupon-list-empty-image-size); } } } diff --git a/src/coupon/index.less b/src/coupon/index.less index 26ba87599..d0a66d8a1 100644 --- a/src/coupon/index.less +++ b/src/coupon/index.less @@ -1,31 +1,50 @@ @import './var.less'; @import '../style/mixins/ellipsis'; +:root { + --van-coupon-margin: @coupon-margin; + --van-coupon-content-height: @coupon-content-height; + --van-coupon-content-padding: @coupon-content-padding; + --van-coupon-background-color: @coupon-background-color; + --van-coupon-active-background-color: @coupon-active-background-color; + --van-coupon-border-radius: @coupon-border-radius; + --van-coupon-box-shadow: @coupon-box-shadow; + --van-coupon-head-width: @coupon-head-width; + --van-coupon-amount-color: @coupon-amount-color; + --van-coupon-amount-font-size: @coupon-amount-font-size; + --van-coupon-currency-font-size: @coupon-currency-font-size; + --van-coupon-name-font-size: @coupon-name-font-size; + --van-coupon-disabled-text-color: @coupon-disabled-text-color; + --van-coupon-description-padding: @coupon-description-padding; + --van-coupon-description-border-color: @coupon-description-border-color; + --van-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color; +} + .van-coupon { - margin: @coupon-margin; + margin: var(--van-coupon-margin); overflow: hidden; - background-color: @coupon-background-color; - border-radius: @coupon-border-radius; - box-shadow: @coupon-box-shadow; + background-color: var(--van-coupon-background-color); + border-radius: var(--van-coupon-border-radius); + box-shadow: var(--van-coupon-box-shadow); &:active { - background-color: @coupon-active-background-color; + background-color: var(--van-coupon-active-background-color); } &__content { display: flex; align-items: center; box-sizing: border-box; - min-height: @coupon-content-height; - padding: @coupon-content-padding; + min-height: var(--van-coupon-content-height); + padding: var(--van-coupon-content-padding); color: @gray-8; } &__head { position: relative; - min-width: @coupon-head-width; + min-width: var(--van-coupon-head-width); padding: 0 @padding-xs; - color: @coupon-amount-color; + color: var(--van-coupon-amount-color); text-align: center; } @@ -39,12 +58,12 @@ &__amount { margin-bottom: 6px; font-weight: @font-weight-bold; - font-size: @coupon-amount-font-size; + font-size: var(--van-coupon-amount-font-size); .ellipsis(); span { font-weight: normal; - font-size: @coupon-currency-font-size; + font-size: var(--van-coupon-currency-font-size); &:not(:empty) { margin-left: 2px; @@ -61,13 +80,14 @@ &__body { position: relative; flex: 1; - border-radius: 0 @coupon-border-radius @coupon-border-radius 0; + border-radius: 0 var(--van-coupon-border-radius) + var(--van-coupon-border-radius) 0; } &__name { margin-bottom: 10px; font-weight: bold; - font-size: @coupon-name-font-size; + font-size: var(--van-coupon-name-font-size); line-height: @line-height-md; } @@ -82,24 +102,24 @@ bottom: 0; .van-checkbox__icon--checked .van-icon { - background-color: @coupon-corner-checkbox-icon-color; - border-color: @coupon-corner-checkbox-icon-color; + background-color: var(--van-coupon-corner-checkbox-icon-color); + border-color: var(--van-coupon-corner-checkbox-icon-color); } } &__description { - padding: @coupon-description-padding; + padding: var(--van-coupon-description-padding); font-size: @font-size-sm; - border-top: 1px dashed @coupon-description-border-color; + border-top: 1px dashed var(--van-coupon-description-border-color); } &--disabled { &:active { - background-color: @coupon-background-color; + background-color: var(--van-coupon-background-color); } .van-coupon-item__content { - height: @coupon-content-height - 10px; + height: calc(var(--van-coupon-content-height) - 10px); } .van-coupon__head { diff --git a/src/dialog/index.less b/src/dialog/index.less index b50353098..f47084a75 100644 --- a/src/dialog/index.less +++ b/src/dialog/index.less @@ -1,29 +1,51 @@ @import './var.less'; +:root { + --van-dialog-width: @dialog-width; + --van-dialog-small-screen-width: @dialog-small-screen-width; + --van-dialog-font-size: @dialog-font-size; + --van-dialog-transition: @dialog-transition; + --van-dialog-border-radius: @dialog-border-radius; + --van-dialog-background-color: @dialog-background-color; + --van-dialog-header-font-weight: @dialog-header-font-weight; + --van-dialog-header-line-height: @dialog-header-line-height; + --van-dialog-header-padding-top: @dialog-header-padding-top; + --van-dialog-header-isolated-padding: @dialog-header-isolated-padding; + --van-dialog-message-padding: @dialog-message-padding; + --van-dialog-message-font-size: @dialog-message-font-size; + --van-dialog-message-line-height: @dialog-message-line-height; + --van-dialog-message-max-height: @dialog-message-max-height; + --van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color; + --van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top; + --van-dialog-button-height: @dialog-button-height; + --van-dialog-round-button-height: @dialog-round-button-height; + --van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color; +} + .van-dialog { top: 45%; left: 50%; - width: @dialog-width; + width: var(--van-dialog-width); overflow: hidden; - font-size: @dialog-font-size; - background-color: @dialog-background-color; - border-radius: @dialog-border-radius; + font-size: var(--van-dialog-font-size); + background-color: var(--van-dialog-background-color); + border-radius: var(--van-dialog-border-radius); backface-visibility: hidden; // avoid blurry text after scale animation - transition: @dialog-transition; + transition: var(--van-dialog-transition); transition-property: transform, opacity; @media (max-width: 321px) { - width: @dialog-small-screen-width; + width: var(--van-dialog-small-screen-width); } &__header { - padding-top: @dialog-header-padding-top; - font-weight: @dialog-header-font-weight; - line-height: @dialog-header-line-height; + padding-top: var(--van-dialog-header-padding-top); + font-weight: var(--van-dialog-header-font-weight); + line-height: var(--van-dialog-header-line-height); text-align: center; &--isolated { - padding: @dialog-header-isolated-padding; + padding: var(--van-dialog-header-isolated-padding); } } @@ -37,11 +59,11 @@ &__message { flex: 1; - max-height: @dialog-message-max-height; - padding: 26px @dialog-message-padding; + max-height: var(--van-dialog-message-max-height); + padding: 26px var(--van-dialog-message-padding); overflow-y: auto; - font-size: @dialog-message-font-size; - line-height: @dialog-message-line-height; + font-size: var(--van-dialog-message-font-size); + line-height: var(--van-dialog-message-line-height); // allow newline charactor white-space: pre-wrap; @@ -50,8 +72,8 @@ -webkit-overflow-scrolling: touch; &--has-title { - padding-top: @dialog-has-title-message-padding-top; - color: @dialog-has-title-message-text-color; + padding-top: var(--van-dialog-has-title-message-padding-top); + color: var(--van-dialog-has-title-message-text-color); } &--left { @@ -72,7 +94,7 @@ &__confirm, &__cancel { flex: 1; - height: @dialog-button-height; + height: var(--van-dialog-button-height); margin: 0; border: 0; } @@ -80,7 +102,7 @@ &__confirm { &, &:active { - color: @dialog-confirm-button-text-color; + color: var(--van-dialog-confirm-button-text-color); } } @@ -98,7 +120,7 @@ .van-dialog__confirm, .van-dialog__cancel { - height: @dialog-round-button-height; + height: var(--van-dialog-round-button-height); } .van-dialog__confirm { diff --git a/src/divider/index.less b/src/divider/index.less index d71fc685f..8b4bc6e47 100644 --- a/src/divider/index.less +++ b/src/divider/index.less @@ -1,13 +1,24 @@ @import './var.less'; +:root { + --van-divider-margin: @divider-margin; + --van-divider-text-color: @divider-text-color; + --van-divider-font-size: @divider-font-size; + --van-divider-line-height: @divider-line-height; + --van-divider-border-color: @divider-border-color; + --van-divider-content-padding: @divider-content-padding; + --van-divider-content-left-width: @divider-content-left-width; + --van-divider-content-right-width: @divider-content-right-width; +} + .van-divider { display: flex; align-items: center; - margin: @divider-margin; - color: @divider-text-color; - font-size: @divider-font-size; - line-height: @divider-line-height; - border-color: @divider-border-color; + margin: var(--van-divider-margin); + color: var(--van-divider-text-color); + font-size: var(--van-divider-font-size); + line-height: var(--van-divider-line-height); + border-color: var(--van-divider-border-color); border-style: solid; border-width: 0; @@ -41,24 +52,24 @@ &--content-left, &--content-right { &::before { - margin-right: @divider-content-padding; + margin-right: var(--van-divider-content-padding); } &::after { - margin-left: @divider-content-padding; + margin-left: var(--van-divider-content-padding); content: ''; } } &--content-left { &::before { - max-width: @divider-content-left-width; + max-width: var(--van-divider-content-left-width); } } &--content-right { &::after { - max-width: @divider-content-right-width; + max-width: var(--van-divider-content-right-width); } } } diff --git a/src/dropdown-item/index.less b/src/dropdown-item/index.less index 7a171defb..c74e1dfc6 100644 --- a/src/dropdown-item/index.less +++ b/src/dropdown-item/index.less @@ -1,11 +1,15 @@ @import './var.less'; @import '../dropdown-menu/var.less'; +:root { + --van-dropdown-item-z-index: @dropdown-item-z-index; +} + .van-dropdown-item { position: fixed; right: 0; left: 0; - z-index: @dropdown-item-z-index; + z-index: var(--van-dropdown-item-z-index); overflow: hidden; &__icon { diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less index 52ef568d7..3d8afa224 100644 --- a/src/dropdown-menu/index.less +++ b/src/dropdown-menu/index.less @@ -1,15 +1,29 @@ @import './var.less'; @import '../dropdown-item/var.less'; +:root { + --van-dropdown-menu-height: @dropdown-menu-height; + --van-dropdown-menu-background-color: @dropdown-menu-background-color; + --van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow; + --van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size; + --van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color; + --van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color; + --van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color; + --van-dropdown-menu-title-padding: @dropdown-menu-title-padding; + --van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height; + --van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color; + --van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height; +} + .van-dropdown-menu { user-select: none; &__bar { position: relative; display: flex; - height: @dropdown-menu-height; - background-color: @dropdown-menu-background-color; - box-shadow: @dropdown-menu-box-shadow; + height: var(--van-dropdown-menu-height); + background-color: var(--van-dropdown-menu-background-color); + box-shadow: var(--van-dropdown-menu-box-shadow); &--opened { z-index: @dropdown-item-z-index + 1; @@ -34,7 +48,7 @@ } .van-dropdown-menu__title { - color: @dropdown-menu-title-disabled-text-color; + color: var(--van-dropdown-menu-title-disabled-text-color); } } } @@ -43,10 +57,10 @@ position: relative; box-sizing: border-box; max-width: 100%; - padding: @dropdown-menu-title-padding; - color: @dropdown-menu-title-text-color; - font-size: @dropdown-menu-title-font-size; - line-height: @dropdown-menu-title-line-height; + padding: var(--van-dropdown-menu-title-padding); + color: var(--van-dropdown-menu-title-text-color); + font-size: var(--van-dropdown-menu-title-font-size); + line-height: var(--van-dropdown-menu-title-line-height); &::after { position: absolute; @@ -61,7 +75,7 @@ } &--active { - color: @dropdown-menu-title-active-text-color; + color: var(--van-dropdown-menu-title-active-text-color); &::after { border-color: transparent transparent currentColor currentColor; diff --git a/src/empty/index.less b/src/empty/index.less index 7c7b4085e..ef3111ede 100644 --- a/src/empty/index.less +++ b/src/empty/index.less @@ -1,16 +1,27 @@ @import './var.less'; +:root { + --van-empty-padding: @empty-padding; + --van-empty-image-size: @empty-image-size; + --van-empty-description-margin-top: @empty-description-margin-top; + --van-empty-description-padding: @empty-description-padding; + --van-empty-description-color: @empty-description-color; + --van-empty-description-font-size: @empty-description-font-size; + --van-empty-description-line-height: @empty-description-line-height; + --van-empty-bottom-margin-top: @empty-bottom-margin-top; +} + .van-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; - padding: @empty-padding; + padding: var(--van-empty-padding); &__image { - width: @empty-image-size; - height: @empty-image-size; + width: var(--van-empty-image-size); + height: var(--van-empty-image-size); img { width: 100%; @@ -19,14 +30,14 @@ } &__description { - margin-top: @empty-description-margin-top; - padding: @empty-description-padding; - color: @empty-description-color; - font-size: @empty-description-font-size; - line-height: @empty-description-line-height; + margin-top: var(--van-empty-description-margin-top); + padding: var(--van-empty-description-padding); + color: var(--van-empty-description-color); + font-size: var(--van-empty-description-font-size); + line-height: var(--van-empty-description-line-height); } &__bottom { - margin-top: @empty-bottom-margin-top; + margin-top: var(--van-empty-bottom-margin-top); } } diff --git a/src/field/index.less b/src/field/index.less index f455831a2..1cde05725 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -1,13 +1,34 @@ @import './var.less'; @import '../cell/var.less'; +:root { + --van-field-label-width: @field-label-width; + --van-field-label-color: @field-label-color; + --van-field-label-margin-right: @field-label-margin-right; + --van-field-input-text-color: @field-input-text-color; + --van-field-input-error-text-color: @field-input-error-text-color; + --van-field-input-disabled-text-color: @field-input-disabled-text-color; + --van-field-placeholder-text-color: @field-placeholder-text-color; + --van-field-icon-size: @field-icon-size; + --van-field-clear-icon-size: @field-clear-icon-size; + --van-field-clear-icon-color: @field-clear-icon-color; + --van-field-right-icon-color: @field-right-icon-color; + --van-field-error-message-color: @field-error-message-color; + --van-field-error-message-text-color: @field-error-message-text-color; + --van-field-text-area-min-height: @field-text-area-min-height; + --van-field-word-limit-color: @field-word-limit-color; + --van-field-word-limit-font-size: @field-word-limit-font-size; + --van-field-word-limit-line-height: @field-word-limit-line-height; + --van-field-disabled-text-color: @field-disabled-text-color; +} + .van-field { &__label { flex: none; box-sizing: border-box; - width: @field-label-width; - margin-right: @field-label-margin-right; - color: @field-label-color; + width: var(--van-field-label-width); + margin-right: var(--van-field-label-margin-right); + color: var(--van-field-label-color); text-align: left; word-wrap: break-word; @@ -22,7 +43,7 @@ &--disabled { .van-field__label { - color: @field-disabled-text-color; + color: var(--van-field-disabled-text-color); } } @@ -42,7 +63,7 @@ min-width: 0; // for flex-shrink in field__button margin: 0; padding: 0; - color: @field-input-text-color; + color: var(--van-field-input-text-color); line-height: inherit; text-align: left; background-color: transparent; @@ -50,15 +71,15 @@ resize: none; &::placeholder { - color: @field-placeholder-text-color; + color: var(--van-field-placeholder-text-color); } &:disabled { - color: @field-input-disabled-text-color; + color: var(--van-field-input-disabled-text-color); cursor: not-allowed; opacity: 1; // fix disabled color in mobile safari - -webkit-text-fill-color: @field-input-disabled-text-color; + -webkit-text-fill-color: var(--van-field-input-disabled-text-color); } &:read-only { @@ -109,15 +130,15 @@ } &__clear { - color: @field-clear-icon-color; - font-size: @field-clear-icon-size; + color: var(--van-field-clear-icon-color); + font-size: var(--van-field-clear-icon-size); cursor: pointer; } &__left-icon .van-icon, &__right-icon .van-icon { display: block; - font-size: @field-icon-size; + font-size: var(--van-field-icon-size); line-height: inherit; } @@ -126,7 +147,7 @@ } &__right-icon { - color: @field-right-icon-color; + color: var(--van-field-right-icon-color); } &__button { @@ -134,8 +155,8 @@ } &__error-message { - color: @field-error-message-color; - font-size: @field-error-message-text-color; + color: var(--van-field-error-message-color); + font-size: var(--van-field-error-message-text-color); text-align: left; &--center { @@ -149,9 +170,9 @@ &__word-limit { margin-top: @padding-base; - color: @field-word-limit-color; - font-size: @field-word-limit-font-size; - line-height: @field-word-limit-line-height; + color: var(--van-field-word-limit-color); + font-size: var(--van-field-word-limit-font-size); + line-height: var(--van-field-word-limit-line-height); text-align: right; } @@ -159,7 +180,7 @@ .van-field__control { &, &::placeholder { - color: @field-input-error-text-color; + color: var(--van-field-input-error-text-color); -webkit-text-fill-color: currentColor; } } @@ -167,7 +188,7 @@ &--min-height { .van-field__control { - min-height: @field-text-area-min-height; + min-height: var(--van-field-text-area-min-height); } } } diff --git a/src/grid-item/index.less b/src/grid-item/index.less index 49e91a884..d97c1dbce 100644 --- a/src/grid-item/index.less +++ b/src/grid-item/index.less @@ -1,5 +1,14 @@ @import './var.less'; +:root { + --van-grid-item-content-padding: @grid-item-content-padding; + --van-grid-item-content-background-color: @grid-item-content-background-color; + --van-grid-item-content-active-color: @grid-item-content-active-color; + --van-grid-item-icon-size: @grid-item-icon-size; + --van-grid-item-text-color: @grid-item-text-color; + --van-grid-item-text-font-size: @grid-item-text-font-size; +} + .van-grid-item { position: relative; box-sizing: border-box; @@ -9,12 +18,12 @@ } &__icon { - font-size: @grid-item-icon-size; + font-size: var(--van-grid-item-icon-size); } &__text { - color: @grid-item-text-color; - font-size: @grid-item-text-font-size; + color: var(--van-grid-item-text-color); + font-size: var(--van-grid-item-text-font-size); line-height: 1.5; // https://github.com/youzan/vant/issues/3894 word-break: break-all; @@ -29,8 +38,8 @@ flex-direction: column; box-sizing: border-box; height: 100%; - padding: @grid-item-content-padding; - background-color: @grid-item-content-background-color; + padding: var(--van-grid-item-content-padding); + background-color: var(--van-grid-item-content-background-color); &::after { z-index: 1; @@ -68,7 +77,7 @@ cursor: pointer; &:active { - background-color: @grid-item-content-active-color; + background-color: var(--van-grid-item-content-active-color); } } } diff --git a/src/image-preview/index.less b/src/image-preview/index.less index 1b7c69af7..03779f019 100644 --- a/src/image-preview/index.less +++ b/src/image-preview/index.less @@ -1,5 +1,18 @@ @import './var.less'; +:root { + --van-image-preview-index-text-color: @image-preview-index-text-color; + --van-image-preview-index-font-size: @image-preview-index-font-size; + --van-image-preview-index-line-height: @image-preview-index-line-height; + --van-image-preview-index-text-shadow: @image-preview-index-text-shadow; + --van-image-preview-overlay-background-color: @image-preview-overlay-background-color; + --van-image-preview-close-icon-size: @image-preview-close-icon-size; + --van-image-preview-close-icon-color: @image-preview-close-icon-color; + --van-image-preview-close-icon-active-color: @image-preview-close-icon-active-color; + --van-image-preview-close-icon-margin: @image-preview-close-icon-margin; + --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index; +} + .van-image-preview { position: fixed; top: 0; @@ -60,46 +73,46 @@ position: absolute; top: @padding-md; left: 50%; - color: @image-preview-index-text-color; - font-size: @image-preview-index-font-size; - line-height: @image-preview-index-line-height; - text-shadow: @image-preview-index-text-shadow; + color: var(--van-image-preview-index-text-color); + font-size: var(--van-image-preview-index-font-size); + line-height: var(--van-image-preview-index-line-height); + text-shadow: var(--van-image-preview-index-text-shadow); transform: translate(-50%, 0); } &__overlay { - background-color: @image-preview-overlay-background-color; + background-color: var(--van-image-preview-overlay-background-color); } &__close-icon { position: absolute; - z-index: @image-preview-close-icon-z-index; - color: @image-preview-close-icon-color; - font-size: @image-preview-close-icon-size; + z-index: var(--van-image-preview-close-icon-z-index); + color: var(--van-image-preview-close-icon-color); + font-size: var(--van-image-preview-close-icon-size); cursor: pointer; &:active { - color: @image-preview-close-icon-active-color; + color: var(--van-image-preview-close-icon-active-color); } &--top-left { - top: @image-preview-close-icon-margin; - left: @image-preview-close-icon-margin; + top: var(--van-image-preview-close-icon-margin); + left: var(--van-image-preview-close-icon-margin); } &--top-right { - top: @image-preview-close-icon-margin; - right: @image-preview-close-icon-margin; + top: var(--van-image-preview-close-icon-margin); + right: var(--van-image-preview-close-icon-margin); } &--bottom-left { - bottom: @image-preview-close-icon-margin; - left: @image-preview-close-icon-margin; + bottom: var(--van-image-preview-close-icon-margin); + left: var(--van-image-preview-close-icon-margin); } &--bottom-right { - right: @image-preview-close-icon-margin; - bottom: @image-preview-close-icon-margin; + right: var(--van-image-preview-close-icon-margin); + bottom: var(--van-image-preview-close-icon-margin); } } } diff --git a/src/image/index.less b/src/image/index.less index 5c9295b25..79781bbd5 100644 --- a/src/image/index.less +++ b/src/image/index.less @@ -1,5 +1,15 @@ @import './var.less'; +:root { + --van-image-placeholder-text-color: @image-placeholder-text-color; + --van-image-placeholder-font-size: @image-placeholder-font-size; + --van-image-placeholder-background-color: @image-placeholder-background-color; + --van-image-loading-icon-size: @image-loading-icon-size; + --van-image-loading-icon-color: @image-loading-icon-color; + --van-image-error-icon-size: @image-error-icon-size; + --van-image-error-icon-color: @image-error-icon-color; +} + .van-image { position: relative; display: inline-block; @@ -30,18 +40,18 @@ flex-direction: column; align-items: center; justify-content: center; - color: @image-placeholder-text-color; - font-size: @image-placeholder-font-size; - background-color: @image-placeholder-background-color; + color: var(--van-image-placeholder-text-color); + font-size: var(--van-image-placeholder-font-size); + background-color: var(--van-image-placeholder-background-color); } &__loading-icon { - color: @image-loading-icon-color; - font-size: @image-loading-icon-size; + color: var(--van-image-loading-icon-color); + font-size: var(--van-image-loading-icon-size); } &__error-icon { - color: @image-error-icon-color; - font-size: @image-error-icon-size; + color: var(--van-image-error-icon-color); + font-size: var(--van-image-error-icon-size); } } diff --git a/src/index-anchor/index.less b/src/index-anchor/index.less index 95fa7359f..52b1f3516 100644 --- a/src/index-anchor/index.less +++ b/src/index-anchor/index.less @@ -1,21 +1,33 @@ @import './var.less'; +:root { + --van-index-anchor-z-index: @index-anchor-z-index; + --van-index-anchor-padding: @index-anchor-padding; + --van-index-anchor-text-color: @index-anchor-text-color; + --van-index-anchor-font-weight: @index-anchor-font-weight; + --van-index-anchor-font-size: @index-anchor-font-size; + --van-index-anchor-line-height: @index-anchor-line-height; + --van-index-anchor-background-color: @index-anchor-background-color; + --van-index-anchor-sticky-text-color: @index-anchor-sticky-text-color; + --van-index-anchor-sticky-background-color: @index-anchor-sticky-background-color; +} + .van-index-anchor { - z-index: @index-anchor-z-index; + z-index: var(--van-index-anchor-z-index); box-sizing: border-box; - padding: @index-anchor-padding; - color: @index-anchor-text-color; - font-weight: @index-anchor-font-weight; - font-size: @index-anchor-font-size; - line-height: @index-anchor-line-height; - background-color: @index-anchor-background-color; + padding: var(--van-index-anchor-padding); + color: var(--van-index-anchor-text-color); + font-weight: var(--van-index-anchor-font-weight); + font-size: var(--van-index-anchor-font-size); + line-height: var(--van-index-anchor-line-height); + background-color: var(--van-index-anchor-background-color); &--sticky { position: fixed; top: 0; right: 0; left: 0; - color: @index-anchor-sticky-text-color; - background-color: @index-anchor-sticky-background-color; + color: var(--van-index-anchor-sticky-text-color); + background-color: var(--van-index-anchor-sticky-background-color); } } diff --git a/src/index-bar/index.less b/src/index-bar/index.less index 78d645829..5df331aa9 100644 --- a/src/index-bar/index.less +++ b/src/index-bar/index.less @@ -1,11 +1,18 @@ @import './var.less'; +:root { + --van-index-bar-sidebar-z-index: @index-bar-sidebar-z-index; + --van-index-bar-index-font-size: @index-bar-index-font-size; + --van-index-bar-index-line-height: @index-bar-index-line-height; + --van-index-bar-index-active-color: @index-bar-index-active-color; +} + .van-index-bar { &__sidebar { position: fixed; top: 50%; right: 0; - z-index: @index-bar-sidebar-z-index; + z-index: var(--van-index-bar-sidebar-z-index); display: flex; flex-direction: column; text-align: center; @@ -17,11 +24,11 @@ &__index { padding: 0 @padding-xs 0 @padding-md; font-weight: @font-weight-bold; - font-size: @index-bar-index-font-size; - line-height: @index-bar-index-line-height; + font-size: var(--van-index-bar-index-font-size); + line-height: var(--van-index-bar-index-line-height); &--active { - color: @index-bar-index-active-color; + color: var(--van-index-bar-index-active-color); } } } diff --git a/src/list/index.less b/src/list/index.less index d7284a19f..f9098cb32 100644 --- a/src/list/index.less +++ b/src/list/index.less @@ -1,12 +1,19 @@ @import './var.less'; +:root { + --van-list-text-color: @list-text-color; + --van-list-text-font-size: @list-text-font-size; + --van-list-text-line-height: @list-text-line-height; + --van-list-loading-icon-size: @list-loading-icon-size; +} + .van-list { &__loading, &__finished-text, &__error-text { - color: @list-text-color; - font-size: @list-text-font-size; - line-height: @list-text-line-height; + color: var(--van-list-text-color); + font-size: var(--van-list-text-font-size); + line-height: var(--van-list-text-line-height); text-align: center; } @@ -17,8 +24,8 @@ &__loading-icon { .van-loading__spinner { - width: @list-loading-icon-size; - height: @list-loading-icon-size; + width: var(--van-list-loading-icon-size); + height: var(--van-list-loading-icon-size); } } } diff --git a/src/loading/index.less b/src/loading/index.less index 7f1d29931..9cb5a8133 100644 --- a/src/loading/index.less +++ b/src/loading/index.less @@ -1,21 +1,30 @@ @import './var.less'; +:root { + --van-loading-text-color: @loading-text-color; + --van-loading-text-font-size: @loading-text-font-size; + --van-loading-spinner-color: @loading-spinner-color; + --van-loading-spinner-size: @loading-spinner-size; + --van-loading-spinner-animation-duration: @loading-spinner-animation-duration; +} + .van-loading { position: relative; - color: @loading-spinner-color; + color: var(--van-loading-spinner-color); font-size: 0; vertical-align: middle; &__spinner { position: relative; display: inline-block; - width: @loading-spinner-size; + width: var(--van-loading-spinner-size); // compatible for 1.x, users may set width or height in root element max-width: 100%; - height: @loading-spinner-size; + height: var(--van-loading-spinner-size); max-height: 100%; vertical-align: middle; - animation: van-rotate @loading-spinner-animation-duration linear infinite; + animation: van-rotate var(--van-loading-spinner-animation-duration) linear + infinite; &--spinner { animation-timing-function: steps(12); @@ -60,8 +69,8 @@ &__text { display: inline-block; margin-left: @padding-xs; - color: @loading-text-color; - font-size: @loading-text-font-size; + color: var(--van-loading-text-color); + font-size: var(--van-loading-text-font-size); vertical-align: middle; } diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index 76515940f..5f67e5acf 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -1,11 +1,22 @@ @import './var.less'; +:root { + --van-nav-bar-height: @nav-bar-height; + --van-nav-bar-background-color: @nav-bar-background-color; + --van-nav-bar-arrow-size: @nav-bar-arrow-size; + --van-nav-bar-icon-color: @nav-bar-icon-color; + --van-nav-bar-text-color: @nav-bar-text-color; + --van-nav-bar-title-font-size: @nav-bar-title-font-size; + --van-nav-bar-title-text-color: @nav-bar-title-text-color; + --van-nav-bar-z-index: @nav-bar-z-index; +} + .van-nav-bar { position: relative; - z-index: @nav-bar-z-index; + z-index: var(--van-nav-bar-z-index); line-height: @line-height-lg; text-align: center; - background-color: @nav-bar-background-color; + background-color: var(--van-nav-bar-background-color); user-select: none; &--fixed { @@ -21,27 +32,27 @@ } .van-icon { - color: @nav-bar-icon-color; + color: var(--van-nav-bar-icon-color); } &__content { position: relative; display: flex; align-items: center; - height: @nav-bar-height; + height: var(--van-nav-bar-height); } &__arrow { margin-right: @padding-base; - font-size: @nav-bar-arrow-size; + font-size: var(--van-nav-bar-arrow-size); } &__title { max-width: 60%; margin: 0 auto; - color: @nav-bar-title-text-color; + color: var(--van-nav-bar-title-text-color); font-weight: @font-weight-bold; - font-size: @nav-bar-title-font-size; + font-size: var(--van-nav-bar-title-font-size); } &__left, @@ -69,6 +80,6 @@ } &__text { - color: @nav-bar-text-color; + color: var(--van-nav-bar-text-color); } } diff --git a/src/notice-bar/index.less b/src/notice-bar/index.less index 6ee2c2761..927fabd03 100644 --- a/src/notice-bar/index.less +++ b/src/notice-bar/index.less @@ -1,20 +1,32 @@ @import './var.less'; +:root { + --van-notice-bar-height: @notice-bar-height; + --van-notice-bar-padding: @notice-bar-padding; + --van-notice-bar-wrapable-padding: @notice-bar-wrapable-padding; + --van-notice-bar-text-color: @notice-bar-text-color; + --van-notice-bar-font-size: @notice-bar-font-size; + --van-notice-bar-line-height: @notice-bar-line-height; + --van-notice-bar-background-color: @notice-bar-background-color; + --van-notice-bar-icon-size: @notice-bar-icon-size; + --van-notice-bar-icon-min-width: @notice-bar-icon-min-width; +} + .van-notice-bar { position: relative; display: flex; align-items: center; - height: @notice-bar-height; - padding: @notice-bar-padding; - color: @notice-bar-text-color; - font-size: @notice-bar-font-size; - line-height: @notice-bar-line-height; - background-color: @notice-bar-background-color; + height: var(--van-notice-bar-height); + padding: var(--van-notice-bar-padding); + color: var(--van-notice-bar-text-color); + font-size: var(--van-notice-bar-font-size); + line-height: var(--van-notice-bar-line-height); + background-color: var(--van-notice-bar-background-color); &__left-icon, &__right-icon { - min-width: @notice-bar-icon-min-width; - font-size: @notice-bar-icon-size; + min-width: var(--van-notice-bar-icon-min-width); + font-size: var(--van-notice-bar-icon-size); } &__right-icon { @@ -43,7 +55,7 @@ &--wrapable { height: auto; - padding: @notice-bar-wrapable-padding; + padding: var(--van-notice-bar-wrapable-padding); .van-notice-bar { &__wrap { diff --git a/src/notify/index.less b/src/notify/index.less index 9c2c9d6b3..b0e270395 100644 --- a/src/notify/index.less +++ b/src/notify/index.less @@ -1,14 +1,25 @@ @import './var.less'; +:root { + --van-notify-text-color: @notify-text-color; + --van-notify-padding: @notify-padding; + --van-notify-font-size: @notify-font-size; + --van-notify-line-height: @notify-line-height; + --van-notify-primary-background-color: @notify-primary-background-color; + --van-notify-success-background-color: @notify-success-background-color; + --van-notify-danger-background-color: @notify-danger-background-color; + --van-notify-warning-background-color: @notify-warning-background-color; +} + .van-notify { display: flex; align-items: center; justify-content: center; box-sizing: border-box; - padding: @notify-padding; - color: @notify-text-color; - font-size: @notify-font-size; - line-height: @notify-line-height; + padding: var(--van-notify-padding); + color: var(--van-notify-text-color); + font-size: var(--van-notify-font-size); + line-height: var(--van-notify-line-height); // allow newline charactor white-space: pre-wrap; @@ -16,18 +27,18 @@ word-wrap: break-word; &--primary { - background-color: @notify-primary-background-color; + background-color: var(--van-notify-primary-background-color); } &--success { - background-color: @notify-success-background-color; + background-color: var(--van-notify-success-background-color); } &--danger { - background-color: @notify-danger-background-color; + background-color: var(--van-notify-danger-background-color); } &--warning { - background-color: @notify-warning-background-color; + background-color: var(--van-notify-warning-background-color); } } diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index 352d8eb2d..73692c17d 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -1,13 +1,30 @@ @import './var.less'; +:root { + --van-number-keyboard-background-color: @number-keyboard-background-color; + --van-number-keyboard-key-height: @number-keyboard-key-height; + --van-number-keyboard-key-font-size: @number-keyboard-key-font-size; + --van-number-keyboard-key-active-color: @number-keyboard-key-active-color; + --van-number-keyboard-delete-font-size: @number-keyboard-delete-font-size; + --van-number-keyboard-title-color: @number-keyboard-title-color; + --van-number-keyboard-title-height: @number-keyboard-title-height; + --van-number-keyboard-title-font-size: @number-keyboard-title-font-size; + --van-number-keyboard-close-padding: @number-keyboard-close-padding; + --van-number-keyboard-close-color: @number-keyboard-close-color; + --van-number-keyboard-close-font-size: @number-keyboard-close-font-size; + --van-number-keyboard-button-text-color: @number-keyboard-button-text-color; + --van-number-keyboard-button-background-color: @number-keyboard-button-background-color; + --van-number-keyboard-z-index: @number-keyboard-z-index; +} + .van-number-keyboard { position: fixed; bottom: 0; left: 0; - z-index: @number-keyboard-z-index; + z-index: var(--van-number-keyboard-z-index); width: 100%; padding-bottom: 22px; - background-color: @number-keyboard-background-color; + background-color: var(--van-number-keyboard-background-color); user-select: none; &--with-title { @@ -20,10 +37,10 @@ align-items: center; justify-content: center; box-sizing: content-box; - height: @number-keyboard-title-height; + height: var(--van-number-keyboard-title-height); padding-top: 6px; - color: @number-keyboard-title-color; - font-size: @number-keyboard-title-font-size; + color: var(--van-number-keyboard-title-color); + font-size: var(--van-number-keyboard-title-font-size); } &__title { @@ -51,9 +68,9 @@ position: absolute; right: 0; height: 100%; - padding: @number-keyboard-close-padding; - color: @number-keyboard-close-color; - font-size: @number-keyboard-close-font-size; + padding: var(--van-number-keyboard-close-padding); + color: var(--van-number-keyboard-close-color); + font-size: var(--van-number-keyboard-close-font-size); background-color: transparent; border: none; cursor: pointer; @@ -78,8 +95,8 @@ display: flex; align-items: center; justify-content: center; - height: @number-keyboard-key-height; - font-size: @number-keyboard-key-font-size; + height: var(--van-number-keyboard-key-height); + font-size: var(--van-number-keyboard-key-font-size); line-height: 1.5; background-color: @white; border-radius: @border-radius-lg; @@ -98,19 +115,19 @@ &--blue, &--delete { - font-size: @number-keyboard-delete-font-size; + font-size: var(--van-number-keyboard-delete-font-size); } &--active { - background-color: @number-keyboard-key-active-color; + background-color: var(--van-number-keyboard-key-active-color); } &--blue { - color: @number-keyboard-button-text-color; - background-color: @number-keyboard-button-background-color; + color: var(--van-number-keyboard-button-text-color); + background-color: var(--van-number-keyboard-button-background-color); &.van-key--active { - background-color: darken(@number-keyboard-button-background-color, 10%); + background-color: var(--van-number-keyboard-button-active-color); } } @@ -137,6 +154,6 @@ } &__loading-icon { - color: @number-keyboard-button-text-color; + color: var(--van-number-keyboard-button-text-color); } } diff --git a/src/number-keyboard/var.less b/src/number-keyboard/var.less index 945b612f9..37a6a57b1 100644 --- a/src/number-keyboard/var.less +++ b/src/number-keyboard/var.less @@ -13,4 +13,8 @@ @number-keyboard-close-font-size: @font-size-md; @number-keyboard-button-text-color: @white; @number-keyboard-button-background-color: @blue; +@number-keyboard-button-active-color: darken( + @number-keyboard-button-background-color, + 10% +); @number-keyboard-z-index: 100; diff --git a/src/overlay/index.less b/src/overlay/index.less index 493fb5a3f..9d5fdc173 100644 --- a/src/overlay/index.less +++ b/src/overlay/index.less @@ -1,11 +1,16 @@ @import './var.less'; +:root { + --van-overlay-z-index: @overlay-z-index; + --van-overlay-background-color: @overlay-background-color; +} + .van-overlay { position: fixed; top: 0; left: 0; - z-index: @overlay-z-index; + z-index: var(--van-overlay-z-index); width: 100%; height: 100%; - background-color: @overlay-background-color; + background-color: var(--van-overlay-background-color); } diff --git a/src/pagination/index.less b/src/pagination/index.less index 7cd5201a4..a534bf913 100644 --- a/src/pagination/index.less +++ b/src/pagination/index.less @@ -1,8 +1,20 @@ @import './var.less'; +:root { + --van-pagination-height: @pagination-height; + --van-pagination-font-size: @pagination-font-size; + --van-pagination-item-width: @pagination-item-width; + --van-pagination-item-default-color: @pagination-item-default-color; + --van-pagination-item-disabled-color: @pagination-item-disabled-color; + --van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color; + --van-pagination-background-color: @pagination-background-color; + --van-pagination-desc-color: @pagination-desc-color; + --van-pagination-disabled-opacity: @pagination-disabled-opacity; +} + .van-pagination { display: flex; - font-size: @pagination-font-size; + font-size: var(--van-pagination-font-size); &__item, &__page-desc { @@ -14,16 +26,16 @@ &__item { flex: 1; box-sizing: border-box; - min-width: @pagination-item-width; - height: @pagination-height; - color: @pagination-item-default-color; - background-color: @pagination-background-color; + min-width: var(--van-pagination-item-width); + height: var(--van-pagination-height); + color: var(--van-pagination-item-default-color); + background-color: var(--van-pagination-background-color); cursor: pointer; user-select: none; &:active { color: @white; - background-color: @pagination-item-default-color; + background-color: var(--van-pagination-item-default-color); } &::after { @@ -36,7 +48,7 @@ &--active { color: @white; - background-color: @pagination-item-default-color; + background-color: var(--van-pagination-item-default-color); } } @@ -49,10 +61,10 @@ &__item--disabled { &, &:active { - color: @pagination-item-disabled-color; - background-color: @pagination-item-disabled-background-color; + color: var(--van-pagination-item-disabled-color); + background-color: var(--van-pagination-item-disabled-background-color); cursor: not-allowed; - opacity: @pagination-disabled-opacity; + opacity: var(--van-pagination-disabled-opacity); } } @@ -62,8 +74,8 @@ &__page-desc { flex: 1; - height: @pagination-height; - color: @pagination-desc-color; + height: var(--van-pagination-height); + color: var(--van-pagination-desc-color); } &--simple { diff --git a/src/password-input/index.less b/src/password-input/index.less index a6991a31a..97cfe07e0 100644 --- a/src/password-input/index.less +++ b/src/password-input/index.less @@ -1,33 +1,50 @@ @import './var.less'; +:root { + --van-password-input-height: @password-input-height; + --van-password-input-margin: @password-input-margin; + --van-password-input-font-size: @password-input-font-size; + --van-password-input-border-radius: @password-input-border-radius; + --van-password-input-background-color: @password-input-background-color; + --van-password-input-info-color: @password-input-info-color; + --van-password-input-info-font-size: @password-input-info-font-size; + --van-password-input-error-info-color: @password-input-error-info-color; + --van-password-input-dot-size: @password-input-dot-size; + --van-password-input-dot-color: @password-input-dot-color; + --van-password-input-cursor-color: @password-input-cursor-color; + --van-password-input-cursor-width: @password-input-cursor-width; + --van-password-input-cursor-height: @password-input-cursor-height; + --van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration; +} + .van-password-input { position: relative; - margin: @password-input-margin; + margin: var(--van-password-input-margin); user-select: none; &__info, &__error-info { margin-top: @padding-md; - font-size: @password-input-info-font-size; + font-size: var(--van-password-input-info-font-size); text-align: center; } &__info { - color: @password-input-info-color; + color: var(--van-password-input-info-color); } &__error-info { - color: @password-input-error-info-color; + color: var(--van-password-input-error-info-color); } &__security { display: flex; width: 100%; - height: @password-input-height; + height: var(--van-password-input-height); cursor: pointer; &::after { - border-radius: @password-input-border-radius; + border-radius: var(--van-password-input-border-radius); } li { @@ -37,18 +54,18 @@ align-items: center; justify-content: center; height: 100%; - font-size: @password-input-font-size; + font-size: var(--van-password-input-font-size); line-height: 1.2; - background-color: @password-input-background-color; + background-color: var(--van-password-input-background-color); } i { position: absolute; top: 50%; left: 50%; - width: @password-input-dot-size; - height: @password-input-dot-size; - background-color: @password-input-dot-color; + width: var(--van-password-input-dot-size); + height: var(--van-password-input-dot-size); + background-color: var(--van-password-input-dot-color); border-radius: 100%; transform: translate(-50%, -50%); visibility: hidden; @@ -59,12 +76,12 @@ position: absolute; top: 50%; left: 50%; - width: @password-input-cursor-width; - height: @password-input-cursor-height; - background-color: @password-input-cursor-color; + width: var(--van-password-input-cursor-width); + height: var(--van-password-input-cursor-height); + background-color: var(--van-password-input-cursor-color); transform: translate(-50%, -50%); - animation: @password-input-cursor-animation-duration van-cursor-flicker - infinite; + animation: var(--van-password-input-cursor-animation-duration) + van-cursor-flicker infinite; } } diff --git a/src/picker/index.less b/src/picker/index.less index ea6b35e8e..b73459273 100644 --- a/src/picker/index.less +++ b/src/picker/index.less @@ -1,22 +1,38 @@ @import './var.less'; +:root { + --van-picker-background-color: @picker-background-color; + --van-picker-toolbar-height: @picker-toolbar-height; + --van-picker-title-font-size: @picker-title-font-size; + --van-picker-title-line-height: @picker-title-line-height; + --van-picker-action-padding: @picker-action-padding; + --van-picker-action-font-size: @picker-action-font-size; + --van-picker-confirm-action-color: @picker-confirm-action-color; + --van-picker-cancel-action-color: @picker-cancel-action-color; + --van-picker-option-font-size: @picker-option-font-size; + --van-picker-option-text-color: @picker-option-text-color; + --van-picker-option-disabled-opacity: @picker-option-disabled-opacity; + --van-picker-loading-icon-color: @picker-loading-icon-color; + --van-picker-loading-mask-color: @picker-loading-mask-color; +} + .van-picker { position: relative; - background-color: @picker-background-color; + background-color: var(--van-picker-background-color); user-select: none; &__toolbar { display: flex; align-items: center; justify-content: space-between; - height: @picker-toolbar-height; + height: var(--van-picker-toolbar-height); } &__cancel, &__confirm { height: 100%; - padding: @picker-action-padding; - font-size: @picker-action-font-size; + padding: var(--van-picker-action-padding); + font-size: var(--van-picker-action-font-size); background-color: transparent; border: none; cursor: pointer; @@ -27,18 +43,18 @@ } &__confirm { - color: @picker-confirm-action-color; + color: var(--van-picker-confirm-action-color); } &__cancel { - color: @picker-cancel-action-color; + color: var(--van-picker-cancel-action-color); } &__title { max-width: 50%; font-weight: @font-weight-bold; - font-size: @picker-title-font-size; - line-height: @picker-title-line-height; + font-size: var(--van-picker-title-font-size); + line-height: var(--van-picker-title-line-height); text-align: center; } @@ -58,8 +74,8 @@ display: flex; align-items: center; justify-content: center; - color: @picker-loading-icon-color; - background-color: @picker-loading-mask-color; + color: var(--van-picker-loading-icon-color); + background-color: var(--van-picker-loading-mask-color); } &__frame { @@ -95,7 +111,7 @@ &-column { flex: 1; overflow: hidden; - font-size: @picker-option-font-size; + font-size: var(--van-picker-option-font-size); &__wrapper { transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1); @@ -106,11 +122,11 @@ align-items: center; justify-content: center; padding: 0 @padding-base; - color: @picker-option-text-color; + color: var(--van-picker-option-text-color); &--disabled { cursor: not-allowed; - opacity: @picker-option-disabled-opacity; + opacity: var(--van-picker-option-disabled-opacity); } } } diff --git a/src/popover/index.less b/src/popover/index.less index 5b571d437..f12bf6aa4 100644 --- a/src/popover/index.less +++ b/src/popover/index.less @@ -1,5 +1,21 @@ @import './var.less'; +:root { + --van-popover-arrow-size: @popover-arrow-size; + --van-popover-border-radius: @popover-border-radius; + --van-popover-action-width: @popover-action-width; + --van-popover-action-height: @popover-action-height; + --van-popover-action-font-size: @popover-action-font-size; + --van-popover-action-line-height: @popover-action-line-height; + --van-popover-action-icon-size: @popover-action-icon-size; + --van-popover-light-text-color: @popover-light-text-color; + --van-popover-light-background-color: @popover-light-background-color; + --van-popover-light-action-disabled-text-color: @popover-light-action-disabled-text-color; + --van-popover-dark-text-color: @popover-dark-text-color; + --van-popover-dark-background-color: @popover-dark-background-color; + --van-popover-dark-action-disabled-text-color: @popover-dark-action-disabled-text-color; +} + .van-popover { position: absolute; overflow: visible; @@ -16,12 +32,12 @@ height: 0; border-color: transparent; border-style: solid; - border-width: @popover-arrow-size; + border-width: var(--van-popover-arrow-size); } &__content { overflow: hidden; - border-radius: @popover-border-radius; + border-radius: var(--van-popover-border-radius); } &__action { @@ -29,10 +45,10 @@ display: flex; align-items: center; box-sizing: border-box; - width: @popover-action-width; - height: @popover-action-height; + width: var(--van-popover-action-width); + height: var(--van-popover-action-height); padding: 0 @padding-md; - font-size: @popover-action-font-size; + font-size: var(--van-popover-action-font-size); line-height: @line-height-md; cursor: pointer; @@ -52,7 +68,7 @@ &-icon { margin-right: @padding-xs; - font-size: @popover-action-icon-size; + font-size: var(--van-popover-action-icon-size); } &--with-icon { @@ -195,15 +211,15 @@ } &--light { - color: @popover-light-text-color; + color: var(--van-popover-light-text-color); .van-popover__content { - background-color: @popover-light-background-color; + background-color: var(--van-popover-light-background-color); box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12); } .van-popover__arrow { - color: @popover-light-background-color; + color: var(--van-popover-light-background-color); } .van-popover__action { @@ -212,7 +228,7 @@ } &--disabled { - color: @popover-light-action-disabled-text-color; + color: var(--van-popover-light-action-disabled-text-color); cursor: not-allowed; &:active { @@ -223,14 +239,14 @@ } &--dark { - color: @popover-dark-text-color; + color: var(--van-popover-dark-text-color); .van-popover__content { - background-color: @popover-dark-background-color; + background-color: var(--van-popover-dark-background-color); } .van-popover__arrow { - color: @popover-dark-background-color; + color: var(--van-popover-dark-background-color); } .van-popover__action { @@ -239,7 +255,7 @@ } &--disabled { - color: @popover-dark-action-disabled-text-color; + color: var(--van-popover-dark-action-disabled-text-color); &:active { background-color: transparent; diff --git a/src/popup/index.less b/src/popup/index.less index bee98ebff..cd6699249 100644 --- a/src/popup/index.less +++ b/src/popup/index.less @@ -1,6 +1,17 @@ @import './var.less'; @import '../style/mixins/safe-area.less'; +:root { + --van-popup-background-color: @popup-background-color; + --van-popup-transition: @popup-transition; + --van-popup-round-border-radius: @popup-round-border-radius; + --van-popup-close-icon-size: @popup-close-icon-size; + --van-popup-close-icon-color: @popup-close-icon-color; + --van-popup-close-icon-active-color: @popup-close-icon-active-color; + --van-popup-close-icon-margin: @popup-close-icon-margin; + --van-popup-close-icon-z-index: @popup-close-icon-z-index; +} + .van { &-overflow-hidden { overflow: hidden !important; @@ -10,8 +21,8 @@ position: fixed; max-height: 100%; overflow-y: auto; - background-color: @popup-background-color; - transition: @popup-transition; + background-color: var(--van-popup-background-color); + transition: var(--van-popup-transition); -webkit-overflow-scrolling: touch; &--center { @@ -20,7 +31,7 @@ transform: translate3d(-50%, -50%, 0); &.van-popup--round { - border-radius: @popup-round-border-radius; + border-radius: var(--van-popup-round-border-radius); } } @@ -30,7 +41,8 @@ width: 100%; &.van-popup--round { - border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius; + border-radius: 0 0 var(--van-popup-round-border-radius) + var(--van-popup-round-border-radius); } } @@ -40,7 +52,8 @@ transform: translate3d(0, -50%, 0); &.van-popup--round { - border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius; + border-radius: var(--van-popup-round-border-radius) 0 0 + var(--van-popup-round-border-radius); } } @@ -50,7 +63,8 @@ width: 100%; &.van-popup--round { - border-radius: @popup-round-border-radius @popup-round-border-radius 0 0; + border-radius: var(--van-popup-round-border-radius) + var(--van-popup-round-border-radius) 0 0; } } @@ -60,7 +74,8 @@ transform: translate3d(0, -50%, 0); &.van-popup--round { - border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0; + border-radius: 0 var(--van-popup-round-border-radius) + var(--van-popup-round-border-radius) 0; } } @@ -104,33 +119,33 @@ &__close-icon { position: absolute; - z-index: @popup-close-icon-z-index; - color: @popup-close-icon-color; - font-size: @popup-close-icon-size; + z-index: var(--van-popup-close-icon-z-index); + color: var(--van-popup-close-icon-color); + font-size: var(--van-popup-close-icon-size); cursor: pointer; &:active { - color: @popup-close-icon-active-color; + color: var(--van-popup-close-icon-active-color); } &--top-left { - top: @popup-close-icon-margin; - left: @popup-close-icon-margin; + top: var(--van-popup-close-icon-margin); + left: var(--van-popup-close-icon-margin); } &--top-right { - top: @popup-close-icon-margin; - right: @popup-close-icon-margin; + top: var(--van-popup-close-icon-margin); + right: var(--van-popup-close-icon-margin); } &--bottom-left { - bottom: @popup-close-icon-margin; - left: @popup-close-icon-margin; + bottom: var(--van-popup-close-icon-margin); + left: var(--van-popup-close-icon-margin); } &--bottom-right { - right: @popup-close-icon-margin; - bottom: @popup-close-icon-margin; + right: var(--van-popup-close-icon-margin); + bottom: var(--van-popup-close-icon-margin); } } } diff --git a/src/progress/index.less b/src/progress/index.less index 2d024d03e..cddacf0ba 100644 --- a/src/progress/index.less +++ b/src/progress/index.less @@ -1,16 +1,27 @@ @import './var.less'; +:root { + --van-progress-height: @progress-height; + --van-progress-color: @progress-color; + --van-progress-background-color: @progress-background-color; + --van-progress-pivot-padding: @progress-pivot-padding; + --van-progress-pivot-text-color: @progress-pivot-text-color; + --van-progress-pivot-font-size: @progress-pivot-font-size; + --van-progress-pivot-line-height: @progress-pivot-line-height; + --van-progress-pivot-background-color: @progress-pivot-background-color; +} + .van-progress { position: relative; - height: @progress-height; - background: @progress-background-color; - border-radius: @progress-height; + height: var(--van-progress-height); + background: var(--van-progress-background-color); + border-radius: var(--van-progress-height); &__portion { position: absolute; left: 0; height: 100%; - background: @progress-color; + background: var(--van-progress-color); border-radius: inherit; } @@ -19,13 +30,13 @@ top: 50%; box-sizing: border-box; min-width: 3.6em; - padding: @progress-pivot-padding; - color: @progress-pivot-text-color; - font-size: @progress-pivot-font-size; - line-height: @progress-pivot-line-height; + padding: var(--van-progress-pivot-padding); + color: var(--van-progress-pivot-text-color); + font-size: var(--van-progress-pivot-font-size); + line-height: var(--van-progress-pivot-line-height); text-align: center; word-break: keep-all; - background-color: @progress-pivot-background-color; + background-color: var(--van-progress-pivot-background-color); border-radius: 1em; transform: translate(0, -50%); } diff --git a/src/pull-refresh/index.less b/src/pull-refresh/index.less index dce4f054e..5fb5bf87c 100644 --- a/src/pull-refresh/index.less +++ b/src/pull-refresh/index.less @@ -1,5 +1,12 @@ @import './var.less'; +:root { + --van-pull-refresh-head-height: @pull-refresh-head-height; + --van-pull-refresh-head-font-size: @pull-refresh-head-font-size; + --van-pull-refresh-head-text-color: @pull-refresh-head-text-color; + --van-pull-refresh-loading-icon-size: @pull-refresh-loading-icon-size; +} + .van-pull-refresh { overflow: hidden; user-select: none; @@ -14,19 +21,19 @@ position: absolute; left: 0; width: 100%; - height: @pull-refresh-head-height; + height: var(--van-pull-refresh-head-height); overflow: hidden; - color: @pull-refresh-head-text-color; - font-size: @pull-refresh-head-font-size; - line-height: @pull-refresh-head-height; + color: var(--van-pull-refresh-head-text-color); + font-size: var(--van-pull-refresh-head-font-size); + line-height: var(--van-pull-refresh-head-height); text-align: center; transform: translateY(-100%); } &__loading { .van-loading__spinner { - width: @pull-refresh-loading-icon-size; - height: @pull-refresh-loading-icon-size; + width: var(--van-pull-refresh-loading-icon-size); + height: var(--van-pull-refresh-loading-icon-size); } } } diff --git a/src/radio/index.less b/src/radio/index.less index b983a3c18..ac8715e9b 100644 --- a/src/radio/index.less +++ b/src/radio/index.less @@ -1,5 +1,17 @@ @import './var.less'; +:root { + --van-radio-size: @radio-size; + --van-radio-border-color: @radio-border-color; + --van-radio-transition-duration: @radio-transition-duration; + --van-radio-label-margin: @radio-label-margin; + --van-radio-label-color: @radio-label-color; + --van-radio-checked-icon-color: @radio-checked-icon-color; + --van-radio-disabled-icon-color: @radio-disabled-icon-color; + --van-radio-disabled-label-color: @radio-disabled-label-color; + --van-radio-disabled-background-color: @radio-disabled-background-color; +} + .van-radio { display: flex; align-items: center; @@ -22,7 +34,7 @@ &__icon { flex: none; height: 1em; - font-size: @radio-size; + font-size: var(--van-radio-size); line-height: 1em; cursor: pointer; @@ -35,8 +47,8 @@ font-size: 0.8em; line-height: 1.25; text-align: center; - border: 1px solid @radio-border-color; - transition-duration: @radio-transition-duration; + border: 1px solid var(--van-radio-border-color); + transition-duration: var(--van-radio-transition-duration); transition-property: color, border-color, background-color; } @@ -49,8 +61,8 @@ &--checked { .van-icon { color: @white; - background-color: @radio-checked-icon-color; - border-color: @radio-checked-icon-color; + background-color: var(--van-radio-checked-icon-color); + border-color: var(--van-radio-checked-icon-color); } } @@ -58,29 +70,29 @@ cursor: not-allowed; .van-icon { - background-color: @radio-disabled-background-color; - border-color: @radio-disabled-icon-color; + background-color: var(--van-radio-disabled-background-color); + border-color: var(--van-radio-disabled-icon-color); } } &--disabled&--checked { .van-icon { - color: @radio-disabled-icon-color; + color: var(--van-radio-disabled-icon-color); } } } &__label { - margin-left: @radio-label-margin; - color: @radio-label-color; - line-height: @radio-size; + margin-left: var(--van-radio-label-margin); + color: var(--van-radio-label-color); + line-height: var(--van-radio-size); &--left { - margin: 0 @radio-label-margin 0 0; + margin: 0 var(--van-radio-label-margin) 0 0; } &--disabled { - color: @radio-disabled-label-color; + color: var(--van-radio-disabled-label-color); } } } diff --git a/src/rate/index.less b/src/rate/index.less index 208c0194b..52463ebe0 100644 --- a/src/rate/index.less +++ b/src/rate/index.less @@ -1,5 +1,13 @@ @import './var.less'; +:root { + --van-rate-icon-size: @rate-icon-size; + --van-rate-icon-gutter: @rate-icon-gutter; + --van-rate-icon-void-color: @rate-icon-void-color; + --van-rate-icon-full-color: @rate-icon-full-color; + --van-rate-icon-disabled-color: @rate-icon-disabled-color; +} + .van-rate { display: inline-flex; cursor: pointer; @@ -9,15 +17,15 @@ position: relative; &:not(:last-child) { - padding-right: @rate-icon-gutter; + padding-right: var(--van-rate-icon-gutter); } } &__icon { display: block; width: 1em; - color: @rate-icon-void-color; - font-size: @rate-icon-size; + color: var(--van-rate-icon-void-color); + font-size: var(--van-rate-icon-size); &--half { position: absolute; @@ -27,11 +35,11 @@ } &--full { - color: @rate-icon-full-color; + color: var(--van-rate-icon-full-color); } &--disabled { - color: @rate-icon-disabled-color; + color: var(--van-rate-icon-disabled-color); } } diff --git a/src/search/index.less b/src/search/index.less index f2bc234c7..7091199c0 100644 --- a/src/search/index.less +++ b/src/search/index.less @@ -1,17 +1,31 @@ @import './var.less'; +:root { + --van-search-padding: @search-padding; + --van-search-background-color: @search-background-color; + --van-search-content-background-color: @search-content-background-color; + --van-search-input-height: @search-input-height; + --van-search-label-padding: @search-label-padding; + --van-search-label-color: @search-label-color; + --van-search-label-font-size: @search-label-font-size; + --van-search-left-icon-color: @search-left-icon-color; + --van-search-action-padding: @search-action-padding; + --van-search-action-text-color: @search-action-text-color; + --van-search-action-font-size: @search-action-font-size; +} + .van-search { display: flex; align-items: center; box-sizing: border-box; - padding: @search-padding; - background-color: @search-background-color; + padding: var(--van-search-padding); + background-color: var(--van-search-background-color); &__content { display: flex; flex: 1; padding-left: @padding-sm; - background-color: @search-content-background-color; + background-color: var(--van-search-content-background-color); border-radius: @border-radius-sm; &--round { @@ -20,10 +34,10 @@ } &__label { - padding: @search-label-padding; - color: @search-label-color; - font-size: @search-label-font-size; - line-height: @search-input-height; + padding: var(--van-search-label-padding); + color: var(--van-search-label-color); + font-size: var(--van-search-label-font-size); + line-height: var(--van-search-input-height); } .van-cell { @@ -32,7 +46,7 @@ background-color: transparent; &__left-icon { - color: @search-left-icon-color; + color: var(--van-search-left-icon-color); } } @@ -50,10 +64,10 @@ } &__action { - padding: @search-action-padding; - color: @search-action-text-color; - font-size: @search-action-font-size; - line-height: @search-input-height; + padding: var(--van-search-action-padding); + color: var(--van-search-action-text-color); + font-size: var(--van-search-action-font-size); + line-height: var(--van-search-input-height); cursor: pointer; user-select: none; diff --git a/src/share-sheet/index.less b/src/share-sheet/index.less index 2c02f9626..eb358cf0f 100644 --- a/src/share-sheet/index.less +++ b/src/share-sheet/index.less @@ -1,26 +1,44 @@ @import './var.less'; @import '../style/mixins/hairline'; +:root { + --van-share-sheet-header-padding: @share-sheet-header-padding; + --van-share-sheet-title-color: @share-sheet-title-color; + --van-share-sheet-title-font-size: @share-sheet-title-font-size; + --van-share-sheet-title-line-height: @share-sheet-title-line-height; + --van-share-sheet-description-color: @share-sheet-description-color; + --van-share-sheet-description-font-size: @share-sheet-description-font-size; + --van-share-sheet-description-line-height: @share-sheet-description-line-height; + --van-share-sheet-icon-size: @share-sheet-icon-size; + --van-share-sheet-option-name-color: @share-sheet-option-name-color; + --van-share-sheet-option-name-font-size: @share-sheet-option-name-font-size; + --van-share-sheet-option-description-color: @share-sheet-option-description-color; + --van-share-sheet-option-description-font-size: @share-sheet-option-description-font-size; + --van-share-sheet-cancel-button-font-size: @share-sheet-cancel-button-font-size; + --van-share-sheet-cancel-button-height: @share-sheet-cancel-button-height; + --van-share-sheet-cancel-button-background: @share-sheet-cancel-button-background; +} + .van-share-sheet { &__header { - padding: @share-sheet-header-padding; + padding: var(--van-share-sheet-header-padding); text-align: center; } &__title { margin-top: @padding-xs; - color: @share-sheet-title-color; + color: var(--van-share-sheet-title-color); font-weight: normal; - font-size: @share-sheet-title-font-size; - line-height: @share-sheet-title-line-height; + font-size: var(--van-share-sheet-title-font-size); + line-height: var(--van-share-sheet-title-line-height); } &__description { display: block; margin-top: @padding-xs; - color: @share-sheet-description-color; - font-size: @share-sheet-description-font-size; - line-height: @share-sheet-description-line-height; + color: var(--van-share-sheet-description-color); + font-size: var(--van-share-sheet-description-font-size); + line-height: var(--van-share-sheet-description-line-height); } &__options { @@ -53,32 +71,32 @@ } &__icon { - width: @share-sheet-icon-size; - height: @share-sheet-icon-size; + width: var(--van-share-sheet-icon-size); + height: var(--van-share-sheet-icon-size); margin: 0 @padding-md; } &__name { margin-top: @padding-xs; padding: 0 @padding-base; - color: @share-sheet-option-name-color; - font-size: @share-sheet-option-name-font-size; + color: var(--van-share-sheet-option-name-color); + font-size: var(--van-share-sheet-option-name-font-size); } &__option-description { padding: 0 @padding-base; - color: @share-sheet-option-description-color; - font-size: @share-sheet-option-description-font-size; + color: var(--van-share-sheet-option-description-color); + font-size: var(--van-share-sheet-option-description-font-size); } &__cancel { display: block; width: 100%; padding: 0; - font-size: @share-sheet-cancel-button-font-size; - line-height: @share-sheet-cancel-button-height; + font-size: var(--van-share-sheet-cancel-button-font-size); + line-height: var(--van-share-sheet-cancel-button-height); text-align: center; - background: @share-sheet-cancel-button-background; + background: var(--van-share-sheet-cancel-button-background); border: none; cursor: pointer; diff --git a/src/sidebar-item/index.less b/src/sidebar-item/index.less index d0a774753..6de7bf6c1 100644 --- a/src/sidebar-item/index.less +++ b/src/sidebar-item/index.less @@ -1,20 +1,36 @@ @import './var.less'; +:root { + --van-sidebar-font-size: @sidebar-font-size; + --van-sidebar-line-height: @sidebar-line-height; + --van-sidebar-text-color: @sidebar-text-color; + --van-sidebar-disabled-text-color: @sidebar-disabled-text-color; + --van-sidebar-padding: @sidebar-padding; + --van-sidebar-active-color: @sidebar-active-color; + --van-sidebar-background-color: @sidebar-background-color; + --van-sidebar-selected-font-weight: @sidebar-selected-font-weight; + --van-sidebar-selected-text-color: @sidebar-selected-text-color; + --van-sidebar-selected-border-width: @sidebar-selected-border-width; + --van-sidebar-selected-border-height: @sidebar-selected-border-height; + --van-sidebar-selected-border-color: @sidebar-selected-border-color; + --van-sidebar-selected-background-color: @sidebar-selected-background-color; +} + .van-sidebar-item { position: relative; display: block; box-sizing: border-box; - padding: @sidebar-padding; + padding: var(--van-sidebar-padding); overflow: hidden; - color: @sidebar-text-color; - font-size: @sidebar-font-size; - line-height: @sidebar-line-height; - background-color: @sidebar-background-color; + color: var(--van-sidebar-text-color); + font-size: var(--van-sidebar-font-size); + line-height: var(--van-sidebar-line-height); + background-color: var(--van-sidebar-background-color); cursor: pointer; user-select: none; &:active { - background-color: @sidebar-active-color; + background-color: var(--van-sidebar-active-color); } &:not(:last-child)::after { @@ -27,32 +43,32 @@ } &--select { - color: @sidebar-selected-text-color; - font-weight: @sidebar-selected-font-weight; + color: var(--van-sidebar-selected-text-color); + font-weight: var(--van-sidebar-selected-font-weight); &, &:active { - background-color: @sidebar-selected-background-color; + background-color: var(--van-sidebar-selected-background-color); } &::before { position: absolute; top: 50%; left: 0; - width: @sidebar-selected-border-width; - height: @sidebar-selected-border-height; - background-color: @sidebar-selected-border-color; + width: var(--van-sidebar-selected-border-width); + height: var(--van-sidebar-selected-border-height); + background-color: var(--van-sidebar-selected-border-color); transform: translateY(-50%); content: ''; } } &--disabled { - color: @sidebar-disabled-text-color; + color: var(--van-sidebar-disabled-text-color); cursor: not-allowed; &:active { - background-color: @sidebar-background-color; + background-color: var(--van-sidebar-background-color); } } } diff --git a/src/sidebar/index.less b/src/sidebar/index.less index 7c5737ad2..bda780593 100644 --- a/src/sidebar/index.less +++ b/src/sidebar/index.less @@ -1,7 +1,11 @@ @import './var.less'; +:root { + --van-sidebar-width: @sidebar-width; +} + .van-sidebar { - width: @sidebar-width; + width: var(--van-sidebar-width); overflow-y: auto; -webkit-overflow-scrolling: touch; } diff --git a/src/skeleton/index.less b/src/skeleton/index.less index 23ce5cd3d..cd6a1a888 100644 --- a/src/skeleton/index.less +++ b/src/skeleton/index.less @@ -1,15 +1,25 @@ @import './var.less'; +:root { + --van-skeleton-row-height: @skeleton-row-height; + --van-skeleton-row-background-color: @skeleton-row-background-color; + --van-skeleton-row-margin-top: @skeleton-row-margin-top; + --van-skeleton-title-width: @skeleton-title-width; + --van-skeleton-avatar-size: @skeleton-avatar-size; + --van-skeleton-avatar-background-color: @skeleton-avatar-background-color; + --van-skeleton-animation-duration: @skeleton-animation-duration; +} + .van-skeleton { display: flex; padding: 0 @padding-md; &__avatar { flex-shrink: 0; - width: @skeleton-avatar-size; - height: @skeleton-avatar-size; + width: var(--van-skeleton-avatar-size); + height: var(--van-skeleton-avatar-size); margin-right: @padding-md; - background-color: @skeleton-avatar-background-color; + background-color: var(--van-skeleton-avatar-background-color); &--round { border-radius: @border-radius-max; @@ -26,18 +36,18 @@ &__row, &__title { - height: @skeleton-row-height; - background-color: @skeleton-row-background-color; + height: var(--van-skeleton-row-height); + background-color: var(--van-skeleton-row-background-color); } &__title { - width: @skeleton-title-width; + width: var(--van-skeleton-title-width); margin: 0; } &__row { &:not(:first-child) { - margin-top: @skeleton-row-margin-top; + margin-top: var(--van-skeleton-row-margin-top); } } @@ -46,8 +56,8 @@ } &--animate { - animation: van-skeleton-blink @skeleton-animation-duration ease-in-out - infinite; + animation: van-skeleton-blink var(--van-skeleton-animation-duration) + ease-in-out infinite; } &--round { diff --git a/src/slider/index.less b/src/slider/index.less index ae1208a0a..03fb408f3 100644 --- a/src/slider/index.less +++ b/src/slider/index.less @@ -1,10 +1,22 @@ @import './var.less'; +:root { + --van-slider-active-background-color: @slider-active-background-color; + --van-slider-inactive-background-color: @slider-inactive-background-color; + --van-slider-disabled-opacity: @slider-disabled-opacity; + --van-slider-bar-height: @slider-bar-height; + --van-slider-button-width: @slider-button-width; + --van-slider-button-height: @slider-button-height; + --van-slider-button-border-radius: @slider-button-border-radius; + --van-slider-button-background-color: @slider-button-background-color; + --van-slider-button-box-shadow: @slider-button-box-shadow; +} + .van-slider { position: relative; width: 100%; - height: @slider-bar-height; - background-color: @slider-inactive-background-color; + height: var(--van-slider-bar-height); + background-color: var(--van-slider-inactive-background-color); border-radius: @border-radius-max; cursor: pointer; @@ -22,17 +34,17 @@ position: relative; width: 100%; height: 100%; - background-color: @slider-active-background-color; + background-color: var(--van-slider-active-background-color); border-radius: inherit; transition: all @animation-duration-fast; } &__button { - width: @slider-button-width; - height: @slider-button-height; - background-color: @slider-button-background-color; - border-radius: @slider-button-border-radius; - box-shadow: @slider-button-box-shadow; + width: var(--van-slider-button-width); + height: var(--van-slider-button-height); + background-color: var(--van-slider-button-background-color); + border-radius: var(--van-slider-button-border-radius); + box-shadow: var(--van-slider-button-box-shadow); &-wrapper, &-wrapper-right { @@ -54,7 +66,7 @@ &--disabled { cursor: not-allowed; - opacity: @slider-disabled-opacity; + opacity: var(--van-slider-disabled-opacity); .van-slider__button-wrapper, .van-slider__button-wrapper-left, @@ -65,7 +77,7 @@ &--vertical { display: inline-block; - width: @slider-bar-height; + width: var(--van-slider-bar-height); height: 100%; .van-slider__button-wrapper, diff --git a/src/step/index.less b/src/step/index.less index 56ec80817..f20c07fbd 100644 --- a/src/step/index.less +++ b/src/step/index.less @@ -1,22 +1,36 @@ @import './var.less'; +:root { + --van-step-text-color: @step-text-color; + --van-step-active-color: @step-active-color; + --van-step-process-text-color: @step-process-text-color; + --van-step-font-size: @step-font-size; + --van-step-line-color: @step-line-color; + --van-step-finish-line-color: @step-finish-line-color; + --van-step-finish-text-color: @step-finish-text-color; + --van-step-icon-size: @step-icon-size; + --van-step-circle-size: @step-circle-size; + --van-step-circle-color: @step-circle-color; + --van-step-horizontal-title-font-size: @step-horizontal-title-font-size; +} + .van-step { position: relative; flex: 1; - color: @step-text-color; - font-size: @step-font-size; + color: var(--van-step-text-color); + font-size: var(--van-step-font-size); &__circle { display: block; - width: @step-circle-size; - height: @step-circle-size; - background-color: @step-circle-color; + width: var(--van-step-circle-size); + height: var(--van-step-circle-size); + background-color: var(--van-step-circle-color); border-radius: 50%; } &__line { position: absolute; - background-color: @step-line-color; + background-color: var(--van-step-line-color); transition: background-color @animation-duration-base; } @@ -59,12 +73,8 @@ .van-step__title { display: inline-block; margin-left: 3px; - font-size: @step-horizontal-title-font-size; + font-size: var(--van-step-horizontal-title-font-size); transform: translateX(-50%); - - @media (max-width: 321px) { - font-size: @step-horizontal-title-font-size - 1px; - } } .van-step__line { @@ -76,11 +86,11 @@ .van-step__icon { display: block; - font-size: @step-icon-size; + font-size: var(--van-step-icon-size); } .van-step--process { - color: @step-process-text-color; + color: var(--van-step-process-text-color); } } @@ -112,7 +122,7 @@ top: 19px; left: -15px; z-index: 2; - font-size: @step-icon-size; + font-size: var(--van-step-icon-size); line-height: 1; transform: translate(-50%, -50%); } @@ -132,11 +142,11 @@ } &--finish { - color: @step-finish-text-color; + color: var(--van-step-finish-text-color); .van-step__circle, .van-step__line { - background-color: @step-finish-line-color; + background-color: var(--van-step-finish-line-color); } } @@ -146,7 +156,7 @@ &--active, &--finish { - color: @step-active-color; + color: var(--van-step-active-color); } } } diff --git a/src/stepper/index.less b/src/stepper/index.less index cfbb85100..6d6921fb0 100644 --- a/src/stepper/index.less +++ b/src/stepper/index.less @@ -1,5 +1,22 @@ @import './var.less'; +:root { + --van-stepper-active-color: @stepper-active-color; + --van-stepper-background-color: @stepper-background-color; + --van-stepper-button-icon-color: @stepper-button-icon-color; + --van-stepper-button-disabled-color: @stepper-button-disabled-color; + --van-stepper-button-disabled-icon-color: @stepper-button-disabled-icon-color; + --van-stepper-button-round-theme-color: @stepper-button-round-theme-color; + --van-stepper-input-width: @stepper-input-width; + --van-stepper-input-height: @stepper-input-height; + --van-stepper-input-font-size: @stepper-input-font-size; + --van-stepper-input-line-height: @stepper-input-line-height; + --van-stepper-input-text-color: @stepper-input-text-color; + --van-stepper-input-disabled-text-color: @stepper-input-disabled-text-color; + --van-stepper-input-disabled-background-color: @stepper-input-disabled-background-color; + --van-stepper-border-radius: @stepper-border-radius; +} + .van-stepper { display: inline-block; user-select: none; @@ -8,13 +25,13 @@ &__plus { position: relative; box-sizing: border-box; - width: @stepper-input-height; - height: @stepper-input-height; + width: var(--van-stepper-input-height); + height: var(--van-stepper-input-height); margin: 0; padding: 0; - color: @stepper-button-icon-color; + color: var(--van-stepper-button-icon-color); vertical-align: middle; - background-color: @stepper-background-color; + background-color: var(--van-stepper-background-color); border: 0; cursor: pointer; @@ -39,22 +56,23 @@ } &:active { - background-color: @stepper-active-color; + background-color: var(--van-stepper-active-color); } &--disabled { - color: @stepper-button-disabled-icon-color; - background-color: @stepper-button-disabled-color; + color: var(--van-stepper-button-disabled-icon-color); + background-color: var(--van-stepper-button-disabled-color); cursor: not-allowed; &:active { - background-color: @stepper-button-disabled-color; + background-color: var(--van-stepper-button-disabled-color); } } } &__minus { - border-radius: @stepper-border-radius 0 0 @stepper-border-radius; + border-radius: var(--van-stepper-border-radius) 0 0 + var(--van-stepper-border-radius); &::after { display: none; @@ -62,31 +80,32 @@ } &__plus { - border-radius: 0 @stepper-border-radius @stepper-border-radius 0; + border-radius: 0 var(--van-stepper-border-radius) + var(--van-stepper-border-radius) 0; } &__input { box-sizing: border-box; - width: @stepper-input-width; - height: @stepper-input-height; + width: var(--van-stepper-input-width); + height: var(--van-stepper-input-height); margin: 0 2px; padding: 0; - color: @stepper-input-text-color; - font-size: @stepper-input-font-size; - line-height: @stepper-input-line-height; + color: var(--van-stepper-input-text-color); + font-size: var(--van-stepper-input-font-size); + line-height: var(--van-stepper-input-line-height); text-align: center; vertical-align: middle; - background-color: @stepper-background-color; + background-color: var(--van-stepper-background-color); border: 0; border-width: 1px 0; border-radius: 0; -webkit-appearance: none; &:disabled { - color: @stepper-input-disabled-text-color; - background-color: @stepper-input-disabled-background-color; + color: var(--van-stepper-input-disabled-text-color); + background-color: var(--van-stepper-input-disabled-background-color); // fix disabled color in iOS - -webkit-text-fill-color: @stepper-input-disabled-text-color; + -webkit-text-fill-color: var(--van-stepper-input-disabled-text-color); opacity: 1; } @@ -118,13 +137,13 @@ .van-stepper__plus { color: @white; - background-color: @stepper-button-round-theme-color; + background-color: var(--van-stepper-button-round-theme-color); } .van-stepper__minus { - color: @stepper-button-round-theme-color; + color: var(--van-stepper-button-round-theme-color); background-color: @white; - border: 1px solid @stepper-button-round-theme-color; + border: 1px solid var(--van-stepper-button-round-theme-color); } } } diff --git a/src/steps/index.less b/src/steps/index.less index b24986d50..b8a7816c0 100644 --- a/src/steps/index.less +++ b/src/steps/index.less @@ -1,8 +1,12 @@ @import './var.less'; +:root { + --van-steps-background-color: @steps-background-color; +} + .van-steps { overflow: hidden; - background-color: @steps-background-color; + background-color: var(--van-steps-background-color); &--horizontal { padding: 10px 10px 0; diff --git a/src/sticky/index.less b/src/sticky/index.less index 6a94dd835..5dbf6e8d2 100644 --- a/src/sticky/index.less +++ b/src/sticky/index.less @@ -1,8 +1,12 @@ @import './var.less'; +:root { + --van-sticky-z-index: @sticky-z-index; +} + .van-sticky { &--fixed { position: fixed; - z-index: @sticky-z-index; + z-index: var(--van-sticky-z-index); } } diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less index 8ae7afcee..1369d5d53 100644 --- a/src/submit-bar/index.less +++ b/src/submit-bar/index.less @@ -1,27 +1,50 @@ @import './var.less'; @import '../style/mixins/safe-area.less'; +:root { + --van-submit-bar-height: @submit-bar-height; + --van-submit-bar-z-index: @submit-bar-z-index; + --van-submit-bar-background-color: @submit-bar-background-color; + --van-submit-bar-button-width: @submit-bar-button-width; + --van-submit-bar-price-color: @submit-bar-price-color; + --van-submit-bar-price-font-size: @submit-bar-price-font-size; + --van-submit-bar-currency-font-size: @submit-bar-currency-font-size; + --van-submit-bar-text-color: @submit-bar-text-color; + --van-submit-bar-text-font-size: @submit-bar-text-font-size; + --van-submit-bar-tip-padding: @submit-bar-tip-padding; + --van-submit-bar-tip-font-size: @submit-bar-tip-font-size; + --van-submit-bar-tip-line-height: @submit-bar-tip-line-height; + --van-submit-bar-tip-color: @submit-bar-tip-color; + --van-submit-bar-tip-background-color: @submit-bar-tip-background-color; + --van-submit-bar-tip-icon-size: @submit-bar-tip-icon-size; + --van-submit-bar-button-height: @submit-bar-button-height; + --van-submit-bar-padding: @submit-bar-padding; + --van-submit-bar-price-font-size: @submit-bar-price-font-size; + --van-submit-bar-price-integer-font-size: @submit-bar-price-integer-font-size; + --van-submit-bar-price-font-family: @submit-bar-price-font-family; +} + .van-submit-bar { position: fixed; bottom: 0; left: 0; - z-index: @submit-bar-z-index; + z-index: var(--van-submit-bar-z-index); width: 100%; - background-color: @submit-bar-background-color; + background-color: var(--van-submit-bar-background-color); user-select: none; .safe-area-inset-bottom(); &__tip { - padding: @submit-bar-tip-padding; - color: @submit-bar-tip-color; - font-size: @submit-bar-tip-font-size; - line-height: @submit-bar-tip-line-height; - background-color: @submit-bar-tip-background-color; + padding: var(--van-submit-bar-tip-padding); + color: var(--van-submit-bar-tip-color); + font-size: var(--van-submit-bar-tip-font-size); + line-height: var(--van-submit-bar-tip-line-height); + background-color: var(--van-submit-bar-tip-background-color); } &__tip-icon { - min-width: @submit-bar-tip-icon-size * 1.5; - font-size: @submit-bar-tip-icon-size; + min-width: calc(var(--van-submit-bar-tip-icon-size) * 1.5); + font-size: var(--van-submit-bar-tip-icon-size); vertical-align: middle; } @@ -33,15 +56,15 @@ display: flex; align-items: center; justify-content: flex-end; - height: @submit-bar-height; - padding: @submit-bar-padding; - font-size: @submit-bar-text-font-size; + height: var(--van-submit-bar-height); + padding: var(--van-submit-bar-padding); + font-size: var(--van-submit-bar-text-font-size); } &__text { flex: 1; padding-right: @padding-sm; - color: @submit-bar-text-color; + color: var(--van-submit-bar-text-color); text-align: right; span { @@ -55,19 +78,19 @@ } &__price { - color: @submit-bar-price-color; + color: var(--van-submit-bar-price-color); font-weight: @font-weight-bold; - font-size: @submit-bar-price-font-size; + font-size: var(--van-submit-bar-price-font-size); &-integer { - font-size: @submit-bar-price-integer-font-size; - font-family: @submit-bar-price-font-family; + font-size: var(--van-submit-bar-price-integer-font-size); + font-family: var(--van-submit-bar-price-font-family); } } &__button { - width: @submit-bar-button-width; - height: @submit-bar-button-height; + width: var(--van-submit-bar-button-width); + height: var(--van-submit-bar-button-height); font-weight: @font-weight-bold; border: none; diff --git a/src/swipe-item/index.less b/src/swipe-item/index.less index 6ced538c1..b997f0224 100644 --- a/src/swipe-item/index.less +++ b/src/swipe-item/index.less @@ -1,5 +1,3 @@ -@import './var.less'; - .van-swipe-item { position: relative; flex-shrink: 0; diff --git a/src/swipe-item/var.less b/src/swipe-item/var.less deleted file mode 100644 index 2397ef049..000000000 --- a/src/swipe-item/var.less +++ /dev/null @@ -1 +0,0 @@ -@import '../style/var.less'; diff --git a/src/swipe/index.less b/src/swipe/index.less index 1134ca286..8fdf7e0e8 100644 --- a/src/swipe/index.less +++ b/src/swipe/index.less @@ -1,5 +1,14 @@ @import './var.less'; +:root { + --van-swipe-indicator-size: @swipe-indicator-size; + --van-swipe-indicator-margin: @swipe-indicator-margin; + --van-swipe-indicator-active-opacity: @swipe-indicator-active-opacity; + --van-swipe-indicator-inactive-opacity: @swipe-indicator-inactive-opacity; + --van-swipe-indicator-active-background-color: @swipe-indicator-active-background-color; + --van-swipe-indicator-inactive-background-color: @swipe-indicator-inactive-background-color; +} + .van-swipe { position: relative; overflow: hidden; @@ -17,7 +26,7 @@ &__indicators { position: absolute; - bottom: @swipe-indicator-margin; + bottom: var(--van-swipe-indicator-margin); left: 50%; display: flex; transform: translateX(-50%); @@ -25,32 +34,32 @@ &--vertical { top: 50%; bottom: auto; - left: @swipe-indicator-margin; + left: var(--van-swipe-indicator-margin); flex-direction: column; transform: translateY(-50%); .van-swipe__indicator:not(:last-child) { - margin-bottom: @swipe-indicator-size; + margin-bottom: var(--van-swipe-indicator-size); } } } &__indicator { - width: @swipe-indicator-size; - height: @swipe-indicator-size; - background-color: @swipe-indicator-inactive-background-color; + width: var(--van-swipe-indicator-size); + height: var(--van-swipe-indicator-size); + background-color: var(--van-swipe-indicator-inactive-background-color); border-radius: 100%; - opacity: @swipe-indicator-inactive-opacity; + opacity: var(--van-swipe-indicator-inactive-opacity); transition: opacity @animation-duration-fast, background-color @animation-duration-fast; &:not(:last-child) { - margin-right: @swipe-indicator-size; + margin-right: var(--van-swipe-indicator-size); } &--active { - background-color: @swipe-indicator-active-background-color; - opacity: @swipe-indicator-active-opacity; + background-color: var(--van-swipe-indicator-active-background-color); + opacity: var(--van-swipe-indicator-active-opacity); } } } diff --git a/src/switch/index.less b/src/switch/index.less index dea0e68d1..dc00a157e 100644 --- a/src/switch/index.less +++ b/src/switch/index.less @@ -1,28 +1,42 @@ @import './var.less'; +:root { + --van-switch-size: @switch-size; + --van-switch-width: @switch-width; + --van-switch-height: @switch-height; + --van-switch-node-size: @switch-node-size; + --van-switch-node-background-color: @switch-node-background-color; + --van-switch-node-box-shadow: @switch-node-box-shadow; + --van-switch-background-color: @switch-background-color; + --van-switch-on-background-color: @switch-on-background-color; + --van-switch-transition-duration: @switch-transition-duration; + --van-switch-disabled-opacity: @switch-disabled-opacity; + --van-switch-border: @switch-border; +} + .van-switch { position: relative; display: inline-block; box-sizing: content-box; - width: @switch-width; - height: @switch-height; - font-size: @switch-size; - background-color: @switch-background-color; - border: @switch-border; - border-radius: @switch-node-size; + width: var(--van-switch-width); + height: var(--van-switch-height); + font-size: var(--van-switch-size); + background-color: var(--van-switch-background-color); + border: var(--van-switch-border); + border-radius: var(--van-switch-node-size); cursor: pointer; - transition: background-color @switch-transition-duration; + transition: background-color var(--van-switch-transition-duration); &__node { position: absolute; top: 0; left: 0; - width: @switch-node-size; - height: @switch-node-size; - background-color: @switch-node-background-color; + width: var(--van-switch-node-size); + height: var(--van-switch-node-size); + background-color: var(--van-switch-node-background-color); border-radius: 100%; - box-shadow: @switch-node-box-shadow; - transition: transform @switch-transition-duration + box-shadow: var(--van-switch-node-box-shadow); + transition: transform var(--van-switch-transition-duration) cubic-bezier(0.3, 1.05, 0.4, 1.05); } @@ -35,20 +49,22 @@ } &--on { - background-color: @switch-on-background-color; + background-color: var(--van-switch-on-background-color); .van-switch__node { - transform: translateX(@switch-width - @switch-node-size); + transform: translateX( + calc(var(--van-switch-width) - var(--van-switch-node-size)) + ); } .van-switch__loading { - color: @switch-on-background-color; + color: var(--van-switch-on-background-color); } } &--disabled { cursor: not-allowed; - opacity: @switch-disabled-opacity; + opacity: var(--van-switch-disabled-opacity); } &--loading { diff --git a/src/tabbar-item/index.less b/src/tabbar-item/index.less index d82d70f01..ce32b2afb 100644 --- a/src/tabbar-item/index.less +++ b/src/tabbar-item/index.less @@ -1,19 +1,29 @@ @import './var.less'; +:root { + --van-tabbar-item-font-size: @tabbar-item-font-size; + --van-tabbar-item-text-color: @tabbar-item-text-color; + --van-tabbar-item-active-color: @tabbar-item-active-color; + --van-tabbar-item-active-background-color: @tabbar-item-active-background-color; + --van-tabbar-item-line-height: @tabbar-item-line-height; + --van-tabbar-item-icon-size: @tabbar-item-icon-size; + --van-tabbar-item-margin-bottom: @tabbar-item-margin-bottom; +} + .van-tabbar-item { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; - color: @tabbar-item-text-color; - font-size: @tabbar-item-font-size; - line-height: @tabbar-item-line-height; + color: var(--van-tabbar-item-text-color); + font-size: var(--van-tabbar-item-font-size); + line-height: var(--van-tabbar-item-line-height); cursor: pointer; &__icon { - margin-bottom: @tabbar-item-margin-bottom; - font-size: @tabbar-item-icon-size; + margin-bottom: var(--van-tabbar-item-margin-bottom); + font-size: var(--van-tabbar-item-icon-size); .van-icon { display: block; @@ -26,8 +36,8 @@ } &--active { - color: @tabbar-item-active-color; - background-color: @tabbar-item-active-background-color; + color: var(--van-tabbar-item-active-color); + background-color: var(--van-tabbar-item-active-background-color); } .van-badge { diff --git a/src/tabbar/index.less b/src/tabbar/index.less index 3e342afef..02b921db9 100644 --- a/src/tabbar/index.less +++ b/src/tabbar/index.less @@ -1,13 +1,19 @@ @import './var.less'; @import '../style/mixins/safe-area.less'; +:root { + --van-tabbar-height: @tabbar-height; + --van-tabbar-z-index: @tabbar-z-index; + --van-tabbar-background-color: @tabbar-background-color; +} + .van-tabbar { - z-index: @tabbar-z-index; + z-index: var(--van-tabbar-z-index); display: flex; box-sizing: content-box; width: 100%; - height: @tabbar-height; - background-color: @tabbar-background-color; + height: var(--van-tabbar-height); + background-color: var(--van-tabbar-background-color); .safe-area-inset-bottom(); &--fixed { diff --git a/src/tabs/index.less b/src/tabs/index.less index 8e105d134..d27acf603 100644 --- a/src/tabs/index.less +++ b/src/tabs/index.less @@ -1,5 +1,20 @@ @import './var.less'; +:root { + --van-tab-text-color: @tab-text-color; + --van-tab-active-text-color: @tab-active-text-color; + --van-tab-disabled-text-color: @tab-disabled-text-color; + --van-tab-font-size: @tab-font-size; + --van-tab-line-height: @tab-line-height; + --van-tabs-default-color: @tabs-default-color; + --van-tabs-line-height: @tabs-line-height; + --van-tabs-card-height: @tabs-card-height; + --van-tabs-nav-background-color: @tabs-nav-background-color; + --van-tabs-bottom-bar-width: @tabs-bottom-bar-width; + --van-tabs-bottom-bar-height: @tabs-bottom-bar-height; + --van-tabs-bottom-bar-color: @tabs-bottom-bar-color; +} + .van-tab { position: relative; display: flex; @@ -8,18 +23,18 @@ justify-content: center; box-sizing: border-box; padding: 0 @padding-base; - color: @tab-text-color; - font-size: @tab-font-size; - line-height: @tab-line-height; + color: var(--van-tab-text-color); + font-size: var(--van-tab-font-size); + line-height: var(--van-tab-line-height); cursor: pointer; &--active { - color: @tab-active-text-color; + color: var(--van-tab-active-text-color); font-weight: @font-weight-bold; } &--disabled { - color: @tab-disabled-text-color; + color: var(--van-tab-disabled-text-color); cursor: not-allowed; } @@ -69,7 +84,7 @@ &__nav { position: relative; display: flex; - background-color: @tabs-nav-background-color; + background-color: var(--van-tabs-nav-background-color); user-select: none; &--line { @@ -85,14 +100,14 @@ &--card { box-sizing: border-box; - height: @tabs-card-height; + height: var(--van-tabs-card-height); margin: 0 @padding-md; - border: @border-width-base solid @tabs-default-color; + border: @border-width-base solid var(--van-tabs-default-color); border-radius: @border-radius-sm; .van-tab { - color: @tabs-default-color; - border-right: @border-width-base solid @tabs-default-color; + color: var(--van-tabs-default-color); + border-right: @border-width-base solid var(--van-tabs-default-color); &:last-child { border-right: none; @@ -100,11 +115,11 @@ &.van-tab--active { color: @white; - background-color: @tabs-default-color; + background-color: var(--van-tabs-default-color); } &--disabled { - color: @tab-disabled-text-color; + color: var(--van-tab-disabled-text-color); } } } @@ -115,10 +130,10 @@ bottom: 15px; left: 0; z-index: 1; - width: @tabs-bottom-bar-width; - height: @tabs-bottom-bar-height; - background-color: @tabs-bottom-bar-color; - border-radius: @tabs-bottom-bar-height; + width: var(--van-tabs-bottom-bar-width); + height: var(--van-tabs-bottom-bar-height); + background-color: var(--van-tabs-bottom-bar-color); + border-radius: var(--van-tabs-bottom-bar-height); } &__track { @@ -137,13 +152,13 @@ &--line { .van-tabs__wrap { - height: @tabs-line-height; + height: var(--van-tabs-line-height); } } &--card { > .van-tabs__wrap { - height: @tabs-card-height; + height: var(--van-tabs-card-height); } } } diff --git a/src/tag/index.less b/src/tag/index.less index 91c1b5d80..87bd5aaa5 100644 --- a/src/tag/index.less +++ b/src/tag/index.less @@ -1,57 +1,76 @@ @import './var.less'; +:root { + --van-tag-padding: @tag-padding; + --van-tag-text-color: @tag-text-color; + --van-tag-font-size: @tag-font-size; + --van-tag-border-radius: @tag-border-radius; + --van-tag-line-height: @tag-line-height; + --van-tag-medium-padding: @tag-medium-padding; + --van-tag-large-padding: @tag-large-padding; + --van-tag-large-border-radius: @tag-large-border-radius; + --van-tag-large-font-size: @tag-large-font-size; + --van-tag-round-border-radius: @tag-round-border-radius; + --van-tag-danger-color: @tag-danger-color; + --van-tag-primary-color: @tag-primary-color; + --van-tag-success-color: @tag-success-color; + --van-tag-warning-color: @tag-warning-color; + --van-tag-default-color: @tag-default-color; + --van-tag-plain-background-color: @tag-plain-background-color; +} + .van-tag { position: relative; display: inline-flex; align-items: center; - padding: @tag-padding; - color: @tag-text-color; - font-size: @tag-font-size; - line-height: @tag-line-height; - border-radius: @tag-border-radius; + padding: var(--van-tag-padding); + color: var(--van-tag-text-color); + font-size: var(--van-tag-font-size); + line-height: var(--van-tag-line-height); + border-radius: var(--van-tag-border-radius); &--default { - background-color: @tag-default-color; + background-color: var(--van-tag-default-color); &.van-tag--plain { - color: @tag-default-color; + color: var(--van-tag-default-color); } } &--danger { - background-color: @tag-danger-color; + background-color: var(--van-tag-danger-color); &.van-tag--plain { - color: @tag-danger-color; + color: var(--van-tag-danger-color); } } &--primary { - background-color: @tag-primary-color; + background-color: var(--van-tag-primary-color); &.van-tag--plain { - color: @tag-primary-color; + color: var(--van-tag-primary-color); } } &--success { - background-color: @tag-success-color; + background-color: var(--van-tag-success-color); &.van-tag--plain { - color: @tag-success-color; + color: var(--van-tag-success-color); } } &--warning { - background-color: @tag-warning-color; + background-color: var(--van-tag-warning-color); &.van-tag--plain { - color: @tag-warning-color; + color: var(--van-tag-warning-color); } } &--plain { - background-color: @tag-plain-background-color; + background-color: var(--van-tag-plain-background-color); border-color: currentColor; &::before { @@ -69,17 +88,18 @@ } &--medium { - padding: @tag-medium-padding; + padding: var(--van-tag-medium-padding); } &--large { - padding: @tag-large-padding; - font-size: @tag-large-font-size; - border-radius: @tag-large-border-radius; + padding: var(--van-tag-large-padding); + font-size: var(--van-tag-large-font-size); + border-radius: var(--van-tag-large-border-radius); } &--mark { - border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0; + border-radius: 0 var(--van-tag-round-border-radius) + var(--van-tag-round-border-radius) 0; &::after { display: block; @@ -89,7 +109,7 @@ } &--round { - border-radius: @tag-round-border-radius; + border-radius: var(--van-tag-round-border-radius); } &__close { diff --git a/src/toast/index.less b/src/toast/index.less index d597afec8..7c8638611 100644 --- a/src/toast/index.less +++ b/src/toast/index.less @@ -1,5 +1,23 @@ @import './var.less'; +:root { + --van-toast-max-width: @toast-max-width; + --van-toast-font-size: @toast-font-size; + --van-toast-text-color: @toast-text-color; + --van-toast-loading-icon-color: @toast-loading-icon-color; + --van-toast-line-height: @toast-line-height; + --van-toast-border-radius: @toast-border-radius; + --van-toast-background-color: @toast-background-color; + --van-toast-icon-size: @toast-icon-size; + --van-toast-text-min-width: @toast-text-min-width; + --van-toast-text-padding: @toast-text-padding; + --van-toast-default-padding: @toast-default-padding; + --van-toast-default-width: @toast-default-width; + --van-toast-default-min-height: @toast-default-min-height; + --van-toast-position-top-distance: @toast-position-top-distance; + --van-toast-position-bottom-distance: @toast-position-bottom-distance; +} + .van-toast { display: flex; flex-direction: column; @@ -9,20 +27,20 @@ transition: all @animation-duration-fast; // hack for avoid max-width when use left & fixed - width: @toast-default-width; - max-width: @toast-max-width; - min-height: @toast-default-min-height; - padding: @toast-default-padding; - color: @toast-text-color; - font-size: @toast-font-size; - line-height: @toast-line-height; + width: var(--van-toast-default-width); + max-width: var(--van-toast-max-width); + min-height: var(--van-toast-default-min-height); + padding: var(--van-toast-default-padding); + color: var(--van-toast-text-color); + font-size: var(--van-toast-font-size); + line-height: var(--van-toast-line-height); // allow newline character white-space: pre-wrap; text-align: center; word-wrap: break-word; - background-color: @toast-background-color; - border-radius: @toast-border-radius; + background-color: var(--van-toast-background-color); + border-radius: var(--van-toast-border-radius); &--unclickable { // lock scroll @@ -38,9 +56,9 @@ &--text, &--html { width: fit-content; - min-width: @toast-text-min-width; + min-width: var(--van-toast-text-min-width); min-height: 0; - padding: @toast-text-padding; + padding: var(--van-toast-text-padding); .van-toast__text { margin-top: 0; @@ -48,21 +66,21 @@ } &--top { - top: @toast-position-top-distance; + top: var(--van-toast-position-top-distance); } &--bottom { top: auto; - bottom: @toast-position-bottom-distance; + bottom: var(--van-toast-position-bottom-distance); } &__icon { - font-size: @toast-icon-size; + font-size: var(--van-toast-icon-size); } &__loading { padding: @padding-base; - color: @toast-loading-icon-color; + color: var(--van-toast-loading-icon-color); } &__text { diff --git a/src/tree-select/index.less b/src/tree-select/index.less index ab97621b6..d2df6b6f6 100644 --- a/src/tree-select/index.less +++ b/src/tree-select/index.less @@ -1,26 +1,37 @@ @import './var.less'; +:root { + --van-tree-select-font-size: @tree-select-font-size; + --van-tree-select-nav-background-color: @tree-select-nav-background-color; + --van-tree-select-content-background-color: @tree-select-content-background-color; + --van-tree-select-nav-item-padding: @tree-select-nav-item-padding; + --van-tree-select-item-height: @tree-select-item-height; + --van-tree-select-item-active-color: @tree-select-item-active-color; + --van-tree-select-item-disabled-color: @tree-select-item-disabled-color; + --van-tree-select-item-selected-size: @tree-select-item-selected-size; +} + .van-tree-select { position: relative; display: flex; - font-size: @tree-select-font-size; + font-size: var(--van-tree-select-font-size); user-select: none; &__nav { flex: 1; overflow-y: auto; - background-color: @tree-select-nav-background-color; + background-color: var(--van-tree-select-nav-background-color); -webkit-overflow-scrolling: touch; &-item { - padding: @tree-select-nav-item-padding; + padding: var(--van-tree-select-nav-item-padding); } } &__content { flex: 2; overflow-y: auto; - background-color: @tree-select-content-background-color; + background-color: var(--van-tree-select-content-background-color); -webkit-overflow-scrolling: touch; } @@ -28,11 +39,11 @@ position: relative; padding: 0 32px 0 @padding-md; font-weight: @font-weight-bold; - line-height: @tree-select-item-height; + line-height: var(--van-tree-select-item-height); cursor: pointer; &--active { - color: @tree-select-item-active-color; + color: var(--van-tree-select-item-active-color); } &:active { @@ -40,7 +51,7 @@ } &--disabled { - color: @tree-select-item-disabled-color; + color: var(--van-tree-select-item-disabled-color); cursor: not-allowed; &:active { @@ -54,6 +65,6 @@ top: 50%; right: @padding-md; margin-top: -@padding-xs; - font-size: @tree-select-item-selected-size; + font-size: var(--van-tree-select-item-selected-size); } } diff --git a/src/uploader/index.less b/src/uploader/index.less index a9f42df56..1a846399a 100644 --- a/src/uploader/index.less +++ b/src/uploader/index.less @@ -1,5 +1,33 @@ @import './var.less'; +:root { + --van-uploader-size: @uploader-size; + --van-uploader-icon-size: @uploader-icon-size; + --van-uploader-icon-color: @uploader-icon-color; + --van-uploader-text-color: @uploader-text-color; + --van-uploader-text-font-size: @uploader-text-font-size; + --van-uploader-upload-background-color: @uploader-upload-background-color; + --van-uploader-upload-active-color: @uploader-upload-active-color; + --van-uploader-delete-color: @uploader-delete-color; + --van-uploader-delete-icon-size: @uploader-delete-icon-size; + --van-uploader-delete-background-color: @uploader-delete-background-color; + --van-uploader-file-background-color: @uploader-file-background-color; + --van-uploader-file-icon-size: @uploader-file-icon-size; + --van-uploader-file-icon-color: @uploader-file-icon-color; + --van-uploader-file-name-padding: @uploader-file-name-padding; + --van-uploader-file-name-margin-top: @uploader-file-name-margin-top; + --van-uploader-file-name-font-size: @uploader-file-name-font-size; + --van-uploader-file-name-text-color: @uploader-file-name-text-color; + --van-uploader-mask-text-color: @uploader-mask-text-color; + --van-uploader-mask-background-color: @uploader-mask-background-color; + --van-uploader-mask-icon-size: @uploader-mask-icon-size; + --van-uploader-mask-message-font-size: @uploader-mask-message-font-size; + --van-uploader-mask-message-line-height: @uploader-mask-message-line-height; + --van-uploader-loading-icon-size: @uploader-loading-icon-size; + --van-uploader-loading-icon-color: @uploader-loading-icon-color; + --van-uploader-disabled-opacity: @uploader-disabled-opacity; +} + .van-uploader { position: relative; display: inline-block; @@ -9,7 +37,7 @@ flex-wrap: wrap; &--disabled { - opacity: @uploader-disabled-opacity; + opacity: var(--van-uploader-disabled-opacity); } } @@ -39,24 +67,24 @@ align-items: center; justify-content: center; box-sizing: border-box; - width: @uploader-size; - height: @uploader-size; + width: var(--van-uploader-size); + height: var(--van-uploader-size); margin: 0 @padding-xs @padding-xs 0; - background-color: @uploader-upload-background-color; + background-color: var(--van-uploader-upload-background-color); &:active { - background-color: @uploader-upload-active-color; + background-color: var(--van-uploader-upload-active-color); } &-icon { - color: @uploader-icon-color; - font-size: @uploader-icon-size; + color: var(--van-uploader-icon-color); + font-size: var(--van-uploader-icon-size); } &-text { margin-top: @padding-xs; - color: @uploader-text-color; - font-size: @uploader-text-font-size; + color: var(--van-uploader-text-color); + font-size: var(--van-uploader-text-font-size); } } @@ -67,8 +95,8 @@ &-image { display: block; - width: @uploader-size; - height: @uploader-size; + width: var(--van-uploader-size); + height: var(--van-uploader-size); overflow: hidden; } @@ -76,9 +104,9 @@ position: absolute; top: 0; right: 0; - width: @uploader-delete-icon-size; - height: @uploader-delete-icon-size; - background-color: @uploader-delete-background-color; + width: var(--van-uploader-delete-icon-size); + height: var(--van-uploader-delete-icon-size); + background-color: var(--van-uploader-delete-background-color); border-radius: 0 0 0 12px; &-icon { @@ -86,7 +114,7 @@ top: -2px; right: -2px; color: #fff; - color: @uploader-delete-color; + color: var(--van-uploader-delete-color); font-size: 16px; transform: scale(0.5); } @@ -111,25 +139,25 @@ flex-direction: column; align-items: center; justify-content: center; - color: @uploader-mask-text-color; - background-color: @uploader-mask-background-color; + color: var(--van-uploader-mask-text-color); + background-color: var(--van-uploader-mask-background-color); &-icon { - font-size: @uploader-mask-icon-size; + font-size: var(--van-uploader-mask-icon-size); } &-message { margin-top: 6px; padding: 0 @padding-base; - font-size: @uploader-mask-message-font-size; - line-height: @uploader-mask-message-line-height; + font-size: var(--van-uploader-mask-message-font-size); + line-height: var(--van-uploader-mask-message-line-height); } } &__loading { - width: @uploader-loading-icon-size; - height: @uploader-loading-icon-size; - color: @uploader-loading-icon-color; + width: var(--van-uploader-loading-icon-size); + height: var(--van-uploader-loading-icon-size); + color: var(--van-uploader-loading-icon-color); } &__file { @@ -137,22 +165,22 @@ flex-direction: column; align-items: center; justify-content: center; - width: @uploader-size; - height: @uploader-size; - background-color: @uploader-file-background-color; + width: var(--van-uploader-size); + height: var(--van-uploader-size); + background-color: var(--van-uploader-file-background-color); &-icon { - color: @uploader-file-icon-color; - font-size: @uploader-file-icon-size; + color: var(--van-uploader-file-icon-color); + font-size: var(--van-uploader-file-icon-size); } &-name { box-sizing: border-box; width: 100%; - margin-top: @uploader-file-name-margin-top; - padding: @uploader-file-name-padding; - color: @uploader-file-name-text-color; - font-size: @uploader-file-name-font-size; + margin-top: var(--van-uploader-file-name-margin-top); + padding: var(--van-uploader-file-name-padding); + color: var(--van-uploader-file-name-text-color); + font-size: var(--van-uploader-file-name-font-size); text-align: center; } }