diff --git a/src/action-bar-button/index.less b/src/action-bar-button/index.less index 07de58d15..8d17bd889 100644 --- a/src/action-bar-button/index.less +++ b/src/action-bar-button/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-action-bar-button { flex: 1; diff --git a/src/action-bar-button/var.less b/src/action-bar-button/var.less new file mode 100644 index 000000000..8246a39d9 --- /dev/null +++ b/src/action-bar-button/var.less @@ -0,0 +1,5 @@ +@import '../style/var.less'; + +@action-bar-button-height: 40px; +@action-bar-button-warning-color: @gradient-orange; +@action-bar-button-danger-color: @gradient-red; diff --git a/src/action-bar-icon/index.less b/src/action-bar-icon/index.less index 46b2c763f..a29f4c62a 100644 --- a/src/action-bar-icon/index.less +++ b/src/action-bar-icon/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-action-bar-icon { display: flex; diff --git a/src/action-bar-icon/var.less b/src/action-bar-icon/var.less new file mode 100644 index 000000000..75220c3b3 --- /dev/null +++ b/src/action-bar-icon/var.less @@ -0,0 +1,9 @@ +@import '../style/var.less'; + +@action-bar-icon-width: 48px; +@action-bar-icon-height: 100%; +@action-bar-icon-color: @text-color; +@action-bar-icon-size: 18px; +@action-bar-icon-font-size: @font-size-xs; +@action-bar-icon-active-color: @active-color; +@action-bar-icon-text-color: @gray-7; diff --git a/src/action-bar/index.less b/src/action-bar/index.less index 67a5c0120..70d58ed46 100644 --- a/src/action-bar/index.less +++ b/src/action-bar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/safe-area.less'; .van-action-bar { diff --git a/src/action-bar/var.less b/src/action-bar/var.less new file mode 100644 index 000000000..7f9df153c --- /dev/null +++ b/src/action-bar/var.less @@ -0,0 +1,4 @@ +@import '../style/var.less'; + +@action-bar-background-color: @white; +@action-bar-height: 50px; diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less index 81724431b..1202a9a7e 100644 --- a/src/action-sheet/index.less +++ b/src/action-sheet/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/hairline'; .van-action-sheet { @@ -87,7 +87,7 @@ text-align: center; &::after { - .hairline-bottom(@cell-border-color, @padding-md, @padding-md); + .hairline-bottom(@border-color, @padding-md, @padding-md); } } diff --git a/src/action-sheet/var.less b/src/action-sheet/var.less new file mode 100644 index 000000000..13dd7eaf0 --- /dev/null +++ b/src/action-sheet/var.less @@ -0,0 +1,24 @@ +@import '../style/var.less'; + +@action-sheet-max-height: 80%; +@action-sheet-header-height: 48px; +@action-sheet-header-font-size: @font-size-lg; +@action-sheet-description-color: @gray-6; +@action-sheet-description-font-size: @font-size-md; +@action-sheet-description-line-height: @line-height-md; +@action-sheet-item-background: @white; +@action-sheet-item-font-size: @font-size-lg; +@action-sheet-item-line-height: @line-height-lg; +@action-sheet-item-text-color: @text-color; +@action-sheet-item-disabled-text-color: @gray-5; +@action-sheet-subname-color: @gray-6; +@action-sheet-subname-font-size: @font-size-sm; +@action-sheet-subname-line-height: @line-height-sm; +@action-sheet-close-icon-size: 22px; +@action-sheet-close-icon-color: @gray-5; +@action-sheet-close-icon-active-color: @gray-6; +@action-sheet-close-icon-padding: 0 @padding-md; +@action-sheet-cancel-text-color: @gray-7; +@action-sheet-cancel-padding-top: @padding-xs; +@action-sheet-cancel-padding-color: @background-color; +@action-sheet-loading-icon-size: 22px; diff --git a/src/address-edit/index.less b/src/address-edit/index.less index 46e7547d4..509bd8cd6 100644 --- a/src/address-edit/index.less +++ b/src/address-edit/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-address-edit { padding: @address-edit-padding; diff --git a/src/address-edit/var.less b/src/address-edit/var.less new file mode 100644 index 000000000..a1edb1c6c --- /dev/null +++ b/src/address-edit/var.less @@ -0,0 +1,7 @@ +@import '../style/var.less'; + +@address-edit-padding: @padding-sm; +@address-edit-buttons-padding: @padding-xl @padding-base; +@address-edit-button-margin-bottom: @padding-sm; +@address-edit-detail-finish-color: @blue; +@address-edit-detail-finish-font-size: @font-size-sm; diff --git a/src/address-list/index.less b/src/address-list/index.less index 5c757bae5..c9858b177 100644 --- a/src/address-list/index.less +++ b/src/address-list/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/safe-area.less'; .van-address-list { diff --git a/src/address-list/var.less b/src/address-list/var.less new file mode 100644 index 000000000..6b67c5f6f --- /dev/null +++ b/src/address-list/var.less @@ -0,0 +1,15 @@ +@import '../style/var.less'; + +@address-list-padding: @padding-sm @padding-sm 80px; +@address-list-disabled-text-color: @gray-6; +@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md; +@address-list-disabled-text-font-size: @font-size-md; +@address-list-disabled-text-line-height: @line-height-md; +@address-list-add-button-z-index: 999; +@address-list-item-padding: @padding-sm; +@address-list-item-text-color: @text-color; +@address-list-item-disabled-text-color: @gray-5; +@address-list-item-font-size: 13px; +@address-list-item-line-height: @line-height-sm; +@address-list-item-radio-icon-color: @red; +@address-list-edit-icon-size: 20px; diff --git a/src/badge/index.less b/src/badge/index.less index e485264c3..51df56491 100644 --- a/src/badge/index.less +++ b/src/badge/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-badge { display: inline-block; diff --git a/src/badge/var.less b/src/badge/var.less new file mode 100644 index 000000000..141c4dfd4 --- /dev/null +++ b/src/badge/var.less @@ -0,0 +1,12 @@ +@import '../style/var.less'; + +@badge-size: 16px; +@badge-color: @white; +@badge-padding: 0 3px; +@badge-font-size: @font-size-sm; +@badge-font-weight: @font-weight-bold; +@badge-border-width: @border-width-base; +@badge-background-color: @red; +@badge-dot-color: @red; +@badge-dot-size: 8px; +@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif; diff --git a/src/button/index.less b/src/button/index.less index d0d42d841..e3bb13976 100644 --- a/src/button/index.less +++ b/src/button/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-button { position: relative; diff --git a/src/button/var.less b/src/button/var.less new file mode 100644 index 000000000..541b3ad17 --- /dev/null +++ b/src/button/var.less @@ -0,0 +1,36 @@ +@import '../style/var.less'; + +@button-mini-height: 24px; +@button-mini-padding: 0 @padding-base; +@button-mini-font-size: @font-size-xs; +@button-small-height: 32px; +@button-small-padding: 0 @padding-xs; +@button-small-font-size: @font-size-sm; +@button-normal-padding: 0 15px; +@button-normal-font-size: @font-size-md; +@button-large-height: 50px; +@button-default-height: 44px; +@button-default-line-height: 1.2; +@button-default-font-size: @font-size-lg; +@button-default-color: @text-color; +@button-default-background-color: @white; +@button-default-border-color: @border-color; +@button-primary-color: @white; +@button-primary-background-color: @blue; +@button-primary-border-color: @blue; +@button-success-color: @white; +@button-success-background-color: @green; +@button-success-border-color: @green; +@button-danger-color: @white; +@button-danger-background-color: @red; +@button-danger-border-color: @red; +@button-warning-color: @white; +@button-warning-background-color: @orange; +@button-warning-border-color: @orange; +@button-border-width: @border-width-base; +@button-border-radius: @border-radius-sm; +@button-round-border-radius: @border-radius-max; +@button-plain-background-color: @white; +@button-disabled-opacity: @disabled-opacity; +@button-icon-size: 1.2em; +@button-loading-icon-size: 20px; diff --git a/src/calendar/index.less b/src/calendar/index.less index c04c8020d..3dfe0d3ea 100644 --- a/src/calendar/index.less +++ b/src/calendar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/safe-area.less'; .van-calendar { diff --git a/src/calendar/var.less b/src/calendar/var.less new file mode 100644 index 000000000..95ee046ef --- /dev/null +++ b/src/calendar/var.less @@ -0,0 +1,27 @@ +@import '../style/var.less'; + +@calendar-background-color: @white; +@calendar-popup-height: 80%; +@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); +@calendar-header-title-height: 44px; +@calendar-header-title-font-size: @font-size-lg; +@calendar-header-subtitle-font-size: @font-size-md; +@calendar-weekdays-height: 30px; +@calendar-weekdays-font-size: @font-size-sm; +@calendar-month-title-font-size: @font-size-md; +@calendar-month-mark-color: fade(@gray-2, 80%); +@calendar-month-mark-font-size: 160px; +@calendar-day-height: 64px; +@calendar-day-font-size: @font-size-lg; +@calendar-range-edge-color: @white; +@calendar-range-edge-background-color: @red; +@calendar-range-middle-color: @red; +@calendar-range-middle-background-opacity: 0.1; +@calendar-selected-day-size: 54px; +@calendar-selected-day-color: @white; +@calendar-info-font-size: @font-size-xs; +@calendar-info-line-height: @line-height-xs; +@calendar-selected-day-background-color: @red; +@calendar-day-disabled-color: @gray-5; +@calendar-confirm-button-height: 36px; +@calendar-confirm-button-margin: 7px 0; diff --git a/src/card/index.less b/src/card/index.less index 46f57d9c0..0fd72a59b 100644 --- a/src/card/index.less +++ b/src/card/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-card { position: relative; diff --git a/src/card/var.less b/src/card/var.less new file mode 100644 index 000000000..3e7369ccd --- /dev/null +++ b/src/card/var.less @@ -0,0 +1,18 @@ +@import '../style/var.less'; + +@card-padding: @padding-xs @padding-md; +@card-font-size: @font-size-sm; +@card-text-color: @text-color; +@card-background-color: @background-color-light; +@card-thumb-size: 88px; +@card-thumb-border-radius: @border-radius-lg; +@card-title-line-height: 16px; +@card-desc-color: @gray-7; +@card-desc-line-height: @line-height-md; +@card-price-color: @gray-8; +@card-origin-price-color: @gray-6; +@card-num-color: @gray-6; +@card-origin-price-font-size: @font-size-xs; +@card-price-font-size: @font-size-sm; +@card-price-integer-font-size: @font-size-lg; +@card-price-font-family: @price-integer-font-family; diff --git a/src/cascader/index.less b/src/cascader/index.less index 7715c1460..ed6194dcb 100644 --- a/src/cascader/index.less +++ b/src/cascader/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-cascader { &__header { diff --git a/src/cascader/var.less b/src/cascader/var.less new file mode 100644 index 000000000..8a0869d43 --- /dev/null +++ b/src/cascader/var.less @@ -0,0 +1,14 @@ +@import '../style/var.less'; + +@cascader-header-height: 48px; +@cascader-title-font-size: @font-size-lg; +@cascader-title-line-height: 20px; +@cascader-close-icon-size: 22px; +@cascader-close-icon-color: @gray-5; +@cascader-close-icon-active-color: @gray-6; +@cascader-selected-icon-size: 18px; +@cascader-tabs-height: 48px; +@cascader-active-color: @red; +@cascader-options-height: 384px; +@cascader-tab-color: @text-color; +@cascader-unselected-tab-color: @gray-6; diff --git a/src/cell-group/index.less b/src/cell-group/index.less index a92c3e299..9f5e5d095 100644 --- a/src/cell-group/index.less +++ b/src/cell-group/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-cell-group { background-color: @cell-group-background-color; diff --git a/src/cell-group/var.less b/src/cell-group/var.less new file mode 100644 index 000000000..fa0e5efa1 --- /dev/null +++ b/src/cell-group/var.less @@ -0,0 +1,7 @@ +@import '../style/var.less'; + +@cell-group-background-color: @white; +@cell-group-title-color: @gray-6; +@cell-group-title-padding: @padding-md @padding-md @padding-xs; +@cell-group-title-font-size: @font-size-md; +@cell-group-title-line-height: 16px; diff --git a/src/cell/index.less b/src/cell/index.less index be4d53d42..fcd4287d9 100644 --- a/src/cell/index.less +++ b/src/cell/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/hairline'; .van-cell { diff --git a/src/cell/var.less b/src/cell/var.less new file mode 100644 index 000000000..616fc9581 --- /dev/null +++ b/src/cell/var.less @@ -0,0 +1,21 @@ +@import '../style/var.less'; + +@cell-font-size: @font-size-md; +@cell-line-height: 24px; +@cell-vertical-padding: 10px; +@cell-horizontal-padding: @padding-md; +@cell-text-color: @text-color; +@cell-background-color: @white; +@cell-border-color: @border-color; +@cell-active-color: @active-color; +@cell-required-color: @red; +@cell-label-color: @gray-6; +@cell-label-font-size: @font-size-sm; +@cell-label-line-height: @line-height-sm; +@cell-label-margin-top: @padding-base; +@cell-value-color: @gray-6; +@cell-icon-size: 16px; +@cell-right-icon-color: @gray-6; +@cell-large-vertical-padding: @padding-sm; +@cell-large-title-font-size: @font-size-lg; +@cell-large-label-font-size: @font-size-md; diff --git a/src/checkbox-group/index.less b/src/checkbox-group/index.less index e4d4c106a..cc0ad7fce 100644 --- a/src/checkbox-group/index.less +++ b/src/checkbox-group/index.less @@ -1,5 +1,3 @@ -@import '../style/var.less'; - .van-checkbox-group { &--horizontal { display: flex; diff --git a/src/checkbox/index.less b/src/checkbox/index.less index aca8454d6..e2fc3e71a 100644 --- a/src/checkbox/index.less +++ b/src/checkbox/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-checkbox { display: flex; diff --git a/src/checkbox/var.less b/src/checkbox/var.less new file mode 100644 index 000000000..651284854 --- /dev/null +++ b/src/checkbox/var.less @@ -0,0 +1,11 @@ +@import '../style/var.less'; + +@checkbox-size: 20px; +@checkbox-border-color: @gray-5; +@checkbox-transition-duration: @animation-duration-fast; +@checkbox-label-margin: @padding-xs; +@checkbox-label-color: @text-color; +@checkbox-checked-icon-color: @blue; +@checkbox-disabled-icon-color: @gray-5; +@checkbox-disabled-label-color: @gray-5; +@checkbox-disabled-background-color: @border-color; diff --git a/src/circle/index.less b/src/circle/index.less index d184ee5f0..48672476c 100644 --- a/src/circle/index.less +++ b/src/circle/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-circle { position: relative; diff --git a/src/circle/var.less b/src/circle/var.less new file mode 100644 index 000000000..6bdef611e --- /dev/null +++ b/src/circle/var.less @@ -0,0 +1,9 @@ +@import '../style/var.less'; + +@circle-size: 100px; +@circle-color: @blue; +@circle-layer-color: @white; +@circle-text-color: @text-color; +@circle-text-font-weight: @font-weight-bold; +@circle-text-font-size: @font-size-md; +@circle-text-line-height: @line-height-md; diff --git a/src/col/index.less b/src/col/index.less index 41c40bc5c..568402143 100644 --- a/src/col/index.less +++ b/src/col/index.less @@ -1,5 +1,3 @@ -@import '../style/var.less'; - .van-col { display: block; box-sizing: border-box; diff --git a/src/collapse-item/index.less b/src/collapse-item/index.less index 608736c46..1600d9219 100644 --- a/src/collapse-item/index.less +++ b/src/collapse-item/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/hairline'; .van-collapse-item { @@ -6,7 +6,7 @@ &--border { &::after { - .hairline-top(@cell-border-color, @padding-md, @padding-md); + .hairline-top(@border-color, @padding-md, @padding-md); } } diff --git a/src/collapse-item/var.less b/src/collapse-item/var.less new file mode 100644 index 000000000..4ca1c9ee2 --- /dev/null +++ b/src/collapse-item/var.less @@ -0,0 +1,9 @@ +@import '../style/var.less'; + +@collapse-item-transition-duration: @animation-duration-base; +@collapse-item-content-padding: @padding-sm @padding-md; +@collapse-item-content-font-size: @font-size-md; +@collapse-item-content-line-height: 1.5; +@collapse-item-content-text-color: @gray-6; +@collapse-item-content-background-color: @white; +@collapse-item-title-disabled-color: @gray-5; diff --git a/src/contact-card/index.less b/src/contact-card/index.less index a40182e5b..58913eb77 100644 --- a/src/contact-card/index.less +++ b/src/contact-card/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-contact-card { padding: @contact-card-padding; diff --git a/src/contact-card/var.less b/src/contact-card/var.less new file mode 100644 index 000000000..f1acacdee --- /dev/null +++ b/src/contact-card/var.less @@ -0,0 +1,6 @@ +@import '../style/var.less'; + +@contact-card-padding: @padding-md; +@contact-card-add-icon-size: 40px; +@contact-card-add-icon-color: @blue; +@contact-card-value-line-height: @line-height-md; diff --git a/src/contact-edit/index.less b/src/contact-edit/index.less index f81873fcd..b891a46c3 100644 --- a/src/contact-edit/index.less +++ b/src/contact-edit/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-contact-edit { padding: @contact-edit-padding; diff --git a/src/contact-edit/var.less b/src/contact-edit/var.less new file mode 100644 index 000000000..a74f19f0d --- /dev/null +++ b/src/contact-edit/var.less @@ -0,0 +1,8 @@ +@import '../style/var.less'; + +@contact-edit-padding: @padding-md; +@contact-edit-fields-radius: @border-radius-md; +@contact-edit-buttons-padding: @padding-xl 0; +@contact-edit-button-margin-bottom: @padding-sm; +@contact-edit-button-font-size: 16px; +@contact-edit-field-label-width: 4.1em; diff --git a/src/contact-list/index.less b/src/contact-list/index.less index 3c514c260..c51c7a88c 100644 --- a/src/contact-list/index.less +++ b/src/contact-list/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/safe-area.less'; .van-contact-list { diff --git a/src/contact-list/var.less b/src/contact-list/var.less new file mode 100644 index 000000000..042a14a30 --- /dev/null +++ b/src/contact-list/var.less @@ -0,0 +1,6 @@ +@import '../style/var.less'; + +@contact-list-edit-icon-size: 16px; +@contact-list-add-button-z-index: 999; +@contact-list-item-padding: @padding-md; +@contact-list-item-radio-icon-color: @red; diff --git a/src/count-down/index.less b/src/count-down/index.less index e7a813cc8..153420c03 100644 --- a/src/count-down/index.less +++ b/src/count-down/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-count-down { color: @count-down-text-color; diff --git a/src/count-down/var.less b/src/count-down/var.less new file mode 100644 index 000000000..cb97d9dad --- /dev/null +++ b/src/count-down/var.less @@ -0,0 +1,5 @@ +@import '../style/var.less'; + +@count-down-text-color: @text-color; +@count-down-font-size: @font-size-md; +@count-down-line-height: @line-height-md; diff --git a/src/coupon-cell/index.less b/src/coupon-cell/index.less index f777e8f90..31b0cdab0 100644 --- a/src/coupon-cell/index.less +++ b/src/coupon-cell/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-coupon-cell { &__value--selected { diff --git a/src/coupon-cell/var.less b/src/coupon-cell/var.less new file mode 100644 index 000000000..361bb2b0c --- /dev/null +++ b/src/coupon-cell/var.less @@ -0,0 +1,3 @@ +@import '../style/var.less'; + +@coupon-cell-selected-text-color: @text-color; diff --git a/src/coupon-list/index.less b/src/coupon-list/index.less index 758a0208b..260193a58 100644 --- a/src/coupon-list/index.less +++ b/src/coupon-list/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-coupon-list { position: relative; diff --git a/src/coupon-list/var.less b/src/coupon-list/var.less new file mode 100644 index 000000000..bf2d15341 --- /dev/null +++ b/src/coupon-list/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@coupon-list-background-color: @background-color; +@coupon-list-field-padding: 5px 0 5px @padding-md; +@coupon-list-exchange-button-height: 32px; +@coupon-list-close-button-height: 40px; +@coupon-list-empty-image-size: 200px; +@coupon-list-empty-tip-color: @gray-6; +@coupon-list-empty-tip-font-size: @font-size-md; +@coupon-list-empty-tip-line-height: @line-height-md; diff --git a/src/coupon/index.less b/src/coupon/index.less index 876553e0f..26ba87599 100644 --- a/src/coupon/index.less +++ b/src/coupon/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/ellipsis'; .van-coupon { diff --git a/src/coupon/var.less b/src/coupon/var.less new file mode 100644 index 000000000..b904885aa --- /dev/null +++ b/src/coupon/var.less @@ -0,0 +1,18 @@ +@import '../style/var.less'; + +@coupon-margin: 0 @padding-sm @padding-sm; +@coupon-content-height: 84px; +@coupon-content-padding: 14px 0; +@coupon-background-color: @white; +@coupon-active-background-color: @active-color; +@coupon-border-radius: @border-radius-lg; +@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); +@coupon-head-width: 96px; +@coupon-amount-color: @red; +@coupon-amount-font-size: 30px; +@coupon-currency-font-size: 40%; +@coupon-name-font-size: @font-size-md; +@coupon-disabled-text-color: @gray-6; +@coupon-description-padding: @padding-xs @padding-md; +@coupon-description-border-color: @border-color; +@coupon-corner-checkbox-icon-color: @red; diff --git a/src/dialog/index.less b/src/dialog/index.less index eefb3d7f1..b50353098 100644 --- a/src/dialog/index.less +++ b/src/dialog/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-dialog { top: 45%; diff --git a/src/dialog/var.less b/src/dialog/var.less new file mode 100644 index 000000000..eea227d35 --- /dev/null +++ b/src/dialog/var.less @@ -0,0 +1,21 @@ +@import '../style/var.less'; + +@dialog-width: 320px; +@dialog-small-screen-width: 90%; +@dialog-font-size: @font-size-lg; +@dialog-transition: @animation-duration-base; +@dialog-border-radius: 16px; +@dialog-background-color: @white; +@dialog-header-font-weight: @font-weight-bold; +@dialog-header-line-height: 24px; +@dialog-header-padding-top: 26px; +@dialog-header-isolated-padding: @padding-lg 0; +@dialog-message-padding: @padding-lg; +@dialog-message-font-size: @font-size-md; +@dialog-message-line-height: @line-height-md; +@dialog-message-max-height: 60vh; +@dialog-has-title-message-text-color: @gray-7; +@dialog-has-title-message-padding-top: @padding-xs; +@dialog-button-height: 48px; +@dialog-round-button-height: 36px; +@dialog-confirm-button-text-color: @red; diff --git a/src/divider/index.less b/src/divider/index.less index 5378dae0e..d71fc685f 100644 --- a/src/divider/index.less +++ b/src/divider/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-divider { display: flex; diff --git a/src/divider/var.less b/src/divider/var.less new file mode 100644 index 000000000..87bb0c87c --- /dev/null +++ b/src/divider/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@divider-margin: @padding-md 0; +@divider-text-color: @gray-6; +@divider-font-size: @font-size-md; +@divider-line-height: 24px; +@divider-border-color: @border-color; +@divider-content-padding: @padding-md; +@divider-content-left-width: 10%; +@divider-content-right-width: 10%; diff --git a/src/dropdown-item/index.less b/src/dropdown-item/index.less index a17794ec1..7a171defb 100644 --- a/src/dropdown-item/index.less +++ b/src/dropdown-item/index.less @@ -1,4 +1,5 @@ -@import '../style/var.less'; +@import './var.less'; +@import '../dropdown-menu/var.less'; .van-dropdown-item { position: fixed; diff --git a/src/dropdown-item/var.less b/src/dropdown-item/var.less new file mode 100644 index 000000000..0003409d1 --- /dev/null +++ b/src/dropdown-item/var.less @@ -0,0 +1,3 @@ +@import '../style/var.less'; + +@dropdown-item-z-index: 10; diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less index fb75700a9..52ef568d7 100644 --- a/src/dropdown-menu/index.less +++ b/src/dropdown-menu/index.less @@ -1,4 +1,5 @@ -@import '../style/var.less'; +@import './var.less'; +@import '../dropdown-item/var.less'; .van-dropdown-menu { user-select: none; diff --git a/src/dropdown-menu/var.less b/src/dropdown-menu/var.less new file mode 100644 index 000000000..b83cd4392 --- /dev/null +++ b/src/dropdown-menu/var.less @@ -0,0 +1,13 @@ +@import '../style/var.less'; + +@dropdown-menu-height: 48px; +@dropdown-menu-background-color: @white; +@dropdown-menu-box-shadow: 0 2px 12px fade(@gray-7, 12); +@dropdown-menu-title-font-size: 15px; +@dropdown-menu-title-text-color: @text-color; +@dropdown-menu-title-active-text-color: @red; +@dropdown-menu-title-disabled-text-color: @gray-6; +@dropdown-menu-title-padding: 0 @padding-xs; +@dropdown-menu-title-line-height: @line-height-lg; +@dropdown-menu-option-active-color: @red; +@dropdown-menu-content-max-height: 80%; diff --git a/src/empty/index.less b/src/empty/index.less index d061b0f8c..7c7b4085e 100644 --- a/src/empty/index.less +++ b/src/empty/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-empty { display: flex; diff --git a/src/empty/var.less b/src/empty/var.less new file mode 100644 index 000000000..5e8ac18db --- /dev/null +++ b/src/empty/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@empty-padding: @padding-xl 0; +@empty-image-size: 160px; +@empty-description-margin-top: @padding-md; +@empty-description-padding: 0 60px; +@empty-description-color: @gray-6; +@empty-description-font-size: @font-size-md; +@empty-description-line-height: @line-height-md; +@empty-bottom-margin-top: 24px; diff --git a/src/field/index.less b/src/field/index.less index b7f8a4265..f455831a2 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -1,4 +1,5 @@ -@import '../style/var.less'; +@import './var.less'; +@import '../cell/var.less'; .van-field { &__label { diff --git a/src/field/var.less b/src/field/var.less new file mode 100644 index 000000000..abf97681b --- /dev/null +++ b/src/field/var.less @@ -0,0 +1,20 @@ +@import '../style/var.less'; + +@field-label-width: 6.2em; +@field-label-color: @gray-7; +@field-label-margin-right: @padding-sm; +@field-input-text-color: @text-color; +@field-input-error-text-color: @red; +@field-input-disabled-text-color: @gray-5; +@field-placeholder-text-color: @gray-5; +@field-icon-size: 16px; +@field-clear-icon-size: 16px; +@field-clear-icon-color: @gray-5; +@field-right-icon-color: @gray-6; +@field-error-message-color: @red; +@field-error-message-text-color: 12px; +@field-text-area-min-height: 60px; +@field-word-limit-color: @gray-7; +@field-word-limit-font-size: @font-size-sm; +@field-word-limit-line-height: 16px; +@field-disabled-text-color: @gray-5; diff --git a/src/grid-item/index.less b/src/grid-item/index.less index 97821d574..49e91a884 100644 --- a/src/grid-item/index.less +++ b/src/grid-item/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-grid-item { position: relative; diff --git a/src/grid-item/var.less b/src/grid-item/var.less new file mode 100644 index 000000000..d6b8589a9 --- /dev/null +++ b/src/grid-item/var.less @@ -0,0 +1,8 @@ +@import '../style/var.less'; + +@grid-item-content-padding: @padding-md @padding-xs; +@grid-item-content-background-color: @white; +@grid-item-content-active-color: @active-color; +@grid-item-icon-size: 28px; +@grid-item-text-color: @gray-7; +@grid-item-text-font-size: @font-size-sm; diff --git a/src/grid/index.less b/src/grid/index.less index 615996200..35da7356e 100644 --- a/src/grid/index.less +++ b/src/grid/index.less @@ -1,5 +1,3 @@ -@import '../style/var.less'; - .van-grid { display: flex; flex-wrap: wrap; diff --git a/src/icon/index.less b/src/icon/index.less index b0ce5ab45..cae831b14 100644 --- a/src/icon/index.less +++ b/src/icon/index.less @@ -1,4 +1,3 @@ -@import '../style/var.less'; @import '~@vant/icons/src/encode-woff2.less'; .van-icon { diff --git a/src/image-preview/index.less b/src/image-preview/index.less index 190caef02..1b7c69af7 100644 --- a/src/image-preview/index.less +++ b/src/image-preview/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-image-preview { position: fixed; diff --git a/src/image-preview/var.less b/src/image-preview/var.less new file mode 100644 index 000000000..1d27eb74b --- /dev/null +++ b/src/image-preview/var.less @@ -0,0 +1,12 @@ +@import '../style/var.less'; + +@image-preview-index-text-color: @white; +@image-preview-index-font-size: @font-size-md; +@image-preview-index-line-height: @line-height-md; +@image-preview-index-text-shadow: 0 1px 1px @gray-8; +@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9); +@image-preview-close-icon-size: 22px; +@image-preview-close-icon-color: @gray-5; +@image-preview-close-icon-active-color: @gray-6; +@image-preview-close-icon-margin: @padding-md; +@image-preview-close-icon-z-index: 1; diff --git a/src/image/index.less b/src/image/index.less index bf23d9e41..5c9295b25 100644 --- a/src/image/index.less +++ b/src/image/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-image { position: relative; diff --git a/src/image/var.less b/src/image/var.less new file mode 100644 index 000000000..5d95688d7 --- /dev/null +++ b/src/image/var.less @@ -0,0 +1,9 @@ +@import '../style/var.less'; + +@image-placeholder-text-color: @gray-6; +@image-placeholder-font-size: @font-size-md; +@image-placeholder-background-color: @background-color; +@image-loading-icon-size: 32px; +@image-loading-icon-color: @gray-4; +@image-error-icon-size: 32px; +@image-error-icon-color: @gray-4; diff --git a/src/index-anchor/index.less b/src/index-anchor/index.less index b3c708fb2..95fa7359f 100644 --- a/src/index-anchor/index.less +++ b/src/index-anchor/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-index-anchor { z-index: @index-anchor-z-index; diff --git a/src/index-anchor/var.less b/src/index-anchor/var.less new file mode 100644 index 000000000..4e263d3a3 --- /dev/null +++ b/src/index-anchor/var.less @@ -0,0 +1,11 @@ +@import '../style/var.less'; + +@index-anchor-z-index: 1; +@index-anchor-padding: 0 @padding-md; +@index-anchor-text-color: @text-color; +@index-anchor-font-weight: @font-weight-bold; +@index-anchor-font-size: @font-size-md; +@index-anchor-line-height: 32px; +@index-anchor-background-color: transparent; +@index-anchor-sticky-text-color: @red; +@index-anchor-sticky-background-color: @white; diff --git a/src/index-bar/index.less b/src/index-bar/index.less index 472f06029..78d645829 100644 --- a/src/index-bar/index.less +++ b/src/index-bar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-index-bar { &__sidebar { diff --git a/src/index-bar/var.less b/src/index-bar/var.less new file mode 100644 index 000000000..107f7d76f --- /dev/null +++ b/src/index-bar/var.less @@ -0,0 +1,6 @@ +@import '../style/var.less'; + +@index-bar-sidebar-z-index: 2; +@index-bar-index-font-size: @font-size-xs; +@index-bar-index-line-height: @line-height-xs; +@index-bar-index-active-color: @red; diff --git a/src/list/index.less b/src/list/index.less index 99ab6352f..d7284a19f 100644 --- a/src/list/index.less +++ b/src/list/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-list { &__loading, diff --git a/src/list/var.less b/src/list/var.less new file mode 100644 index 000000000..58f7b80fc --- /dev/null +++ b/src/list/var.less @@ -0,0 +1,7 @@ +@import '../style/var.less'; + +@list-icon-margin-right: @padding-base; +@list-text-color: @gray-6; +@list-text-font-size: @font-size-md; +@list-text-line-height: 50px; +@list-loading-icon-size: 16px; diff --git a/src/loading/index.less b/src/loading/index.less index 33fb6a7e1..7f1d29931 100644 --- a/src/loading/index.less +++ b/src/loading/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-loading { position: relative; diff --git a/src/loading/var.less b/src/loading/var.less new file mode 100644 index 000000000..76883935f --- /dev/null +++ b/src/loading/var.less @@ -0,0 +1,7 @@ +@import '../style/var.less'; + +@loading-text-color: @gray-6; +@loading-text-font-size: @font-size-md; +@loading-spinner-color: @gray-5; +@loading-spinner-size: 30px; +@loading-spinner-animation-duration: 0.8s; diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index d6a4cb62e..76515940f 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-nav-bar { position: relative; diff --git a/src/nav-bar/var.less b/src/nav-bar/var.less new file mode 100644 index 000000000..6878c2098 --- /dev/null +++ b/src/nav-bar/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@nav-bar-height: 46px; +@nav-bar-background-color: @white; +@nav-bar-arrow-size: 16px; +@nav-bar-icon-color: @blue; +@nav-bar-text-color: @blue; +@nav-bar-title-font-size: @font-size-lg; +@nav-bar-title-text-color: @text-color; +@nav-bar-z-index: 1; diff --git a/src/notice-bar/index.less b/src/notice-bar/index.less index 7fb3620b4..6ee2c2761 100644 --- a/src/notice-bar/index.less +++ b/src/notice-bar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-notice-bar { position: relative; diff --git a/src/notice-bar/var.less b/src/notice-bar/var.less new file mode 100644 index 000000000..cf4b038ca --- /dev/null +++ b/src/notice-bar/var.less @@ -0,0 +1,11 @@ +@import '../style/var.less'; + +@notice-bar-height: 40px; +@notice-bar-padding: 0 @padding-md; +@notice-bar-wrapable-padding: @padding-xs @padding-md; +@notice-bar-text-color: @orange-dark; +@notice-bar-font-size: @font-size-md; +@notice-bar-line-height: 24px; +@notice-bar-background-color: @orange-light; +@notice-bar-icon-size: 16px; +@notice-bar-icon-min-width: 24px; diff --git a/src/notify/index.less b/src/notify/index.less index 903328d9a..9c2c9d6b3 100644 --- a/src/notify/index.less +++ b/src/notify/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-notify { display: flex; diff --git a/src/notify/var.less b/src/notify/var.less new file mode 100644 index 000000000..3fb554ecd --- /dev/null +++ b/src/notify/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@notify-text-color: @white; +@notify-padding: @padding-xs @padding-md; +@notify-font-size: @font-size-md; +@notify-line-height: @line-height-md; +@notify-primary-background-color: @blue; +@notify-success-background-color: @green; +@notify-danger-background-color: @red; +@notify-warning-background-color: @orange; diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index e379fb377..e4b1e295f 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -202,23 +202,19 @@ export default { How to use: [Custom Theme](#/en-US/theme). -| Name | Default Value | Description | -| --- | --- | --- | -| @number-keyboard-background-color | `@gray-2` | - | -| @number-keyboard-key-height | `48px` | - | -| @number-keyboard-key-font-size | `28px` | - | -| @number-keyboard-key-active-color | `@gray-3` | - | -| @number-keyboard-delete-font-size | `@font-size-lg` | - | -| @number-keyboard-title-color | `@gray-7` | - | -| @number-keyboard-title-height | `34px` | - | -| @number-keyboard-title-font-size | `@font-size-lg` | - | -| @number-keyboard-close-padding | `0 @padding-md` | - | -| @number-keyboard-close-color | `@text-link-color` | - | -| @number-keyboard-close-font-size | `@font-size-md` | - | -| @number-keyboard-button-text-color | `@white` | - | -| @number-keyboard-button-background-color | `@blue` | - | -| @number-keyboard-cursor-color | `@text-color` | - | -| @number-keyboard-cursor-width | `1px` | - | -| @number-keyboard-cursor-height | `40%` | - | -| @number-keyboard-cursor-animation-duration | `1s` | - | -| @number-keyboard-z-index | `100` | - | +| Name | Default Value | Description | +| ---------------------------------------- | ------------------ | ----------- | +| @number-keyboard-background-color | `@gray-2` | - | +| @number-keyboard-key-height | `48px` | - | +| @number-keyboard-key-font-size | `28px` | - | +| @number-keyboard-key-active-color | `@gray-3` | - | +| @number-keyboard-delete-font-size | `@font-size-lg` | - | +| @number-keyboard-title-color | `@gray-7` | - | +| @number-keyboard-title-height | `34px` | - | +| @number-keyboard-title-font-size | `@font-size-lg` | - | +| @number-keyboard-close-padding | `0 @padding-md` | - | +| @number-keyboard-close-color | `@text-link-color` | - | +| @number-keyboard-close-font-size | `@font-size-md` | - | +| @number-keyboard-button-text-color | `@white` | - | +| @number-keyboard-button-background-color | `@blue` | - | +| @number-keyboard-z-index | `100` | - | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 077303010..17d157c97 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -213,26 +213,22 @@ export default { 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------------ | ------------------ | ---- | -| @number-keyboard-background-color | `@gray-2` | - | -| @number-keyboard-key-height | `48px` | - | -| @number-keyboard-key-font-size | `28px` | - | -| @number-keyboard-key-active-color | `@gray-3` | - | -| @number-keyboard-delete-font-size | `@font-size-lg` | - | -| @number-keyboard-title-color | `@gray-7` | - | -| @number-keyboard-title-height | `34px` | - | -| @number-keyboard-title-font-size | `@font-size-lg` | - | -| @number-keyboard-close-padding | `0 @padding-md` | - | -| @number-keyboard-close-color | `@text-link-color` | - | -| @number-keyboard-close-font-size | `@font-size-md` | - | -| @number-keyboard-button-text-color | `@white` | - | -| @number-keyboard-button-background-color | `@blue` | - | -| @number-keyboard-cursor-color | `@text-color` | - | -| @number-keyboard-cursor-width | `1px` | - | -| @number-keyboard-cursor-height | `40%` | - | -| @number-keyboard-cursor-animation-duration | `1s` | - | -| @number-keyboard-z-index | `100` | - | +| 名称 | 默认值 | 描述 | +| ---------------------------------------- | ------------------ | ---- | +| @number-keyboard-background-color | `@gray-2` | - | +| @number-keyboard-key-height | `48px` | - | +| @number-keyboard-key-font-size | `28px` | - | +| @number-keyboard-key-active-color | `@gray-3` | - | +| @number-keyboard-delete-font-size | `@font-size-lg` | - | +| @number-keyboard-title-color | `@gray-7` | - | +| @number-keyboard-title-height | `34px` | - | +| @number-keyboard-title-font-size | `@font-size-lg` | - | +| @number-keyboard-close-padding | `0 @padding-md` | - | +| @number-keyboard-close-color | `@text-link-color` | - | +| @number-keyboard-close-font-size | `@font-size-md` | - | +| @number-keyboard-button-text-color | `@white` | - | +| @number-keyboard-button-background-color | `@blue` | - | +| @number-keyboard-z-index | `100` | - | ## 常见问题 diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index df519e3ff..352d8eb2d 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-number-keyboard { position: fixed; diff --git a/src/number-keyboard/var.less b/src/number-keyboard/var.less new file mode 100644 index 000000000..945b612f9 --- /dev/null +++ b/src/number-keyboard/var.less @@ -0,0 +1,16 @@ +@import '../style/var.less'; + +@number-keyboard-background-color: @gray-2; +@number-keyboard-key-height: 48px; +@number-keyboard-key-font-size: 28px; +@number-keyboard-key-active-color: @gray-3; +@number-keyboard-delete-font-size: @font-size-lg; +@number-keyboard-title-color: @gray-7; +@number-keyboard-title-height: 34px; +@number-keyboard-title-font-size: @font-size-lg; +@number-keyboard-close-padding: 0 @padding-md; +@number-keyboard-close-color: @text-link-color; +@number-keyboard-close-font-size: @font-size-md; +@number-keyboard-button-text-color: @white; +@number-keyboard-button-background-color: @blue; +@number-keyboard-z-index: 100; diff --git a/src/overlay/index.less b/src/overlay/index.less index 00b0fde9e..493fb5a3f 100644 --- a/src/overlay/index.less +++ b/src/overlay/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-overlay { position: fixed; diff --git a/src/overlay/var.less b/src/overlay/var.less new file mode 100644 index 000000000..25219409f --- /dev/null +++ b/src/overlay/var.less @@ -0,0 +1,4 @@ +@import '../style/var.less'; + +@overlay-z-index: 1; +@overlay-background-color: rgba(0, 0, 0, 0.7); diff --git a/src/pagination/index.less b/src/pagination/index.less index ef46a8283..7cd5201a4 100644 --- a/src/pagination/index.less +++ b/src/pagination/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-pagination { display: flex; diff --git a/src/pagination/var.less b/src/pagination/var.less new file mode 100644 index 000000000..ba95aa0eb --- /dev/null +++ b/src/pagination/var.less @@ -0,0 +1,11 @@ +@import '../style/var.less'; + +@pagination-height: 40px; +@pagination-font-size: @font-size-md; +@pagination-item-width: 36px; +@pagination-item-default-color: @blue; +@pagination-item-disabled-color: @gray-7; +@pagination-item-disabled-background-color: @background-color; +@pagination-background-color: @white; +@pagination-desc-color: @gray-7; +@pagination-disabled-opacity: @disabled-opacity; diff --git a/src/password-input/README.md b/src/password-input/README.md index e5cdd1e7b..c4b4d81ed 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -150,15 +150,19 @@ export default { How to use: [Custom Theme](#/en-US/theme). -| Name | Default Value | Description | -| -------------------------------- | --------------- | ----------- | -| @password-input-height | `50px` | - | -| @password-input-margin | `0 @padding-md` | - | -| @password-input-font-size | `20px` | - | -| @password-input-border-radius | `6px` | - | -| @password-input-background-color | `@white` | - | -| @password-input-info-color | `@gray-6` | - | -| @password-input-info-font-size | `@font-size-md` | - | -| @password-input-error-info-color | `@red` | - | -| @password-input-dot-size | `10px` | - | -| @password-input-dot-color | `@black` | - | +| Name | Default Value | Description | +| ----------------------------------------- | --------------- | ----------- | +| @password-input-height | `50px` | - | +| @password-input-margin | `0 @padding-md` | - | +| @password-input-font-size | `20px` | - | +| @password-input-border-radius | `6px` | - | +| @password-input-background-color | `@white` | - | +| @password-input-info-color | `@gray-6` | - | +| @password-input-info-font-size | `@font-size-md` | - | +| @password-input-error-info-color | `@red` | - | +| @password-input-dot-size | `10px` | - | +| @password-input-dot-color | `@black` | - | +| @password-input-cursor-color | `@text-color` | - | +| @password-input-cursor-width | `1px` | - | +| @password-input-cursor-height | `40%` | - | +| @password-input-cursor-animation-duration | `1s` | - | diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index ccfb233de..851e1450d 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -160,15 +160,19 @@ export default { 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 -| 名称 | 默认值 | 描述 | -| -------------------------------- | --------------- | ---- | -| @password-input-height | `50px` | - | -| @password-input-margin | `0 @padding-md` | - | -| @password-input-font-size | `20px` | - | -| @password-input-border-radius | `6px` | - | -| @password-input-background-color | `@white` | - | -| @password-input-info-color | `@gray-6` | - | -| @password-input-info-font-size | `@font-size-md` | - | -| @password-input-error-info-color | `@red` | - | -| @password-input-dot-size | `10px` | - | -| @password-input-dot-color | `@black` | - | +| 名称 | 默认值 | 描述 | +| ----------------------------------------- | --------------- | ---- | +| @password-input-height | `50px` | - | +| @password-input-margin | `0 @padding-md` | - | +| @password-input-font-size | `20px` | - | +| @password-input-border-radius | `6px` | - | +| @password-input-background-color | `@white` | - | +| @password-input-info-color | `@gray-6` | - | +| @password-input-info-font-size | `@font-size-md` | - | +| @password-input-error-info-color | `@red` | - | +| @password-input-dot-size | `10px` | - | +| @password-input-dot-color | `@black` | - | +| @password-input-cursor-color | `@text-color` | - | +| @password-input-cursor-width | `1px` | - | +| @password-input-cursor-height | `40%` | - | +| @password-input-cursor-animation-duration | `1s` | - | diff --git a/src/password-input/index.less b/src/password-input/index.less index 0c4be522d..a6991a31a 100644 --- a/src/password-input/index.less +++ b/src/password-input/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-password-input { position: relative; @@ -59,11 +59,11 @@ position: absolute; top: 50%; left: 50%; - width: @number-keyboard-cursor-width; - height: @number-keyboard-cursor-height; - background-color: @number-keyboard-cursor-color; + width: @password-input-cursor-width; + height: @password-input-cursor-height; + background-color: @password-input-cursor-color; transform: translate(-50%, -50%); - animation: @number-keyboard-cursor-animation-duration van-cursor-flicker + animation: @password-input-cursor-animation-duration van-cursor-flicker infinite; } } diff --git a/src/password-input/var.less b/src/password-input/var.less new file mode 100644 index 000000000..e628caee0 --- /dev/null +++ b/src/password-input/var.less @@ -0,0 +1,16 @@ +@import '../style/var.less'; + +@password-input-height: 50px; +@password-input-margin: 0 @padding-md; +@password-input-font-size: 20px; +@password-input-border-radius: 6px; +@password-input-background-color: @white; +@password-input-info-color: @gray-6; +@password-input-info-font-size: @font-size-md; +@password-input-error-info-color: @red; +@password-input-dot-size: 10px; +@password-input-dot-color: @black; +@password-input-cursor-color: @text-color; +@password-input-cursor-width: 1px; +@password-input-cursor-height: 40%; +@password-input-cursor-animation-duration: 1s; diff --git a/src/picker/index.less b/src/picker/index.less index 22ec2ba1d..ea6b35e8e 100644 --- a/src/picker/index.less +++ b/src/picker/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-picker { position: relative; diff --git a/src/picker/var.less b/src/picker/var.less new file mode 100644 index 000000000..a2960decf --- /dev/null +++ b/src/picker/var.less @@ -0,0 +1,15 @@ +@import '../style/var.less'; + +@picker-background-color: @white; +@picker-toolbar-height: 44px; +@picker-title-font-size: @font-size-lg; +@picker-title-line-height: @line-height-md; +@picker-action-padding: 0 @padding-md; +@picker-action-font-size: @font-size-md; +@picker-confirm-action-color: @text-link-color; +@picker-cancel-action-color: @gray-6; +@picker-option-font-size: @font-size-lg; +@picker-option-text-color: @black; +@picker-option-disabled-opacity: 0.3; +@picker-loading-icon-color: @blue; +@picker-loading-mask-color: rgba(255, 255, 255, 0.9); diff --git a/src/popover/index.less b/src/popover/index.less index ed7fb043b..5b571d437 100644 --- a/src/popover/index.less +++ b/src/popover/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-popover { position: absolute; diff --git a/src/popover/var.less b/src/popover/var.less new file mode 100644 index 000000000..001909261 --- /dev/null +++ b/src/popover/var.less @@ -0,0 +1,15 @@ +@import '../style/var.less'; + +@popover-arrow-size: 6px; +@popover-border-radius: @border-radius-lg; +@popover-action-width: 128px; +@popover-action-height: 44px; +@popover-action-font-size: @font-size-md; +@popover-action-line-height: @line-height-md; +@popover-action-icon-size: 20px; +@popover-light-text-color: @text-color; +@popover-light-background-color: @white; +@popover-light-action-disabled-text-color: @gray-5; +@popover-dark-text-color: @white; +@popover-dark-background-color: #4a4a4a; +@popover-dark-action-disabled-text-color: @gray-6; diff --git a/src/popup/index.less b/src/popup/index.less index 8a8733367..bee98ebff 100644 --- a/src/popup/index.less +++ b/src/popup/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/safe-area.less'; .van { diff --git a/src/popup/var.less b/src/popup/var.less new file mode 100644 index 000000000..c82b0cb18 --- /dev/null +++ b/src/popup/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@popup-background-color: @white; +@popup-transition: transform @animation-duration-base; +@popup-round-border-radius: 16px; +@popup-close-icon-size: 22px; +@popup-close-icon-color: @gray-5; +@popup-close-icon-active-color: @gray-6; +@popup-close-icon-margin: 16px; +@popup-close-icon-z-index: 1; diff --git a/src/progress/index.less b/src/progress/index.less index 7c2aa7b2b..2d024d03e 100644 --- a/src/progress/index.less +++ b/src/progress/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-progress { position: relative; diff --git a/src/progress/var.less b/src/progress/var.less new file mode 100644 index 000000000..1b5332917 --- /dev/null +++ b/src/progress/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@progress-height: 4px; +@progress-color: @blue; +@progress-background-color: @gray-3; +@progress-pivot-padding: 0 5px; +@progress-pivot-text-color: @white; +@progress-pivot-font-size: @font-size-xs; +@progress-pivot-line-height: 1.6; +@progress-pivot-background-color: @blue; diff --git a/src/pull-refresh/index.less b/src/pull-refresh/index.less index f3a30af90..dce4f054e 100644 --- a/src/pull-refresh/index.less +++ b/src/pull-refresh/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-pull-refresh { overflow: hidden; diff --git a/src/pull-refresh/var.less b/src/pull-refresh/var.less new file mode 100644 index 000000000..85fa8eb8b --- /dev/null +++ b/src/pull-refresh/var.less @@ -0,0 +1,6 @@ +@import '../style/var.less'; + +@pull-refresh-head-height: 50px; +@pull-refresh-head-font-size: @font-size-md; +@pull-refresh-head-text-color: @gray-6; +@pull-refresh-loading-icon-size: 16px; diff --git a/src/radio-group/index.less b/src/radio-group/index.less index fea42f62d..fe02eb7e1 100644 --- a/src/radio-group/index.less +++ b/src/radio-group/index.less @@ -1,5 +1,3 @@ -@import '../style/var.less'; - .van-radio-group { &--horizontal { display: flex; diff --git a/src/radio/index.less b/src/radio/index.less index c5e24a373..b983a3c18 100644 --- a/src/radio/index.less +++ b/src/radio/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-radio { display: flex; diff --git a/src/radio/var.less b/src/radio/var.less new file mode 100644 index 000000000..544e67093 --- /dev/null +++ b/src/radio/var.less @@ -0,0 +1,11 @@ +@import '../style/var.less'; + +@radio-size: 20px; +@radio-border-color: @gray-5; +@radio-transition-duration: @animation-duration-fast; +@radio-label-margin: @padding-xs; +@radio-label-color: @text-color; +@radio-checked-icon-color: @blue; +@radio-disabled-icon-color: @gray-5; +@radio-disabled-label-color: @gray-5; +@radio-disabled-background-color: @border-color; diff --git a/src/rate/index.less b/src/rate/index.less index 67958e801..c02388165 100644 --- a/src/rate/index.less +++ b/src/rate/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-rate { display: inline-flex; diff --git a/src/rate/var.less b/src/rate/var.less new file mode 100644 index 000000000..a1e68bf8a --- /dev/null +++ b/src/rate/var.less @@ -0,0 +1,7 @@ +@import '../style/var.less'; + +@rate-icon-size: 20px; +@rate-icon-gutter: @padding-base; +@rate-icon-void-color: @gray-5; +@rate-icon-full-color: @red; +@rate-icon-disabled-color: @gray-5; diff --git a/src/row/index.less b/src/row/index.less index 8cf701ffa..99dbe5716 100644 --- a/src/row/index.less +++ b/src/row/index.less @@ -1,5 +1,3 @@ -@import '../style/var.less'; - .van-row { display: flex; flex-wrap: wrap; diff --git a/src/search/index.less b/src/search/index.less index 4d2e34d64..f2bc234c7 100644 --- a/src/search/index.less +++ b/src/search/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-search { display: flex; diff --git a/src/search/var.less b/src/search/var.less new file mode 100644 index 000000000..2ef29754d --- /dev/null +++ b/src/search/var.less @@ -0,0 +1,13 @@ +@import '../style/var.less'; + +@search-padding: 10px @padding-sm; +@search-background-color: @white; +@search-content-background-color: @gray-1; +@search-input-height: 34px; +@search-label-padding: 0 5px; +@search-label-color: @text-color; +@search-label-font-size: @font-size-md; +@search-left-icon-color: @gray-6; +@search-action-padding: 0 @padding-xs; +@search-action-text-color: @text-color; +@search-action-font-size: @font-size-md; diff --git a/src/share-sheet/index.less b/src/share-sheet/index.less index 2dd65de1d..2c02f9626 100644 --- a/src/share-sheet/index.less +++ b/src/share-sheet/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/hairline'; .van-share-sheet { @@ -32,7 +32,7 @@ -webkit-overflow-scrolling: touch; &--border::before { - .hairline-top(@cell-border-color, @padding-md); + .hairline-top(@border-color, @padding-md); } &::-webkit-scrollbar { diff --git a/src/share-sheet/var.less b/src/share-sheet/var.less new file mode 100644 index 000000000..1d5aba303 --- /dev/null +++ b/src/share-sheet/var.less @@ -0,0 +1,17 @@ +@import '../style/var.less'; + +@share-sheet-header-padding: @padding-sm @padding-md @padding-base; +@share-sheet-title-color: @text-color; +@share-sheet-title-font-size: @font-size-md; +@share-sheet-title-line-height: @line-height-md; +@share-sheet-description-color: @gray-6; +@share-sheet-description-font-size: @font-size-sm; +@share-sheet-description-line-height: 16px; +@share-sheet-icon-size: 48px; +@share-sheet-option-name-color: @gray-7; +@share-sheet-option-name-font-size: @font-size-sm; +@share-sheet-option-description-color: @gray-5; +@share-sheet-option-description-font-size: @font-size-sm; +@share-sheet-cancel-button-font-size: @font-size-lg; +@share-sheet-cancel-button-height: 48px; +@share-sheet-cancel-button-background: @white; diff --git a/src/sidebar-item/index.less b/src/sidebar-item/index.less index f1d3f55bb..d0a774753 100644 --- a/src/sidebar-item/index.less +++ b/src/sidebar-item/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-sidebar-item { position: relative; diff --git a/src/sidebar-item/var.less b/src/sidebar-item/var.less new file mode 100644 index 000000000..f1bd1c13b --- /dev/null +++ b/src/sidebar-item/var.less @@ -0,0 +1,15 @@ +@import '../style/var.less'; + +@sidebar-font-size: @font-size-md; +@sidebar-line-height: @line-height-md; +@sidebar-text-color: @text-color; +@sidebar-disabled-text-color: @gray-5; +@sidebar-padding: 20px @padding-sm; +@sidebar-active-color: @active-color; +@sidebar-background-color: @background-color; +@sidebar-selected-font-weight: @font-weight-bold; +@sidebar-selected-text-color: @text-color; +@sidebar-selected-border-width: 4px; +@sidebar-selected-border-height: 16px; +@sidebar-selected-border-color: @red; +@sidebar-selected-background-color: @white; diff --git a/src/sidebar/index.less b/src/sidebar/index.less index 0e82a49b3..7c5737ad2 100644 --- a/src/sidebar/index.less +++ b/src/sidebar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-sidebar { width: @sidebar-width; diff --git a/src/sidebar/var.less b/src/sidebar/var.less new file mode 100644 index 000000000..773f0a7b7 --- /dev/null +++ b/src/sidebar/var.less @@ -0,0 +1,3 @@ +@import '../style/var.less'; + +@sidebar-width: 80px; diff --git a/src/skeleton/index.less b/src/skeleton/index.less index c2a84bd89..23ce5cd3d 100644 --- a/src/skeleton/index.less +++ b/src/skeleton/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-skeleton { display: flex; diff --git a/src/skeleton/var.less b/src/skeleton/var.less new file mode 100644 index 000000000..ae78d88d4 --- /dev/null +++ b/src/skeleton/var.less @@ -0,0 +1,9 @@ +@import '../style/var.less'; + +@skeleton-row-height: 16px; +@skeleton-row-background-color: @active-color; +@skeleton-row-margin-top: @padding-sm; +@skeleton-title-width: 40%; +@skeleton-avatar-size: 32px; +@skeleton-avatar-background-color: @active-color; +@skeleton-animation-duration: 1.2s; diff --git a/src/slider/index.less b/src/slider/index.less index f988fe326..ae1208a0a 100644 --- a/src/slider/index.less +++ b/src/slider/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-slider { position: relative; diff --git a/src/slider/var.less b/src/slider/var.less new file mode 100644 index 000000000..e5c71f06b --- /dev/null +++ b/src/slider/var.less @@ -0,0 +1,11 @@ +@import '../style/var.less'; + +@slider-active-background-color: @blue; +@slider-inactive-background-color: @gray-3; +@slider-disabled-opacity: @disabled-opacity; +@slider-bar-height: 2px; +@slider-button-width: 24px; +@slider-button-height: 24px; +@slider-button-border-radius: 50%; +@slider-button-background-color: @white; +@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); diff --git a/src/step/index.less b/src/step/index.less index 43e01fb2e..56ec80817 100644 --- a/src/step/index.less +++ b/src/step/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-step { position: relative; diff --git a/src/step/var.less b/src/step/var.less new file mode 100644 index 000000000..7bd45dd62 --- /dev/null +++ b/src/step/var.less @@ -0,0 +1,13 @@ +@import '../style/var.less'; + +@step-text-color: @gray-6; +@step-active-color: @green; +@step-process-text-color: @text-color; +@step-font-size: @font-size-md; +@step-line-color: @border-color; +@step-finish-line-color: @green; +@step-finish-text-color: @text-color; +@step-icon-size: 12px; +@step-circle-size: 5px; +@step-circle-color: @gray-6; +@step-horizontal-title-font-size: @font-size-sm; diff --git a/src/stepper/index.less b/src/stepper/index.less index 785d49652..cfbb85100 100644 --- a/src/stepper/index.less +++ b/src/stepper/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-stepper { display: inline-block; diff --git a/src/stepper/var.less b/src/stepper/var.less new file mode 100644 index 000000000..2cec1ed34 --- /dev/null +++ b/src/stepper/var.less @@ -0,0 +1,16 @@ +@import '../style/var.less'; + +@stepper-active-color: #e8e8e8; +@stepper-background-color: @active-color; +@stepper-button-icon-color: @text-color; +@stepper-button-disabled-color: @background-color; +@stepper-button-disabled-icon-color: @gray-5; +@stepper-button-round-theme-color: @red; +@stepper-input-width: 32px; +@stepper-input-height: 28px; +@stepper-input-font-size: @font-size-md; +@stepper-input-line-height: normal; +@stepper-input-text-color: @text-color; +@stepper-input-disabled-text-color: @gray-5; +@stepper-input-disabled-background-color: @active-color; +@stepper-border-radius: @border-radius-md; diff --git a/src/steps/index.less b/src/steps/index.less index 3e25a5212..b24986d50 100644 --- a/src/steps/index.less +++ b/src/steps/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-steps { overflow: hidden; diff --git a/src/steps/var.less b/src/steps/var.less new file mode 100644 index 000000000..21a61ff37 --- /dev/null +++ b/src/steps/var.less @@ -0,0 +1,3 @@ +@import '../style/var.less'; + +@steps-background-color: @white; diff --git a/src/sticky/index.less b/src/sticky/index.less index 5840b6538..6a94dd835 100644 --- a/src/sticky/index.less +++ b/src/sticky/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-sticky { &--fixed { diff --git a/src/sticky/var.less b/src/sticky/var.less new file mode 100644 index 000000000..6ce7a2a5f --- /dev/null +++ b/src/sticky/var.less @@ -0,0 +1,3 @@ +@import '../style/var.less'; + +@sticky-z-index: 99; diff --git a/src/style/var.less b/src/style/var.less index 8559478ee..d39f3dfbb 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -66,816 +66,3 @@ @border-radius-md: 4px; @border-radius-lg: 8px; @border-radius-max: 999px; - -// ActionSheet -@action-sheet-max-height: 80%; -@action-sheet-header-height: 48px; -@action-sheet-header-font-size: @font-size-lg; -@action-sheet-description-color: @gray-6; -@action-sheet-description-font-size: @font-size-md; -@action-sheet-description-line-height: @line-height-md; -@action-sheet-item-background: @white; -@action-sheet-item-font-size: @font-size-lg; -@action-sheet-item-line-height: @line-height-lg; -@action-sheet-item-text-color: @text-color; -@action-sheet-item-disabled-text-color: @gray-5; -@action-sheet-subname-color: @gray-6; -@action-sheet-subname-font-size: @font-size-sm; -@action-sheet-subname-line-height: @line-height-sm; -@action-sheet-close-icon-size: 22px; -@action-sheet-close-icon-color: @gray-5; -@action-sheet-close-icon-active-color: @gray-6; -@action-sheet-close-icon-padding: 0 @padding-md; -@action-sheet-cancel-text-color: @gray-7; -@action-sheet-cancel-padding-top: @padding-xs; -@action-sheet-cancel-padding-color: @background-color; -@action-sheet-loading-icon-size: 22px; - -// AddressEdit -@address-edit-padding: @padding-sm; -@address-edit-buttons-padding: @padding-xl @padding-base; -@address-edit-button-margin-bottom: @padding-sm; -@address-edit-detail-finish-color: @blue; -@address-edit-detail-finish-font-size: @font-size-sm; - -// AddressList -@address-list-padding: @padding-sm @padding-sm 80px; -@address-list-disabled-text-color: @gray-6; -@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md; -@address-list-disabled-text-font-size: @font-size-md; -@address-list-disabled-text-line-height: @line-height-md; -@address-list-add-button-z-index: 999; -@address-list-item-padding: @padding-sm; -@address-list-item-text-color: @text-color; -@address-list-item-disabled-text-color: @gray-5; -@address-list-item-font-size: 13px; -@address-list-item-line-height: @line-height-sm; -@address-list-item-radio-icon-color: @red; -@address-list-edit-icon-size: 20px; - -// Badge -@badge-size: 16px; -@badge-color: @white; -@badge-padding: 0 3px; -@badge-font-size: @font-size-sm; -@badge-font-weight: @font-weight-bold; -@badge-border-width: @border-width-base; -@badge-background-color: @red; -@badge-dot-color: @red; -@badge-dot-size: 8px; -@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif; - -// Button -@button-mini-height: 24px; -@button-mini-padding: 0 @padding-base; -@button-mini-font-size: @font-size-xs; -@button-small-height: 32px; -@button-small-padding: 0 @padding-xs; -@button-small-font-size: @font-size-sm; -@button-normal-padding: 0 15px; -@button-normal-font-size: @font-size-md; -@button-large-height: 50px; -@button-default-height: 44px; -@button-default-line-height: 1.2; -@button-default-font-size: @font-size-lg; -@button-default-color: @text-color; -@button-default-background-color: @white; -@button-default-border-color: @border-color; -@button-primary-color: @white; -@button-primary-background-color: @blue; -@button-primary-border-color: @blue; -@button-success-color: @white; -@button-success-background-color: @green; -@button-success-border-color: @green; -@button-danger-color: @white; -@button-danger-background-color: @red; -@button-danger-border-color: @red; -@button-warning-color: @white; -@button-warning-background-color: @orange; -@button-warning-border-color: @orange; -@button-border-width: @border-width-base; -@button-border-radius: @border-radius-sm; -@button-round-border-radius: @border-radius-max; -@button-plain-background-color: @white; -@button-disabled-opacity: @disabled-opacity; -@button-icon-size: 1.2em; -@button-loading-icon-size: 20px; - -// Calendar -@calendar-background-color: @white; -@calendar-popup-height: 80%; -@calendar-header-box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); -@calendar-header-title-height: 44px; -@calendar-header-title-font-size: @font-size-lg; -@calendar-header-subtitle-font-size: @font-size-md; -@calendar-weekdays-height: 30px; -@calendar-weekdays-font-size: @font-size-sm; -@calendar-month-title-font-size: @font-size-md; -@calendar-month-mark-color: fade(@gray-2, 80%); -@calendar-month-mark-font-size: 160px; -@calendar-day-height: 64px; -@calendar-day-font-size: @font-size-lg; -@calendar-range-edge-color: @white; -@calendar-range-edge-background-color: @red; -@calendar-range-middle-color: @red; -@calendar-range-middle-background-opacity: 0.1; -@calendar-selected-day-size: 54px; -@calendar-selected-day-color: @white; -@calendar-info-font-size: @font-size-xs; -@calendar-info-line-height: @line-height-xs; -@calendar-selected-day-background-color: @red; -@calendar-day-disabled-color: @gray-5; -@calendar-confirm-button-height: 36px; -@calendar-confirm-button-margin: 7px 0; - -// Card -@card-padding: @padding-xs @padding-md; -@card-font-size: @font-size-sm; -@card-text-color: @text-color; -@card-background-color: @background-color-light; -@card-thumb-size: 88px; -@card-thumb-border-radius: @border-radius-lg; -@card-title-line-height: 16px; -@card-desc-color: @gray-7; -@card-desc-line-height: @line-height-md; -@card-price-color: @gray-8; -@card-origin-price-color: @gray-6; -@card-num-color: @gray-6; -@card-origin-price-font-size: @font-size-xs; -@card-price-font-size: @font-size-sm; -@card-price-integer-font-size: @font-size-lg; -@card-price-font-family: @price-integer-font-family; - -// Cascader -@cascader-header-height: 48px; -@cascader-title-font-size: @font-size-lg; -@cascader-title-line-height: 20px; -@cascader-close-icon-size: 22px; -@cascader-close-icon-color: @gray-5; -@cascader-close-icon-active-color: @gray-6; -@cascader-selected-icon-size: 18px; -@cascader-tabs-height: 48px; -@cascader-active-color: @red; -@cascader-options-height: 384px; -@cascader-tab-color: @text-color; -@cascader-unselected-tab-color: @gray-6; - -// Cell -@cell-font-size: @font-size-md; -@cell-line-height: 24px; -@cell-vertical-padding: 10px; -@cell-horizontal-padding: @padding-md; -@cell-text-color: @text-color; -@cell-background-color: @white; -@cell-border-color: @border-color; -@cell-active-color: @active-color; -@cell-required-color: @red; -@cell-label-color: @gray-6; -@cell-label-font-size: @font-size-sm; -@cell-label-line-height: @line-height-sm; -@cell-label-margin-top: @padding-base; -@cell-value-color: @gray-6; -@cell-icon-size: 16px; -@cell-right-icon-color: @gray-6; -@cell-large-vertical-padding: @padding-sm; -@cell-large-title-font-size: @font-size-lg; -@cell-large-label-font-size: @font-size-md; - -// CellGroup -@cell-group-background-color: @white; -@cell-group-title-color: @gray-6; -@cell-group-title-padding: @padding-md @padding-md @padding-xs; -@cell-group-title-font-size: @font-size-md; -@cell-group-title-line-height: 16px; - -// Checkbox -@checkbox-size: 20px; -@checkbox-border-color: @gray-5; -@checkbox-transition-duration: @animation-duration-fast; -@checkbox-label-margin: @padding-xs; -@checkbox-label-color: @text-color; -@checkbox-checked-icon-color: @blue; -@checkbox-disabled-icon-color: @gray-5; -@checkbox-disabled-label-color: @gray-5; -@checkbox-disabled-background-color: @border-color; - -// Circle -@circle-size: 100px; -@circle-color: @blue; -@circle-layer-color: @white; -@circle-text-color: @text-color; -@circle-text-font-weight: @font-weight-bold; -@circle-text-font-size: @font-size-md; -@circle-text-line-height: @line-height-md; - -// Collapse -@collapse-item-transition-duration: @animation-duration-base; -@collapse-item-content-padding: @padding-sm @padding-md; -@collapse-item-content-font-size: @font-size-md; -@collapse-item-content-line-height: 1.5; -@collapse-item-content-text-color: @gray-6; -@collapse-item-content-background-color: @white; -@collapse-item-title-disabled-color: @gray-5; - -// ContactCard -@contact-card-padding: @padding-md; -@contact-card-add-icon-size: 40px; -@contact-card-add-icon-color: @blue; -@contact-card-value-line-height: @line-height-md; - -// ContactEdit -@contact-edit-padding: @padding-md; -@contact-edit-fields-radius: @border-radius-md; -@contact-edit-buttons-padding: @padding-xl 0; -@contact-edit-button-margin-bottom: @padding-sm; -@contact-edit-button-font-size: 16px; -@contact-edit-field-label-width: 4.1em; - -// ContactList -@contact-list-edit-icon-size: 16px; -@contact-list-add-button-z-index: 999; -@contact-list-item-padding: @padding-md; -@contact-list-item-radio-icon-color: @red; - -// CountDown -@count-down-text-color: @text-color; -@count-down-font-size: @font-size-md; -@count-down-line-height: @line-height-md; - -// Coupon -@coupon-margin: 0 @padding-sm @padding-sm; -@coupon-content-height: 84px; -@coupon-content-padding: 14px 0; -@coupon-background-color: @white; -@coupon-active-background-color: @active-color; -@coupon-border-radius: @border-radius-lg; -@coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -@coupon-head-width: 96px; -@coupon-amount-color: @red; -@coupon-amount-font-size: 30px; -@coupon-currency-font-size: 40%; -@coupon-name-font-size: @font-size-md; -@coupon-disabled-text-color: @gray-6; -@coupon-description-padding: @padding-xs @padding-md; -@coupon-description-border-color: @border-color; -@coupon-corner-checkbox-icon-color: @red; - -// CouponCell -@coupon-cell-selected-text-color: @text-color; - -// CouponList -@coupon-list-background-color: @background-color; -@coupon-list-field-padding: 5px 0 5px @padding-md; -@coupon-list-exchange-button-height: 32px; -@coupon-list-close-button-height: 40px; -@coupon-list-empty-image-size: 200px; -@coupon-list-empty-tip-color: @gray-6; -@coupon-list-empty-tip-font-size: @font-size-md; -@coupon-list-empty-tip-line-height: @line-height-md; - -// Dialog -@dialog-width: 320px; -@dialog-small-screen-width: 90%; -@dialog-font-size: @font-size-lg; -@dialog-transition: @animation-duration-base; -@dialog-border-radius: 16px; -@dialog-background-color: @white; -@dialog-header-font-weight: @font-weight-bold; -@dialog-header-line-height: 24px; -@dialog-header-padding-top: 26px; -@dialog-header-isolated-padding: @padding-lg 0; -@dialog-message-padding: @padding-lg; -@dialog-message-font-size: @font-size-md; -@dialog-message-line-height: @line-height-md; -@dialog-message-max-height: 60vh; -@dialog-has-title-message-text-color: @gray-7; -@dialog-has-title-message-padding-top: @padding-xs; -@dialog-button-height: 48px; -@dialog-round-button-height: 36px; -@dialog-confirm-button-text-color: @red; - -// Divider -@divider-margin: @padding-md 0; -@divider-text-color: @gray-6; -@divider-font-size: @font-size-md; -@divider-line-height: 24px; -@divider-border-color: @border-color; -@divider-content-padding: @padding-md; -@divider-content-left-width: 10%; -@divider-content-right-width: 10%; - -// DropdownMenu -@dropdown-menu-height: 48px; -@dropdown-menu-background-color: @white; -@dropdown-menu-box-shadow: 0 2px 12px fade(@gray-7, 12); -@dropdown-menu-title-font-size: 15px; -@dropdown-menu-title-text-color: @text-color; -@dropdown-menu-title-active-text-color: @red; -@dropdown-menu-title-disabled-text-color: @gray-6; -@dropdown-menu-title-padding: 0 @padding-xs; -@dropdown-menu-title-line-height: @line-height-lg; -@dropdown-menu-option-active-color: @red; -@dropdown-menu-content-max-height: 80%; -@dropdown-item-z-index: 10; - -// Empty -@empty-padding: @padding-xl 0; -@empty-image-size: 160px; -@empty-description-margin-top: @padding-md; -@empty-description-padding: 0 60px; -@empty-description-color: @gray-6; -@empty-description-font-size: @font-size-md; -@empty-description-line-height: @line-height-md; -@empty-bottom-margin-top: 24px; - -// Field -@field-label-width: 6.2em; -@field-label-color: @gray-7; -@field-label-margin-right: @padding-sm; -@field-input-text-color: @text-color; -@field-input-error-text-color: @red; -@field-input-disabled-text-color: @gray-5; -@field-placeholder-text-color: @gray-5; -@field-icon-size: 16px; -@field-clear-icon-size: 16px; -@field-clear-icon-color: @gray-5; -@field-right-icon-color: @gray-6; -@field-error-message-color: @red; -@field-error-message-text-color: 12px; -@field-text-area-min-height: 60px; -@field-word-limit-color: @gray-7; -@field-word-limit-font-size: @font-size-sm; -@field-word-limit-line-height: 16px; -@field-disabled-text-color: @gray-5; - -// GridItem -@grid-item-content-padding: @padding-md @padding-xs; -@grid-item-content-background-color: @white; -@grid-item-content-active-color: @active-color; -@grid-item-icon-size: 28px; -@grid-item-text-color: @gray-7; -@grid-item-text-font-size: @font-size-sm; - -// ActionBar -@action-bar-background-color: @white; -@action-bar-height: 50px; -@action-bar-icon-width: 48px; -@action-bar-icon-height: 100%; -@action-bar-icon-color: @text-color; -@action-bar-icon-size: 18px; -@action-bar-icon-font-size: @font-size-xs; -@action-bar-icon-active-color: @active-color; -@action-bar-icon-text-color: @gray-7; -@action-bar-button-height: 40px; -@action-bar-button-warning-color: @gradient-orange; -@action-bar-button-danger-color: @gradient-red; - -// IndexAnchor -@index-anchor-z-index: 1; -@index-anchor-padding: 0 @padding-md; -@index-anchor-text-color: @text-color; -@index-anchor-font-weight: @font-weight-bold; -@index-anchor-font-size: @font-size-md; -@index-anchor-line-height: 32px; -@index-anchor-background-color: transparent; -@index-anchor-sticky-text-color: @red; -@index-anchor-sticky-background-color: @white; - -// IndexBar -@index-bar-sidebar-z-index: 2; -@index-bar-index-font-size: @font-size-xs; -@index-bar-index-line-height: @line-height-xs; -@index-bar-index-active-color: @red; - -// Image -@image-placeholder-text-color: @gray-6; -@image-placeholder-font-size: @font-size-md; -@image-placeholder-background-color: @background-color; -@image-loading-icon-size: 32px; -@image-loading-icon-color: @gray-4; -@image-error-icon-size: 32px; -@image-error-icon-color: @gray-4; - -// ImagePreview -@image-preview-index-text-color: @white; -@image-preview-index-font-size: @font-size-md; -@image-preview-index-line-height: @line-height-md; -@image-preview-index-text-shadow: 0 1px 1px @gray-8; -@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9); -@image-preview-close-icon-size: 22px; -@image-preview-close-icon-color: @gray-5; -@image-preview-close-icon-active-color: @gray-6; -@image-preview-close-icon-margin: @padding-md; -@image-preview-close-icon-z-index: 1; - -// List -@list-icon-margin-right: @padding-base; -@list-text-color: @gray-6; -@list-text-font-size: @font-size-md; -@list-text-line-height: 50px; -@list-loading-icon-size: 16px; - -// Loading -@loading-text-color: @gray-6; -@loading-text-font-size: @font-size-md; -@loading-spinner-color: @gray-5; -@loading-spinner-size: 30px; -@loading-spinner-animation-duration: 0.8s; - -// NavBar -@nav-bar-height: 46px; -@nav-bar-background-color: @white; -@nav-bar-arrow-size: 16px; -@nav-bar-icon-color: @blue; -@nav-bar-text-color: @blue; -@nav-bar-title-font-size: @font-size-lg; -@nav-bar-title-text-color: @text-color; -@nav-bar-z-index: 1; - -// NoticeBar -@notice-bar-height: 40px; -@notice-bar-padding: 0 @padding-md; -@notice-bar-wrapable-padding: @padding-xs @padding-md; -@notice-bar-text-color: @orange-dark; -@notice-bar-font-size: @font-size-md; -@notice-bar-line-height: 24px; -@notice-bar-background-color: @orange-light; -@notice-bar-icon-size: 16px; -@notice-bar-icon-min-width: 24px; - -// Notify -@notify-text-color: @white; -@notify-padding: @padding-xs @padding-md; -@notify-font-size: @font-size-md; -@notify-line-height: @line-height-md; -@notify-primary-background-color: @blue; -@notify-success-background-color: @green; -@notify-danger-background-color: @red; -@notify-warning-background-color: @orange; - -// NumberKeyboard -@number-keyboard-background-color: @gray-2; -@number-keyboard-key-height: 48px; -@number-keyboard-key-font-size: 28px; -@number-keyboard-key-active-color: @gray-3; -@number-keyboard-delete-font-size: @font-size-lg; -@number-keyboard-title-color: @gray-7; -@number-keyboard-title-height: 34px; -@number-keyboard-title-font-size: @font-size-lg; -@number-keyboard-close-padding: 0 @padding-md; -@number-keyboard-close-color: @text-link-color; -@number-keyboard-close-font-size: @font-size-md; -@number-keyboard-button-text-color: @white; -@number-keyboard-button-background-color: @blue; -@number-keyboard-cursor-color: @text-color; -@number-keyboard-cursor-width: 1px; -@number-keyboard-cursor-height: 40%; -@number-keyboard-cursor-animation-duration: 1s; -@number-keyboard-z-index: 100; - -// Overlay -@overlay-z-index: 1; -@overlay-background-color: rgba(0, 0, 0, 0.7); - -// Pagination -@pagination-height: 40px; -@pagination-font-size: @font-size-md; -@pagination-item-width: 36px; -@pagination-item-default-color: @blue; -@pagination-item-disabled-color: @gray-7; -@pagination-item-disabled-background-color: @background-color; -@pagination-background-color: @white; -@pagination-desc-color: @gray-7; -@pagination-disabled-opacity: @disabled-opacity; - -// PasswordInput -@password-input-height: 50px; -@password-input-margin: 0 @padding-md; -@password-input-font-size: 20px; -@password-input-border-radius: 6px; -@password-input-background-color: @white; -@password-input-info-color: @gray-6; -@password-input-info-font-size: @font-size-md; -@password-input-error-info-color: @red; -@password-input-dot-size: 10px; -@password-input-dot-color: @black; - -// Picker -@picker-background-color: @white; -@picker-toolbar-height: 44px; -@picker-title-font-size: @font-size-lg; -@picker-title-line-height: @line-height-md; -@picker-action-padding: 0 @padding-md; -@picker-action-font-size: @font-size-md; -@picker-confirm-action-color: @text-link-color; -@picker-cancel-action-color: @gray-6; -@picker-option-font-size: @font-size-lg; -@picker-option-text-color: @black; -@picker-option-disabled-opacity: 0.3; -@picker-loading-icon-color: @blue; -@picker-loading-mask-color: rgba(255, 255, 255, 0.9); - -// Popover -@popover-arrow-size: 6px; -@popover-border-radius: @border-radius-lg; -@popover-action-width: 128px; -@popover-action-height: 44px; -@popover-action-font-size: @font-size-md; -@popover-action-line-height: @line-height-md; -@popover-action-icon-size: 20px; -@popover-light-text-color: @text-color; -@popover-light-background-color: @white; -@popover-light-action-disabled-text-color: @gray-5; -@popover-dark-text-color: @white; -@popover-dark-background-color: #4a4a4a; -@popover-dark-action-disabled-text-color: @gray-6; - -// Popup -@popup-background-color: @white; -@popup-transition: transform @animation-duration-base; -@popup-round-border-radius: 16px; -@popup-close-icon-size: 22px; -@popup-close-icon-color: @gray-5; -@popup-close-icon-active-color: @gray-6; -@popup-close-icon-margin: 16px; -@popup-close-icon-z-index: 1; - -// Progress -@progress-height: 4px; -@progress-color: @blue; -@progress-background-color: @gray-3; -@progress-pivot-padding: 0 5px; -@progress-pivot-text-color: @white; -@progress-pivot-font-size: @font-size-xs; -@progress-pivot-line-height: 1.6; -@progress-pivot-background-color: @blue; - -// PullRefresh -@pull-refresh-head-height: 50px; -@pull-refresh-head-font-size: @font-size-md; -@pull-refresh-head-text-color: @gray-6; -@pull-refresh-loading-icon-size: 16px; - -// Radio -@radio-size: 20px; -@radio-border-color: @gray-5; -@radio-transition-duration: @animation-duration-fast; -@radio-label-margin: @padding-xs; -@radio-label-color: @text-color; -@radio-checked-icon-color: @blue; -@radio-disabled-icon-color: @gray-5; -@radio-disabled-label-color: @gray-5; -@radio-disabled-background-color: @border-color; - -// Rate -@rate-icon-size: 20px; -@rate-icon-gutter: @padding-base; -@rate-icon-void-color: @gray-5; -@rate-icon-full-color: @red; -@rate-icon-disabled-color: @gray-5; - -// ShareSheet -@share-sheet-header-padding: @padding-sm @padding-md @padding-base; -@share-sheet-title-color: @text-color; -@share-sheet-title-font-size: @font-size-md; -@share-sheet-title-line-height: @line-height-md; -@share-sheet-description-color: @gray-6; -@share-sheet-description-font-size: @font-size-sm; -@share-sheet-description-line-height: 16px; -@share-sheet-icon-size: 48px; -@share-sheet-option-name-color: @gray-7; -@share-sheet-option-name-font-size: @font-size-sm; -@share-sheet-option-description-color: @gray-5; -@share-sheet-option-description-font-size: @font-size-sm; -@share-sheet-cancel-button-font-size: @font-size-lg; -@share-sheet-cancel-button-height: 48px; -@share-sheet-cancel-button-background: @white; - -// Search -@search-padding: 10px @padding-sm; -@search-background-color: @white; -@search-content-background-color: @gray-1; -@search-input-height: 34px; -@search-label-padding: 0 5px; -@search-label-color: @text-color; -@search-label-font-size: @font-size-md; -@search-left-icon-color: @gray-6; -@search-action-padding: 0 @padding-xs; -@search-action-text-color: @text-color; -@search-action-font-size: @font-size-md; - -// Sidebar -@sidebar-width: 80px; -@sidebar-font-size: @font-size-md; -@sidebar-line-height: @line-height-md; -@sidebar-text-color: @text-color; -@sidebar-disabled-text-color: @gray-5; -@sidebar-padding: 20px @padding-sm; -@sidebar-active-color: @active-color; -@sidebar-background-color: @background-color; -@sidebar-selected-font-weight: @font-weight-bold; -@sidebar-selected-text-color: @text-color; -@sidebar-selected-border-width: 4px; -@sidebar-selected-border-height: 16px; -@sidebar-selected-border-color: @red; -@sidebar-selected-background-color: @white; - -// Skeleton -@skeleton-row-height: 16px; -@skeleton-row-background-color: @active-color; -@skeleton-row-margin-top: @padding-sm; -@skeleton-title-width: 40%; -@skeleton-avatar-size: 32px; -@skeleton-avatar-background-color: @active-color; -@skeleton-animation-duration: 1.2s; - -// Slider -@slider-active-background-color: @blue; -@slider-inactive-background-color: @gray-3; -@slider-disabled-opacity: @disabled-opacity; -@slider-bar-height: 2px; -@slider-button-width: 24px; -@slider-button-height: 24px; -@slider-button-border-radius: 50%; -@slider-button-background-color: @white; -@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); - -// Step -@step-text-color: @gray-6; -@step-active-color: @green; -@step-process-text-color: @text-color; -@step-font-size: @font-size-md; -@step-line-color: @border-color; -@step-finish-line-color: @green; -@step-finish-text-color: @text-color; -@step-icon-size: 12px; -@step-circle-size: 5px; -@step-circle-color: @gray-6; -@step-horizontal-title-font-size: @font-size-sm; - -// Steps -@steps-background-color: @white; - -// Sticky -@sticky-z-index: 99; - -// Stepper -@stepper-active-color: #e8e8e8; -@stepper-background-color: @active-color; -@stepper-button-icon-color: @text-color; -@stepper-button-disabled-color: @background-color; -@stepper-button-disabled-icon-color: @gray-5; -@stepper-button-round-theme-color: @red; -@stepper-input-width: 32px; -@stepper-input-height: 28px; -@stepper-input-font-size: @font-size-md; -@stepper-input-line-height: normal; -@stepper-input-text-color: @text-color; -@stepper-input-disabled-text-color: @gray-5; -@stepper-input-disabled-background-color: @active-color; -@stepper-border-radius: @border-radius-md; - -// SubmitBar -@submit-bar-height: 50px; -@submit-bar-z-index: 100; -@submit-bar-background-color: @white; -@submit-bar-button-width: 110px; -@submit-bar-price-color: @red; -@submit-bar-price-font-size: @font-size-md; -@submit-bar-currency-font-size: @font-size-md; -@submit-bar-text-color: @text-color; -@submit-bar-text-font-size: @font-size-md; -@submit-bar-tip-padding: @padding-xs @padding-sm; -@submit-bar-tip-font-size: @font-size-sm; -@submit-bar-tip-line-height: 1.5; -@submit-bar-tip-color: #f56723; -@submit-bar-tip-background-color: #fff7cc; -@submit-bar-tip-icon-size: 12px; -@submit-bar-button-height: 40px; -@submit-bar-padding: 0 @padding-md; -@submit-bar-price-integer-font-size: 20px; -@submit-bar-price-font-family: @price-integer-font-family; - -// Swipe -@swipe-indicator-size: 6px; -@swipe-indicator-margin: @padding-sm; -@swipe-indicator-active-opacity: 1; -@swipe-indicator-inactive-opacity: 0.3; -@swipe-indicator-active-background-color: @blue; -@swipe-indicator-inactive-background-color: @border-color; - -// Switch -@switch-size: 30px; -@switch-width: 2em; -@switch-height: 1em; -@switch-node-size: 1em; -@switch-node-background-color: @white; -@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), - 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); -@switch-background-color: @white; -@switch-on-background-color: @blue; -@switch-transition-duration: @animation-duration-base; -@switch-disabled-opacity: @disabled-opacity; -@switch-border: @border-width-base solid rgba(0, 0, 0, 0.1); - -// Tabbar -@tabbar-height: 50px; -@tabbar-z-index: 1; -@tabbar-background-color: @white; - -// TabbarItem -@tabbar-item-font-size: @font-size-sm; -@tabbar-item-text-color: @gray-7; -@tabbar-item-active-color: @blue; -@tabbar-item-active-background-color: @tabbar-background-color; -@tabbar-item-line-height: 1; -@tabbar-item-icon-size: 22px; -@tabbar-item-margin-bottom: 4px; - -// Tab -@tab-text-color: @gray-7; -@tab-active-text-color: @text-color; -@tab-disabled-text-color: @gray-5; -@tab-font-size: @font-size-md; -@tab-line-height: @line-height-md; - -// Tabs -@tabs-default-color: @red; -@tabs-line-height: 44px; -@tabs-card-height: 30px; -@tabs-nav-background-color: @white; -@tabs-bottom-bar-width: 40px; -@tabs-bottom-bar-height: 3px; -@tabs-bottom-bar-color: @tabs-default-color; - -// Tag -@tag-padding: 0 @padding-base; -@tag-text-color: @white; -@tag-font-size: @font-size-sm; -@tag-border-radius: 2px; -@tag-line-height: 16px; -@tag-medium-padding: 2px 6px; -@tag-large-padding: @padding-base @padding-xs; -@tag-large-border-radius: @border-radius-md; -@tag-large-font-size: @font-size-md; -@tag-round-border-radius: @border-radius-max; -@tag-danger-color: @red; -@tag-primary-color: @blue; -@tag-success-color: @green; -@tag-warning-color: @orange; -@tag-default-color: @gray-6; -@tag-plain-background-color: @white; - -// Toast -@toast-max-width: 70%; -@toast-font-size: @font-size-md; -@toast-text-color: @white; -@toast-loading-icon-color: @white; -@toast-line-height: @line-height-md; -@toast-border-radius: @border-radius-lg; -@toast-background-color: fade(@black, 70%); -@toast-icon-size: 36px; -@toast-text-min-width: 96px; -@toast-text-padding: @padding-xs @padding-sm; -@toast-default-padding: @padding-md; -@toast-default-width: 88px; -@toast-default-min-height: 88px; -@toast-position-top-distance: 20%; -@toast-position-bottom-distance: 20%; - -// TreeSelect -@tree-select-font-size: @font-size-md; -@tree-select-nav-background-color: @background-color; -@tree-select-content-background-color: @white; -@tree-select-nav-item-padding: 14px @padding-sm; -@tree-select-item-height: 48px; -@tree-select-item-active-color: @red; -@tree-select-item-disabled-color: @gray-5; -@tree-select-item-selected-size: 16px; - -// Uploader -@uploader-size: 80px; -@uploader-icon-size: 24px; -@uploader-icon-color: @gray-4; -@uploader-text-color: @gray-6; -@uploader-text-font-size: @font-size-sm; -@uploader-upload-background-color: @gray-1; -@uploader-upload-active-color: @active-color; -@uploader-delete-color: @white; -@uploader-delete-icon-size: 14px; -@uploader-delete-background-color: rgba(0, 0, 0, 0.7); -@uploader-file-background-color: @background-color; -@uploader-file-icon-size: 20px; -@uploader-file-icon-color: @gray-7; -@uploader-file-name-padding: 0 @padding-base; -@uploader-file-name-margin-top: @padding-xs; -@uploader-file-name-font-size: @font-size-sm; -@uploader-file-name-text-color: @gray-7; -@uploader-mask-text-color: @white; -@uploader-mask-background-color: fade(@gray-8, 88%); -@uploader-mask-icon-size: 22px; -@uploader-mask-message-font-size: @font-size-sm; -@uploader-mask-message-line-height: @line-height-xs; -@uploader-loading-icon-size: 22px; -@uploader-loading-icon-color: @white; -@uploader-disabled-opacity: @disabled-opacity; diff --git a/src/submit-bar/index.less b/src/submit-bar/index.less index 85563eb40..a1ab0acb7 100644 --- a/src/submit-bar/index.less +++ b/src/submit-bar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/safe-area.less'; .van-submit-bar { @@ -72,7 +72,7 @@ border: none; &--danger { - background: @action-bar-button-danger-color; + background: @gradient-red; } } diff --git a/src/submit-bar/var.less b/src/submit-bar/var.less new file mode 100644 index 000000000..961291964 --- /dev/null +++ b/src/submit-bar/var.less @@ -0,0 +1,21 @@ +@import '../style/var.less'; + +@submit-bar-height: 50px; +@submit-bar-z-index: 100; +@submit-bar-background-color: @white; +@submit-bar-button-width: 110px; +@submit-bar-price-color: @red; +@submit-bar-price-font-size: @font-size-md; +@submit-bar-currency-font-size: @font-size-md; +@submit-bar-text-color: @text-color; +@submit-bar-text-font-size: @font-size-md; +@submit-bar-tip-padding: @padding-xs @padding-sm; +@submit-bar-tip-font-size: @font-size-sm; +@submit-bar-tip-line-height: 1.5; +@submit-bar-tip-color: #f56723; +@submit-bar-tip-background-color: #fff7cc; +@submit-bar-tip-icon-size: 12px; +@submit-bar-button-height: 40px; +@submit-bar-padding: 0 @padding-md; +@submit-bar-price-integer-font-size: 20px; +@submit-bar-price-font-family: @price-integer-font-family; diff --git a/src/swipe-cell/index.less b/src/swipe-cell/index.less index 56c1f13b7..6742282b1 100644 --- a/src/swipe-cell/index.less +++ b/src/swipe-cell/index.less @@ -1,5 +1,3 @@ -@import '../style/var.less'; - .van-swipe-cell { position: relative; overflow: hidden; diff --git a/src/swipe-item/index.less b/src/swipe-item/index.less index 11274760e..6ced538c1 100644 --- a/src/swipe-item/index.less +++ b/src/swipe-item/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-swipe-item { position: relative; diff --git a/src/swipe-item/var.less b/src/swipe-item/var.less new file mode 100644 index 000000000..2397ef049 --- /dev/null +++ b/src/swipe-item/var.less @@ -0,0 +1 @@ +@import '../style/var.less'; diff --git a/src/swipe/index.less b/src/swipe/index.less index 2299fa9c4..1134ca286 100644 --- a/src/swipe/index.less +++ b/src/swipe/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-swipe { position: relative; diff --git a/src/swipe/var.less b/src/swipe/var.less new file mode 100644 index 000000000..e4bf1e6a1 --- /dev/null +++ b/src/swipe/var.less @@ -0,0 +1,8 @@ +@import '../style/var.less'; + +@swipe-indicator-size: 6px; +@swipe-indicator-margin: @padding-sm; +@swipe-indicator-active-opacity: 1; +@swipe-indicator-inactive-opacity: 0.3; +@swipe-indicator-active-background-color: @blue; +@swipe-indicator-inactive-background-color: @border-color; diff --git a/src/switch/index.less b/src/switch/index.less index c5b14ec0a..dea0e68d1 100644 --- a/src/switch/index.less +++ b/src/switch/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-switch { position: relative; diff --git a/src/switch/var.less b/src/switch/var.less new file mode 100644 index 000000000..612486243 --- /dev/null +++ b/src/switch/var.less @@ -0,0 +1,14 @@ +@import '../style/var.less'; + +@switch-size: 30px; +@switch-width: 2em; +@switch-height: 1em; +@switch-node-size: 1em; +@switch-node-background-color: @white; +@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), + 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05); +@switch-background-color: @white; +@switch-on-background-color: @blue; +@switch-transition-duration: @animation-duration-base; +@switch-disabled-opacity: @disabled-opacity; +@switch-border: @border-width-base solid rgba(0, 0, 0, 0.1); diff --git a/src/tab/index.less b/src/tab/index.less index 8bac4794d..b2b2d2c24 100644 --- a/src/tab/index.less +++ b/src/tab/index.less @@ -1,5 +1,3 @@ -@import '../style/var.less'; - .van-tab { &__pane { &, diff --git a/src/tabbar-item/index.less b/src/tabbar-item/index.less index 39a1eb523..d82d70f01 100644 --- a/src/tabbar-item/index.less +++ b/src/tabbar-item/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-tabbar-item { display: flex; diff --git a/src/tabbar-item/var.less b/src/tabbar-item/var.less new file mode 100644 index 000000000..be40c3869 --- /dev/null +++ b/src/tabbar-item/var.less @@ -0,0 +1,9 @@ +@import '../style/var.less'; + +@tabbar-item-font-size: @font-size-sm; +@tabbar-item-text-color: @gray-7; +@tabbar-item-active-color: @blue; +@tabbar-item-active-background-color: @white; +@tabbar-item-line-height: 1; +@tabbar-item-icon-size: 22px; +@tabbar-item-margin-bottom: 4px; diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 68d4970ae..b72d6311b 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -190,23 +190,23 @@ export default { ### TabbarItem Slots -| Name | Description | SlotProps | -| ---- | ----------- | -------------------------- | -| icon | Custom icon | _active: boolean_ | +| Name | Description | SlotProps | +| ---- | ----------- | ----------------- | +| icon | Custom icon | _active: boolean_ | ### Less Variables How to use: [Custom Theme](#/en-US/theme). -| Name | Default Value | Description | -| --- | --- | --- | -| @tabbar-height | `50px` | - | -| @tabbar-z-index | `1` | - | -| @tabbar-background-color | `@white` | - | -| @tabbar-item-font-size | `@font-size-sm` | - | -| @tabbar-item-text-color | `@gray-7` | - | -| @tabbar-item-active-color | `@blue` | - | -| @tabbar-item-active-background-color | `@tabbar-background-color` | - | -| @tabbar-item-line-height | `1` | - | -| @tabbar-item-icon-size | `22px` | - | -| @tabbar-item-margin-bottom | `4px` | - | +| Name | Default Value | Description | +| ------------------------------------ | --------------- | ----------- | +| @tabbar-height | `50px` | - | +| @tabbar-z-index | `1` | - | +| @tabbar-background-color | `@white` | - | +| @tabbar-item-font-size | `@font-size-sm` | - | +| @tabbar-item-text-color | `@gray-7` | - | +| @tabbar-item-active-color | `@blue` | - | +| @tabbar-item-active-background-color | `@white` | - | +| @tabbar-item-line-height | `1` | - | +| @tabbar-item-icon-size | `22px` | - | +| @tabbar-item-margin-bottom | `4px` | - | diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index e6a8e4a61..030c420cf 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -187,8 +187,8 @@ export default { ### Tabbar Events -| 事件名 | 说明 | 回调参数 | -| ------ | -------------- | ---------------------------------- | +| 事件名 | 说明 | 回调参数 | +| ------ | -------------- | -------------------------- | | change | 切换标签时触发 | _active: number \| string_ | ### TabbarItem Props @@ -206,23 +206,23 @@ export default { ### TabbarItem Slots -| 名称 | 说明 | 参数 | -| ---- | ---------- | ---------------------- | +| 名称 | 说明 | 参数 | +| ---- | ---------- | ----------------- | | icon | 自定义图标 | _active: boolean_ | ### 样式变量 组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------ | -------------------------- | ---- | -| @tabbar-height | `50px` | - | -| @tabbar-z-index | `1` | - | -| @tabbar-background-color | `@white` | - | -| @tabbar-item-font-size | `@font-size-sm` | - | -| @tabbar-item-text-color | `@gray-7` | - | -| @tabbar-item-active-color | `@blue` | - | -| @tabbar-item-active-background-color | `@tabbar-background-color` | - | -| @tabbar-item-line-height | `1` | - | -| @tabbar-item-icon-size | `22px` | - | -| @tabbar-item-margin-bottom | `4px` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------ | --------------- | ---- | +| @tabbar-height | `50px` | - | +| @tabbar-z-index | `1` | - | +| @tabbar-background-color | `@white` | - | +| @tabbar-item-font-size | `@font-size-sm` | - | +| @tabbar-item-text-color | `@gray-7` | - | +| @tabbar-item-active-color | `@blue` | - | +| @tabbar-item-active-background-color | `@white` | - | +| @tabbar-item-line-height | `1` | - | +| @tabbar-item-icon-size | `22px` | - | +| @tabbar-item-margin-bottom | `4px` | - | diff --git a/src/tabbar/index.less b/src/tabbar/index.less index a5a8f39a6..3e342afef 100644 --- a/src/tabbar/index.less +++ b/src/tabbar/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; @import '../style/mixins/safe-area.less'; .van-tabbar { diff --git a/src/tabbar/var.less b/src/tabbar/var.less new file mode 100644 index 000000000..3a636ddbf --- /dev/null +++ b/src/tabbar/var.less @@ -0,0 +1,5 @@ +@import '../style/var.less'; + +@tabbar-height: 50px; +@tabbar-z-index: 1; +@tabbar-background-color: @white; diff --git a/src/tabs/index.less b/src/tabs/index.less index 81e07ad50..8e105d134 100644 --- a/src/tabs/index.less +++ b/src/tabs/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-tab { position: relative; diff --git a/src/tabs/var.less b/src/tabs/var.less new file mode 100644 index 000000000..94adf9966 --- /dev/null +++ b/src/tabs/var.less @@ -0,0 +1,14 @@ +@import '../style/var.less'; + +@tab-text-color: @gray-7; +@tab-active-text-color: @text-color; +@tab-disabled-text-color: @gray-5; +@tab-font-size: @font-size-md; +@tab-line-height: @line-height-md; +@tabs-default-color: @red; +@tabs-line-height: 44px; +@tabs-card-height: 30px; +@tabs-nav-background-color: @white; +@tabs-bottom-bar-width: 40px; +@tabs-bottom-bar-height: 3px; +@tabs-bottom-bar-color: @tabs-default-color; diff --git a/src/tag/index.less b/src/tag/index.less index 7e7a5dce6..e4cde11f9 100644 --- a/src/tag/index.less +++ b/src/tag/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-tag { position: relative; diff --git a/src/tag/var.less b/src/tag/var.less new file mode 100644 index 000000000..6afaaa3ba --- /dev/null +++ b/src/tag/var.less @@ -0,0 +1,18 @@ +@import '../style/var.less'; + +@tag-padding: 0 @padding-base; +@tag-text-color: @white; +@tag-font-size: @font-size-sm; +@tag-border-radius: 2px; +@tag-line-height: 16px; +@tag-medium-padding: 2px 6px; +@tag-large-padding: @padding-base @padding-xs; +@tag-large-border-radius: @border-radius-md; +@tag-large-font-size: @font-size-md; +@tag-round-border-radius: @border-radius-max; +@tag-danger-color: @red; +@tag-primary-color: @blue; +@tag-success-color: @green; +@tag-warning-color: @orange; +@tag-default-color: @gray-6; +@tag-plain-background-color: @white; diff --git a/src/toast/index.less b/src/toast/index.less index 2f2e8e299..456b6fbed 100644 --- a/src/toast/index.less +++ b/src/toast/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-toast { display: flex; diff --git a/src/toast/var.less b/src/toast/var.less new file mode 100644 index 000000000..6d406c40c --- /dev/null +++ b/src/toast/var.less @@ -0,0 +1,17 @@ +@import '../style/var.less'; + +@toast-max-width: 70%; +@toast-font-size: @font-size-md; +@toast-text-color: @white; +@toast-loading-icon-color: @white; +@toast-line-height: @line-height-md; +@toast-border-radius: @border-radius-lg; +@toast-background-color: fade(@black, 70%); +@toast-icon-size: 36px; +@toast-text-min-width: 96px; +@toast-text-padding: @padding-xs @padding-sm; +@toast-default-padding: @padding-md; +@toast-default-width: 88px; +@toast-default-min-height: 88px; +@toast-position-top-distance: 20%; +@toast-position-bottom-distance: 20%; diff --git a/src/tree-select/index.less b/src/tree-select/index.less index 202838a6c..ab97621b6 100644 --- a/src/tree-select/index.less +++ b/src/tree-select/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-tree-select { position: relative; diff --git a/src/tree-select/var.less b/src/tree-select/var.less new file mode 100644 index 000000000..670927ca1 --- /dev/null +++ b/src/tree-select/var.less @@ -0,0 +1,10 @@ +@import '../style/var.less'; + +@tree-select-font-size: @font-size-md; +@tree-select-nav-background-color: @background-color; +@tree-select-content-background-color: @white; +@tree-select-nav-item-padding: 14px @padding-sm; +@tree-select-item-height: 48px; +@tree-select-item-active-color: @red; +@tree-select-item-disabled-color: @gray-5; +@tree-select-item-selected-size: 16px; diff --git a/src/uploader/index.less b/src/uploader/index.less index 55dc619ad..a9f42df56 100644 --- a/src/uploader/index.less +++ b/src/uploader/index.less @@ -1,4 +1,4 @@ -@import '../style/var.less'; +@import './var.less'; .van-uploader { position: relative; diff --git a/src/uploader/var.less b/src/uploader/var.less new file mode 100644 index 000000000..bc8d328f1 --- /dev/null +++ b/src/uploader/var.less @@ -0,0 +1,27 @@ +@import '../style/var.less'; + +@uploader-size: 80px; +@uploader-icon-size: 24px; +@uploader-icon-color: @gray-4; +@uploader-text-color: @gray-6; +@uploader-text-font-size: @font-size-sm; +@uploader-upload-background-color: @gray-1; +@uploader-upload-active-color: @active-color; +@uploader-delete-color: @white; +@uploader-delete-icon-size: 14px; +@uploader-delete-background-color: rgba(0, 0, 0, 0.7); +@uploader-file-background-color: @background-color; +@uploader-file-icon-size: 20px; +@uploader-file-icon-color: @gray-7; +@uploader-file-name-padding: 0 @padding-base; +@uploader-file-name-margin-top: @padding-xs; +@uploader-file-name-font-size: @font-size-sm; +@uploader-file-name-text-color: @gray-7; +@uploader-mask-text-color: @white; +@uploader-mask-background-color: fade(@gray-8, 88%); +@uploader-mask-icon-size: 22px; +@uploader-mask-message-font-size: @font-size-sm; +@uploader-mask-message-line-height: @line-height-xs; +@uploader-loading-icon-size: 22px; +@uploader-loading-icon-color: @white; +@uploader-disabled-opacity: @disabled-opacity;