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 }}" price="{{ 3050 }}"
button-text="提交订单" button-text="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递" tip="您的收货地址不支持同城送, 我们已为您推荐快递"
tip-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png" tip-icon="info-o"
bind:submit="onClickButton" bind:submit="onClickButton"
custom-class="van-submit-bar" custom-class="van-submit-bar"
safe-area-inset-bottom="{{ false }}" 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/var.less';
@import '../common/style/theme.less';
.van-action-sheet { .van-action-sheet {
.theme(max-height, '@action-sheet-max-height') !important; max-height: var(
.theme(color, '@action-sheet-item-text-color'); --action-sheet-max-height,
@action-sheet-max-height
) !important;
color: var(--action-sheet-item-text-color, @action-sheet-item-text-color);
&__item, &__item,
&__cancel { &__cancel {
padding: 14px @padding-md; padding: 14px @padding-md;
text-align: center; text-align: center;
.theme(font-size, '@action-sheet-item-font-size'); font-size: var(--action-sheet-item-font-size, @action-sheet-item-font-size);
.theme(line-height, '@action-sheet-item-line-height'); line-height: var(
.theme(background-color, '@action-sheet-item-background'); --action-sheet-item-line-height,
@action-sheet-item-line-height
);
background-color: var(
--action-sheet-item-background,
@action-sheet-item-background
);
&--hover { &--hover {
.theme(background-color, '@active-color'); background-color: @active-color;
} }
// reset weapp default border // reset weapp default border
@ -24,43 +32,76 @@
} }
&__cancel { &__cancel {
.theme(color, '@action-sheet-cancel-text-color'); color: var(
--action-sheet-cancel-text-color,
@action-sheet-cancel-text-color
);
} }
&__gap { &__gap {
display: block; display: block;
.theme(height, '@action-sheet-cancel-padding-top'); height: var(
.theme(background-color, '@action-sheet-cancel-padding-color'); --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 { &__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 { &__item--disabled&__item--hover {
.theme(background-color, '@action-sheet-item-background'); background-color: var(
--action-sheet-item-background,
@action-sheet-item-background
);
} }
&__subname { &__subname {
.theme(margin-top, '@padding-xs'); margin-top: var(--padding-xs, @padding-xs);
.theme(font-size, '@action-sheet-subname-font-size'); font-size: var(
.theme(color, '@action-sheet-subname-color'); --action-sheet-subname-font-size,
.theme(line-height, '@action-sheet-subname-line-height'); @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 { &__header {
text-align: center; text-align: center;
.theme(font-weight, '@font-weight-bold'); font-weight: var(--font-weight-bold, @font-weight-bold);
.theme(font-size, '@action-sheet-header-font-size'); font-size: var(
.theme(line-height, '@action-sheet-header-height'); --action-sheet-header-font-size,
@action-sheet-header-font-size
);
line-height: var(--action-sheet-header-height, @action-sheet-header-height);
} }
&__description { &__description {
text-align: center; text-align: center;
.theme(padding, '20px @padding-md'); padding: 20px var(--padding-md, @padding-md);
.theme(color, '@action-sheet-description-color'); color: var(
.theme(font-size, '@action-sheet-description-font-size'); --action-sheet-description-color,
.theme(line-height, '@action-sheet-description-line-height'); @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 { &__close {
@ -68,9 +109,15 @@
top: 0; top: 0;
right: 0; right: 0;
line-height: inherit !important; line-height: inherit !important;
.theme(padding, '@action-sheet-close-icon-padding'); padding: var(
.theme(font-size, '@action-sheet-close-icon-size') !important; --action-sheet-close-icon-padding,
.theme(color, '@action-sheet-close-icon-color'); @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 { &__loading {

123
packages/button/index.less
View File

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

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

@ -1,18 +1,26 @@
@import '../../../common/style/var'; @import '../../../common/style/var';
@import '../../../common/style/theme.less';
.van-calendar { .van-calendar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.theme(background-color, '@calendar-background-color'); background-color: var(
--calendar-background-color,
@calendar-background-color
);
&__month-title { &__month-title {
text-align: center; text-align: center;
.theme(height, '@calendar-header-title-height'); height: var(--calendar-header-title-height, @calendar-header-title-height);
.theme(font-weight, '@font-weight-bold'); font-weight: var(--font-weight-bold, @font-weight-bold);
.theme(font-size, '@calendar-month-title-font-size'); font-size: var(
.theme(line-height, '@calendar-header-title-height'); --calendar-month-title-font-size,
@calendar-month-title-font-size
);
line-height: var(
--calendar-header-title-height,
@calendar-header-title-height
);
} }
&__days { &__days {
@ -29,9 +37,11 @@
z-index: 0; z-index: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
pointer-events: none; pointer-events: none;
color: var(--calendar-month-mark-color, @calendar-month-mark-color);
.theme(color, '@calendar-month-mark-color'); font-size: var(
.theme(font-size, '@calendar-month-mark-font-size'); --calendar-month-mark-font-size,
@calendar-month-mark-font-size
);
} }
&__day, &__day,
@ -45,34 +55,36 @@
&__day { &__day {
position: relative; position: relative;
width: 14.285%; width: 14.285%;
height: var(--calendar-day-height, @calendar-day-height);
.theme(height, '@calendar-day-height'); font-size: var(--calendar-day-font-size, @calendar-day-font-size);
.theme(font-size, '@calendar-day-font-size');
&--end, &--end,
&--start, &--start,
&--start-end, &--start-end,
&--multiple-middle, &--multiple-middle,
&--multiple-selected { &--multiple-selected {
.theme(color, '@calendar-range-edge-color'); color: var(--calendar-range-edge-color, @calendar-range-edge-color);
.theme(background-color, '@calendar-range-edge-background-color'); background-color: var(
--calendar-range-edge-background-color,
@calendar-range-edge-background-color
);
} }
&--start { &--start {
.theme(border-radius, '@border-radius-md 0 0 @border-radius-md'); border-radius: @border-radius-md 0 0 @border-radius-md;
} }
&--end { &--end {
.theme(border-radius, '0 @border-radius-md @border-radius-md 0'); border-radius: 0 @border-radius-md @border-radius-md 0;
} }
&--start-end, &--start-end,
&--multiple-selected { &--multiple-selected {
.theme(border-radius, '@border-radius-md'); border-radius: @border-radius-md;
} }
&--middle { &--middle {
.theme(color, '@calendar-range-middle-color'); color: var(--calendar-range-middle-color, @calendar-range-middle-color);
&::after { &::after {
position: absolute; position: absolute;
@ -82,15 +94,16 @@
left: 0; left: 0;
background-color: currentColor; background-color: currentColor;
content: ''; content: '';
opacity: var(
.theme(opacity, '@calendar-range-middle-background-opacity'); --calendar-range-middle-background-opacity,
@calendar-range-middle-background-opacity
);
} }
} }
&--disabled { &--disabled {
cursor: default; cursor: default;
color: var(--calendar-day-disabled-color, @calendar-day-disabled-color);
.theme(color, '@calendar-day-disabled-color');
} }
} }
@ -99,8 +112,8 @@
position: absolute; position: absolute;
right: 0; right: 0;
left: 0; left: 0;
.theme(font-size, '@calendar-info-font-size'); font-size: var(--calendar-info-font-size, @calendar-info-font-size);
.theme(line-height, '@calendar-info-line-height'); line-height: var(--calendar-info-line-height, @calendar-info-line-height);
@media (max-width: 350px) { @media (max-width: 350px) {
font-size: 9px; font-size: 9px;
@ -116,10 +129,13 @@
} }
&__selected-day { &__selected-day {
.theme(width, '@calendar-selected-day-size'); width: var(--calendar-selected-day-size, @calendar-selected-day-size);
.theme(height, '@calendar-selected-day-size'); height: var(--calendar-selected-day-size, @calendar-selected-day-size);
.theme(color, '@calendar-selected-day-color'); color: var(--calendar-selected-day-color, @calendar-selected-day-color);
.theme(background-color, '@calendar-selected-day-background-color'); background-color: var(
.theme(border-radius, '@border-radius-md'); --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/var';
@import '../common/style/theme.less';
.van-calendar { .van-calendar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.theme(height, '@calendar-height'); height: var(--calendar-height, @calendar-height);
.theme(background-color, '@calendar-background-color'); background-color: var(
--calendar-background-color,
@calendar-background-color
);
&__close-icon { &__close-icon {
top: 11px; top: 11px;
@ -13,7 +15,7 @@
&__popup--top, &__popup--top,
&__popup--bottom { &__popup--bottom {
.theme(height, '@calendar-popup-height'); height: var(--calendar-popup-height, @calendar-popup-height);
} }
&__popup--left, &__popup--left,
@ -29,7 +31,7 @@
&__footer { &__footer {
flex-shrink: 0; flex-shrink: 0;
.theme(padding, '0 @padding-md'); padding: 0 var(--padding-md, @padding-md);
&--safe-area-inset-bottom { &--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: constant(safe-area-inset-bottom);
@ -47,8 +49,17 @@
} }
&__confirm { &__confirm {
.theme(height, '@calendar-confirm-button-height') !important; height: var(
.theme(margin, '@calendar-confirm-button-margin') !important; --calendar-confirm-button-height,
.theme(line-height, '@calendar-confirm-button-line-height') !important; @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/var.less';
@import '../common/style/theme.less';
.van-card { .van-card {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
.theme(padding, '@card-padding'); padding: var(--card-padding, @card-padding);
.theme(font-size, '@card-font-size'); font-size: var(--card-font-size, @card-font-size);
.theme(color, '@card-text-color'); color: var(--card-text-color, @card-text-color);
.theme(background-color, '@card-background-color'); background-color: var(--card-background-color, @card-background-color);
&__header { &__header {
display: flex; display: flex;
@ -21,9 +20,9 @@
&__thumb { &__thumb {
position: relative; position: relative;
flex: none; flex: none;
.theme(width, '@card-thumb-size'); width: var(--card-thumb-size, @card-thumb-size);
.theme(height, '@card-thumb-size'); height: var(--card-thumb-size, @card-thumb-size);
.theme(margin-right, '@padding-xs'); margin-right: var(--padding-xs, @padding-xs);
&:empty { &:empty {
display: none; display: none;
@ -33,7 +32,7 @@
&__img { &__img {
width: 100%; width: 100%;
height: 100%; height: 100%;
.theme(border-radius, '@border-radius-lg'); border-radius: @border-radius-lg;
} }
&__content { &__content {
@ -43,7 +42,7 @@
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
min-width: 0; /* hack for flex box ellipsis */ min-width: 0; /* hack for flex box ellipsis */
.theme(min-height, '@card-thumb-size'); min-height: var(--card-thumb-size, @card-thumb-size);
&--center { &--center {
justify-content: center; justify-content: center;
@ -57,12 +56,12 @@
&__title { &__title {
font-weight: bold; font-weight: bold;
.theme(line-height, '@card-title-line-height'); line-height: var(--card-title-line-height, @card-title-line-height);
} }
&__desc { &__desc {
.theme(line-height, '@card-desc-line-height'); line-height: var(--card-desc-line-height, @card-desc-line-height);
.theme(color, '@card-desc-color'); color: var(--card-desc-color, @card-desc-color);
} }
&__bottom { &__bottom {
@ -72,16 +71,19 @@
&__price { &__price {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
.theme(color, '@card-price-color'); color: var(--card-price-color, @card-price-color);
.theme(font-size, '@card-price-font-size'); font-size: var(--card-price-font-size, @card-price-font-size);
&-integer { &-integer {
.theme(font-size, '@card-price-integer-font-size'); font-size: var(
.theme(font-family, '@card-price-font-family'); --card-price-integer-font-size,
@card-price-integer-font-size
);
font-family: var(--card-price-font-family, @card-price-font-family);
} }
&-decimal { &-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; display: inline-block;
margin-left: 5px; margin-left: 5px;
text-decoration: line-through; text-decoration: line-through;
.theme(font-size, '@card-origin-price-font-size'); font-size: var(--card-origin-price-font-size, @card-origin-price-font-size);
.theme(color, '@card-origin-price-color'); color: var(--card-origin-price-color, @card-origin-price-color);
} }
&__num { &__num {

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

@ -1,22 +1,29 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-cell-group { .van-cell-group {
&--inset { &--inset {
.theme(margin, '@cell-group-inset-padding'); margin: var(--cell-group-inset-padding, @cell-group-inset-padding);
.theme(border-radius, '@cell-group-inset-border-radius'); border-radius: var(
--cell-group-inset-border-radius,
@cell-group-inset-border-radius
);
overflow: hidden; overflow: hidden;
} }
&__title { &__title {
.theme(padding, '@cell-group-title-padding'); padding: var(--cell-group-title-padding, @cell-group-title-padding);
.theme(font-size, '@cell-group-title-font-size'); font-size: var(--cell-group-title-font-size, @cell-group-title-font-size);
.theme(line-height, '@cell-group-title-line-height'); line-height: var(
.theme(color, '@cell-group-title-color'); --cell-group-title-line-height,
@cell-group-title-line-height
);
color: var(--cell-group-title-color, @cell-group-title-color);
&--inset { &--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/var.less';
@import '../common/style/theme.less';
@import '../common/style/mixins/hairline.less'; @import '../common/style/mixins/hairline.less';
.van-cell { .van-cell {
@ -7,11 +6,12 @@
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
.theme(padding, '@cell-vertical-padding @cell-horizontal-padding'); padding: var(--cell-vertical-padding, @cell-vertical-padding)
.theme(font-size, '@cell-font-size'); var(--cell-horizontal-padding, @cell-horizontal-padding);
.theme(line-height, '@cell-line-height'); font-size: var(--cell-font-size, @cell-font-size);
.theme(color, '@cell-text-color'); line-height: var(--cell-line-height, @cell-line-height);
.theme(background-color, '@cell-background-color'); color: var(--cell-text-color, @cell-text-color);
background-color: var(--cell-background-color, @cell-background-color);
&::after { &::after {
.hairline-bottom(@border-color, @padding-md, @padding-md); .hairline-bottom(@border-color, @padding-md, @padding-md);
@ -22,21 +22,21 @@
} }
&-group { &-group {
.theme(background-color, '@cell-background-color'); background-color: var(--cell-background-color, @cell-background-color);
} }
&__label { &__label {
.theme(margin-top, '@cell-label-margin-top'); margin-top: var(--cell-label-margin-top, @cell-label-margin-top);
.theme(font-size, '@cell-label-font-size'); font-size: var(--cell-label-font-size, @cell-label-font-size);
.theme(line-height, '@cell-label-line-height'); line-height: var(--cell-label-line-height, @cell-label-line-height);
.theme(color, '@cell-label-color'); color: var(--cell-label-color, @cell-label-color);
} }
&__value { &__value {
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
.theme(color, '@cell-value-color'); color: var(--cell-value-color, @cell-value-color);
} }
&__title, &__title,
@ -52,30 +52,30 @@
&__right-icon-wrap { &__right-icon-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
.theme(height, '@cell-line-height'); height: var(--cell-line-height, @cell-line-height);
.theme(font-size, '@cell-icon-size'); font-size: var(--cell-icon-size, @cell-icon-size);
} }
&__left-icon-wrap { &__left-icon-wrap {
.theme(margin-right, '@padding-base'); margin-right: var(--padding-base, @padding-base);
} }
&__right-icon-wrap { &__right-icon-wrap {
.theme(margin-left, '@padding-base'); margin-left: var(--padding-base, @padding-base);
.theme(color, '@cell-right-icon-color'); color: var(--cell-right-icon-color, @cell-right-icon-color);
} }
&__left-icon { &__left-icon {
vertical-align: middle; vertical-align: middle;
.theme(line-height, '@cell-line-height'); line-height: var(--cell-line-height, @cell-line-height);
} }
&__right-icon { &__right-icon {
.theme(line-height, '@cell-line-height'); line-height: var(--cell-line-height, @cell-line-height);
} }
&--clickable&--hover { &--clickable&--hover {
.theme(background-color, '@cell-active-color'); background-color: var(--cell-active-color, @cell-active-color);
} }
&--required { &--required {
@ -84,9 +84,9 @@
&::before { &::before {
position: absolute; position: absolute;
content: '*'; content: '*';
.theme(left, '@padding-xs'); left: var(--padding-xs, @padding-xs);
.theme(font-size, '@cell-font-size'); font-size: var(--cell-font-size, @cell-font-size);
.theme(color, '@cell-required-color'); color: var(--cell-required-color, @cell-required-color);
} }
} }
@ -95,19 +95,25 @@
} }
&--large { &--large {
.theme(padding-top, '@cell-large-vertical-padding'); padding-top: var(
.theme(padding-bottom, '@cell-large-vertical-padding'); --cell-large-vertical-padding,
@cell-large-vertical-padding
);
padding-bottom: var(
--cell-large-vertical-padding,
@cell-large-vertical-padding
);
.van-cell__title { .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 { .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 { .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/var.less';
@import '../common/style/theme.less';
.van-checkbox { .van-checkbox {
display: flex; display: flex;
@ -13,7 +12,7 @@
&__icon-wrap, &__icon-wrap,
&__label { &__label {
.theme(line-height, '@checkbox-size'); line-height: var(--checkbox-size, @checkbox-size);
} }
&__icon-wrap { &__icon-wrap {
@ -30,44 +29,60 @@
color: transparent; color: transparent;
text-align: center; text-align: center;
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
font-size: var(--checkbox-size, @checkbox-size);
.theme(font-size, '@checkbox-size'); border: 1px solid var(--checkbox-border-color, @checkbox-border-color);
.theme(border, '1px solid @checkbox-border-color'); transition-duration: var(
.theme(transition-duration, '@checkbox-transition-duration'); --checkbox-transition-duration,
@checkbox-transition-duration
);
&--round { &--round {
border-radius: 100%; border-radius: 100%;
} }
&--checked { &--checked {
.theme(color, '@white'); color: @white;
.theme(background-color, '@checkbox-checked-icon-color'); background-color: var(
.theme(border-color, '@checkbox-checked-icon-color'); --checkbox-checked-icon-color,
@checkbox-checked-icon-color
);
border-color: var(
--checkbox-checked-icon-color,
@checkbox-checked-icon-color
);
} }
&--disabled { &--disabled {
.theme(background-color, '@checkbox-disabled-background-color'); background-color: var(
.theme(border-color, '@checkbox-disabled-icon-color'); --checkbox-disabled-background-color,
@checkbox-disabled-background-color
);
border-color: var(
--checkbox-disabled-icon-color,
@checkbox-disabled-icon-color
);
} }
&--disabled&--checked { &--disabled&--checked {
.theme(color, '@checkbox-disabled-icon-color'); color: var(--checkbox-disabled-icon-color, @checkbox-disabled-icon-color);
} }
} }
&__label { &__label {
word-wrap: break-word; word-wrap: break-word;
padding-left: var(--checkbox-label-margin, @checkbox-label-margin);
.theme(padding-left, '@checkbox-label-margin'); color: var(--checkbox-label-color, @checkbox-label-color);
.theme(color, '@checkbox-label-color');
&--left { &--left {
float: left; float: left;
.theme(margin, '0 @checkbox-label-margin 0 0'); margin: 0 var(--checkbox-label-margin, @checkbox-label-margin) 0 0;
} }
&--disabled { &--disabled {
.theme(color, '@checkbox-disabled-label-color'); color: var(
--checkbox-disabled-label-color,
@checkbox-disabled-label-color
);
} }
&:empty { &:empty {

4
packages/circle/index.less
View File

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

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

@ -1,11 +1,14 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-collapse-item { .van-collapse-item {
&__title { &__title {
.van-cell__right-icon { .van-cell__right-icon {
transform: rotate(90deg); transform: rotate(90deg);
.theme(transition, 'transform @collapse-item-transition-duration'); transition: transform
var(
--collapse-item-transition-duration,
@collapse-item-transition-duration
);
} }
&--expanded { &--expanded {
@ -17,11 +20,14 @@
&--disabled { &--disabled {
.van-cell, .van-cell,
.van-cell__right-icon { .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 { .van-cell--hover {
.theme(background-color, '@white') !important; background-color: @white !important;
} }
} }
} }
@ -31,10 +37,25 @@
} }
&__content { &__content {
.theme(padding, '@collapse-item-content-padding'); padding: var(
.theme(color, '@collapse-item-content-text-color'); --collapse-item-content-padding,
.theme(font-size, '@collapse-item-content-font-size'); @collapse-item-content-padding
.theme(line-height, '@collapse-item-content-line-height'); );
.theme(background-color, '@collapse-item-content-background-color'); 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/var.less';
@import '../common/style/theme.less';
.van-count-down { .van-count-down {
.theme(color, '@count-down-text-color'); color: var(--count-down-text-color, @count-down-text-color);
.theme(font-size, '@count-down-font-size'); font-size: var(--count-down-font-size, @count-down-font-size);
.theme(line-height, '@count-down-line-height'); 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/var.less';
@import '../common/style/theme.less';
.van-dialog { .van-dialog {
top: 45% !important; top: 45% !important;
overflow: hidden; overflow: hidden;
.theme(width, '@dialog-width'); width: var(--dialog-width, @dialog-width);
.theme(font-size, '@dialog-font-size'); font-size: var(--dialog-font-size, @dialog-font-size);
.theme(border-radius, '@dialog-border-radius'); border-radius: var(--dialog-border-radius, @dialog-border-radius);
.theme(background-color, '@dialog-background-color'); background-color: var(--dialog-background-color, @dialog-background-color);
@media (max-width: 321px) { @media (max-width: 321px) {
.theme(width, '@dialog-small-screen-width'); width: var(--dialog-small-screen-width, @dialog-small-screen-width);
} }
&__header { &__header {
text-align: center; text-align: center;
.theme(padding-top, '@dialog-header-padding-top'); padding-top: var(--dialog-header-padding-top, @dialog-header-padding-top);
.theme(font-weight, '@dialog-header-font-weight'); font-weight: var(--dialog-header-font-weight, @dialog-header-font-weight);
.theme(line-height, '@dialog-header-line-height'); line-height: var(--dialog-header-line-height, @dialog-header-line-height);
&--isolated { &--isolated {
.theme(padding, '@dialog-header-isolated-padding'); padding: var(
--dialog-header-isolated-padding,
@dialog-header-isolated-padding
);
} }
} }
@ -28,18 +30,24 @@
overflow-y: auto; overflow-y: auto;
text-align: center; text-align: center;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
.theme(font-size, '@dialog-message-font-size'); font-size: var(--dialog-message-font-size, @dialog-message-font-size);
.theme(line-height, '@dialog-message-line-height'); line-height: var(--dialog-message-line-height, @dialog-message-line-height);
.theme(max-height, '@dialog-message-max-height'); max-height: var(--dialog-message-max-height, @dialog-message-max-height);
.theme(padding, '@dialog-message-padding'); padding: var(--dialog-message-padding, @dialog-message-padding);
&-text { &-text {
word-wrap: break-word; word-wrap: break-word;
} }
&--hasTitle { &--hasTitle {
.theme(padding-top, '@dialog-has-title-message-padding-top'); padding-top: var(
.theme(color, '@dialog-has-title-message-text-color'); --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 { &--round-button {

23
packages/divider/index.less
View File

@ -1,17 +1,15 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-divider { .van-divider {
display: flex; display: flex;
align-items: center; align-items: center;
border-style: solid; border-style: solid;
border-width: 0; border-width: 0;
margin: var(--divider-margin, @divider-margin);
.theme(margin, '@divider-margin'); color: var(--divider-text-color, @divider-text-color);
.theme(color, '@divider-text-color'); font-size: var(--divider-font-size, @divider-font-size);
.theme(font-size, '@divider-font-size'); line-height: var(--divider-line-height, @divider-line-height);
.theme(line-height, '@divider-line-height'); border-color: var(--divider-border-color, @divider-border-color);
.theme(border-color, '@divider-border-color');
&::before, &::before,
&::after { &::after {
@ -43,24 +41,27 @@
&--left, &--left,
&--right { &--right {
&::before { &::before {
.theme(margin-right, '@divider-content-padding'); margin-right: var(--divider-content-padding, @divider-content-padding);
} }
&::after { &::after {
content: ''; content: '';
.theme(margin-left, '@divider-content-padding'); margin-left: var(--divider-content-padding, @divider-content-padding);
} }
} }
&--left { &--left {
&::before { &::before {
.theme(max-width, '@divider-content-left-width'); max-width: var(--divider-content-left-width, @divider-content-left-width);
} }
} }
&--right { &--right {
&::after { &::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/var.less';
@import '../common/style/theme.less';
.van-dropdown-item { .van-dropdown-item {
position: fixed; position: fixed;
@ -13,7 +12,10 @@
&--active { &--active {
.van-dropdown-item__title, .van-dropdown-item__title,
.van-dropdown-item__icon { .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/var.less';
@import '../common/style/theme.less';
.van-dropdown-menu { .van-dropdown-menu {
display: flex; display: flex;
box-shadow: 0 2px 12px fade(@gray-7, 12); box-shadow: 0 2px 12px fade(@gray-7, 12);
user-select: none; user-select: none;
.theme(height, '@dropdown-menu-height'); height: var(--dropdown-menu-height, @dropdown-menu-height);
.theme(background-color, '@dropdown-menu-background-color'); background-color: var(
--dropdown-menu-background-color,
@dropdown-menu-background-color
);
&__item { &__item {
display: flex; display: flex;
@ -25,7 +27,10 @@
} }
.van-dropdown-menu__title { .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; position: relative;
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
.theme(padding, '@dropdown-menu-title-padding'); padding: var(--dropdown-menu-title-padding, @dropdown-menu-title-padding);
.theme(color, '@dropdown-menu-title-text-color'); color: var(
.theme(font-size,'@dropdown-menu-title-font-size'); --dropdown-menu-title-text-color,
.theme(line-height,'@dropdown-menu-title-line-height'); @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 { &::after {
position: absolute; position: absolute;
@ -52,7 +66,10 @@
} }
&--active { &--active {
.theme(color,'@dropdown-menu-title-active-text-color'); color: var(
--dropdown-menu-title-active-text-color,
@dropdown-menu-title-active-text-color
);
} }
&--down { &--down {

1
packages/empty/index.less
View File

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

73
packages/field/index.less
View File

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

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

@ -1,19 +1,30 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
:host { :host {
flex: 1; flex: 1;
} }
.van-goods-action-button { .van-goods-action-button {
.theme( --button-warning-background-color: var(
--button-warning-background-color, --goods-action-button-warning-color,
'@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; display: block;
@ -22,22 +33,29 @@
&--first { &--first {
margin-left: 5px; margin-left: 5px;
.theme( --button-border-radius: @goods-action-button-border-radius 0 0
--button-border-radius, var(
'@goods-action-button-border-radius 0 0 @goods-action-button-border-radius' --goods-action-button-border-radius,
); @goods-action-button-border-radius
);
} }
&--last { &--last {
margin-right: 5px; margin-right: 5px;
.theme(
--button-border-radius, --button-border-radius: 0 @goods-action-button-border-radius
'0 @goods-action-button-border-radius @goods-action-button-border-radius 0' var(
); --goods-action-button-border-radius,
@goods-action-button-border-radius
)
0;
} }
&--first&--last { &--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 { &--plain {
@ -46,7 +64,7 @@
&__inner { &__inner {
width: 100%; width: 100%;
.theme(font-weight, '@font-weight-bold') !important; font-weight: var(--font-weight-bold, @font-weight-bold) !important;
} }
@media (max-width: 321px) { @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/var.less';
@import '../common/style/theme.less';
.van-goods-action-icon { .van-goods-action-icon {
display: flex !important; display: flex !important;
@ -7,16 +6,21 @@
justify-content: center !important; justify-content: center !important;
line-height: 1 !important; line-height: 1 !important;
border: none !important; border: none !important;
font-size: var(
.theme(font-size, '@goods-action-icon-font-size') !important; --goods-action-icon-font-size,
.theme(color, '@goods-action-icon-text-color') !important; @goods-action-icon-font-size
.theme(min-width, '@goods-action-icon-width'); ) !important;
.theme(height, '@goods-action-icon-height') !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 { &__icon {
display: flex; display: flex;
margin: 0 auto 5px; margin: 0 auto 5px;
.theme(color, '@goods-action-icon-color'); color: var(--goods-action-icon-color, @goods-action-icon-color);
.theme(font-size, '@goods-action-icon-size'); 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/var.less';
@import '../common/style/theme.less';
.van-goods-action { .van-goods-action {
position: fixed; position: fixed;
@ -9,8 +8,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: content-box; box-sizing: content-box;
.theme(height, '@goods-action-height'); height: var(--goods-action-height, @goods-action-height);
.theme(background-color, '@goods-action-background-color'); background-color: var(
--goods-action-background-color,
@goods-action-background-color
);
&--safe { &--safe {
padding-bottom: constant(safe-area-inset-bottom); 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/var.less';
@import '../common/style/theme.less';
.van-grid-item { .van-grid-item {
position: relative; position: relative;
@ -15,17 +14,20 @@
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
.theme(padding, '@grid-item-content-padding'); padding: var(--grid-item-content-padding, @grid-item-content-padding);
.theme(background-color, '@grid-item-content-background-color'); background-color: var(
--grid-item-content-background-color,
@grid-item-content-background-color
);
&::after { &::after {
z-index: 1; 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 { &--surround {
&::after { &::after {
.theme(border-width,'@border-width-base'); border-width: @border-width-base;
} }
} }
@ -66,22 +68,24 @@
} }
&--clickable:active { &--clickable:active {
.theme(background-color, '@grid-item-content-active-color'); background-color: var(
--grid-item-content-active-color,
@grid-item-content-active-color
);
} }
} }
&__icon { &__icon {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: var(--grid-item-icon-size, @grid-item-icon-size);
.theme(font-size, '@grid-item-icon-size'); height: var(--grid-item-icon-size, @grid-item-icon-size);
.theme(height, '@grid-item-icon-size');
} }
&__text { &__text {
word-wrap: break-word; word-wrap: break-word;
.theme(color, '@grid-item-text-color'); color: var(--grid-item-text-color, @grid-item-text-color);
.theme(font-size, '@grid-item-text-font-size'); font-size: var(--grid-item-text-font-size, @grid-item-text-font-size);
} }
&__icon + &__text { &__icon + &__text {

21
packages/image/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-image { .van-image {
position: relative; position: relative;
@ -31,18 +30,24 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.theme(color, '@image-placeholder-text-color'); color: var(--image-placeholder-text-color, @image-placeholder-text-color);
.theme(font-size, '@image-placeholder-font-size'); font-size: var(--image-placeholder-font-size, @image-placeholder-font-size);
.theme(background-color, '@image-placeholder-background-color'); background-color: var(
--image-placeholder-background-color,
@image-placeholder-background-color
);
} }
&__loading-icon { &__loading-icon {
.theme(color, '@image-loading-icon-color'); color: var(--image-loading-icon-color, @image-loading-icon-color);
.theme(font-size, '@image-loading-icon-size') !important; font-size: var(
--image-loading-icon-size,
@image-loading-icon-size
) !important;
} }
&__error-icon { &__error-icon {
.theme(color, '@image-error-icon-color'); color: var(--image-error-icon-color, @image-error-icon-color);
.theme(font-size, '@image-error-icon-size') !important; 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/var.less';
@import '../common/style/theme.less';
.van-index-anchor { .van-index-anchor {
.theme(padding, '@index-anchor-padding'); padding: var(--index-anchor-padding, @index-anchor-padding);
.theme(color, '@index-anchor-text-color'); color: var(--index-anchor-text-color, @index-anchor-text-color);
.theme(font-weight, '@index-anchor-font-weight'); font-weight: var(--index-anchor-font-weight, @index-anchor-font-weight);
.theme(font-size, '@index-anchor-font-size'); font-size: var(--index-anchor-font-size, @index-anchor-font-size);
.theme(line-height, '@index-anchor-line-height'); line-height: var(--index-anchor-line-height, @index-anchor-line-height);
.theme(background-color, '@index-anchor-background-color'); background-color: var(
--index-anchor-background-color,
@index-anchor-background-color
);
&--active { &--active {
right: 0; right: 0;
left: 0; left: 0;
.theme(color, '@index-anchor-active-text-color'); color: var(
.theme(background-color, '@index-anchor-active-background-color'); --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/var.less';
@import '../common/style/theme.less';
.van-index-bar { .van-index-bar {
position: relative; position: relative;
@ -17,8 +16,12 @@
&__index { &__index {
font-weight: 500; font-weight: 500;
.theme(padding, '0 @padding-base 0 @padding-md'); padding: 0 var(--padding-base, @padding-base) 0
.theme(font-size, '@index-bar-index-font-size'); var(--padding-md, @padding-md);
.theme(line-height, '@index-bar-index-line-height'); 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/var.less';
@import '../common/style/theme.less';
.van-info { .van-info {
position: absolute; position: absolute;
@ -12,23 +11,22 @@
white-space: nowrap; white-space: nowrap;
transform: translate(50%, -50%); transform: translate(50%, -50%);
transform-origin: 100%; transform-origin: 100%;
height: var(--info-size, @info-size);
.theme(height, '@info-size'); min-width: var(--info-size, @info-size);
.theme(min-width, '@info-size'); padding: var(--info-padding, @info-padding);
.theme(padding, '@info-padding'); color: var(--info-color, @info-color);
.theme(color, '@info-color'); font-weight: var(--info-font-weight, @info-font-weight);
.theme(font-weight, '@info-font-weight'); font-size: var(--info-font-size, @info-font-size);
.theme(font-size, '@info-font-size'); font-family: var(--info-font-family, @info-font-family);
.theme(font-family, '@info-font-family'); background-color: var(--info-background-color, @info-background-color);
.theme(background-color, '@info-background-color'); border: var(--info-border-width, @info-border-width) solid @white;
.theme(border, '@info-border-width solid @white'); border-radius: var(--info-size, @info-size);
.theme(border-radius, '@info-size');
&--dot { &--dot {
min-width: 0; min-width: 0;
border-radius: 100%; border-radius: 100%;
.theme(width, '@info-dot-size'); width: var(--info-dot-size, @info-dot-size);
.theme(height, '@info-dot-size'); height: var(--info-dot-size, @info-dot-size);
.theme(background-color, '@info-dot-color'); 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/var.less';
@import '../common/style/theme.less';
:host { :host {
font-size: 0; font-size: 0;
@ -10,17 +9,22 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.theme(color, '@loading-spinner-color'); color: var(--loading-spinner-color, @loading-spinner-color);
&__spinner { &__spinner {
position: relative; position: relative;
box-sizing: border-box; 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 // compatible for 0.x, users may set width or height in root element
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
.theme(height, '@loading-spinner-size'); height: var(--loading-spinner-size, @loading-spinner-size);
.theme(animation, 'van-rotate @loading-spinner-animation-duration linear infinite'); animation: van-rotate
var(
--loading-spinner-animation-duration,
@loading-spinner-animation-duration
)
linear infinite;
&--spinner { &--spinner {
animation-timing-function: steps(12); animation-timing-function: steps(12);
@ -34,10 +38,10 @@
} }
&__text { &__text {
.theme(margin-left, '@padding-xs'); margin-left: var(--padding-xs, @padding-xs);
.theme(color, '@loading-text-color'); color: var(--loading-text-color, @loading-text-color);
.theme(font-size, '@loading-text-font-size'); font-size: var(--loading-text-font-size, @loading-text-font-size);
.theme(line-height, '@loading-text-line-height'); line-height: var(--loading-text-line-height, @loading-text-line-height);
&:empty { &:empty {
display: none; display: none;
@ -48,7 +52,7 @@
flex-direction: column; flex-direction: column;
.van-loading__text { .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/var.less';
@import '../common/style/theme.less';
.van-nav-bar { .van-nav-bar {
position: relative; position: relative;
text-align: center; text-align: center;
user-select: none; user-select: none;
.theme(height, '@nav-bar-height'); height: var(--nav-bar-height, @nav-bar-height);
.theme(line-height, '@nav-bar-height'); line-height: var(--nav-bar-height, @nav-bar-height);
.theme(background-color, '@nav-bar-background-color'); background-color: var(--nav-bar-background-color, @nav-bar-background-color);
&__content { &__content {
position: relative; position: relative;
@ -17,19 +16,19 @@
&__text { &__text {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
.theme(margin, '0 -@padding-md'); margin: 0 calc(-1 * var(--padding-md, @padding-md));
.theme(padding, '0 @padding-md'); padding: 0 var(--padding-md, @padding-md);
.theme(color, '@nav-bar-text-color'); color: var(--nav-bar-text-color, @nav-bar-text-color);
&--hover { &--hover {
.theme(background-color, '@active-color'); background-color: @active-color;
} }
} }
&__arrow { &__arrow {
vertical-align: middle; vertical-align: middle;
.theme(font-size, '@nav-bar-arrow-size') !important; font-size: var(--nav-bar-arrow-size, @nav-bar-arrow-size) !important;
.theme(color, '@nav-bar-icon-color') !important; color: var(--nav-bar-icon-color, @nav-bar-icon-color) !important;
+ .van-nav-bar__text { + .van-nav-bar__text {
margin-left: -20px; margin-left: -20px;
@ -47,9 +46,9 @@
&__title { &__title {
max-width: 60%; max-width: 60%;
margin: 0 auto; margin: 0 auto;
.theme(color, '@nav-bar-title-text-color'); color: var(--nav-bar-title-text-color, @nav-bar-title-text-color);
.theme(font-weight, '@font-weight-bold'); font-weight: var(--font-weight-bold, @font-weight-bold);
.theme(font-size, '@nav-bar-title-font-size'); font-size: var(--nav-bar-title-font-size, @nav-bar-title-font-size);
} }
&__left, &__left,
@ -59,14 +58,14 @@
bottom: 0; bottom: 0;
display: flex; display: flex;
align-items: center; align-items: center;
.theme(font-size, '@font-size-md'); font-size: var(--font-size-md, @font-size-md);
} }
&__left { &__left {
.theme(left, '@padding-md'); left: var(--padding-md, @padding-md);
} }
&__right { &__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/var.less';
@import '../common/style/theme.less';
.van-notice-bar { .van-notice-bar {
display: flex; display: flex;
align-items: center; align-items: center;
.theme(height, '@notice-bar-height'); height: var(--notice-bar-height, @notice-bar-height);
.theme(padding, '@notice-bar-padding'); padding: var(--notice-bar-padding, @notice-bar-padding);
.theme(font-size, '@notice-bar-font-size'); font-size: var(--notice-bar-font-size, @notice-bar-font-size);
.theme(color, '@notice-bar-text-color'); color: var(--notice-bar-text-color, @notice-bar-text-color);
.theme(line-height, '@notice-bar-line-height'); line-height: var(--notice-bar-line-height, @notice-bar-line-height);
.theme(background-color, '@notice-bar-background-color'); background-color: var(
--notice-bar-background-color,
@notice-bar-background-color
);
&--withicon { &--withicon {
position: relative; position: relative;
@ -18,7 +20,7 @@
&--wrapable { &--wrapable {
height: auto; height: auto;
.theme(padding, '@notice-bar-wrapable-padding'); padding: var(--notice-bar-wrapable-padding, @notice-bar-wrapable-padding);
.van-notice-bar { .van-notice-bar {
&__wrap { &__wrap {
@ -37,23 +39,23 @@
align-items: center; align-items: center;
margin-right: 4px; margin-right: 4px;
vertical-align: middle; vertical-align: middle;
.theme(font-size, '@notice-bar-icon-size'); font-size: var(--notice-bar-icon-size, @notice-bar-icon-size);
.theme(min-width, '@notice-bar-icon-min-width'); min-width: var(--notice-bar-icon-min-width, @notice-bar-icon-min-width);
} }
&__right-icon { &__right-icon {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 15px; right: 15px;
.theme(font-size, '@notice-bar-icon-size'); font-size: var(--notice-bar-icon-size, @notice-bar-icon-size);
.theme(min-width, '@notice-bar-icon-min-width'); min-width: var(--notice-bar-icon-min-width, @notice-bar-icon-min-width);
} }
&__wrap { &__wrap {
position: relative; position: relative;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
.theme(height, '@notice-bar-line-height'); height: var(--notice-bar-line-height, @notice-bar-line-height);
} }
&__content { &__content {

27
packages/notify/index.less
View File

@ -1,12 +1,11 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-notify { .van-notify {
text-align: center; text-align: center;
word-wrap: break-word; word-wrap: break-word;
.theme(padding, '@notify-padding'); padding: var(--notify-padding, @notify-padding);
.theme(font-size, '@notify-font-size'); font-size: var(--notify-font-size, @notify-font-size);
.theme(line-height, '@notify-line-height'); line-height: var(--notify-line-height, @notify-line-height);
&__container { &__container {
position: fixed; position: fixed;
@ -17,18 +16,30 @@
} }
&--primary { &--primary {
.theme(background-color, '@notify-primary-background-color'); background-color: var(
--notify-primary-background-color,
@notify-primary-background-color
);
} }
&--success { &--success {
.theme(background-color, '@notify-success-background-color'); background-color: var(
--notify-success-background-color,
@notify-success-background-color
);
} }
&--danger { &--danger {
.theme(background-color, '@notify-danger-background-color'); background-color: var(
--notify-danger-background-color,
@notify-danger-background-color
);
} }
&--warning { &--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/var.less';
@import '../common/style/theme.less';
.van-overlay { .van-overlay {
position: fixed; position: fixed;
@ -7,5 +6,5 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 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/var.less';
@import '../common/style/theme.less';
.van-panel { .van-panel {
.theme(background, '@panel-background-color'); background: var(--panel-background-color, @panel-background-color);
&__header-value { &__header-value {
.theme(color, '@panel-header-value-color'); color: var(--panel-header-value-color, @panel-header-value-color);
} }
&__footer { &__footer {
.theme(padding,'@panel-footer-padding'); padding: var(--panel-footer-padding, @panel-footer-padding);
&:empty { &:empty {
display: none; display: none;

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

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

71
packages/popup/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-popup { .van-popup {
position: fixed; position: fixed;
@ -9,7 +8,7 @@
transition-timing-function: ease; transition-timing-function: ease;
animation: ease both; animation: ease both;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
.theme(background-color, '@popup-background-color'); background-color: var(--popup-background-color, @popup-background-color);
&--center { &--center {
top: 50%; top: 50%;
@ -17,7 +16,10 @@
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
&.van-popup--round { &.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%; width: 100%;
&.van-popup--round { &.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); transform: translate3d(0, -50%, 0);
&.van-popup--round { &.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%; width: 100%;
&.van-popup--round { &.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); transform: translate3d(0, -50%, 0);
&.van-popup--round { &.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 { &__close-icon {
position: absolute; position: absolute;
.theme(z-index, '@popup-close-icon-z-index'); z-index: var(--popup-close-icon-z-index, @popup-close-icon-z-index);
.theme(color, '@popup-close-icon-color'); color: var(--popup-close-icon-color, @popup-close-icon-color);
.theme(font-size, '@popup-close-icon-size'); font-size: var(--popup-close-icon-size, @popup-close-icon-size);
&--top-left { &--top-left {
.theme(top, '@popup-close-icon-margin'); top: var(--popup-close-icon-margin, @popup-close-icon-margin);
.theme(left, '@popup-close-icon-margin'); left: var(--popup-close-icon-margin, @popup-close-icon-margin);
} }
&--top-right { &--top-right {
.theme(top, '@popup-close-icon-margin'); top: var(--popup-close-icon-margin, @popup-close-icon-margin);
.theme(right, '@popup-close-icon-margin'); right: var(--popup-close-icon-margin, @popup-close-icon-margin);
} }
&--bottom-left { &--bottom-left {
.theme(bottom, '@popup-close-icon-margin'); bottom: var(--popup-close-icon-margin, @popup-close-icon-margin);
.theme(left, '@popup-close-icon-margin'); left: var(--popup-close-icon-margin, @popup-close-icon-margin);
} }
&--bottom-right { &--bottom-right {
.theme(right, '@popup-close-icon-margin'); right: var(--popup-close-icon-margin, @popup-close-icon-margin);
.theme(bottom, '@popup-close-icon-margin'); bottom: var(--popup-close-icon-margin, @popup-close-icon-margin);
} }
&:active { &:active {

22
packages/progress/index.less
View File

@ -1,18 +1,17 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-progress { .van-progress {
position: relative; position: relative;
.theme(height, '@progress-height'); height: var(--progress-height, @progress-height);
.theme(border-radius, '@progress-height'); border-radius: var(--progress-height, @progress-height);
.theme(background, '@progress-background-color'); background: var(--progress-background-color, @progress-background-color);
&__portion { &__portion {
position: absolute; position: absolute;
left: 0; left: 0;
height: 100%; height: 100%;
border-radius: inherit; border-radius: inherit;
.theme(background, '@progress-color'); background: var(--progress-color, @progress-color);
} }
&__pivot { &__pivot {
@ -24,10 +23,13 @@
word-break: keep-all; word-break: keep-all;
border-radius: 1em; border-radius: 1em;
transform: translate(0, -50%); transform: translate(0, -50%);
.theme(color, '@progress-pivot-text-color'); color: var(--progress-pivot-text-color, @progress-pivot-text-color);
.theme(padding, '@progress-pivot-padding'); padding: var(--progress-pivot-padding, @progress-pivot-padding);
.theme(font-size, '@progress-pivot-font-size'); font-size: var(--progress-pivot-font-size, @progress-pivot-font-size);
.theme(line-height, '@progress-pivot-line-height'); line-height: var(--progress-pivot-line-height, @progress-pivot-line-height);
.theme(background-color, '@progress-pivot-background-color'); 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/var.less';
@import '../common/style/theme.less';
.van-radio { .van-radio {
display: flex; display: flex;
@ -12,7 +11,7 @@
} }
&--horizontal { &--horizontal {
.theme(margin-right, '@padding-sm'); margin-right: var(--padding-sm, @padding-sm);
} }
&__icon { &__icon {
@ -25,43 +24,55 @@
color: transparent; color: transparent;
text-align: center; text-align: center;
transition-property: color, border-color, background-color; transition-property: color, border-color, background-color;
.theme(border, '1px solid @radio-border-color'); border: 1px solid var(--radio-border-color, @radio-border-color);
.theme(font-size, '@radio-size'); font-size: var(--radio-size, @radio-size);
.theme(transition-duration, '@radio-transition-duration'); transition-duration: var(
--radio-transition-duration,
@radio-transition-duration
);
&--round { &--round {
border-radius: 100%; border-radius: 100%;
} }
&--checked { &--checked {
.theme(color, '@white'); color: @white;
.theme(background-color, '@radio-checked-icon-color'); background-color: var(
.theme(border-color, '@radio-checked-icon-color'); --radio-checked-icon-color,
@radio-checked-icon-color
);
border-color: var(--radio-checked-icon-color, @radio-checked-icon-color);
} }
&--disabled { &--disabled {
.theme(background-color, '@radio-disabled-background-color'); background-color: var(
.theme(border-color, '@radio-disabled-icon-color'); --radio-disabled-background-color,
@radio-disabled-background-color
);
border-color: var(
--radio-disabled-icon-color,
@radio-disabled-icon-color
);
} }
&--disabled&--checked { &--disabled&--checked {
.theme(color, '@radio-disabled-icon-color'); color: var(--radio-disabled-icon-color, @radio-disabled-icon-color);
} }
} }
&__label { &__label {
word-wrap: break-word; word-wrap: break-word;
.theme(padding-left, '@radio-label-margin'); padding-left: var(--radio-label-margin, @radio-label-margin);
.theme(color, '@radio-label-color'); color: var(--radio-label-color, @radio-label-color);
.theme(line-height, '@radio-size'); line-height: var(--radio-size, @radio-size);
&--left { &--left {
float: left; float: left;
.theme(margin, '0 @radio-label-margin 0 0'); margin: 0 var(--radio-label-margin, @radio-label-margin) 0 0;
} }
&--disabled { &--disabled {
.theme(color, '@radio-disabled-label-color'); color: var(--radio-disabled-label-color, @radio-disabled-label-color);
} }
&:empty { &:empty {

17
packages/rate/index.less
View File

@ -1,5 +1,4 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-rate { .van-rate {
display: inline-flex; display: inline-flex;
@ -7,34 +6,34 @@
&__item { &__item {
position: relative; position: relative;
.theme(padding, '0 @rate-horizontal-padding'); padding: 0 var(--rate-horizontal-padding, @rate-horizontal-padding);
&:not(:last-child) { &:not(:last-child) {
.theme(padding-right, '@rate-icon-gutter'); padding-right: var(--rate-icon-gutter, @rate-icon-gutter);
} }
} }
&__icon { &__icon {
display: block; display: block;
height: 1em; height: 1em;
.theme(color, '@rate-icon-void-color'); color: var(--rate-icon-void-color, @rate-icon-void-color);
.theme(font-size, '@rate-icon-size'); font-size: var(--rate-icon-size, @rate-icon-size);
&--half { &--half {
position: absolute; position: absolute;
top: 0; top: 0;
width: 0.5em; width: 0.5em;
overflow: hidden; overflow: hidden;
.theme(left, '@rate-horizontal-padding'); left: var(--rate-horizontal-padding, @rate-horizontal-padding);
.theme(color, '@rate-icon-full-color'); color: var(--rate-icon-full-color, @rate-icon-full-color);
} }
&--full { &--full {
.theme(color, '@rate-icon-full-color'); color: var(--rate-icon-full-color, @rate-icon-full-color);
} }
&--disabled { &--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/var.less';
@import '../common/style/theme.less';
.van-search { .van-search {
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
.theme(padding, '@search-padding'); padding: var(--search-padding, @search-padding);
&__content { &__content {
display: flex; display: flex;
flex: 1; flex: 1;
.theme(padding-left, '@padding-sm'); padding-left: var(--padding-sm, @padding-sm);
.theme(border-radius, '@border-radius-sm'); border-radius: @border-radius-sm;
.theme(background-color, '@search-background-color'); background-color: var(--search-background-color, @search-background-color);
&--round { &--round {
.theme(border-radius, '@border-radius-max'); border-radius: @border-radius-max;
} }
} }
&__label { &__label {
.theme(padding, '@search-label-padding'); padding: var(--search-label-padding, @search-label-padding);
.theme(font-size, '@search-label-font-size'); font-size: var(--search-label-font-size, @search-label-font-size);
.theme(line-height, '@search-input-height'); line-height: var(--search-input-height, @search-input-height);
.theme(color, '@search-label-color'); color: var(--search-label-color, @search-label-color);
} }
&__field { &__field {
flex: 1; flex: 1;
&__left-icon { &__left-icon {
.theme(color, '@search-left-icon-color'); color: var(--search-left-icon-color, @search-left-icon-color);
} }
} }
@ -39,13 +38,13 @@
} }
&__action { &__action {
.theme(padding, '@search-action-padding'); padding: var(--search-action-padding, @search-action-padding);
.theme(font-size, '@search-action-font-size'); font-size: var(--search-action-font-size, @search-action-font-size);
.theme(line-height, '@search-input-height'); line-height: var(--search-input-height, @search-input-height);
.theme(color, '@search-action-text-color'); color: var(--search-action-text-color, @search-action-text-color);
&--hover { &--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/var.less';
@import '../common/style/theme.less';
.van-sidebar-item { .van-sidebar-item {
display: block; display: block;
@ -7,11 +6,11 @@
overflow: hidden; overflow: hidden;
border-left: 3px solid transparent; border-left: 3px solid transparent;
user-select: none; user-select: none;
.theme(padding, '@sidebar-padding'); padding: var(--sidebar-padding, @sidebar-padding);
.theme(font-size, '@sidebar-font-size'); font-size: var(--sidebar-font-size, @sidebar-font-size);
.theme(line-height, '@sidebar-line-height'); line-height: var(--sidebar-line-height, @sidebar-line-height);
.theme(color, '@sidebar-text-color'); color: var(--sidebar-text-color, @sidebar-text-color);
.theme(background-color, '@sidebar-background-color'); background-color: var(--sidebar-background-color, @sidebar-background-color);
&__text { &__text {
position: relative; position: relative;
@ -20,7 +19,7 @@
} }
&--hover:not(&--disabled) { &--hover:not(&--disabled) {
.theme(background-color, '@sidebar-active-color'); background-color: var(--sidebar-active-color, @sidebar-active-color);
} }
&::after { &::after {
@ -28,9 +27,15 @@
} }
&--selected { &--selected {
.theme(color, '@sidebar-selected-text-color'); color: var(--sidebar-selected-text-color, @sidebar-selected-text-color);
.theme(font-weight, '@sidebar-selected-font-weight'); font-weight: var(
.theme(border-color, '@sidebar-selected-border-color'); --sidebar-selected-font-weight,
@sidebar-selected-font-weight
);
border-color: var(
--sidebar-selected-border-color,
@sidebar-selected-border-color
);
&::after { &::after {
border-right-width: 1px; border-right-width: 1px;
@ -39,10 +44,13 @@
&--selected, &--selected,
&--selected&--hover { &--selected&--hover {
.theme(background-color, '@sidebar-selected-background-color'); background-color: var(
--sidebar-selected-background-color,
@sidebar-selected-background-color
);
} }
&--disabled { &--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/var.less';
@import '../common/style/theme.less';
.van-sidebar { .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/var.less';
@import '../common/style/theme.less';
.van-skeleton { .van-skeleton {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
.theme(padding, '@skeleton-padding'); padding: var(--skeleton-padding, @skeleton-padding);
&__avatar { &__avatar {
flex-shrink: 0; flex-shrink: 0;
.theme(margin-right, '@padding-md'); margin-right: var(--padding-md, @padding-md);
.theme(background-color, '@skeleton-avatar-background-color'); background-color: var(
--skeleton-avatar-background-color,
@skeleton-avatar-background-color
);
&--round { &--round {
border-radius: 100%; border-radius: 100%;
@ -22,13 +24,16 @@
} }
&__avatar + &__content { &__avatar + &__content {
.theme(padding-top, '@padding-xs'); padding-top: var(--padding-xs, @padding-xs);
} }
&__row, &__row,
&__title { &__title {
.theme(height, '@skeleton-row-height'); height: var(--skeleton-row-height, @skeleton-row-height);
.theme(background-color, '@skeleton-row-background-color'); background-color: var(
--skeleton-row-background-color,
@skeleton-row-background-color
);
} }
&__title { &__title {
@ -37,7 +42,7 @@
&__row { &__row {
&:not(:first-child) { &: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/var.less';
@import '../common/style/theme.less';
.van-slider { .van-slider {
position: relative; position: relative;
.theme(height, '@slider-bar-height'); height: var(--slider-bar-height, @slider-bar-height);
.theme(border-radius, '@border-radius-max'); border-radius: @border-radius-max;
.theme(background-color, '@slider-inactive-background-color'); background-color: var(
--slider-inactive-background-color,
@slider-inactive-background-color
);
// use pseudo element to expand click area // use pseudo element to expand click area
&::before { &::before {
@ -13,26 +15,34 @@
right: 0; right: 0;
left: 0; left: 0;
content: ''; content: '';
.theme(top, '-@padding-xs'); top: calc(-1 * var(--padding-xs, @padding-xs));
.theme(bottom, '-@padding-xs'); bottom: calc(-1 * var(--padding-xs, @padding-xs));
} }
&__bar { &__bar {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
.theme(background-color, '@slider-active-background-color'); background-color: var(
--slider-active-background-color,
@slider-active-background-color
);
border-radius: inherit; border-radius: inherit;
.theme(transition, 'all @animation-duration-fast'); transition: all @animation-duration-fast;
} }
&__button { &__button {
.theme(width, '@slider-button-width'); width: var(--slider-button-width, @slider-button-width);
.theme(height, '@slider-button-height'); height: var(--slider-button-height, @slider-button-height);
.theme(border-radius, '@slider-button-border-radius'); border-radius: var(
.theme(box-shadow, '@slider-button-box-shadow'); --slider-button-border-radius,
.theme(background-color, '@slider-button-background-color'); @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,
&-wrapper-right { &-wrapper-right {
@ -51,6 +61,6 @@
} }
&--disabled { &--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/var.less';
@import '../common/style/theme.less';
.van-stepper { .van-stepper {
font-size: 0; font-size: 0;
@ -12,11 +11,14 @@
margin: 1px; margin: 1px;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
.theme(background-color, '@stepper-background-color'); background-color: var(
.theme(color, '@stepper-button-icon-color'); --stepper-background-color,
.theme(width, '@stepper-input-height'); @stepper-background-color
.theme(height, '@stepper-input-height'); );
.theme(padding, '@padding-base'); 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 { &::before {
width: 9px; width: 9px;
@ -41,21 +43,38 @@
} }
&--hover { &--hover {
.theme(background-color, '@stepper-active-color'); background-color: var(--stepper-active-color, @stepper-active-color);
} }
&--disabled { &--disabled {
.theme(color, '@stepper-button-disabled-icon-color'); color: var(
.theme(background-color, '@stepper-button-disabled-color'); --stepper-button-disabled-icon-color,
@stepper-button-disabled-icon-color
);
background-color: var(
--stepper-button-disabled-color,
@stepper-button-disabled-color
);
} }
&--disabled&--hover { &--disabled&--hover {
.theme(background-color, '@stepper-button-disabled-color'); background-color: var(
--stepper-button-disabled-color,
@stepper-button-disabled-color
);
} }
} }
&__minus { &__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 { &::after {
display: none; display: none;
@ -63,7 +82,16 @@
} }
&__plus { &__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 { &--round {
@ -107,22 +135,30 @@
min-height: 0; min-height: 0;
margin: 1px; margin: 1px;
padding: 1px; padding: 1px;
font-size: 14px;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
border-width: 1px 0; border-width: 1px 0;
border-radius: 0; border-radius: 0;
-webkit-appearance: none; -webkit-appearance: none;
.theme(font-size, '@stepper-input-font-size'); font-size: var(--stepper-input-font-size, @stepper-input-font-size);
.theme(color, '@stepper-input-text-color'); color: var(--stepper-input-text-color, @stepper-input-text-color);
.theme(background-color, '@stepper-background-color'); background-color: var(
.theme(width, '@stepper-input-width'); --stepper-background-color,
.theme(height, '@stepper-input-height'); @stepper-background-color
);
width: var(--stepper-input-width, @stepper-input-width);
height: var(--stepper-input-height, @stepper-input-height);
&--disabled { &--disabled {
.theme(color, '@stepper-input-disabled-text-color'); color: var(
.theme(background-color, '@stepper-input-disabled-background-color'); --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/var.less';
@import '../common/style/theme.less';
.van-steps { .van-steps {
overflow: hidden; overflow: hidden;
.theme(background-color, '@steps-background-color'); background-color: var(--steps-background-color, @steps-background-color);
&--horizontal { &--horizontal {
padding: 10px; padding: 10px;
@ -27,18 +26,18 @@
.van-step { .van-step {
position: relative; position: relative;
flex: 1; flex: 1;
.theme(font-size, '@step-font-size'); font-size: var(--step-font-size, @step-font-size);
.theme(color, '@step-text-color'); color: var(--step-text-color, @step-text-color);
&--finish { &--finish {
.theme(color, '@step-finish-text-color'); color: var(--step-finish-text-color, @step-finish-text-color);
} }
&__circle { &__circle {
border-radius: 50%; border-radius: 50%;
.theme(width, '@step-circle-size'); width: var(--step-circle-size, @step-circle-size);
.theme(height, '@step-circle-size'); height: var(--step-circle-size, @step-circle-size);
.theme(background-color, '@step-circle-color'); background-color: var(--step-circle-color, @step-circle-color);
} }
&--horizontal { &--horizontal {
@ -77,14 +76,17 @@
bottom: 6px; bottom: 6px;
z-index: 1; z-index: 1;
transform: translate3d(-50%, 50%, 0); transform: translate3d(-50%, 50%, 0);
.theme(background-color, '@white'); background-color: @white;
.theme(padding, '0 @padding-xs'); padding: 0 var(--padding-xs, @padding-xs);
} }
.van-step__title { .van-step__title {
display: inline-block; display: inline-block;
transform: translate3d(-50%, 0, 0); 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 { .van-step__line {
@ -94,16 +96,16 @@
left: 0; left: 0;
height: 1px; height: 1px;
transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0);
.theme(background-color, '@step-line-color'); background-color: var(--step-line-color, @step-line-color);
} }
&.van-step--process { &.van-step--process {
.theme(color, '@step-process-text-color'); color: var(--step-process-text-color, @step-process-text-color);
.van-step__icon { .van-step__icon {
display: block; display: block;
line-height: 1; line-height: 1;
.theme(font-size, '@step-icon-size'); font-size: var(--step-icon-size, @step-icon-size);
} }
} }
} }
@ -129,7 +131,7 @@
width: 1px; width: 1px;
height: 20px; height: 20px;
content: ''; content: '';
.theme(background-color, '@white'); background-color: @white;
} }
} }
@ -145,7 +147,7 @@
.van-step__icon { .van-step__icon {
line-height: 1; line-height: 1;
.theme(font-size, '@step-icon-size'); font-size: var(--step-icon-size, @step-icon-size);
} }
.van-step__line { .van-step__line {
@ -153,7 +155,7 @@
width: 1px; width: 1px;
height: 100%; height: 100%;
transform: translate3d(-50%, 0, 0); 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 }}" price="{{ 3050 }}"
button-text="提交订单" button-text="提交订单"
tip="您的收货地址不支持同城送, 我们已为您推荐快递" tip="您的收货地址不支持同城送, 我们已为您推荐快递"
tip-icon="https://img.yzcdn.cn/1.png" tip-icon="info-o"
bind:submit="onSubmit" bind:submit="onSubmit"
/> />
``` ```

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

@ -1,5 +1,4 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-submit-bar { .van-submit-bar {
position: fixed; position: fixed;
@ -7,15 +6,21 @@
left: 0; left: 0;
width: 100%; width: 100%;
user-select: none; user-select: none;
.theme(z-index, '@submit-bar-z-index'); z-index: var(--submit-bar-z-index, @submit-bar-z-index);
.theme(background-color, '@submit-bar-background-color'); background-color: var(
--submit-bar-background-color,
@submit-bar-background-color
);
&__tip { &__tip {
.theme(padding, '@submit-bar-tip-padding'); padding: var(--submit-bar-tip-padding, @submit-bar-tip-padding);
.theme(color, '@submit-bar-tip-color'); color: var(--submit-bar-tip-color, @submit-bar-tip-color);
.theme(font-size, '@submit-bar-tip-font-size'); font-size: var(--submit-bar-tip-font-size, @submit-bar-tip-font-size);
.theme(line-height, '@submit-bar-tip-line-height'); line-height: var(--submit-bar-tip-line-height, @submit-bar-tip-line-height);
.theme(background-color, '@submit-bar-tip-background-color'); background-color: var(
--submit-bar-tip-background-color,
@submit-bar-tip-background-color
);
&:empty { &:empty {
display: none; display: none;
@ -23,12 +28,8 @@
} }
&__tip-icon { &__tip-icon {
width: 12px;
height: 12px;
margin-right: 4px; margin-right: 4px;
vertical-align: middle; vertical-align: middle;
.theme(font-size, '@submit-bar-tip-icon-size');
.theme(min-width, 'calc(@submit-bar-tip-icon-size * 1.5)');
} }
&__tip-text { &__tip-text {
@ -40,10 +41,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
.theme(padding, '@submit-bar-padding'); padding: var(--submit-bar-padding, @submit-bar-padding);
.theme(height, '@submit-bar-height'); height: var(--submit-bar-height, @submit-bar-height);
.theme(font-size, '@submit-bar-text-font-size'); font-size: var(--submit-bar-text-font-size, @submit-bar-text-font-size);
.theme(background-color, '@submit-bar-background-color'); background-color: var(
--submit-bar-background-color,
@submit-bar-background-color
);
} }
&__safe { &__safe {
@ -54,15 +58,15 @@
&__text { &__text {
flex: 1; flex: 1;
text-align: right; text-align: right;
.theme(color, '@submit-bar-text-color'); color: var(--submit-bar-text-color, @submit-bar-text-color);
.theme(padding-right, '@padding-sm'); padding-right: var(--padding-sm, @padding-sm);
.theme(font-weight, '@font-weight-bold'); font-weight: var(--font-weight-bold, @font-weight-bold);
} }
&__price { &__price {
.theme(color, '@submit-bar-price-color'); color: var(--submit-bar-price-color, @submit-bar-price-color);
.theme(font-weight, '@font-weight-bold'); font-weight: var(--font-weight-bold, @font-weight-bold);
.theme(font-size, '@submit-bar-price-font-size'); font-size: var(--submit-bar-price-font-size, @submit-bar-price-font-size);
&-integer { &-integer {
font-size: @submit-bar-price-integer-font-size; font-size: @submit-bar-price-integer-font-size;
@ -71,7 +75,10 @@
} }
&__currency { &__currency {
.theme(font-size, '@submit-bar-currency-font-size'); font-size: var(
--submit-bar-currency-font-size,
@submit-bar-currency-font-size
);
} }
&__suffix-label { &__suffix-label {
@ -79,9 +86,16 @@
} }
&__button { &__button {
.theme(width,'@submit-bar-button-width'); width: var(--submit-bar-button-width, @submit-bar-button-width);
.theme(font-weight, '@font-weight-bold'); font-weight: var(--font-weight-bold, @font-weight-bold);
.theme(--button-default-height, '@submit-bar-button-height') !important;
.theme(--button-line-height, '@submit-bar-button-height') !important; --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/var.less';
@import '../common/style/theme.less';
.van-switch { .van-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: content-box; box-sizing: content-box;
.theme(width, '@switch-width'); width: var(--switch-width, @switch-width);
.theme(height, '@switch-height'); height: var(--switch-height, @switch-height);
.theme(background-color, '@switch-background-color'); background-color: var(--switch-background-color, @switch-background-color);
.theme(border, '@switch-border'); border: var(--switch-border, @switch-border);
.theme(border-radius, '@switch-node-size'); border-radius: var(--switch-node-size, @switch-node-size);
.theme(transition, 'background-color @switch-transition-duration'); transition: background-color
var(--switch-transition-duration, @switch-transition-duration);
&__node { &__node {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
border-radius: 100%; border-radius: 100%;
.theme(z-index, '@switch-node-z-index'); z-index: var(--switch-node-z-index, @switch-node-z-index);
.theme(width, '@switch-node-size'); width: var(--switch-node-size, @switch-node-size);
.theme(height, '@switch-node-size'); height: var(--switch-node-size, @switch-node-size);
.theme(background-color, '@switch-node-background-color'); background-color: var(
.theme(box-shadow, '@switch-node-box-shadow'); --switch-node-background-color,
.theme(transition, 'transform @switch-transition-duration cubic-bezier(.3, 1.05, .4, 1.05)'); @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 { &__loading {
@ -34,14 +38,22 @@
} }
&--on { &--on {
.theme(background-color, '@switch-on-background-color'); background-color: var(
--switch-on-background-color,
@switch-on-background-color
);
.van-switch__node { .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 { &--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/var.less';
@import '../common/style/theme.less';
:host { :host {
flex: 1; flex: 1;
@ -11,14 +10,14 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
.theme(color, '@tabbar-item-text-color'); color: var(--tabbar-item-text-color, @tabbar-item-text-color);
.theme(font-size, '@tabbar-item-font-size'); font-size: var(--tabbar-item-font-size, @tabbar-item-font-size);
.theme(line-height, '@tabbar-item-line-height'); line-height: var(--tabbar-item-line-height, @tabbar-item-line-height);
&__icon { &__icon {
position: relative; position: relative;
.theme(margin-bottom, '@tabbar-item-margin-bottom'); margin-bottom: var(--tabbar-item-margin-bottom, @tabbar-item-margin-bottom);
.theme(font-size, '@tabbar-item-icon-size'); font-size: var(--tabbar-item-icon-size, @tabbar-item-icon-size);
&__inner { &__inner {
display: block; display: block;
@ -27,7 +26,7 @@
} }
&--active { &--active {
.theme(color, '@tabbar-item-active-color'); color: var(--tabbar-item-active-color, @tabbar-item-active-color);
} }
&__info { &__info {

5
packages/tabbar/index.less
View File

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

52
packages/tabs/index.less
View File

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

60
packages/tag/index.less
View File

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

25
packages/toast/index.less
View File

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

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

@ -1,15 +1,17 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
@import '../common/style/theme.less';
.van-tree-select { .van-tree-select {
position: relative; position: relative;
display: flex; display: flex;
user-select: none; user-select: none;
.theme(font-size, '@tree-select-font-size'); font-size: var(--tree-select-font-size, @tree-select-font-size);
&__nav { &__nav {
flex: 1; flex: 1;
.theme(background-color, '@tree-select-nav-background-color'); background-color: var(
--tree-select-nav-background-color,
@tree-select-nav-background-color
);
&__inner { &__inner {
width: 100% !important; width: 100% !important;
@ -21,22 +23,30 @@
&__content { &__content {
flex: 2; flex: 2;
.theme(background-color, '@tree-select-content-background-color'); background-color: var(
--tree-select-content-background-color,
@tree-select-content-background-color
);
} }
&__item { &__item {
position: relative; position: relative;
font-weight: bold; font-weight: bold;
padding: 0 32px 0 var(--padding-md, @padding-md);
.theme(padding, '0 32px 0 @padding-md'); line-height: var(--tree-select-item-height, @tree-select-item-height);
.theme(line-height, '@tree-select-item-height');
&--active { &--active {
.theme(color, '@tree-select-item-active-color'); color: var(
--tree-select-item-active-color,
@tree-select-item-active-color
);
} }
&--disabled { &--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; position: absolute;
top: 50%; top: 50%;
transform: translateY(-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/var.less';
@import '../common/style/theme.less';
.van-uploader { .van-uploader {
position: relative; position: relative;
@ -25,70 +24,78 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
.theme(width, '@uploader-size'); width: var(--uploader-size, @uploader-size);
.theme(height, '@uploader-size'); height: var(--uploader-size, @uploader-size);
.theme(margin, '0 @padding-xs @padding-xs 0'); margin: 0 @padding-xs @padding-xs 0;
.theme(background-color, '@uploader-upload-background-color'); background-color: var(
--uploader-upload-background-color,
@uploader-upload-background-color
);
&:active { &:active {
.theme(background-color, '@uploader-upload-active-color'); background-color: var(
--uploader-upload-active-color,
@uploader-upload-active-color
);
} }
&-icon { &-icon {
.theme(color, '@uploader-icon-color'); color: var(--uploader-icon-color, @uploader-icon-color);
.theme(font-size, '@uploader-icon-size'); font-size: var(--uploader-icon-size, @uploader-icon-size);
} }
&-text { &-text {
.theme(margin-top, '@padding-xs'); margin-top: var(--padding-xs, @padding-xs);
.theme(color, '@uploader-text-color'); color: var(--uploader-text-color, @uploader-text-color);
.theme(font-size, '@uploader-text-font-size'); font-size: var(--uploader-text-font-size, @uploader-text-font-size);
} }
&--disabled { &--disabled {
.theme(opacity, '@uploader-disabled-opacity'); opacity: var(--uploader-disabled-opacity, @uploader-disabled-opacity);
} }
} }
&__preview { &__preview {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
.theme(margin, '0 @padding-xs @padding-xs 0'); margin: 0 @padding-xs @padding-xs 0;
&-image { &-image {
display: block; display: block;
overflow: hidden; overflow: hidden;
.theme(width, '@uploader-size'); width: var(--uploader-size, @uploader-size);
.theme(height, '@uploader-size'); height: var(--uploader-size, @uploader-size);
} }
&-delete { &-delete {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
.theme(width, '@uploader-delete-icon-size'); width: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
.theme(height, '@uploader-delete-icon-size'); height: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
.theme(padding, '0 0 @padding-xs @padding-xs');
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
content: ''; content: '';
.theme(width, '@uploader-delete-icon-size'); width: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
.theme(height, '@uploader-delete-icon-size'); height: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
.theme(background-color, '@uploader-delete-background-color'); background-color: var(
.theme(border-radius, '0 0 0 calc(@uploader-delete-icon-size - 2px)'); --uploader-delete-background-color,
@uploader-delete-background-color
);
border-radius: 0 0 0 12px;
} }
&-icon { &-icon {
position: absolute; position: absolute;
top: -2px; top: 0;
right: -2px; right: 0;
z-index: 1; z-index: 1;
transform: scale(0.5); color: var(--uploader-delete-color, @uploader-delete-color);
.theme(font-size, 'calc(@uploader-delete-icon-size + 2px)'); font-size: var(--uploader-delete-icon-size, @uploader-delete-icon-size);
.theme(color, '@uploader-delete-color'); transform: scale(0.7) translate(10%, -10%);
} }
} }
} }
@ -98,23 +105,35 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.theme(width, '@uploader-size'); width: var(--uploader-size, @uploader-size);
.theme(height, '@uploader-size'); height: var(--uploader-size, @uploader-size);
.theme(background-color, '@uploader-file-background-color'); background-color: var(
--uploader-file-background-color,
@uploader-file-background-color
);
&-icon { &-icon {
.theme(color, '@uploader-file-icon-color'); color: var(--uploader-file-icon-color, @uploader-file-icon-color);
.theme(font-size, '@uploader-file-icon-size'); font-size: var(--uploader-file-icon-size, @uploader-file-icon-size);
} }
&-name { &-name {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
text-align: center; text-align: center;
.theme(margin-top, '@uploader-file-name-margin-top'); margin-top: var(
.theme(padding, '@uploader-file-name-padding'); --uploader-file-name-margin-top,
.theme(color, '@uploader-file-name-text-color'); @uploader-file-name-margin-top
.theme(font-size, '@uploader-file-name-font-size'); );
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; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.theme(color, '@white'); color: @white;
.theme(background-color, '@uploader-mask-background-color'); background-color: var(
--uploader-mask-background-color,
@uploader-mask-background-color
);
&-icon { &-icon {
.theme(font-size, '@uploader-mask-icon-size'); font-size: var(--uploader-mask-icon-size, @uploader-mask-icon-size);
} }
&-message { &-message {
margin-top: 6px; margin-top: 6px;
.theme(padding, '0 @padding-base'); padding: 0 var(--padding-base, @padding-base);
.theme(font-size, '@uploader-mask-message-font-size'); font-size: var(
.theme(line-height, '@uploader-mask-message-line-height'); --uploader-mask-message-font-size,
@uploader-mask-message-font-size
);
line-height: var(
--uploader-mask-message-line-height,
@uploader-mask-message-line-height
);
} }
} }
&__loading { &__loading {
.theme(width, '@uploader-loading-icon-size'); width: var(--uploader-loading-icon-size, @uploader-loading-icon-size);
.theme(height, '@uploader-loading-icon-size'); height: var(--uploader-loading-icon-size, @uploader-loading-icon-size);
.theme(color, '@uploader-loading-icon-color !important'); color: var(
--uploader-loading-icon-color,
@uploader-loading-icon-color
) !important;
} }
} }