blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

perf: remove CSS variables polyfill (#4487)

Browse Source 
* perf: remove CSS variables polyfill

* style: fix missing calc value

* perf: reduce some useless css vars
This commit is contained in:
neverland 2021-09-23 17:31:28 +08:00 committed by GitHub
parent ba5526ad07
commit 1a7889590f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
57 changed files with 1179 additions and 743 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/pages/submit-bar/index.wxml
View File

@ -14,7 +14,7 @@
price="{{ 3050 }}"
button-text="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
tip-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
tip-icon="info-o"
bind:submit="onClickButton"
custom-class="van-submit-bar"
safe-area-inset-bottom="{{ false }}"

99
packages/action-sheet/index.less
View File

@ -1,20 +1,28 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-action-sheet {
.theme(max-height, '@action-sheet-max-height') !important;
.theme(color, '@action-sheet-item-text-color');
max-height: var(
--action-sheet-max-height,
@action-sheet-max-height
) !important;
color: var(--action-sheet-item-text-color, @action-sheet-item-text-color);
&__item,
&__cancel {
padding: 14px @padding-md;
text-align: center;
.theme(font-size, '@action-sheet-item-font-size');
.theme(line-height, '@action-sheet-item-line-height');
.theme(background-color, '@action-sheet-item-background');
font-size: var(--action-sheet-item-font-size, @action-sheet-item-font-size);
line-height: var(
--action-sheet-item-line-height,
@action-sheet-item-line-height
);
background-color: var(
--action-sheet-item-background,
@action-sheet-item-background
);
&--hover {
.theme(background-color, '@active-color');
background-color: @active-color;
}
// reset weapp default border
@ -24,43 +32,76 @@
}
&__cancel {
.theme(color, '@action-sheet-cancel-text-color');
color: var(
--action-sheet-cancel-text-color,
@action-sheet-cancel-text-color
);
}
&__gap {
display: block;
.theme(height, '@action-sheet-cancel-padding-top');
.theme(background-color, '@action-sheet-cancel-padding-color');
height: var(
--action-sheet-cancel-padding-top,
@action-sheet-cancel-padding-top
);
background-color: var(
--action-sheet-cancel-padding-color,
@action-sheet-cancel-padding-color
);
}
&__item--disabled {
.theme(color, '@action-sheet-item-disabled-text-color');
color: var(
--action-sheet-item-disabled-text-color,
@action-sheet-item-disabled-text-color
);
}
&__item--disabled&__item--hover {
.theme(background-color, '@action-sheet-item-background');
background-color: var(
--action-sheet-item-background,
@action-sheet-item-background
);
}
&__subname {
.theme(margin-top, '@padding-xs');
.theme(font-size, '@action-sheet-subname-font-size');
.theme(color, '@action-sheet-subname-color');
.theme(line-height, '@action-sheet-subname-line-height');
margin-top: var(--padding-xs, @padding-xs);
font-size: var(
--action-sheet-subname-font-size,
@action-sheet-subname-font-size
);
color: var(--action-sheet-subname-color, @action-sheet-subname-color);
line-height: var(
--action-sheet-subname-line-height,
@action-sheet-subname-line-height
);
}
&__header {
text-align: center;
.theme(font-weight, '@font-weight-bold');
.theme(font-size, '@action-sheet-header-font-size');
.theme(line-height, '@action-sheet-header-height');
font-weight: var(--font-weight-bold, @font-weight-bold);
font-size: var(
--action-sheet-header-font-size,
@action-sheet-header-font-size
);
line-height: var(--action-sheet-header-height, @action-sheet-header-height);
}
&__description {
text-align: center;
.theme(padding, '20px @padding-md');
.theme(color, '@action-sheet-description-color');
.theme(font-size, '@action-sheet-description-font-size');
.theme(line-height, '@action-sheet-description-line-height');
padding: 20px var(--padding-md, @padding-md);
color: var(
--action-sheet-description-color,
@action-sheet-description-color
);
font-size: var(
--action-sheet-description-font-size,
@action-sheet-description-font-size
);
line-height: var(
--action-sheet-description-line-height,
@action-sheet-description-line-height
);
}
&__close {
@ -68,9 +109,15 @@
top: 0;
right: 0;
line-height: inherit !important;
.theme(padding, '@action-sheet-close-icon-padding');
.theme(font-size, '@action-sheet-close-icon-size') !important;
.theme(color, '@action-sheet-close-icon-color');
padding: var(
--action-sheet-close-icon-padding,
@action-sheet-close-icon-padding
);
font-size: var(
--action-sheet-close-icon-size,
@action-sheet-close-icon-size
) !important;
color: var(--action-sheet-close-icon-color, @action-sheet-close-icon-color);
}
&__loading {

123
packages/button/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-button {
position: relative;
@ -12,12 +11,11 @@
vertical-align: middle;
-webkit-appearance: none;
-webkit-text-size-adjust: 100%;
.theme(height, '@button-default-height');
.theme(line-height, '@button-line-height');
.theme(font-size, '@button-default-font-size');
.theme(transition, 'opacity @animation-duration-fast');
.theme(border-radius, '@button-border-radius');
height: var(--button-default-height, @button-default-height);
line-height: var(--button-line-height, @button-line-height);
font-size: var(--button-default-font-size, @button-default-font-size);
transition: opacity @animation-duration-fast;
border-radius: var(--button-border-radius, @button-border-radius);
&::before {
position: absolute;
@ -30,9 +28,8 @@
transform: translate(-50%, -50%);
opacity: 0;
content: ' ';
.theme(background-color, '@black');
.theme(border-color, '@black');
background-color: @black;
border-color: @black;
}
// reset weapp default border
@ -49,78 +46,110 @@
}
&--default {
.theme(color, '@button-default-color');
.theme(background, '@button-default-background-color');
.theme(border, '@button-border-width solid @button-default-border-color');
color: var(--button-default-color, @button-default-color);
background: var(
--button-default-background-color,
@button-default-background-color
);
border: var(--button-border-width, @button-border-width) solid
var(--button-default-border-color, @button-default-border-color);
}
&--primary {
.theme(color, '@button-primary-color');
.theme(background, '@button-primary-background-color');
.theme(border, '@button-border-width solid @button-primary-border-color');
color: var(--button-primary-color, @button-primary-color);
background: var(
--button-primary-background-color,
@button-primary-background-color
);
border: var(--button-border-width, @button-border-width) solid
var(--button-primary-border-color, @button-primary-border-color);
}
&--info {
.theme(color, '@button-info-color');
.theme(background, '@button-info-background-color');
.theme(border, '@button-border-width solid @button-info-border-color');
color: var(--button-info-color, @button-info-color);
background: var(
--button-info-background-color,
@button-info-background-color
);
border: var(--button-border-width, @button-border-width) solid
var(--button-info-border-color, @button-info-border-color);
}
&--danger {
.theme(color, '@button-danger-color');
.theme(background, '@button-danger-background-color');
.theme(border, '@button-border-width solid @button-danger-border-color');
color: var(--button-danger-color, @button-danger-color);
background: var(
--button-danger-background-color,
@button-danger-background-color
);
border: var(--button-border-width, @button-border-width) solid
var(--button-danger-border-color, @button-danger-border-color);
}
&--warning {
.theme(color, '@button-warning-color');
.theme(background, '@button-warning-background-color');
.theme(border, '@button-border-width solid @button-warning-border-color');
color: var(--button-warning-color, @button-warning-color);
background: var(
--button-warning-background-color,
@button-warning-background-color
);
border: var(--button-border-width, @button-border-width) solid
var(--button-warning-border-color, @button-warning-border-color);
}
&--plain {
.theme(background, '@button-plain-background-color');
background: var(
--button-plain-background-color,
@button-plain-background-color
);
&.van-button--primary {
.theme(color, '@button-primary-background-color');
color: var(
--button-primary-background-color,
@button-primary-background-color
);
}
&.van-button--info {
.theme(color, '@button-info-background-color');
color: var(--button-info-background-color, @button-info-background-color);
}
&.van-button--danger {
.theme(color, '@button-danger-background-color');
color: var(
--button-danger-background-color,
@button-danger-background-color
);
}
&.van-button--warning {
.theme(color, '@button-warning-background-color');
color: var(
--button-warning-background-color,
@button-warning-background-color
);
}
}
&--large {
width: 100%;
.theme(height, '@button-large-height');
height: var(--button-large-height, @button-large-height);
}
&--normal {
padding: 0 15px;
.theme(font-size, '@button-normal-font-size');
font-size: var(--button-normal-font-size, @button-normal-font-size);
}
&--small {
.theme(min-width, '@button-small-min-width');
.theme(height, '@button-small-height');
.theme(padding, '0 @padding-xs');
.theme(font-size, '@button-small-font-size');
min-width: var(--button-small-min-width, @button-small-min-width);
height: var(--button-small-height, @button-small-height);
padding: 0 var(--padding-xs, @padding-xs);
font-size: var(--button-small-font-size, @button-small-font-size);
}
// mini图标默认宽度50px，文字不能超过4个
&--mini {
display: inline-block;
.theme(min-width, '@button-mini-min-width');
.theme(height, '@button-mini-height');
.theme(font-size, '@button-mini-font-size');
min-width: var(--button-mini-min-width, @button-mini-min-width);
height: var(--button-mini-height, @button-mini-height);
font-size: var(--button-mini-font-size, @button-mini-font-size);
& + .van-button--mini {
margin-left: 5px;
@ -133,7 +162,10 @@
}
&--round {
.theme(border-radius, '@button-round-border-radius');
border-radius: var(
--button-round-border-radius,
@button-round-border-radius
);
}
&--square {
@ -141,7 +173,7 @@
}
&--disabled {
.theme(opacity, '@button-disabled-opacity');
opacity: var(--button-disabled-opacity, @button-disabled-opacity);
}
&__text {
@ -166,11 +198,16 @@
&::after {
border-color: inherit;
border-width: 1px;
.theme(border-radius, 'calc(@button-border-radius * 2)');
border-radius: calc(
var(--button-border-radius, @button-border-radius) * 2
);
}
&.van-button--round::after {
.theme(border-radius, '@button-round-border-radius');
border-radius: var(
--button-round-border-radius,
@button-round-border-radius
);
}
&.van-button--square::after {

18
packages/calendar/components/header/index.less
View File

@ -1,19 +1,20 @@
@import '../../../common/style/var.less';
@import '../../../common/style/theme.less';
.van-calendar {
&__header {
flex-shrink: 0;
.theme(box-shadow, '@calendar-header-box-shadow');
box-shadow: var(--calendar-header-box-shadow, @calendar-header-box-shadow);
}
&__header-title,
&__header-subtitle {
text-align: center;
.theme(height, '@calendar-header-title-height');
.theme(font-weight, '@font-weight-bold');
.theme(line-height, '@calendar-header-title-height');
height: var(--calendar-header-title-height, @calendar-header-title-height);
font-weight: var(--font-weight-bold, @font-weight-bold);
line-height: var(
--calendar-header-title-height,
@calendar-header-title-height
);
}
&__header-title:empty,
@ -32,8 +33,7 @@
&__weekday {
flex: 1;
text-align: center;
.theme(font-size, '@calendar-weekdays-font-size');
.theme(line-height, '@calendar-weekdays-height');
font-size: var(--calendar-weekdays-font-size, @calendar-weekdays-font-size);
line-height: var(--calendar-weekdays-height, @calendar-weekdays-height);
}
}

74
packages/calendar/components/month/index.less
View File

@ -1,18 +1,26 @@
@import '../../../common/style/var';
@import '../../../common/style/theme.less';
.van-calendar {
display: flex;
flex-direction: column;
height: 100%;
.theme(background-color, '@calendar-background-color');
background-color: var(
--calendar-background-color,
@calendar-background-color
);
&__month-title {
text-align: center;
.theme(height, '@calendar-header-title-height');
.theme(font-weight, '@font-weight-bold');
.theme(font-size, '@calendar-month-title-font-size');
.theme(line-height, '@calendar-header-title-height');
height: var(--calendar-header-title-height, @calendar-header-title-height);
font-weight: var(--font-weight-bold, @font-weight-bold);
font-size: var(
--calendar-month-title-font-size,
@calendar-month-title-font-size
);
line-height: var(
--calendar-header-title-height,
@calendar-header-title-height
);
}
&__days {
@ -29,9 +37,11 @@
z-index: 0;
transform: translate(-50%, -50%);
pointer-events: none;
.theme(color, '@calendar-month-mark-color');
.theme(font-size, '@calendar-month-mark-font-size');
color: var(--calendar-month-mark-color, @calendar-month-mark-color);
font-size: var(
--calendar-month-mark-font-size,
@calendar-month-mark-font-size
);
}
&__day,
@ -45,34 +55,36 @@
&__day {
position: relative;
width: 14.285%;
.theme(height, '@calendar-day-height');
.theme(font-size, '@calendar-day-font-size');
height: var(--calendar-day-height, @calendar-day-height);
font-size: var(--calendar-day-font-size, @calendar-day-font-size);
&--end,
&--start,
&--start-end,
&--multiple-middle,
&--multiple-selected {
.theme(color, '@calendar-range-edge-color');
.theme(background-color, '@calendar-range-edge-background-color');
color: var(--calendar-range-edge-color, @calendar-range-edge-color);
background-color: var(
--calendar-range-edge-background-color,
@calendar-range-edge-background-color
);
}
&--start {
.theme(border-radius, '@border-radius-md 0 0 @border-radius-md');
border-radius: @border-radius-md 0 0 @border-radius-md;
}
&--end {
.theme(border-radius, '0 @border-radius-md @border-radius-md 0');
border-radius: 0 @border-radius-md @border-radius-md 0;
}
&--start-end,
&--multiple-selected {
.theme(border-radius, '@border-radius-md');
border-radius: @border-radius-md;
}
&--middle {
.theme(color, '@calendar-range-middle-color');
color: var(--calendar-range-middle-color, @calendar-range-middle-color);
&::after {
position: absolute;
@ -82,15 +94,16 @@
left: 0;
background-color: currentColor;
content: '';
.theme(opacity, '@calendar-range-middle-background-opacity');
opacity: var(
--calendar-range-middle-background-opacity,
@calendar-range-middle-background-opacity
);
}
}
&--disabled {
cursor: default;
.theme(color, '@calendar-day-disabled-color');
color: var(--calendar-day-disabled-color, @calendar-day-disabled-color);
}
}
@ -99,8 +112,8 @@
position: absolute;
right: 0;
left: 0;
.theme(font-size, '@calendar-info-font-size');
.theme(line-height, '@calendar-info-line-height');
font-size: var(--calendar-info-font-size, @calendar-info-font-size);
line-height: var(--calendar-info-line-height, @calendar-info-line-height);
@media (max-width: 350px) {
font-size: 9px;
@ -116,10 +129,13 @@
}
&__selected-day {
.theme(width, '@calendar-selected-day-size');
.theme(height, '@calendar-selected-day-size');
.theme(color, '@calendar-selected-day-color');
.theme(background-color, '@calendar-selected-day-background-color');
.theme(border-radius, '@border-radius-md');
width: var(--calendar-selected-day-size, @calendar-selected-day-size);
height: var(--calendar-selected-day-size, @calendar-selected-day-size);
color: var(--calendar-selected-day-color, @calendar-selected-day-color);
background-color: var(
--calendar-selected-day-background-color,
@calendar-selected-day-background-color
);
border-radius: @border-radius-md;
}
}

27
packages/calendar/index.less
View File

@ -1,11 +1,13 @@
@import '../common/style/var';
@import '../common/style/theme.less';
.van-calendar {
display: flex;
flex-direction: column;
.theme(height, '@calendar-height');
.theme(background-color, '@calendar-background-color');
height: var(--calendar-height, @calendar-height);
background-color: var(
--calendar-background-color,
@calendar-background-color
);
&__close-icon {
top: 11px;
@ -13,7 +15,7 @@
&__popup--top,
&__popup--bottom {
.theme(height, '@calendar-popup-height');
height: var(--calendar-popup-height, @calendar-popup-height);
}
&__popup--left,
@ -29,7 +31,7 @@
&__footer {
flex-shrink: 0;
.theme(padding, '0 @padding-md');
padding: 0 var(--padding-md, @padding-md);
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
@ -47,8 +49,17 @@
}
&__confirm {
.theme(height, '@calendar-confirm-button-height') !important;
.theme(margin, '@calendar-confirm-button-margin') !important;
.theme(line-height, '@calendar-confirm-button-line-height') !important;
height: var(
--calendar-confirm-button-height,
@calendar-confirm-button-height
) !important;
margin: var(
--calendar-confirm-button-margin,
@calendar-confirm-button-margin
) !important;
line-height: var(
--calendar-confirm-button-line-height,
@calendar-confirm-button-line-height
) !important;
}
}

42
packages/card/index.less
View File

@ -1,13 +1,12 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-card {
position: relative;
box-sizing: border-box;
.theme(padding, '@card-padding');
.theme(font-size, '@card-font-size');
.theme(color, '@card-text-color');
.theme(background-color, '@card-background-color');
padding: var(--card-padding, @card-padding);
font-size: var(--card-font-size, @card-font-size);
color: var(--card-text-color, @card-text-color);
background-color: var(--card-background-color, @card-background-color);
&__header {
display: flex;
@ -21,9 +20,9 @@
&__thumb {
position: relative;
flex: none;
.theme(width, '@card-thumb-size');
.theme(height, '@card-thumb-size');
.theme(margin-right, '@padding-xs');
width: var(--card-thumb-size, @card-thumb-size);
height: var(--card-thumb-size, @card-thumb-size);
margin-right: var(--padding-xs, @padding-xs);
&:empty {
display: none;
@ -33,7 +32,7 @@
&__img {
width: 100%;
height: 100%;
.theme(border-radius, '@border-radius-lg');
border-radius: @border-radius-lg;
}
&__content {
@ -43,7 +42,7 @@
flex-direction: column;
justify-content: space-between;
min-width: 0; /* hack for flex box ellipsis */
.theme(min-height, '@card-thumb-size');
min-height: var(--card-thumb-size, @card-thumb-size);
&--center {
justify-content: center;
@ -57,12 +56,12 @@
&__title {
font-weight: bold;
.theme(line-height, '@card-title-line-height');
line-height: var(--card-title-line-height, @card-title-line-height);
}
&__desc {
.theme(line-height, '@card-desc-line-height');
.theme(color, '@card-desc-color');
line-height: var(--card-desc-line-height, @card-desc-line-height);
color: var(--card-desc-color, @card-desc-color);
}
&__bottom {
@ -72,16 +71,19 @@
&__price {
display: inline-block;
font-weight: bold;
.theme(color, '@card-price-color');
.theme(font-size, '@card-price-font-size');
color: var(--card-price-color, @card-price-color);
font-size: var(--card-price-font-size, @card-price-font-size);
&-integer {
.theme(font-size, '@card-price-integer-font-size');
.theme(font-family, '@card-price-font-family');
font-size: var(
--card-price-integer-font-size,
@card-price-integer-font-size
);
font-family: var(--card-price-font-family, @card-price-font-family);
}
&-decimal {
.theme(font-family, '@card-price-font-family');
font-family: var(--card-price-font-family, @card-price-font-family);
}
}
@ -89,8 +91,8 @@
display: inline-block;
margin-left: 5px;
text-decoration: line-through;
.theme(font-size, '@card-origin-price-font-size');
.theme(color, '@card-origin-price-color');
font-size: var(--card-origin-price-font-size, @card-origin-price-font-size);
color: var(--card-origin-price-color, @card-origin-price-color);
}
&__num {

25
packages/cell-group/index.less
View File

@ -1,22 +1,29 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-cell-group {
&--inset {
.theme(margin, '@cell-group-inset-padding');
.theme(border-radius, '@cell-group-inset-border-radius');
margin: var(--cell-group-inset-padding, @cell-group-inset-padding);
border-radius: var(
--cell-group-inset-border-radius,
@cell-group-inset-border-radius
);
overflow: hidden;
}
&__title {
.theme(padding, '@cell-group-title-padding');
.theme(font-size, '@cell-group-title-font-size');
.theme(line-height, '@cell-group-title-line-height');
.theme(color, '@cell-group-title-color');
padding: var(--cell-group-title-padding, @cell-group-title-padding);
font-size: var(--cell-group-title-font-size, @cell-group-title-font-size);
line-height: var(
--cell-group-title-line-height,
@cell-group-title-line-height
);
color: var(--cell-group-title-color, @cell-group-title-color);
&--inset {
.theme(padding, '@cell-group-inset-title-padding');
padding: var(
--cell-group-inset-title-padding,
@cell-group-inset-title-padding
);
}
}
}

62
packages/cell/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
@import '../common/style/mixins/hairline.less';
.van-cell {
@ -7,11 +6,12 @@
display: flex;
box-sizing: border-box;
width: 100%;
.theme(padding, '@cell-vertical-padding @cell-horizontal-padding');
.theme(font-size, '@cell-font-size');
.theme(line-height, '@cell-line-height');
.theme(color, '@cell-text-color');
.theme(background-color, '@cell-background-color');
padding: var(--cell-vertical-padding, @cell-vertical-padding)
var(--cell-horizontal-padding, @cell-horizontal-padding);
font-size: var(--cell-font-size, @cell-font-size);
line-height: var(--cell-line-height, @cell-line-height);
color: var(--cell-text-color, @cell-text-color);
background-color: var(--cell-background-color, @cell-background-color);
&::after {
.hairline-bottom(@border-color, @padding-md, @padding-md);
@ -22,21 +22,21 @@
}
&-group {
.theme(background-color, '@cell-background-color');
background-color: var(--cell-background-color, @cell-background-color);
}
&__label {
.theme(margin-top, '@cell-label-margin-top');
.theme(font-size, '@cell-label-font-size');
.theme(line-height, '@cell-label-line-height');
.theme(color, '@cell-label-color');
margin-top: var(--cell-label-margin-top, @cell-label-margin-top);
font-size: var(--cell-label-font-size, @cell-label-font-size);
line-height: var(--cell-label-line-height, @cell-label-line-height);
color: var(--cell-label-color, @cell-label-color);
}
&__value {
overflow: hidden;
text-align: right;
vertical-align: middle;
.theme(color, '@cell-value-color');
color: var(--cell-value-color, @cell-value-color);
}
&__title,
@ -52,30 +52,30 @@
&__right-icon-wrap {
display: flex;
align-items: center;
.theme(height, '@cell-line-height');
.theme(font-size, '@cell-icon-size');
height: var(--cell-line-height, @cell-line-height);
font-size: var(--cell-icon-size, @cell-icon-size);
}
&__left-icon-wrap {
.theme(margin-right, '@padding-base');
margin-right: var(--padding-base, @padding-base);
}
&__right-icon-wrap {
.theme(margin-left, '@padding-base');
.theme(color, '@cell-right-icon-color');
margin-left: var(--padding-base, @padding-base);
color: var(--cell-right-icon-color, @cell-right-icon-color);
}
&__left-icon {
vertical-align: middle;
.theme(line-height, '@cell-line-height');
line-height: var(--cell-line-height, @cell-line-height);
}
&__right-icon {
.theme(line-height, '@cell-line-height');
line-height: var(--cell-line-height, @cell-line-height);
}
&--clickable&--hover {
.theme(background-color, '@cell-active-color');
background-color: var(--cell-active-color, @cell-active-color);
}
&--required {
@ -84,9 +84,9 @@
&::before {
position: absolute;
content: '*';
.theme(left, '@padding-xs');
.theme(font-size, '@cell-font-size');
.theme(color, '@cell-required-color');
left: var(--padding-xs, @padding-xs);
font-size: var(--cell-font-size, @cell-font-size);
color: var(--cell-required-color, @cell-required-color);
}
}
@ -95,19 +95,25 @@
}
&--large {
.theme(padding-top, '@cell-large-vertical-padding');
.theme(padding-bottom, '@cell-large-vertical-padding');
padding-top: var(
--cell-large-vertical-padding,
@cell-large-vertical-padding
);
padding-bottom: var(
--cell-large-vertical-padding,
@cell-large-vertical-padding
);
.van-cell__title {
.theme(font-size, '@cell-large-title-font-size');
font-size: var(--cell-large-title-font-size, @cell-large-title-font-size);
}
.van-cell__value {
.theme(font-size, '@cell-large-value-font-size');
font-size: var(--cell-large-value-font-size, @cell-large-value-font-size);
}
.van-cell__label {
.theme(font-size, '@cell-large-label-font-size');
font-size: var(--cell-large-label-font-size, @cell-large-label-font-size);
}
}
}

49
packages/checkbox/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-checkbox {
display: flex;
@ -13,7 +12,7 @@
&__icon-wrap,
&__label {
.theme(line-height, '@checkbox-size');
line-height: var(--checkbox-size, @checkbox-size);
}
&__icon-wrap {
@ -30,44 +29,60 @@
color: transparent;
text-align: center;
transition-property: color, border-color, background-color;
.theme(font-size, '@checkbox-size');
.theme(border, '1px solid @checkbox-border-color');
.theme(transition-duration, '@checkbox-transition-duration');
font-size: var(--checkbox-size, @checkbox-size);
border: 1px solid var(--checkbox-border-color, @checkbox-border-color);
transition-duration: var(
--checkbox-transition-duration,
@checkbox-transition-duration
);
&--round {
border-radius: 100%;
}
&--checked {
.theme(color, '@white');
.theme(background-color, '@checkbox-checked-icon-color');
.theme(border-color, '@checkbox-checked-icon-color');
color: @white;
background-color: var(
--checkbox-checked-icon-color,
@checkbox-checked-icon-color
);
border-color: var(
--checkbox-checked-icon-color,
@checkbox-checked-icon-color
);
}
&--disabled {
.theme(background-color, '@checkbox-disabled-background-color');
.theme(border-color, '@checkbox-disabled-icon-color');
background-color: var(
--checkbox-disabled-background-color,
@checkbox-disabled-background-color
);
border-color: var(
--checkbox-disabled-icon-color,
@checkbox-disabled-icon-color
);
}
&--disabled&--checked {
.theme(color, '@checkbox-disabled-icon-color');
color: var(--checkbox-disabled-icon-color, @checkbox-disabled-icon-color);
}
}
&__label {
word-wrap: break-word;
.theme(padding-left, '@checkbox-label-margin');
.theme(color, '@checkbox-label-color');
padding-left: var(--checkbox-label-margin, @checkbox-label-margin);
color: var(--checkbox-label-color, @checkbox-label-color);
&--left {
float: left;
.theme(margin, '0 @checkbox-label-margin 0 0');
margin: 0 var(--checkbox-label-margin, @checkbox-label-margin) 0 0;
}
&--disabled {
.theme(color, '@checkbox-disabled-label-color');
color: var(
--checkbox-disabled-label-color,
@checkbox-disabled-label-color
);
}
&:empty {

4
packages/circle/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-circle {
position: relative;
@ -12,7 +11,6 @@
left: 0;
width: 100%;
transform: translateY(-50%);
.theme(color, '@circle-text-color');
color: var(--circle-text-color, @circle-text-color);
}
}

39
packages/collapse-item/index.less
View File

@ -1,11 +1,14 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-collapse-item {
&__title {
.van-cell__right-icon {
transform: rotate(90deg);
.theme(transition, 'transform @collapse-item-transition-duration');
transition: transform
var(
--collapse-item-transition-duration,
@collapse-item-transition-duration
);
}
&--expanded {
@ -17,11 +20,14 @@
&--disabled {
.van-cell,
.van-cell__right-icon {
.theme(color, '@collapse-item-title-disabled-color') !important;
color: var(
--collapse-item-title-disabled-color,
@collapse-item-title-disabled-color
) !important;
}
.van-cell--hover {
.theme(background-color, '@white') !important;
background-color: @white !important;
}
}
}
@ -31,10 +37,25 @@
}
&__content {
.theme(padding, '@collapse-item-content-padding');
.theme(color, '@collapse-item-content-text-color');
.theme(font-size, '@collapse-item-content-font-size');
.theme(line-height, '@collapse-item-content-line-height');
.theme(background-color, '@collapse-item-content-background-color');
padding: var(
--collapse-item-content-padding,
@collapse-item-content-padding
);
color: var(
--collapse-item-content-text-color,
@collapse-item-content-text-color
);
font-size: var(
--collapse-item-content-font-size,
@collapse-item-content-font-size
);
line-height: var(
--collapse-item-content-line-height,
@collapse-item-content-line-height
);
background-color: var(
--collapse-item-content-background-color,
@collapse-item-content-background-color
);
}
}

6
packages/common/style/theme.less
View File

@ -1,6 +0,0 @@
@import (reference) './var.less';
.theme(@property, @imp) {
@{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig'));
@{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig'));
}

7
packages/count-down/index.less
View File

@ -1,8 +1,7 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-count-down {
.theme(color, '@count-down-text-color');
.theme(font-size, '@count-down-font-size');
.theme(line-height, '@count-down-line-height');
color: var(--count-down-text-color, @count-down-text-color);
font-size: var(--count-down-font-size, @count-down-font-size);
line-height: var(--count-down-line-height, @count-down-line-height);
}

40
packages/dialog/index.less
View File

@ -1,26 +1,28 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-dialog {
top: 45% !important;
overflow: hidden;
.theme(width, '@dialog-width');
.theme(font-size, '@dialog-font-size');
.theme(border-radius, '@dialog-border-radius');
.theme(background-color, '@dialog-background-color');
width: var(--dialog-width, @dialog-width);
font-size: var(--dialog-font-size, @dialog-font-size);
border-radius: var(--dialog-border-radius, @dialog-border-radius);
background-color: var(--dialog-background-color, @dialog-background-color);
@media (max-width: 321px) {
.theme(width, '@dialog-small-screen-width');
width: var(--dialog-small-screen-width, @dialog-small-screen-width);
}
&__header {
text-align: center;
.theme(padding-top, '@dialog-header-padding-top');
.theme(font-weight, '@dialog-header-font-weight');
.theme(line-height, '@dialog-header-line-height');
padding-top: var(--dialog-header-padding-top, @dialog-header-padding-top);
font-weight: var(--dialog-header-font-weight, @dialog-header-font-weight);
line-height: var(--dialog-header-line-height, @dialog-header-line-height);
&--isolated {
.theme(padding, '@dialog-header-isolated-padding');
padding: var(
--dialog-header-isolated-padding,
@dialog-header-isolated-padding
);
}
}
@ -28,18 +30,24 @@
overflow-y: auto;
text-align: center;
-webkit-overflow-scrolling: touch;
.theme(font-size, '@dialog-message-font-size');
.theme(line-height, '@dialog-message-line-height');
.theme(max-height, '@dialog-message-max-height');
.theme(padding, '@dialog-message-padding');
font-size: var(--dialog-message-font-size, @dialog-message-font-size);
line-height: var(--dialog-message-line-height, @dialog-message-line-height);
max-height: var(--dialog-message-max-height, @dialog-message-max-height);
padding: var(--dialog-message-padding, @dialog-message-padding);
&-text {
word-wrap: break-word;
}
&--hasTitle {
.theme(padding-top, '@dialog-has-title-message-padding-top');
.theme(color, '@dialog-has-title-message-text-color');
padding-top: var(
--dialog-has-title-message-padding-top,
@dialog-has-title-message-padding-top
);
color: var(
--dialog-has-title-message-text-color,
@dialog-has-title-message-text-color
);
}
&--round-button {

23
packages/divider/index.less
View File

@ -1,17 +1,15 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-divider {
display: flex;
align-items: center;
border-style: solid;
border-width: 0;
.theme(margin, '@divider-margin');
.theme(color, '@divider-text-color');
.theme(font-size, '@divider-font-size');
.theme(line-height, '@divider-line-height');
.theme(border-color, '@divider-border-color');
margin: var(--divider-margin, @divider-margin);
color: var(--divider-text-color, @divider-text-color);
font-size: var(--divider-font-size, @divider-font-size);
line-height: var(--divider-line-height, @divider-line-height);
border-color: var(--divider-border-color, @divider-border-color);
&::before,
&::after {
@ -43,24 +41,27 @@
&--left,
&--right {
&::before {
.theme(margin-right, '@divider-content-padding');
margin-right: var(--divider-content-padding, @divider-content-padding);
}
&::after {
content: '';
.theme(margin-left, '@divider-content-padding');
margin-left: var(--divider-content-padding, @divider-content-padding);
}
}
&--left {
&::before {
.theme(max-width, '@divider-content-left-width');
max-width: var(--divider-content-left-width, @divider-content-left-width);
}
}
&--right {
&::after {
.theme(max-width, '@divider-content-right-width');
max-width: var(
--divider-content-right-width,
@divider-content-right-width
);
}
}
}

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

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-dropdown-item {
position: fixed;
@ -13,7 +12,10 @@
&--active {
.van-dropdown-item__title,
.van-dropdown-item__icon {
.theme(color, '@dropdown-menu-option-active-color');
color: var(
--dropdown-menu-option-active-color,
@dropdown-menu-option-active-color
);
}
}
}

35
packages/dropdown-menu/index.less
View File

@ -1,12 +1,14 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-dropdown-menu {
display: flex;
box-shadow: 0 2px 12px fade(@gray-7, 12);
user-select: none;
.theme(height, '@dropdown-menu-height');
.theme(background-color, '@dropdown-menu-background-color');
height: var(--dropdown-menu-height, @dropdown-menu-height);
background-color: var(
--dropdown-menu-background-color,
@dropdown-menu-background-color
);
&__item {
display: flex;
@ -25,7 +27,10 @@
}
.van-dropdown-menu__title {
.theme(color, '@dropdown-menu-title-disabled-text-color');
color: var(
--dropdown-menu-title-disabled-text-color,
@dropdown-menu-title-disabled-text-color
);
}
}
}
@ -34,10 +39,19 @@
position: relative;
box-sizing: border-box;
max-width: 100%;
.theme(padding, '@dropdown-menu-title-padding');
.theme(color, '@dropdown-menu-title-text-color');
.theme(font-size,'@dropdown-menu-title-font-size');
.theme(line-height,'@dropdown-menu-title-line-height');
padding: var(--dropdown-menu-title-padding, @dropdown-menu-title-padding);
color: var(
--dropdown-menu-title-text-color,
@dropdown-menu-title-text-color
);
font-size: var(
--dropdown-menu-title-font-size,
@dropdown-menu-title-font-size
);
line-height: var(
--dropdown-menu-title-line-height,
@dropdown-menu-title-line-height
);
&::after {
position: absolute;
@ -52,7 +66,10 @@
}
&--active {
.theme(color,'@dropdown-menu-title-active-text-color');
color: var(
--dropdown-menu-title-active-text-color,
@dropdown-menu-title-active-text-color
);
}
&--down {

1
packages/empty/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-empty {
display: flex;

73
packages/field/index.less
View File

@ -1,14 +1,13 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-field {
.theme(--cell-icon-size, '@field-icon-size');
--cell-icon-size: var(--field-icon-size, @field-icon-size);
&__label {
.theme(color, '@field-label-color');
color: var(--field-label-color, @field-label-color);
&--disabled {
.theme(color, '@field-disabled-text-color');
color: var(--field-disabled-text-color, @field-disabled-text-color);
}
}
@ -20,7 +19,7 @@
box-sizing: border-box;
padding: 3.6px 0;
line-height: 1.2em;
.theme(min-height, '@cell-line-height');
min-height: var(--cell-line-height, @cell-line-height);
}
}
@ -40,28 +39,33 @@
background-color: transparent;
border: 0;
resize: none;
.theme(color, '@field-input-text-color');
.theme(height, '@cell-line-height');
.theme(min-height, '@cell-line-height');
color: var(--field-input-text-color, @field-input-text-color);
height: var(--cell-line-height, @cell-line-height);
min-height: var(--cell-line-height, @cell-line-height);
&:empty {
display: none;
}
&--textarea {
.theme(height, '@field-text-area-min-height');
.theme(min-height, '@field-text-area-min-height');
height: var(--field-text-area-min-height, @field-text-area-min-height);
min-height: var(
--field-text-area-min-height,
@field-text-area-min-height
);
}
&--error {
.theme(color, '@field-input-error-text-color');
color: var(--field-input-error-text-color, @field-input-error-text-color);
}
&--disabled {
background-color: transparent;
opacity: 1;
.theme(color, '@field-input-disabled-text-color');
color: var(
--field-input-disabled-text-color,
@field-input-disabled-text-color
);
}
&--center {
@ -75,8 +79,7 @@
&--custom {
display: flex;
align-items: center;
.theme(min-height, '@cell-line-height');
min-height: var(--cell-line-height, @cell-line-height);
}
}
@ -86,25 +89,25 @@
right: 0;
left: 0;
pointer-events: none;
.theme(color, '@field-placeholder-text-color');
color: var(--field-placeholder-text-color, @field-placeholder-text-color);
&--error {
.theme(color, '@field-error-message-color');
color: var(--field-error-message-color, @field-error-message-color);
}
}
&__icon-root {
display: flex;
align-items: center;
.theme(min-height, '@cell-line-height');
min-height: var(--cell-line-height, @cell-line-height);
}
&__clear-root,
&__icon-container {
line-height: inherit;
vertical-align: middle;
.theme(padding, '0 @padding-xs');
.theme(margin-right, '-@padding-xs');
padding: 0 var(--padding-xs, @padding-xs);
margin-right: calc(-1 * var(--padding-xs, @padding-xs));
}
&__clear-root,
@ -114,13 +117,13 @@
}
&__clear-root {
.theme(font-size, '@field-clear-icon-size');
.theme(color, '@field-clear-icon-color');
font-size: var(--field-clear-icon-size, @field-clear-icon-size);
color: var(--field-clear-icon-color, @field-clear-icon-color);
}
&__icon-container {
.theme(font-size, '@field-icon-size');
.theme(color, '@field-icon-container-color');
font-size: var(--field-icon-size, @field-icon-size);
color: var(--field-icon-container-color, @field-icon-container-color);
&:empty {
display: none;
@ -128,7 +131,7 @@
}
&__button {
.theme(padding-left, '@padding-xs');
padding-left: var(--padding-xs, @padding-xs);
&:empty {
display: none;
@ -137,8 +140,11 @@
&__error-message {
text-align: left;
.theme(font-size, '@field-error-message-text-font-size');
.theme(color, '@field-error-message-color');
font-size: var(
--field-error-message-text-font-size,
@field-error-message-text-font-size
);
color: var(--field-error-message-color, @field-error-message-color);
&--center {
text-align: center;
@ -151,17 +157,20 @@
&__word-limit {
text-align: right;
.theme(margin-top, '@padding-base');
.theme(color, '@field-word-limit-color');
.theme(font-size, '@field-word-limit-font-size');
.theme(line-height, '@field-word-limit-line-height');
margin-top: var(--padding-base, @padding-base);
color: var(--field-word-limit-color, @field-word-limit-color);
font-size: var(--field-word-limit-font-size, @field-word-limit-font-size);
line-height: var(
--field-word-limit-line-height,
@field-word-limit-line-height
);
}
&__word-num {
display: inline;
&--full {
.theme(color, '@field-word-num-full-color');
color: var(--field-word-num-full-color, @field-word-num-full-color);
}
}
}

52
packages/goods-action-button/index.less
View File

@ -1,19 +1,30 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
:host {
flex: 1;
}
.van-goods-action-button {
.theme(
--button-warning-background-color,
'@goods-action-button-warning-color'
--button-warning-background-color: var(
--goods-action-button-warning-color,
@goods-action-button-warning-color
);
--button-danger-background-color: var(
--goods-action-button-danger-color,
@goods-action-button-danger-color
);
--button-default-height: var(
--goods-action-button-height,
@goods-action-button-height
);
--button-line-height: var(
--goods-action-button-line-height,
@goods-action-button-line-height
);
--button-plain-background-color: var(
--goods-action-button-plain-color,
@goods-action-button-plain-color
);
.theme(--button-danger-background-color, '@goods-action-button-danger-color');
.theme(--button-default-height, '@goods-action-button-height');
.theme(--button-line-height, '@goods-action-button-line-height');
.theme(--button-plain-background-color, '@goods-action-button-plain-color');
display: block;
@ -22,22 +33,29 @@
&--first {
margin-left: 5px;
.theme(
--button-border-radius,
'@goods-action-button-border-radius 0 0 @goods-action-button-border-radius'
--button-border-radius: @goods-action-button-border-radius 0 0
var(
--goods-action-button-border-radius,
@goods-action-button-border-radius
);
}
&--last {
margin-right: 5px;
.theme(
--button-border-radius,
'0 @goods-action-button-border-radius @goods-action-button-border-radius 0'
);
--button-border-radius: 0 @goods-action-button-border-radius
var(
--goods-action-button-border-radius,
@goods-action-button-border-radius
)
0;
}
&--first&--last {
.theme(--button-border-radius, '@goods-action-button-border-radius');
--button-border-radius: var(
--goods-action-button-border-radius,
@goods-action-button-border-radius
);
}
&--plain {
@ -46,7 +64,7 @@
&__inner {
width: 100%;
.theme(font-weight, '@font-weight-bold') !important;
font-weight: var(--font-weight-bold, @font-weight-bold) !important;
}
@media (max-width: 321px) {

20
packages/goods-action-icon/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-goods-action-icon {
display: flex !important;
@ -7,16 +6,21 @@
justify-content: center !important;
line-height: 1 !important;
border: none !important;
.theme(font-size, '@goods-action-icon-font-size') !important;
.theme(color, '@goods-action-icon-text-color') !important;
.theme(min-width, '@goods-action-icon-width');
.theme(height, '@goods-action-icon-height') !important;
font-size: var(
--goods-action-icon-font-size,
@goods-action-icon-font-size
) !important;
color: var(
--goods-action-icon-text-color,
@goods-action-icon-text-color
) !important;
min-width: var(--goods-action-icon-width, @goods-action-icon-width);
height: var(--goods-action-icon-height, @goods-action-icon-height) !important;
&__icon {
display: flex;
margin: 0 auto 5px;
.theme(color, '@goods-action-icon-color');
.theme(font-size, '@goods-action-icon-size');
color: var(--goods-action-icon-color, @goods-action-icon-color);
font-size: var(--goods-action-icon-size, @goods-action-icon-size);
}
}

8
packages/goods-action/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-goods-action {
position: fixed;
@ -9,8 +8,11 @@
display: flex;
align-items: center;
box-sizing: content-box;
.theme(height, '@goods-action-height');
.theme(background-color, '@goods-action-background-color');
height: var(--goods-action-height, @goods-action-height);
background-color: var(
--goods-action-background-color,
@goods-action-background-color
);
&--safe {
padding-bottom: constant(safe-area-inset-bottom);

26
packages/grid-item/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-grid-item {
position: relative;
@ -15,17 +14,20 @@
flex-direction: column;
box-sizing: border-box;
height: 100%;
.theme(padding, '@grid-item-content-padding');
.theme(background-color, '@grid-item-content-background-color');
padding: var(--grid-item-content-padding, @grid-item-content-padding);
background-color: var(
--grid-item-content-background-color,
@grid-item-content-background-color
);
&::after {
z-index: 1;
.theme(border-width,'0 @border-width-base @border-width-base 0');
border-width: 0 @border-width-base @border-width-base 0;
}
&--surround {
&::after {
.theme(border-width,'@border-width-base');
border-width: @border-width-base;
}
}
@ -66,22 +68,24 @@
}
&--clickable:active {
.theme(background-color, '@grid-item-content-active-color');
background-color: var(
--grid-item-content-active-color,
@grid-item-content-active-color
);
}
}
&__icon {
display: flex;
align-items: center;
.theme(font-size, '@grid-item-icon-size');
.theme(height, '@grid-item-icon-size');
font-size: var(--grid-item-icon-size, @grid-item-icon-size);
height: var(--grid-item-icon-size, @grid-item-icon-size);
}
&__text {
word-wrap: break-word;
.theme(color, '@grid-item-text-color');
.theme(font-size, '@grid-item-text-font-size');
color: var(--grid-item-text-color, @grid-item-text-color);
font-size: var(--grid-item-text-font-size, @grid-item-text-font-size);
}
&__icon + &__text {

21
packages/image/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-image {
position: relative;
@ -31,18 +30,24 @@
flex-direction: column;
align-items: center;
justify-content: center;
.theme(color, '@image-placeholder-text-color');
.theme(font-size, '@image-placeholder-font-size');
.theme(background-color, '@image-placeholder-background-color');
color: var(--image-placeholder-text-color, @image-placeholder-text-color);
font-size: var(--image-placeholder-font-size, @image-placeholder-font-size);
background-color: var(
--image-placeholder-background-color,
@image-placeholder-background-color
);
}
&__loading-icon {
.theme(color, '@image-loading-icon-color');
.theme(font-size, '@image-loading-icon-size') !important;
color: var(--image-loading-icon-color, @image-loading-icon-color);
font-size: var(
--image-loading-icon-size,
@image-loading-icon-size
) !important;
}
&__error-icon {
.theme(color, '@image-error-icon-color');
.theme(font-size, '@image-error-icon-size') !important;
color: var(--image-error-icon-color, @image-error-icon-color);
font-size: var(--image-error-icon-size, @image-error-icon-size) !important;
}
}

26
packages/index-anchor/index.less
View File

@ -1,18 +1,26 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-index-anchor {
.theme(padding, '@index-anchor-padding');
.theme(color, '@index-anchor-text-color');
.theme(font-weight, '@index-anchor-font-weight');
.theme(font-size, '@index-anchor-font-size');
.theme(line-height, '@index-anchor-line-height');
.theme(background-color, '@index-anchor-background-color');
padding: var(--index-anchor-padding, @index-anchor-padding);
color: var(--index-anchor-text-color, @index-anchor-text-color);
font-weight: var(--index-anchor-font-weight, @index-anchor-font-weight);
font-size: var(--index-anchor-font-size, @index-anchor-font-size);
line-height: var(--index-anchor-line-height, @index-anchor-line-height);
background-color: var(
--index-anchor-background-color,
@index-anchor-background-color
);
&--active {
right: 0;
left: 0;
.theme(color, '@index-anchor-active-text-color');
.theme(background-color, '@index-anchor-active-background-color');
color: var(
--index-anchor-active-text-color,
@index-anchor-active-text-color
);
background-color: var(
--index-anchor-active-background-color,
@index-anchor-active-background-color
);
}
}

11
packages/index-bar/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-index-bar {
position: relative;
@ -17,8 +16,12 @@
&__index {
font-weight: 500;
.theme(padding, '0 @padding-base 0 @padding-md');
.theme(font-size, '@index-bar-index-font-size');
.theme(line-height, '@index-bar-index-line-height');
padding: 0 var(--padding-base, @padding-base) 0
var(--padding-md, @padding-md);
font-size: var(--index-bar-index-font-size, @index-bar-index-font-size);
line-height: var(
--index-bar-index-line-height,
@index-bar-index-line-height
);
}
}

28
packages/info/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-info {
position: absolute;
@ -12,23 +11,22 @@
white-space: nowrap;
transform: translate(50%, -50%);
transform-origin: 100%;
.theme(height, '@info-size');
.theme(min-width, '@info-size');
.theme(padding, '@info-padding');
.theme(color, '@info-color');
.theme(font-weight, '@info-font-weight');
.theme(font-size, '@info-font-size');
.theme(font-family, '@info-font-family');
.theme(background-color, '@info-background-color');
.theme(border, '@info-border-width solid @white');
.theme(border-radius, '@info-size');
height: var(--info-size, @info-size);
min-width: var(--info-size, @info-size);
padding: var(--info-padding, @info-padding);
color: var(--info-color, @info-color);
font-weight: var(--info-font-weight, @info-font-weight);
font-size: var(--info-font-size, @info-font-size);
font-family: var(--info-font-family, @info-font-family);
background-color: var(--info-background-color, @info-background-color);
border: var(--info-border-width, @info-border-width) solid @white;
border-radius: var(--info-size, @info-size);
&--dot {
min-width: 0;
border-radius: 100%;
.theme(width, '@info-dot-size');
.theme(height, '@info-dot-size');
.theme(background-color, '@info-dot-color');
width: var(--info-dot-size, @info-dot-size);
height: var(--info-dot-size, @info-dot-size);
background-color: var(--info-dot-color, @info-dot-color);
}
}

24
packages/loading/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
:host {
font-size: 0;
@ -10,17 +9,22 @@
display: inline-flex;
align-items: center;
justify-content: center;
.theme(color, '@loading-spinner-color');
color: var(--loading-spinner-color, @loading-spinner-color);
&__spinner {
position: relative;
box-sizing: border-box;
.theme(width, '@loading-spinner-size');
width: var(--loading-spinner-size, @loading-spinner-size);
// compatible for 0.x, users may set width or height in root element
max-width: 100%;
max-height: 100%;
.theme(height, '@loading-spinner-size');
.theme(animation, 'van-rotate @loading-spinner-animation-duration linear infinite');
height: var(--loading-spinner-size, @loading-spinner-size);
animation: van-rotate
var(
--loading-spinner-animation-duration,
@loading-spinner-animation-duration
)
linear infinite;
&--spinner {
animation-timing-function: steps(12);
@ -34,10 +38,10 @@
}
&__text {
.theme(margin-left, '@padding-xs');
.theme(color, '@loading-text-color');
.theme(font-size, '@loading-text-font-size');
.theme(line-height, '@loading-text-line-height');
margin-left: var(--padding-xs, @padding-xs);
color: var(--loading-text-color, @loading-text-color);
font-size: var(--loading-text-font-size, @loading-text-font-size);
line-height: var(--loading-text-line-height, @loading-text-line-height);
&:empty {
display: none;
@ -48,7 +52,7 @@
flex-direction: column;
.van-loading__text {
.theme(margin, '@padding-xs 0 0');
margin: var(--padding-xs, @padding-xs) 0 0;
}
}

31
packages/nav-bar/index.less
View File

@ -1,13 +1,12 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-nav-bar {
position: relative;
text-align: center;
user-select: none;
.theme(height, '@nav-bar-height');
.theme(line-height, '@nav-bar-height');
.theme(background-color, '@nav-bar-background-color');
height: var(--nav-bar-height, @nav-bar-height);
line-height: var(--nav-bar-height, @nav-bar-height);
background-color: var(--nav-bar-background-color, @nav-bar-background-color);
&__content {
position: relative;
@ -17,19 +16,19 @@
&__text {
display: inline-block;
vertical-align: middle;
.theme(margin, '0 -@padding-md');
.theme(padding, '0 @padding-md');
.theme(color, '@nav-bar-text-color');
margin: 0 calc(-1 * var(--padding-md, @padding-md));
padding: 0 var(--padding-md, @padding-md);
color: var(--nav-bar-text-color, @nav-bar-text-color);
&--hover {
.theme(background-color, '@active-color');
background-color: @active-color;
}
}
&__arrow {
vertical-align: middle;
.theme(font-size, '@nav-bar-arrow-size') !important;
.theme(color, '@nav-bar-icon-color') !important;
font-size: var(--nav-bar-arrow-size, @nav-bar-arrow-size) !important;
color: var(--nav-bar-icon-color, @nav-bar-icon-color) !important;
+ .van-nav-bar__text {
margin-left: -20px;
@ -47,9 +46,9 @@
&__title {
max-width: 60%;
margin: 0 auto;
.theme(color, '@nav-bar-title-text-color');
.theme(font-weight, '@font-weight-bold');
.theme(font-size, '@nav-bar-title-font-size');
color: var(--nav-bar-title-text-color, @nav-bar-title-text-color);
font-weight: var(--font-weight-bold, @font-weight-bold);
font-size: var(--nav-bar-title-font-size, @nav-bar-title-font-size);
}
&__left,
@ -59,14 +58,14 @@
bottom: 0;
display: flex;
align-items: center;
.theme(font-size, '@font-size-md');
font-size: var(--font-size-md, @font-size-md);
}
&__left {
.theme(left, '@padding-md');
left: var(--padding-md, @padding-md);
}
&__right {
.theme(right, '@padding-md');
right: var(--padding-md, @padding-md);
}
}

28
packages/notice-bar/index.less
View File

@ -1,15 +1,17 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-notice-bar {
display: flex;
align-items: center;
.theme(height, '@notice-bar-height');
.theme(padding, '@notice-bar-padding');
.theme(font-size, '@notice-bar-font-size');
.theme(color, '@notice-bar-text-color');
.theme(line-height, '@notice-bar-line-height');
.theme(background-color, '@notice-bar-background-color');
height: var(--notice-bar-height, @notice-bar-height);
padding: var(--notice-bar-padding, @notice-bar-padding);
font-size: var(--notice-bar-font-size, @notice-bar-font-size);
color: var(--notice-bar-text-color, @notice-bar-text-color);
line-height: var(--notice-bar-line-height, @notice-bar-line-height);
background-color: var(
--notice-bar-background-color,
@notice-bar-background-color
);
&--withicon {
position: relative;
@ -18,7 +20,7 @@
&--wrapable {
height: auto;
.theme(padding, '@notice-bar-wrapable-padding');
padding: var(--notice-bar-wrapable-padding, @notice-bar-wrapable-padding);
.van-notice-bar {
&__wrap {
@ -37,23 +39,23 @@
align-items: center;
margin-right: 4px;
vertical-align: middle;
.theme(font-size, '@notice-bar-icon-size');
.theme(min-width, '@notice-bar-icon-min-width');
font-size: var(--notice-bar-icon-size, @notice-bar-icon-size);
min-width: var(--notice-bar-icon-min-width, @notice-bar-icon-min-width);
}
&__right-icon {
position: absolute;
top: 10px;
right: 15px;
.theme(font-size, '@notice-bar-icon-size');
.theme(min-width, '@notice-bar-icon-min-width');
font-size: var(--notice-bar-icon-size, @notice-bar-icon-size);
min-width: var(--notice-bar-icon-min-width, @notice-bar-icon-min-width);
}
&__wrap {
position: relative;
flex: 1;
overflow: hidden;
.theme(height, '@notice-bar-line-height');
height: var(--notice-bar-line-height, @notice-bar-line-height);
}
&__content {

27
packages/notify/index.less
View File

@ -1,12 +1,11 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-notify {
text-align: center;
word-wrap: break-word;
.theme(padding, '@notify-padding');
.theme(font-size, '@notify-font-size');
.theme(line-height, '@notify-line-height');
padding: var(--notify-padding, @notify-padding);
font-size: var(--notify-font-size, @notify-font-size);
line-height: var(--notify-line-height, @notify-line-height);
&__container {
position: fixed;
@ -17,18 +16,30 @@
}
&--primary {
.theme(background-color, '@notify-primary-background-color');
background-color: var(
--notify-primary-background-color,
@notify-primary-background-color
);
}
&--success {
.theme(background-color, '@notify-success-background-color');
background-color: var(
--notify-success-background-color,
@notify-success-background-color
);
}
&--danger {
.theme(background-color, '@notify-danger-background-color');
background-color: var(
--notify-danger-background-color,
@notify-danger-background-color
);
}
&--warning {
.theme(background-color, '@notify-warning-background-color');
background-color: var(
--notify-warning-background-color,
@notify-warning-background-color
);
}
}

3
packages/overlay/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-overlay {
position: fixed;
@ -7,5 +6,5 @@
left: 0;
width: 100%;
height: 100%;
.theme(background-color, '@overlay-background-color');
background-color: var(--overlay-background-color, @overlay-background-color);
}

7
packages/panel/index.less
View File

@ -1,15 +1,14 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-panel {
.theme(background, '@panel-background-color');
background: var(--panel-background-color, @panel-background-color);
&__header-value {
.theme(color, '@panel-header-value-color');
color: var(--panel-header-value-color, @panel-header-value-color);
}
&__footer {
.theme(padding,'@panel-footer-padding');
padding: var(--panel-footer-padding, @panel-footer-padding);
&:empty {
display: none;

17
packages/picker-column/index.less
View File

@ -1,22 +1,27 @@
@import '../common/style/var';
@import '../common/style/theme';
.van-picker-column {
overflow: hidden;
text-align: center;
.theme(color, '@picker-option-text-color');
.theme(font-size, '@picker-option-font-size');
color: var(--picker-option-text-color, @picker-option-text-color);
font-size: var(--picker-option-font-size, @picker-option-font-size);
&__item {
padding: 0 5px;
&--selected {
.theme(font-weight, '@font-weight-bold');
.theme(color, '@picker-option-selected-text-color');
font-weight: var(--font-weight-bold, @font-weight-bold);
color: var(
--picker-option-selected-text-color,
@picker-option-selected-text-color
);
}
&--disabled {
.theme(opacity, '@picker-option-disabled-opacity');
opacity: var(
--picker-option-disabled-opacity,
@picker-option-disabled-opacity
);
}
}
}

24
packages/picker/index.less
View File

@ -1,24 +1,23 @@
@import '../common/style/var';
@import '../common/style/theme.less';
.van-picker {
position: relative;
overflow: hidden;
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
user-select: none;
.theme(background-color, '@picker-background-color');
background-color: var(--picker-background-color, @picker-background-color);
&__toolbar {
display: flex;
justify-content: space-between;
.theme(height, '@picker-toolbar-height');
.theme(line-height, '@picker-toolbar-height');
height: var(--picker-toolbar-height, @picker-toolbar-height);
line-height: var(--picker-toolbar-height, @picker-toolbar-height);
}
&__cancel,
&__confirm {
.theme(padding, '@picker-action-padding');
.theme(font-size, '@picker-action-font-size');
padding: var(--picker-action-padding, @picker-action-padding);
font-size: var(--picker-action-font-size, @picker-action-font-size);
&--hover {
opacity: @active-opacity;
@ -26,18 +25,18 @@
}
&__confirm {
.theme(color, '@picker-confirm-action-color');
color: var(--picker-confirm-action-color, @picker-confirm-action-color);
}
&__cancel {
.theme(color, '@picker-cancel-action-color');
color: var(--picker-cancel-action-color, @picker-cancel-action-color);
}
&__title {
max-width: 50%;
text-align: center;
.theme(font-weight, '@font-weight-bold');
.theme(font-size, '@picker-option-font-size');
font-weight: var(--font-weight-bold, @font-weight-bold);
font-size: var(--picker-option-font-size, @picker-option-font-size);
}
&__columns {
@ -60,7 +59,10 @@
display: flex;
align-items: center;
justify-content: center;
.theme(background-color, '@picker-loading-mask-color');
background-color: var(
--picker-loading-mask-color,
@picker-loading-mask-color
);
}
&__mask {

71
packages/popup/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-popup {
position: fixed;
@ -9,7 +8,7 @@
transition-timing-function: ease;
animation: ease both;
-webkit-overflow-scrolling: touch;
.theme(background-color, '@popup-background-color');
background-color: var(--popup-background-color, @popup-background-color);
&--center {
top: 50%;
@ -17,7 +16,10 @@
transform: translate3d(-50%, -50%, 0);
&.van-popup--round {
.theme(border-radius, '@popup-round-border-radius');
border-radius: var(
--popup-round-border-radius,
@popup-round-border-radius
);
}
}
@ -27,7 +29,15 @@
width: 100%;
&.van-popup--round {
.theme(border-radius, '0 0 @popup-round-border-radius @popup-round-border-radius');
border-radius: 0 0
var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
)
var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
);
}
}
@ -37,7 +47,15 @@
transform: translate3d(0, -50%, 0);
&.van-popup--round {
.theme(border-radius, '@popup-round-border-radius 0 0 @popup-round-border-radius');
border-radius: var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
)
0 0
var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
);
}
}
@ -47,7 +65,15 @@
width: 100%;
&.van-popup--round {
.theme(border-radius, '@popup-round-border-radius @popup-round-border-radius 0 0');
border-radius: var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
)
var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
)
0 0;
}
}
@ -57,7 +83,16 @@
transform: translate3d(0, -50%, 0);
&.van-popup--round {
.theme(border-radius, '0 @popup-round-border-radius @popup-round-border-radius 0');
border-radius: 0
var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
)
var(
--popup-round-border-radius,
var(--popup-round-border-radius, @popup-round-border-radius)
)
0;
}
}
@ -73,28 +108,28 @@
&__close-icon {
position: absolute;
.theme(z-index, '@popup-close-icon-z-index');
.theme(color, '@popup-close-icon-color');
.theme(font-size, '@popup-close-icon-size');
z-index: var(--popup-close-icon-z-index, @popup-close-icon-z-index);
color: var(--popup-close-icon-color, @popup-close-icon-color);
font-size: var(--popup-close-icon-size, @popup-close-icon-size);
&--top-left {
.theme(top, '@popup-close-icon-margin');
.theme(left, '@popup-close-icon-margin');
top: var(--popup-close-icon-margin, @popup-close-icon-margin);
left: var(--popup-close-icon-margin, @popup-close-icon-margin);
}
&--top-right {
.theme(top, '@popup-close-icon-margin');
.theme(right, '@popup-close-icon-margin');
top: var(--popup-close-icon-margin, @popup-close-icon-margin);
right: var(--popup-close-icon-margin, @popup-close-icon-margin);
}
&--bottom-left {
.theme(bottom, '@popup-close-icon-margin');
.theme(left, '@popup-close-icon-margin');
bottom: var(--popup-close-icon-margin, @popup-close-icon-margin);
left: var(--popup-close-icon-margin, @popup-close-icon-margin);
}
&--bottom-right {
.theme(right, '@popup-close-icon-margin');
.theme(bottom, '@popup-close-icon-margin');
right: var(--popup-close-icon-margin, @popup-close-icon-margin);
bottom: var(--popup-close-icon-margin, @popup-close-icon-margin);
}
&:active {

22
packages/progress/index.less
View File

@ -1,18 +1,17 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-progress {
position: relative;
.theme(height, '@progress-height');
.theme(border-radius, '@progress-height');
.theme(background, '@progress-background-color');
height: var(--progress-height, @progress-height);
border-radius: var(--progress-height, @progress-height);
background: var(--progress-background-color, @progress-background-color);
&__portion {
position: absolute;
left: 0;
height: 100%;
border-radius: inherit;
.theme(background, '@progress-color');
background: var(--progress-color, @progress-color);
}
&__pivot {
@ -24,10 +23,13 @@
word-break: keep-all;
border-radius: 1em;
transform: translate(0, -50%);
.theme(color, '@progress-pivot-text-color');
.theme(padding, '@progress-pivot-padding');
.theme(font-size, '@progress-pivot-font-size');
.theme(line-height, '@progress-pivot-line-height');
.theme(background-color, '@progress-pivot-background-color');
color: var(--progress-pivot-text-color, @progress-pivot-text-color);
padding: var(--progress-pivot-padding, @progress-pivot-padding);
font-size: var(--progress-pivot-font-size, @progress-pivot-font-size);
line-height: var(--progress-pivot-line-height, @progress-pivot-line-height);
background-color: var(
--progress-pivot-background-color,
@progress-pivot-background-color
);
}
}

43
packages/radio/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-radio {
display: flex;
@ -12,7 +11,7 @@
}
&--horizontal {
.theme(margin-right, '@padding-sm');
margin-right: var(--padding-sm, @padding-sm);
}
&__icon {
@ -25,43 +24,55 @@
color: transparent;
text-align: center;
transition-property: color, border-color, background-color;
.theme(border, '1px solid @radio-border-color');
.theme(font-size, '@radio-size');
.theme(transition-duration, '@radio-transition-duration');
border: 1px solid var(--radio-border-color, @radio-border-color);
font-size: var(--radio-size, @radio-size);
transition-duration: var(
--radio-transition-duration,
@radio-transition-duration
);
&--round {
border-radius: 100%;
}
&--checked {
.theme(color, '@white');
.theme(background-color, '@radio-checked-icon-color');
.theme(border-color, '@radio-checked-icon-color');
color: @white;
background-color: var(
--radio-checked-icon-color,
@radio-checked-icon-color
);
border-color: var(--radio-checked-icon-color, @radio-checked-icon-color);
}
&--disabled {
.theme(background-color, '@radio-disabled-background-color');
.theme(border-color, '@radio-disabled-icon-color');
background-color: var(
--radio-disabled-background-color,
@radio-disabled-background-color
);
border-color: var(
--radio-disabled-icon-color,
@radio-disabled-icon-color
);
}
&--disabled&--checked {
.theme(color, '@radio-disabled-icon-color');
color: var(--radio-disabled-icon-color, @radio-disabled-icon-color);
}
}
&__label {
word-wrap: break-word;
.theme(padding-left, '@radio-label-margin');
.theme(color, '@radio-label-color');
.theme(line-height, '@radio-size');
padding-left: var(--radio-label-margin, @radio-label-margin);
color: var(--radio-label-color, @radio-label-color);
line-height: var(--radio-size, @radio-size);
&--left {
float: left;
.theme(margin, '0 @radio-label-margin 0 0');
margin: 0 var(--radio-label-margin, @radio-label-margin) 0 0;
}
&--disabled {
.theme(color, '@radio-disabled-label-color');
color: var(--radio-disabled-label-color, @radio-disabled-label-color);
}
&:empty {

17
packages/rate/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-rate {
display: inline-flex;
@ -7,34 +6,34 @@
&__item {
position: relative;
.theme(padding, '0 @rate-horizontal-padding');
padding: 0 var(--rate-horizontal-padding, @rate-horizontal-padding);
&:not(:last-child) {
.theme(padding-right, '@rate-icon-gutter');
padding-right: var(--rate-icon-gutter, @rate-icon-gutter);
}
}
&__icon {
display: block;
height: 1em;
.theme(color, '@rate-icon-void-color');
.theme(font-size, '@rate-icon-size');
color: var(--rate-icon-void-color, @rate-icon-void-color);
font-size: var(--rate-icon-size, @rate-icon-size);
&--half {
position: absolute;
top: 0;
width: 0.5em;
overflow: hidden;
.theme(left, '@rate-horizontal-padding');
.theme(color, '@rate-icon-full-color');
left: var(--rate-horizontal-padding, @rate-horizontal-padding);
color: var(--rate-icon-full-color, @rate-icon-full-color);
}
&--full {
.theme(color, '@rate-icon-full-color');
color: var(--rate-icon-full-color, @rate-icon-full-color);
}
&--disabled {
.theme(color, '@rate-icon-disabled-color');
color: var(--rate-icon-disabled-color, @rate-icon-disabled-color);
}
}
}

31
packages/search/index.less
View File

@ -1,36 +1,35 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-search {
display: flex;
align-items: center;
box-sizing: border-box;
.theme(padding, '@search-padding');
padding: var(--search-padding, @search-padding);
&__content {
display: flex;
flex: 1;
.theme(padding-left, '@padding-sm');
.theme(border-radius, '@border-radius-sm');
.theme(background-color, '@search-background-color');
padding-left: var(--padding-sm, @padding-sm);
border-radius: @border-radius-sm;
background-color: var(--search-background-color, @search-background-color);
&--round {
.theme(border-radius, '@border-radius-max');
border-radius: @border-radius-max;
}
}
&__label {
.theme(padding, '@search-label-padding');
.theme(font-size, '@search-label-font-size');
.theme(line-height, '@search-input-height');
.theme(color, '@search-label-color');
padding: var(--search-label-padding, @search-label-padding);
font-size: var(--search-label-font-size, @search-label-font-size);
line-height: var(--search-input-height, @search-input-height);
color: var(--search-label-color, @search-label-color);
}
&__field {
flex: 1;
&__left-icon {
.theme(color, '@search-left-icon-color');
color: var(--search-left-icon-color, @search-left-icon-color);
}
}
@ -39,13 +38,13 @@
}
&__action {
.theme(padding, '@search-action-padding');
.theme(font-size, '@search-action-font-size');
.theme(line-height, '@search-input-height');
.theme(color, '@search-action-text-color');
padding: var(--search-action-padding, @search-action-padding);
font-size: var(--search-action-font-size, @search-action-font-size);
line-height: var(--search-input-height, @search-input-height);
color: var(--search-action-text-color, @search-action-text-color);
&--hover {
.theme(background-color, '@active-color');
background-color: @active-color;
}
}
}

32
packages/sidebar-item/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-sidebar-item {
display: block;
@ -7,11 +6,11 @@
overflow: hidden;
border-left: 3px solid transparent;
user-select: none;
.theme(padding, '@sidebar-padding');
.theme(font-size, '@sidebar-font-size');
.theme(line-height, '@sidebar-line-height');
.theme(color, '@sidebar-text-color');
.theme(background-color, '@sidebar-background-color');
padding: var(--sidebar-padding, @sidebar-padding);
font-size: var(--sidebar-font-size, @sidebar-font-size);
line-height: var(--sidebar-line-height, @sidebar-line-height);
color: var(--sidebar-text-color, @sidebar-text-color);
background-color: var(--sidebar-background-color, @sidebar-background-color);
&__text {
position: relative;
@ -20,7 +19,7 @@
}
&--hover:not(&--disabled) {
.theme(background-color, '@sidebar-active-color');
background-color: var(--sidebar-active-color, @sidebar-active-color);
}
&::after {
@ -28,9 +27,15 @@
}
&--selected {
.theme(color, '@sidebar-selected-text-color');
.theme(font-weight, '@sidebar-selected-font-weight');
.theme(border-color, '@sidebar-selected-border-color');
color: var(--sidebar-selected-text-color, @sidebar-selected-text-color);
font-weight: var(
--sidebar-selected-font-weight,
@sidebar-selected-font-weight
);
border-color: var(
--sidebar-selected-border-color,
@sidebar-selected-border-color
);
&::after {
border-right-width: 1px;
@ -39,10 +44,13 @@
&--selected,
&--selected&--hover {
.theme(background-color, '@sidebar-selected-background-color');
background-color: var(
--sidebar-selected-background-color,
@sidebar-selected-background-color
);
}
&--disabled {
.theme(color, '@sidebar-disabled-text-color');
color: var(--sidebar-disabled-text-color, @sidebar-disabled-text-color);
}
}

3
packages/sidebar/index.less
View File

@ -1,6 +1,5 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-sidebar {
.theme(width, '@sidebar-width');
width: var(--sidebar-width, @sidebar-width);
}

21
packages/skeleton/index.less
View File

@ -1,16 +1,18 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-skeleton {
display: flex;
box-sizing: border-box;
width: 100%;
.theme(padding, '@skeleton-padding');
padding: var(--skeleton-padding, @skeleton-padding);
&__avatar {
flex-shrink: 0;
.theme(margin-right, '@padding-md');
.theme(background-color, '@skeleton-avatar-background-color');
margin-right: var(--padding-md, @padding-md);
background-color: var(
--skeleton-avatar-background-color,
@skeleton-avatar-background-color
);
&--round {
border-radius: 100%;
@ -22,13 +24,16 @@
}
&__avatar + &__content {
.theme(padding-top, '@padding-xs');
padding-top: var(--padding-xs, @padding-xs);
}
&__row,
&__title {
.theme(height, '@skeleton-row-height');
.theme(background-color, '@skeleton-row-background-color');
height: var(--skeleton-row-height, @skeleton-row-height);
background-color: var(
--skeleton-row-background-color,
@skeleton-row-background-color
);
}
&__title {
@ -37,7 +42,7 @@
&__row {
&:not(:first-child) {
.theme(margin-top, '@skeleton-row-margin-top');
margin-top: var(--skeleton-row-margin-top, @skeleton-row-margin-top);
}
}

40
packages/slider/index.less
View File

@ -1,11 +1,13 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-slider {
position: relative;
.theme(height, '@slider-bar-height');
.theme(border-radius, '@border-radius-max');
.theme(background-color, '@slider-inactive-background-color');
height: var(--slider-bar-height, @slider-bar-height);
border-radius: @border-radius-max;
background-color: var(
--slider-inactive-background-color,
@slider-inactive-background-color
);
// use pseudo element to expand click area
&::before {
@ -13,26 +15,34 @@
right: 0;
left: 0;
content: '';
.theme(top, '-@padding-xs');
.theme(bottom, '-@padding-xs');
top: calc(-1 * var(--padding-xs, @padding-xs));
bottom: calc(-1 * var(--padding-xs, @padding-xs));
}
&__bar {
position: relative;
width: 100%;
height: 100%;
.theme(background-color, '@slider-active-background-color');
background-color: var(
--slider-active-background-color,
@slider-active-background-color
);
border-radius: inherit;
.theme(transition, 'all @animation-duration-fast');
transition: all @animation-duration-fast;
}
&__button {
.theme(width, '@slider-button-width');
.theme(height, '@slider-button-height');
.theme(border-radius, '@slider-button-border-radius');
.theme(box-shadow, '@slider-button-box-shadow');
.theme(background-color, '@slider-button-background-color');
width: var(--slider-button-width, @slider-button-width);
height: var(--slider-button-height, @slider-button-height);
border-radius: var(
--slider-button-border-radius,
@slider-button-border-radius
);
box-shadow: var(--slider-button-box-shadow, @slider-button-box-shadow);
background-color: var(
--slider-button-background-color,
@slider-button-background-color
);
&-wrapper,
&-wrapper-right {
@ -51,6 +61,6 @@
}
&--disabled {
.theme(opacity, '@slider-disabled-opacity');
opacity: var(--slider-disabled-opacity, @slider-disabled-opacity);
}
}

76
packages/stepper/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-stepper {
font-size: 0;
@ -12,11 +11,14 @@
margin: 1px;
vertical-align: middle;
border: 0;
.theme(background-color, '@stepper-background-color');
.theme(color, '@stepper-button-icon-color');
.theme(width, '@stepper-input-height');
.theme(height, '@stepper-input-height');
.theme(padding, '@padding-base');
background-color: var(
--stepper-background-color,
@stepper-background-color
);
color: var(--stepper-button-icon-color, @stepper-button-icon-color);
width: var(--stepper-input-height, @stepper-input-height);
height: var(--stepper-input-height, @stepper-input-height);
padding: var(--padding-base, @padding-base);
&::before {
width: 9px;
@ -41,21 +43,38 @@
}
&--hover {
.theme(background-color, '@stepper-active-color');
background-color: var(--stepper-active-color, @stepper-active-color);
}
&--disabled {
.theme(color, '@stepper-button-disabled-icon-color');
.theme(background-color, '@stepper-button-disabled-color');
color: var(
--stepper-button-disabled-icon-color,
@stepper-button-disabled-icon-color
);
background-color: var(
--stepper-button-disabled-color,
@stepper-button-disabled-color
);
}
&--disabled&--hover {
.theme(background-color, '@stepper-button-disabled-color');
background-color: var(
--stepper-button-disabled-color,
@stepper-button-disabled-color
);
}
}
&__minus {
.theme(border-radius, '@stepper-border-radius 0 0 @stepper-border-radius');
border-radius: var(
--stepper-border-radius,
var(--stepper-border-radius, @stepper-border-radius)
)
0 0
var(
--stepper-border-radius,
var(--stepper-border-radius, @stepper-border-radius)
);
&::after {
display: none;
@ -63,7 +82,16 @@
}
&__plus {
.theme(border-radius, '0 @stepper-border-radius @stepper-border-radius 0');
border-radius: 0
var(
--stepper-border-radius,
var(--stepper-border-radius, @stepper-border-radius)
)
var(
--stepper-border-radius,
var(--stepper-border-radius, @stepper-border-radius)
)
0;
}
&--round {
@ -107,22 +135,30 @@
min-height: 0;
margin: 1px;
padding: 1px;
font-size: 14px;
text-align: center;
vertical-align: middle;
border: 0;
border-width: 1px 0;
border-radius: 0;
-webkit-appearance: none;
.theme(font-size, '@stepper-input-font-size');
.theme(color, '@stepper-input-text-color');
.theme(background-color, '@stepper-background-color');
.theme(width, '@stepper-input-width');
.theme(height, '@stepper-input-height');
font-size: var(--stepper-input-font-size, @stepper-input-font-size);
color: var(--stepper-input-text-color, @stepper-input-text-color);
background-color: var(
--stepper-background-color,
@stepper-background-color
);
width: var(--stepper-input-width, @stepper-input-width);
height: var(--stepper-input-height, @stepper-input-height);
&--disabled {
.theme(color, '@stepper-input-disabled-text-color');
.theme(background-color, '@stepper-input-disabled-background-color');
color: var(
--stepper-input-disabled-text-color,
@stepper-input-disabled-text-color
);
background-color: var(
--stepper-input-disabled-background-color,
@stepper-input-disabled-background-color
);
}
}
}

36
packages/steps/index.less
View File

@ -1,9 +1,8 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-steps {
overflow: hidden;
.theme(background-color, '@steps-background-color');
background-color: var(--steps-background-color, @steps-background-color);
&--horizontal {
padding: 10px;
@ -27,18 +26,18 @@
.van-step {
position: relative;
flex: 1;
.theme(font-size, '@step-font-size');
.theme(color, '@step-text-color');
font-size: var(--step-font-size, @step-font-size);
color: var(--step-text-color, @step-text-color);
&--finish {
.theme(color, '@step-finish-text-color');
color: var(--step-finish-text-color, @step-finish-text-color);
}
&__circle {
border-radius: 50%;
.theme(width, '@step-circle-size');
.theme(height, '@step-circle-size');
.theme(background-color, '@step-circle-color');
width: var(--step-circle-size, @step-circle-size);
height: var(--step-circle-size, @step-circle-size);
background-color: var(--step-circle-color, @step-circle-color);
}
&--horizontal {
@ -77,14 +76,17 @@
bottom: 6px;
z-index: 1;
transform: translate3d(-50%, 50%, 0);
.theme(background-color, '@white');
.theme(padding, '0 @padding-xs');
background-color: @white;
padding: 0 var(--padding-xs, @padding-xs);
}
.van-step__title {
display: inline-block;
transform: translate3d(-50%, 0, 0);
.theme(font-size, '@step-horizontal-title-font-size');
font-size: var(
--step-horizontal-title-font-size,
@step-horizontal-title-font-size
);
}
.van-step__line {
@ -94,16 +96,16 @@
left: 0;
height: 1px;
transform: translate3d(0, 50%, 0);
.theme(background-color, '@step-line-color');
background-color: var(--step-line-color, @step-line-color);
}
&.van-step--process {
.theme(color, '@step-process-text-color');
color: var(--step-process-text-color, @step-process-text-color);
.van-step__icon {
display: block;
line-height: 1;
.theme(font-size, '@step-icon-size');
font-size: var(--step-icon-size, @step-icon-size);
}
}
}
@ -129,7 +131,7 @@
width: 1px;
height: 20px;
content: '';
.theme(background-color, '@white');
background-color: @white;
}
}
@ -145,7 +147,7 @@
.van-step__icon {
line-height: 1;
.theme(font-size, '@step-icon-size');
font-size: var(--step-icon-size, @step-icon-size);
}
.van-step__line {
@ -153,7 +155,7 @@
width: 1px;
height: 100%;
transform: translate3d(-50%, 0, 0);
.theme(background-color, '@step-line-color');
background-color: var(--step-line-color, @step-line-color);
}
}
}

2
packages/submit-bar/README.md
View File

@ -36,7 +36,7 @@
price="{{ 3050 }}"
button-text="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
tip-icon="https://img.yzcdn.cn/1.png"
tip-icon="info-o"
bind:submit="onSubmit"
/>
```

68
packages/submit-bar/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-submit-bar {
position: fixed;
@ -7,15 +6,21 @@
left: 0;
width: 100%;
user-select: none;
.theme(z-index, '@submit-bar-z-index');
.theme(background-color, '@submit-bar-background-color');
z-index: var(--submit-bar-z-index, @submit-bar-z-index);
background-color: var(
--submit-bar-background-color,
@submit-bar-background-color
);
&__tip {
.theme(padding, '@submit-bar-tip-padding');
.theme(color, '@submit-bar-tip-color');
.theme(font-size, '@submit-bar-tip-font-size');
.theme(line-height, '@submit-bar-tip-line-height');
.theme(background-color, '@submit-bar-tip-background-color');
padding: var(--submit-bar-tip-padding, @submit-bar-tip-padding);
color: var(--submit-bar-tip-color, @submit-bar-tip-color);
font-size: var(--submit-bar-tip-font-size, @submit-bar-tip-font-size);
line-height: var(--submit-bar-tip-line-height, @submit-bar-tip-line-height);
background-color: var(
--submit-bar-tip-background-color,
@submit-bar-tip-background-color
);
&:empty {
display: none;
@ -23,12 +28,8 @@
}
&__tip-icon {
width: 12px;
height: 12px;
margin-right: 4px;
vertical-align: middle;
.theme(font-size, '@submit-bar-tip-icon-size');
.theme(min-width, 'calc(@submit-bar-tip-icon-size * 1.5)');
}
&__tip-text {
@ -40,10 +41,13 @@
display: flex;
align-items: center;
justify-content: flex-end;
.theme(padding, '@submit-bar-padding');
.theme(height, '@submit-bar-height');
.theme(font-size, '@submit-bar-text-font-size');
.theme(background-color, '@submit-bar-background-color');
padding: var(--submit-bar-padding, @submit-bar-padding);
height: var(--submit-bar-height, @submit-bar-height);
font-size: var(--submit-bar-text-font-size, @submit-bar-text-font-size);
background-color: var(
--submit-bar-background-color,
@submit-bar-background-color
);
}
&__safe {
@ -54,15 +58,15 @@
&__text {
flex: 1;
text-align: right;
.theme(color, '@submit-bar-text-color');
.theme(padding-right, '@padding-sm');
.theme(font-weight, '@font-weight-bold');
color: var(--submit-bar-text-color, @submit-bar-text-color);
padding-right: var(--padding-sm, @padding-sm);
font-weight: var(--font-weight-bold, @font-weight-bold);
}
&__price {
.theme(color, '@submit-bar-price-color');
.theme(font-weight, '@font-weight-bold');
.theme(font-size, '@submit-bar-price-font-size');
color: var(--submit-bar-price-color, @submit-bar-price-color);
font-weight: var(--font-weight-bold, @font-weight-bold);
font-size: var(--submit-bar-price-font-size, @submit-bar-price-font-size);
&-integer {
font-size: @submit-bar-price-integer-font-size;
@ -71,7 +75,10 @@
}
&__currency {
.theme(font-size, '@submit-bar-currency-font-size');
font-size: var(
--submit-bar-currency-font-size,
@submit-bar-currency-font-size
);
}
&__suffix-label {
@ -79,9 +86,16 @@
}
&__button {
.theme(width,'@submit-bar-button-width');
.theme(font-weight, '@font-weight-bold');
.theme(--button-default-height, '@submit-bar-button-height') !important;
.theme(--button-line-height, '@submit-bar-button-height') !important;
width: var(--submit-bar-button-width, @submit-bar-button-width);
font-weight: var(--font-weight-bold, @font-weight-bold);
--button-default-height: var(
--submit-bar-button-height,
@submit-bar-button-height
) !important;
--button-line-height: var(
--submit-bar-button-height,
@submit-bar-button-height
) !important;
}
}

44
packages/switch/index.less
View File

@ -1,28 +1,32 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-switch {
position: relative;
display: inline-block;
box-sizing: content-box;
.theme(width, '@switch-width');
.theme(height, '@switch-height');
.theme(background-color, '@switch-background-color');
.theme(border, '@switch-border');
.theme(border-radius, '@switch-node-size');
.theme(transition, 'background-color @switch-transition-duration');
width: var(--switch-width, @switch-width);
height: var(--switch-height, @switch-height);
background-color: var(--switch-background-color, @switch-background-color);
border: var(--switch-border, @switch-border);
border-radius: var(--switch-node-size, @switch-node-size);
transition: background-color
var(--switch-transition-duration, @switch-transition-duration);
&__node {
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
.theme(z-index, '@switch-node-z-index');
.theme(width, '@switch-node-size');
.theme(height, '@switch-node-size');
.theme(background-color, '@switch-node-background-color');
.theme(box-shadow, '@switch-node-box-shadow');
.theme(transition, 'transform @switch-transition-duration cubic-bezier(.3, 1.05, .4, 1.05)');
z-index: var(--switch-node-z-index, @switch-node-z-index);
width: var(--switch-node-size, @switch-node-size);
height: var(--switch-node-size, @switch-node-size);
background-color: var(
--switch-node-background-color,
@switch-node-background-color
);
box-shadow: var(--switch-node-box-shadow, @switch-node-box-shadow);
transition: var(--switch-transition-duration, @switch-transition-duration)
cubic-bezier(0.3, 1.05, 0.4, 1.05);
}
&__loading {
@ -34,14 +38,22 @@
}
&--on {
.theme(background-color, '@switch-on-background-color');
background-color: var(
--switch-on-background-color,
@switch-on-background-color
);
.van-switch__node {
.theme(transform, 'translateX(calc(@switch-width - @switch-node-size))');
transform: translateX(
calc(
var(--switch-width, @switch-width) -
var(--switch-node-size, @switch-node-size)
)
);
}
}
&--disabled {
.theme(opacity, '@switch-disabled-opacity');
opacity: var(--switch-disabled-opacity, @switch-disabled-opacity);
}
}

13
packages/tabbar-item/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
:host {
flex: 1;
@ -11,14 +10,14 @@
align-items: center;
justify-content: center;
height: 100%;
.theme(color, '@tabbar-item-text-color');
.theme(font-size, '@tabbar-item-font-size');
.theme(line-height, '@tabbar-item-line-height');
color: var(--tabbar-item-text-color, @tabbar-item-text-color);
font-size: var(--tabbar-item-font-size, @tabbar-item-font-size);
line-height: var(--tabbar-item-line-height, @tabbar-item-line-height);
&__icon {
position: relative;
.theme(margin-bottom, '@tabbar-item-margin-bottom');
.theme(font-size, '@tabbar-item-icon-size');
margin-bottom: var(--tabbar-item-margin-bottom, @tabbar-item-margin-bottom);
font-size: var(--tabbar-item-icon-size, @tabbar-item-icon-size);
&__inner {
display: block;
@ -27,7 +26,7 @@
}
&--active {
.theme(color, '@tabbar-item-active-color');
color: var(--tabbar-item-active-color, @tabbar-item-active-color);
}
&__info {

5
packages/tabbar/index.less
View File

@ -1,12 +1,11 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tabbar {
display: flex;
box-sizing: content-box;
width: 100%;
.theme(height, '@tabbar-height');
.theme(background-color, '@tabbar-background-color');
height: var(--tabbar-height, @tabbar-height);
background-color: var(--tabbar-background-color, @tabbar-background-color);
&--fixed {
position: fixed;

52
packages/tabs/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tabs {
position: relative;
@ -29,7 +28,10 @@
}
&__scroll {
.theme(background-color, '@tabs-nav-background-color');
background-color: var(
--tabs-nav-background-color,
@tabs-nav-background-color
);
&--line {
box-sizing: content-box;
@ -38,7 +40,7 @@
}
&--card {
.theme(margin, '0 @padding-md');
margin: 0 var(--padding-md, @padding-md);
}
&::-webkit-scrollbar {
@ -53,26 +55,30 @@
&--card {
box-sizing: border-box;
.theme(height, '@tabs-card-height');
.theme(border, '@border-width-base solid @tabs-default-color');
.theme(border-radius, '@border-radius-sm');
height: var(--tabs-card-height, @tabs-card-height);
border: @border-width-base solid
var(--tabs-default-color, @tabs-default-color);
border-radius: @border-radius-sm;
.van-tab {
.theme(color, '@tabs-default-color');
.theme(line-height, 'calc(@tabs-card-height - 2 * @border-width-base)');
.theme(border-right, '@border-width-base solid @tabs-default-color');
color: var(--tabs-default-color, @tabs-default-color);
line-height: calc(
var(--tabs-card-height, @tabs-card-height) - 2 * @border-width-base
);
border-right: @border-width-base solid
var(--tabs-default-color, @tabs-default-color);
&:last-child {
border-right: none;
}
&.van-tab--active {
.theme(color, '@white');
.theme(background-color, '@tabs-default-color');
color: @white;
background-color: var(--tabs-default-color, @tabs-default-color);
}
&--disabled {
.theme(color, '@tab-disabled-text-color');
color: var(--tab-disabled-text-color, @tab-disabled-text-color);
}
}
}
@ -83,9 +89,9 @@
bottom: 0;
left: 0;
z-index: 1;
.theme(height, '@tabs-bottom-bar-height');
.theme(border-radius, '@tabs-bottom-bar-height');
.theme(background-color, '@tabs-bottom-bar-color');
height: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height);
border-radius: var(--tabs-bottom-bar-height, @tabs-bottom-bar-height);
background-color: var(--tabs-bottom-bar-color, @tabs-bottom-bar-color);
}
&__track {
@ -105,13 +111,13 @@
&--line {
.van-tabs__wrap {
.theme(height, '@tabs-line-height');
height: var(--tabs-line-height, @tabs-line-height);
}
}
&--card {
.van-tabs__wrap {
.theme(height, '@tabs-card-height');
height: var(--tabs-card-height, @tabs-card-height);
}
}
}
@ -124,17 +130,17 @@
padding: 0 5px;
text-align: center;
cursor: pointer;
.theme(color, '@tab-text-color');
.theme(font-size, '@tab-font-size');
.theme(line-height, '@tabs-line-height');
color: var(--tab-text-color, @tab-text-color);
font-size: var(--tab-font-size, @tab-font-size);
line-height: var(--tabs-line-height, @tabs-line-height);
&--active {
.theme(font-weight, '@font-weight-bold');
.theme(color, '@tab-active-text-color');
font-weight: var(--font-weight-bold, @font-weight-bold);
color: var(--tab-active-text-color, @tab-active-text-color);
}
&--disabled {
.theme(color, '@tab-disabled-text-color');
color: var(--tab-disabled-text-color, @tab-disabled-text-color);
}
&__title {

60
packages/tag/index.less
View File

@ -1,58 +1,60 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tag {
position: relative;
display: inline-flex;
align-items: center;
.theme(padding, '@tag-padding');
.theme(color, '@tag-text-color');
.theme(font-size, '@tag-font-size');
.theme(line-height, '@tag-line-height');
.theme(border-radius, '@tag-border-radius');
padding: var(--tag-padding, @tag-padding);
color: var(--tag-text-color, @tag-text-color);
font-size: var(--tag-font-size, @tag-font-size);
line-height: var(--tag-line-height, @tag-line-height);
border-radius: var(--tag-border-radius, @tag-border-radius);
&--default {
.theme(background-color, '@tag-default-color');
background-color: var(--tag-default-color, @tag-default-color);
&.van-tag--plain {
.theme(color, '@tag-default-color');
color: var(--tag-default-color, @tag-default-color);
}
}
&--danger {
.theme(background-color, '@tag-danger-color');
background-color: var(--tag-danger-color, @tag-danger-color);
&.van-tag--plain {
.theme(color, '@tag-danger-color');
color: var(--tag-danger-color, @tag-danger-color);
}
}
&--primary {
.theme(background-color, '@tag-primary-color');
background-color: var(--tag-primary-color, @tag-primary-color);
&.van-tag--plain {
.theme(color, '@tag-primary-color');
color: var(--tag-primary-color, @tag-primary-color);
}
}
&--success {
.theme(background-color, '@tag-success-color');
background-color: var(--tag-success-color, @tag-success-color);
&.van-tag--plain {
.theme(color, '@tag-success-color');
color: var(--tag-success-color, @tag-success-color);
}
}
&--warning {
.theme(background-color, '@tag-warning-color');
background-color: var(--tag-warning-color, @tag-warning-color);
&.van-tag--plain {
.theme(color, '@tag-warning-color');
color: var(--tag-warning-color, @tag-warning-color);
}
}
&--plain {
.theme(background-color, '@tag-plain-background-color');
background-color: var(
--tag-plain-background-color,
@tag-plain-background-color
);
&::before {
position: absolute;
@ -68,20 +70,26 @@
}
&--medium {
.theme(padding, '@tag-medium-padding');
padding: var(--tag-medium-padding, @tag-medium-padding);
}
&--large {
.theme(padding, '@tag-large-padding');
.theme(font-size, '@tag-large-font-size');
.theme(border-radius, '@tag-large-border-radius');
padding: var(--tag-large-padding, @tag-large-padding);
font-size: var(--tag-large-font-size, @tag-large-font-size);
border-radius: var(--tag-large-border-radius, @tag-large-border-radius);
}
&--mark {
.theme(
border-radius,
'0 @tag-round-border-radius @tag-round-border-radius 0'
);
border-radius: 0
var(
--tag-round-border-radius,
var(--tag-round-border-radius, @tag-round-border-radius)
)
var(
--tag-round-border-radius,
var(--tag-round-border-radius, @tag-round-border-radius)
)
0;
&::after {
display: block;
@ -91,7 +99,7 @@
}
&--round {
.theme(border-radius, '@tag-round-border-radius');
border-radius: var(--tag-round-border-radius, @tag-round-border-radius);
}
&__close {

25
packages/toast/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-toast {
display: flex;
@ -7,15 +6,15 @@
align-items: center;
justify-content: center;
box-sizing: content-box;
.theme(color, '@toast-text-color');
.theme(font-size, '@toast-font-size');
.theme(line-height, '@toast-line-height');
color: var(--toast-text-color, @toast-text-color);
font-size: var(--toast-font-size, @toast-font-size);
line-height: var(--toast-line-height, @toast-line-height);
// allow newline charactor
white-space: pre-wrap;
word-wrap: break-word;
.theme(background-color, '@toast-background-color');
.theme(border-radius, '@toast-border-radius');
background-color: var(--toast-background-color, @toast-background-color);
border-radius: var(--toast-border-radius, @toast-border-radius);
&__container {
position: fixed;
@ -24,21 +23,21 @@
// hack for avoid max-width when use left & fixed
width: fit-content;
transform: translate(-50%, -50%);
.theme(max-width, '@toast-max-width');
max-width: var(--toast-max-width, @toast-max-width);
}
&--text {
.theme(min-width, '@toast-text-min-width');
.theme(padding, '@toast-text-padding');
min-width: var(--toast-text-min-width, @toast-text-min-width);
padding: var(--toast-text-padding, @toast-text-padding);
}
&--icon {
.theme(width, '@toast-default-width');
.theme(min-height, '@toast-default-min-height');
.theme(padding, '@toast-default-padding');
width: var(--toast-default-width, @toast-default-width);
min-height: var(--toast-default-min-height, @toast-default-min-height);
padding: var(--toast-default-padding, @toast-default-padding);
.van-toast__icon {
.theme(font-size, '@toast-icon-size');
font-size: var(--toast-icon-size, @toast-icon-size);
}
.van-toast__text {

30
packages/tree-select/index.less
View File

@ -1,15 +1,17 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tree-select {
position: relative;
display: flex;
user-select: none;
.theme(font-size, '@tree-select-font-size');
font-size: var(--tree-select-font-size, @tree-select-font-size);
&__nav {
flex: 1;
.theme(background-color, '@tree-select-nav-background-color');
background-color: var(
--tree-select-nav-background-color,
@tree-select-nav-background-color
);
&__inner {
width: 100% !important;
@ -21,22 +23,30 @@
&__content {
flex: 2;
.theme(background-color, '@tree-select-content-background-color');
background-color: var(
--tree-select-content-background-color,
@tree-select-content-background-color
);
}
&__item {
position: relative;
font-weight: bold;
.theme(padding, '0 32px 0 @padding-md');
.theme(line-height, '@tree-select-item-height');
padding: 0 32px 0 var(--padding-md, @padding-md);
line-height: var(--tree-select-item-height, @tree-select-item-height);
&--active {
.theme(color, '@tree-select-item-active-color');
color: var(
--tree-select-item-active-color,
@tree-select-item-active-color
);
}
&--disabled {
.theme(color, '@tree-select-item-disabled-color');
color: var(
--tree-select-item-disabled-color,
@tree-select-item-disabled-color
);
}
}
@ -44,6 +54,6 @@
position: absolute;
top: 50%;
transform: translateY(-50%);
.theme(right, '@padding-md');
right: var(--padding-md, @padding-md);
}
}

121
packages/uploader/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less';
@import '../common/style/theme.less';
.van-uploader {
position: relative;
@ -25,70 +24,78 @@
align-items: center;
justify-content: center;
box-sizing: border-box;
.theme(width, '@uploader-size');
.theme(height, '@uploader-size');
.theme(margin, '0 @padding-xs @padding-xs 0');
.theme(background-color, '@uploader-upload-background-color');
width: var(--uploader-size, @uploader-size);
height: var(--uploader-size, @uploader-size);
margin: 0 @padding-xs @padding-xs 0;
background-color: var(
--uploader-upload-background-color,
@uploader-upload-background-color
);
&:active {
.theme(background-color, '@uploader-upload-active-color');
background-color: var(
--uploader-upload-active-color,
@uploader-upload-active-color
);
}
&-icon {
.theme(color, '@uploader-icon-color');
.theme(font-size, '@uploader-icon-size');
color: var(--uploader-icon-color, @uploader-icon-color);
font-size: var(--uploader-icon-size, @uploader-icon-size);
}
&-text {
.theme(margin-top, '@padding-xs');
.theme(color, '@uploader-text-color');
.theme(font-size, '@uploader-text-font-size');
margin-top: var(--padding-xs, @padding-xs);
color: var(--uploader-text-color, @uploader-text-color);
font-size: var(--uploader-text-font-size, @uploader-text-font-size);
}
&--disabled {
.theme(opacity, '@uploader-disabled-opacity');
opacity: var(--uploader-disabled-opacity, @uploader-disabled-opacity);
}
}
&__preview {
position: relative;
cursor: pointer;
.theme(margin, '0 @padding-xs @padding-xs 0');
margin: 0 @padding-xs @padding-xs 0;
&-image {
display: block;
overflow: hidden;
.theme(width, '@uploader-size');
.theme(height, '@uploader-size');
width: var(--uploader-size, @uploader-size);
height: var(--uploader-size, @uploader-size);
}
&-delete {
position: absolute;
top: 0;
right: 0;
.theme(width, '@uploader-delete-icon-size');
.theme(height, '@uploader-delete-icon-size');
.theme(padding, '0 0 @padding-xs @padding-xs');
width: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
height: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
&::after {
position: absolute;
top: 0;
right: 0;
content: '';
.theme(width, '@uploader-delete-icon-size');
.theme(height, '@uploader-delete-icon-size');
.theme(background-color, '@uploader-delete-background-color');
.theme(border-radius, '0 0 0 calc(@uploader-delete-icon-size - 2px)');
width: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
height: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
background-color: var(
--uploader-delete-background-color,
@uploader-delete-background-color
);
border-radius: 0 0 0 12px;
}
&-icon {
position: absolute;
top: -2px;
right: -2px;
top: 0;
right: 0;
z-index: 1;
transform: scale(0.5);
.theme(font-size, 'calc(@uploader-delete-icon-size + 2px)');
.theme(color, '@uploader-delete-color');
color: var(--uploader-delete-color, @uploader-delete-color);
font-size: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
transform: scale(0.7) translate(10%, -10%);
}
}
}
@ -98,23 +105,35 @@
flex-direction: column;
align-items: center;
justify-content: center;
.theme(width, '@uploader-size');
.theme(height, '@uploader-size');
.theme(background-color, '@uploader-file-background-color');
width: var(--uploader-size, @uploader-size);
height: var(--uploader-size, @uploader-size);
background-color: var(
--uploader-file-background-color,
@uploader-file-background-color
);
&-icon {
.theme(color, '@uploader-file-icon-color');
.theme(font-size, '@uploader-file-icon-size');
color: var(--uploader-file-icon-color, @uploader-file-icon-color);
font-size: var(--uploader-file-icon-size, @uploader-file-icon-size);
}
&-name {
box-sizing: border-box;
width: 100%;
text-align: center;
.theme(margin-top, '@uploader-file-name-margin-top');
.theme(padding, '@uploader-file-name-padding');
.theme(color, '@uploader-file-name-text-color');
.theme(font-size, '@uploader-file-name-font-size');
margin-top: var(
--uploader-file-name-margin-top,
@uploader-file-name-margin-top
);
padding: var(--uploader-file-name-padding, @uploader-file-name-padding);
color: var(
--uploader-file-name-text-color,
@uploader-file-name-text-color
);
font-size: var(
--uploader-file-name-font-size,
@uploader-file-name-font-size
);
}
}
@ -128,24 +147,36 @@
flex-direction: column;
align-items: center;
justify-content: center;
.theme(color, '@white');
.theme(background-color, '@uploader-mask-background-color');
color: @white;
background-color: var(
--uploader-mask-background-color,
@uploader-mask-background-color
);
&-icon {
.theme(font-size, '@uploader-mask-icon-size');
font-size: var(--uploader-mask-icon-size, @uploader-mask-icon-size);
}
&-message {
margin-top: 6px;
.theme(padding, '0 @padding-base');
.theme(font-size, '@uploader-mask-message-font-size');
.theme(line-height, '@uploader-mask-message-line-height');
padding: 0 var(--padding-base, @padding-base);
font-size: var(
--uploader-mask-message-font-size,
@uploader-mask-message-font-size
);
line-height: var(
--uploader-mask-message-line-height,
@uploader-mask-message-line-height
);
}
}
&__loading {
.theme(width, '@uploader-loading-icon-size');
.theme(height, '@uploader-loading-icon-size');
.theme(color, '@uploader-loading-icon-color !important');
width: var(--uploader-loading-icon-size, @uploader-loading-icon-size);
height: var(--uploader-loading-icon-size, @uploader-loading-icon-size);
color: var(
--uploader-loading-icon-color,
@uploader-loading-icon-color
) !important;
}
}