blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(style): add component css variables

Browse Source
This commit is contained in:
chenjiahan 2021-06-12 14:52:56 +08:00 committed by neverland
parent dafea4e1e8
commit fe1cba97b7
73 changed files with 1703 additions and 800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/action-bar-button/index.less
View File

@ -1,8 +1,14 @@
@import './var.less';
:root {
--van-action-bar-button-height: @action-bar-button-height;
--van-action-bar-button-warning-color: @action-bar-button-warning-color;
--van-action-bar-button-danger-color: @action-bar-button-danger-color;
}
.van-action-bar-button {
flex: 1;
height: @action-bar-button-height;
height: var(--van-action-bar-button-height);
font-weight: @font-weight-bold;
font-size: @font-size-md;
border: none;
@ -21,11 +27,11 @@
}
&--warning {
background: @action-bar-button-warning-color;
background: var(--van-action-bar-button-warning-color);
}
&--danger {
background: @action-bar-button-danger-color;
background: var(--van-action-bar-button-danger-color);
}
@media (max-width: 321px) {

27
src/action-bar-icon/index.less
View File

@ -1,25 +1,36 @@
@import './var.less';
:root {
--van-action-bar-icon-width: @action-bar-icon-width;
--van-action-bar-icon-height: @action-bar-icon-height;
--van-action-bar-icon-color: @action-bar-icon-color;
--van-action-bar-icon-size: @action-bar-icon-size;
--van-action-bar-icon-font-size: @action-bar-icon-font-size;
--van-action-bar-icon-active-color: @action-bar-icon-active-color;
--van-action-bar-icon-text-color: @action-bar-icon-text-color;
--van-action-bar-icon-background-color: @action-bar-icon-background-color;
}
.van-action-bar-icon {
display: flex;
flex-direction: column;
justify-content: center;
min-width: @action-bar-icon-width;
height: @action-bar-icon-height;
color: @action-bar-icon-text-color;
font-size: @action-bar-icon-font-size;
min-width: var(--van-action-bar-icon-width);
height: var(--van-action-bar-icon-height);
color: var(--van-action-bar-icon-text-color);
font-size: var(--van-action-bar-icon-font-size);
line-height: 1;
text-align: center;
background-color: @action-bar-icon-background-color;
background-color: var(--van-action-bar-icon-background-color);
cursor: pointer;
&:active {
background-color: @action-bar-icon-active-color;
background-color: var(--van-action-bar-icon-active-color);
}
&__icon {
margin: 0 auto @padding-base;
color: @action-bar-icon-color;
font-size: @action-bar-icon-size;
color: var(--van-action-bar-icon-color);
font-size: var(--van-action-bar-icon-size);
}
}

9
src/action-bar/index.less
View File

@ -1,6 +1,11 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-action-bar-background-color: @action-bar-background-color;
--van-action-bar-height: @action-bar-height;
}
.van-action-bar {
position: fixed;
right: 0;
@ -9,8 +14,8 @@
display: flex;
align-items: center;
box-sizing: content-box;
height: @action-bar-height;
background-color: @action-bar-background-color;
height: var(--van-action-bar-height);
background-color: var(--van-action-bar-background-color);
.safe-area-inset-bottom();
&--unfit {

73
src/action-sheet/index.less
View File

@ -1,12 +1,37 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-action-sheet-max-height: @action-sheet-max-height;
--van-action-sheet-header-height: @action-sheet-header-height;
--van-action-sheet-header-font-size: @action-sheet-header-font-size;
--van-action-sheet-description-color: @action-sheet-description-color;
--van-action-sheet-description-font-size: @action-sheet-description-font-size;
--van-action-sheet-description-line-height: @action-sheet-description-line-height;
--van-action-sheet-item-background: @action-sheet-item-background;
--van-action-sheet-item-font-size: @action-sheet-item-font-size;
--van-action-sheet-item-line-height: @action-sheet-item-line-height;
--van-action-sheet-item-text-color: @action-sheet-item-text-color;
--van-action-sheet-item-disabled-text-color: @action-sheet-item-disabled-text-color;
--van-action-sheet-subname-color: @action-sheet-subname-color;
--van-action-sheet-subname-font-size: @action-sheet-subname-font-size;
--van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
--van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
--van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
--van-action-sheet-close-icon-active-color: @action-sheet-close-icon-active-color;
--van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
--van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
--van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
--van-action-sheet-cancel-padding-color: @action-sheet-cancel-padding-color;
--van-action-sheet-loading-icon-size: @action-sheet-loading-icon-size;
}
.van-action-sheet {
display: flex;
flex-direction: column;
max-height: @action-sheet-max-height;
max-height: var(--van-action-sheet-max-height);
overflow: hidden;
color: @action-sheet-item-text-color;
color: var(--van-action-sheet-item-text-color);
&__content {
flex: 1 auto;
@ -19,8 +44,8 @@
display: block;
width: 100%;
padding: 14px @padding-md;
font-size: @action-sheet-item-font-size;
background-color: @action-sheet-item-background;
font-size: var(--van-action-sheet-item-font-size);
background-color: var(--van-action-sheet-item-background);
border: none;
cursor: pointer;
@ -30,14 +55,14 @@
}
&__item {
line-height: @action-sheet-item-line-height;
line-height: var(--van-action-sheet-item-line-height);
&--loading,
&--disabled {
color: @action-sheet-item-disabled-text-color;
color: var(--van-action-sheet-item-disabled-text-color);
&:active {
background-color: @action-sheet-item-background;
background-color: var(--van-action-sheet-item-background);
}
}
@ -53,27 +78,27 @@
&__cancel {
flex-shrink: 0;
box-sizing: border-box;
color: @action-sheet-cancel-text-color;
color: var(--van-action-sheet-cancel-text-color);
}
&__subname {
margin-top: @padding-xs;
color: @action-sheet-subname-color;
font-size: @action-sheet-subname-font-size;
line-height: @action-sheet-subname-line-height;
color: var(--van-action-sheet-subname-color);
font-size: var(--van-action-sheet-subname-font-size);
line-height: var(--van-action-sheet-subname-line-height);
}
&__gap {
display: block;
height: @action-sheet-cancel-padding-top;
background-color: @action-sheet-cancel-padding-color;
height: var(--van-action-sheet-cancel-padding-top);
background-color: var(--van-action-sheet-cancel-padding-color);
}
&__header {
flex-shrink: 0;
font-weight: @font-weight-bold;
font-size: @action-sheet-header-font-size;
line-height: @action-sheet-header-height;
font-size: var(--van-action-sheet-header-font-size);
line-height: var(--van-action-sheet-header-height);
text-align: center;
}
@ -81,9 +106,9 @@
position: relative;
flex-shrink: 0;
padding: 20px @padding-md;
color: @action-sheet-description-color;
font-size: @action-sheet-description-font-size;
line-height: @action-sheet-description-line-height;
color: var(--van-action-sheet-description-color);
font-size: var(--van-action-sheet-description-font-size);
line-height: var(--van-action-sheet-description-line-height);
text-align: center;
&::after {
@ -92,21 +117,21 @@
}
&__loading-icon .van-loading__spinner {
width: @action-sheet-loading-icon-size;
height: @action-sheet-loading-icon-size;
width: var(--van-action-sheet-loading-icon-size);
height: var(--van-action-sheet-loading-icon-size);
}
&__close {
position: absolute;
top: 0;
right: 0;
padding: @action-sheet-close-icon-padding;
color: @action-sheet-close-icon-color;
font-size: @action-sheet-close-icon-size;
padding: var(--van-action-sheet-close-icon-padding);
color: var(--van-action-sheet-close-icon-color);
font-size: var(--van-action-sheet-close-icon-size);
line-height: inherit;
&:active {
color: @action-sheet-close-icon-active-color;
color: var(--van-action-sheet-close-icon-active-color);
}
}
}

18
src/address-edit/index.less
View File

@ -1,7 +1,15 @@
@import './var.less';
:root {
--van-address-edit-padding: @address-edit-padding;
--van-address-edit-buttons-padding: @address-edit-buttons-padding;
--van-address-edit-button-margin-bottom: @address-edit-button-margin-bottom;
--van-address-edit-detail-finish-color: @address-edit-detail-finish-color;
--van-address-edit-detail-finish-font-size: @address-edit-detail-finish-font-size;
}
.van-address-edit {
padding: @address-edit-padding;
padding: var(--van-address-edit-padding);
&__fields {
overflow: hidden;
@ -19,10 +27,10 @@
}
&__buttons {
padding: @address-edit-buttons-padding;
padding: var(--van-address-edit-buttons-padding);
.van-button {
margin-bottom: @address-edit-button-margin-bottom;
margin-bottom: var(--van-address-edit-button-margin-bottom);
}
}
@ -36,8 +44,8 @@
}
&__finish {
color: @address-edit-detail-finish-color;
font-size: @address-edit-detail-finish-font-size;
color: var(--van-address-edit-detail-finish-color);
font-size: var(--van-address-edit-detail-finish-font-size);
}
}
}

44
src/address-list/index.less
View File

@ -1,16 +1,32 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-address-list-padding: @address-list-padding;
--van-address-list-disabled-text-color: @address-list-disabled-text-color;
--van-address-list-disabled-text-padding: @address-list-disabled-text-padding;
--van-address-list-disabled-text-font-size: @address-list-disabled-text-font-size;
--van-address-list-disabled-text-line-height: @address-list-disabled-text-line-height;
--van-address-list-add-button-z-index: @address-list-add-button-z-index;
--van-address-list-item-padding: @address-list-item-padding;
--van-address-list-item-text-color: @address-list-item-text-color;
--van-address-list-item-disabled-text-color: @address-list-item-disabled-text-color;
--van-address-list-item-font-size: @address-list-item-font-size;
--van-address-list-item-line-height: @address-list-item-line-height;
--van-address-list-item-radio-icon-color: @address-list-item-radio-icon-color;
--van-address-list-edit-icon-size: @address-list-edit-icon-size;
}
.van-address-list {
box-sizing: border-box;
height: 100%;
padding: @address-list-padding;
padding: var(--van-address-list-padding);
&__bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: @address-list-add-button-z-index;
z-index: var(--van-address-list-add-button-z-index);
box-sizing: border-box;
width: 100%;
padding: 0 @padding-md;
@ -24,15 +40,15 @@
}
&__disabled-text {
padding: @address-list-disabled-text-padding;
color: @address-list-disabled-text-color;
font-size: @address-list-disabled-text-font-size;
line-height: @address-list-disabled-text-line-height;
padding: var(--van-address-list-disabled-text-padding);
color: var(--van-address-list-disabled-text-color);
font-size: var(--van-address-list-disabled-text-font-size);
line-height: var(--van-address-list-disabled-text-line-height);
}
}
.van-address-item {
padding: @address-list-item-padding;
padding: var(--van-address-list-item-padding);
background-color: @white;
border-radius: @border-radius-lg;
@ -61,15 +77,15 @@
}
&__address {
color: @address-list-item-text-color;
font-size: @address-list-item-font-size;
line-height: @address-list-item-line-height;
color: var(--van-address-list-item-text-color);
font-size: var(--van-address-list-item-font-size);
line-height: var(--van-address-list-item-line-height);
}
&--disabled {
.van-address-item__name,
.van-address-item__address {
color: @address-list-item-disabled-text-color;
color: var(--van-address-list-item-disabled-text-color);
}
}
@ -78,7 +94,7 @@
top: 50%;
right: @padding-md;
color: @gray-6;
font-size: @address-list-edit-icon-size;
font-size: var(--van-address-list-edit-icon-size);
transform: translate(0, -50%);
}
@ -91,7 +107,7 @@
}
.van-radio__icon--checked .van-icon {
background-color: @address-list-item-radio-icon-color;
border-color: @address-list-item-radio-icon-color;
background-color: var(--van-address-list-item-radio-icon-color);
border-color: var(--van-address-list-item-radio-icon-color);
}
}

35
src/badge/index.less
View File

@ -1,18 +1,31 @@
@import './var.less';
:root {
--van-badge-size: @badge-size;
--van-badge-color: @badge-color;
--van-badge-padding: @badge-padding;
--van-badge-font-size: @badge-font-size;
--van-badge-font-weight: @badge-font-weight;
--van-badge-border-width: @badge-border-width;
--van-badge-background-color: @badge-background-color;
--van-badge-dot-color: @badge-dot-color;
--van-badge-dot-size: @badge-dot-size;
--van-badge-font-family: @badge-font-family;
}
.van-badge {
display: inline-block;
box-sizing: border-box;
min-width: @badge-size;
padding: @badge-padding;
color: @badge-color;
font-weight: @badge-font-weight;
font-size: @badge-font-size;
font-family: @badge-font-family;
min-width: var(--van-badge-size);
padding: var(--van-badge-padding);
color: var(--van-badge-color);
font-weight: var(--van-badge-font-weight);
font-size: var(--van-badge-font-size);
font-family: var(--van-badge-font-family);
line-height: 1.2;
text-align: center;
background-color: @badge-background-color;
border: @badge-border-width solid @white;
background-color: var(--van-badge-background-color);
border: var(--van-badge-border-width) solid @white;
border-radius: @border-radius-max;
&--fixed {
@ -24,10 +37,10 @@
}
&--dot {
width: @badge-dot-size;
width: var(--van-badge-dot-size);
min-width: 0;
height: @badge-dot-size;
background-color: @badge-dot-color;
height: var(--van-badge-dot-size);
background-color: var(--van-badge-dot-color);
border-radius: 100%;
}

122
src/button/index.less
View File

@ -1,16 +1,53 @@
@import './var.less';
:root {
--van-button-mini-height: @button-mini-height;
--van-button-mini-padding: @button-mini-padding;
--van-button-mini-font-size: @button-mini-font-size;
--van-button-small-height: @button-small-height;
--van-button-small-padding: @button-small-padding;
--van-button-small-font-size: @button-small-font-size;
--van-button-normal-padding: @button-normal-padding;
--van-button-normal-font-size: @button-normal-font-size;
--van-button-large-height: @button-large-height;
--van-button-default-height: @button-default-height;
--van-button-default-line-height: @button-default-line-height;
--van-button-default-font-size: @button-default-font-size;
--van-button-default-color: @button-default-color;
--van-button-default-background-color: @button-default-background-color;
--van-button-default-border-color: @button-default-border-color;
--van-button-primary-color: @button-primary-color;
--van-button-primary-background-color: @button-primary-background-color;
--van-button-primary-border-color: @button-primary-border-color;
--van-button-success-color: @button-success-color;
--van-button-success-background-color: @button-success-background-color;
--van-button-success-border-color: @button-success-border-color;
--van-button-danger-color: @button-danger-color;
--van-button-danger-background-color: @button-danger-background-color;
--van-button-danger-border-color: @button-danger-border-color;
--van-button-warning-color: @button-warning-color;
--van-button-warning-background-color: @button-warning-background-color;
--van-button-warning-border-color: @button-warning-border-color;
--van-button-border-width: @button-border-width;
--van-button-border-radius: @button-border-radius;
--van-button-round-border-radius: @button-round-border-radius;
--van-button-plain-background-color: @button-plain-background-color;
--van-button-disabled-opacity: @button-disabled-opacity;
--van-button-icon-size: @button-icon-size;
--van-button-loading-icon-size: @button-loading-icon-size;
}
.van-button {
position: relative;
display: inline-block;
box-sizing: border-box;
height: @button-default-height;
height: var(--van-button-default-height);
margin: 0;
padding: 0;
font-size: @button-default-font-size;
line-height: @button-default-line-height;
font-size: var(--van-button-default-font-size);
line-height: var(--van-button-default-line-height);
text-align: center;
border-radius: @button-border-radius;
border-radius: var(--van-button-border-radius);
cursor: pointer;
transition: opacity @animation-duration-fast;
-webkit-appearance: none;
@ -42,69 +79,74 @@
}
&--default {
color: @button-default-color;
background-color: @button-default-background-color;
border: @button-border-width solid @button-default-border-color;
color: var(--van-button-default-color);
background-color: var(--van-button-default-background-color);
border: var(--van-button-border-width) solid
var(--van-button-default-border-color);
}
&--primary {
color: @button-primary-color;
background-color: @button-primary-background-color;
border: @button-border-width solid @button-primary-border-color;
color: var(--van-button-primary-color);
background-color: var(--van-button-primary-background-color);
border: var(--van-button-border-width) solid
var(--van-button-primary-border-color);
}
&--success {
color: @button-success-color;
background-color: @button-success-background-color;
border: @button-border-width solid @button-success-border-color;
color: var(--van-button-success-color);
background-color: var(--van-button-success-background-color);
border: var(--van-button-border-width) solid
var(--van-button-success-border-color);
}
&--danger {
color: @button-danger-color;
background-color: @button-danger-background-color;
border: @button-border-width solid @button-danger-border-color;
color: var(--van-button-danger-color);
background-color: var(--van-button-danger-background-color);
border: var(--van-button-border-width) solid
var(--van-button-danger-border-color);
}
&--warning {
color: @button-warning-color;
background-color: @button-warning-background-color;
border: @button-border-width solid @button-warning-border-color;
color: var(--van-button-warning-color);
background-color: var(--van-button-warning-background-color);
border: var(--van-button-border-width) solid
var(--van-button-warning-border-color);
}
&--plain {
background-color: @button-plain-background-color;
background-color: var(--van-button-plain-background-color);
&.van-button--primary {
color: @button-primary-background-color;
color: var(--van-button-primary-background-color);
}
&.van-button--success {
color: @button-success-background-color;
color: var(--van-button-success-background-color);
}
&.van-button--danger {
color: @button-danger-background-color;
color: var(--van-button-danger-background-color);
}
&.van-button--warning {
color: @button-warning-background-color;
color: var(--van-button-warning-background-color);
}
}
&--large {
width: 100%;
height: @button-large-height;
height: var(--van-button-large-height);
}
&--normal {
padding: @button-normal-padding;
font-size: @button-normal-font-size;
padding: var(--van-button-normal-padding);
font-size: var(--van-button-normal-font-size);
}
&--small {
height: @button-small-height;
padding: @button-small-padding;
font-size: @button-small-font-size;
height: var(--van-button-small-height);
padding: var(--van-button-small-padding);
font-size: var(--van-button-small-font-size);
}
&__loading {
@ -113,15 +155,15 @@
.van-loading__spinner {
color: currentColor;
width: @button-loading-icon-size;
height: @button-loading-icon-size;
width: var(--van-button-loading-icon-size);
height: var(--van-button-loading-icon-size);
}
}
&--mini {
height: @button-mini-height;
padding: @button-mini-padding;
font-size: @button-mini-font-size;
height: var(--van-button-mini-height);
padding: var(--van-button-mini-padding);
font-size: var(--van-button-mini-font-size);
& + .van-button--mini {
margin-left: @padding-base;
@ -135,7 +177,7 @@
&--disabled {
cursor: not-allowed;
opacity: @button-disabled-opacity;
opacity: var(--van-button-disabled-opacity);
}
&--loading {
@ -143,7 +185,7 @@
}
&--round {
border-radius: @button-round-border-radius;
border-radius: var(--van-button-round-border-radius);
}
&--square {
@ -166,7 +208,7 @@
}
&__icon {
font-size: @button-icon-size;
font-size: var(--van-button-icon-size);
line-height: inherit;
}
@ -182,11 +224,11 @@
&::after {
border-color: inherit;
border-radius: @button-border-radius * 2;
border-radius: calc(var(--van-button-border-radius) * 2);
}
&.van-button--round::after {
border-radius: @button-round-border-radius;
border-radius: var(--van-button-round-border-radius);
}
&.van-button--square::after {

82
src/calendar/index.less
View File

@ -1,16 +1,44 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-calendar-background-color: @calendar-background-color;
--van-calendar-popup-height: @calendar-popup-height;
--van-calendar-header-box-shadow: @calendar-header-box-shadow;
--van-calendar-header-title-height: @calendar-header-title-height;
--van-calendar-header-title-font-size: @calendar-header-title-font-size;
--van-calendar-header-subtitle-font-size: @calendar-header-subtitle-font-size;
--van-calendar-weekdays-height: @calendar-weekdays-height;
--van-calendar-weekdays-font-size: @calendar-weekdays-font-size;
--van-calendar-month-title-font-size: @calendar-month-title-font-size;
--van-calendar-month-mark-color: @calendar-month-mark-color;
--van-calendar-month-mark-font-size: @calendar-month-mark-font-size;
--van-calendar-day-height: @calendar-day-height;
--van-calendar-day-font-size: @calendar-day-font-size;
--van-calendar-range-edge-color: @calendar-range-edge-color;
--van-calendar-range-edge-background-color: @calendar-range-edge-background-color;
--van-calendar-range-middle-color: @calendar-range-middle-color;
--van-calendar-range-middle-background-opacity: @calendar-range-middle-background-opacity;
--van-calendar-selected-day-size: @calendar-selected-day-size;
--van-calendar-selected-day-color: @calendar-selected-day-color;
--van-calendar-info-font-size: @calendar-info-font-size;
--van-calendar-info-line-height: @calendar-info-line-height;
--van-calendar-selected-day-background-color: @calendar-selected-day-background-color;
--van-calendar-day-disabled-color: @calendar-day-disabled-color;
--van-calendar-confirm-button-height: @calendar-confirm-button-height;
--van-calendar-confirm-button-margin: @calendar-confirm-button-margin;
}
.van-calendar {
display: flex;
flex-direction: column;
height: 100%;
background-color: @calendar-background-color;
background-color: var(--van-calendar-background-color);
&__popup {
&.van-popup--top,
&.van-popup--bottom {
height: @calendar-popup-height;
height: var(--van-calendar-popup-height);
}
&.van-popup--left,
@ -25,28 +53,28 @@
&__header {
flex-shrink: 0;
box-shadow: @calendar-header-box-shadow;
box-shadow: var(--van-calendar-header-box-shadow);
}
&__month-title,
&__header-title,
&__header-subtitle {
height: @calendar-header-title-height;
height: var(--van-calendar-header-title-height);
font-weight: @font-weight-bold;
line-height: @calendar-header-title-height;
line-height: var(--van-calendar-header-title-height);
text-align: center;
}
&__header-title {
font-size: @calendar-header-title-font-size;
font-size: var(--van-calendar-header-title-font-size);
}
&__header-subtitle {
font-size: @calendar-header-subtitle-font-size;
font-size: var(--van-calendar-header-subtitle-font-size);
}
&__month-title {
font-size: @calendar-month-title-font-size;
font-size: var(--van-calendar-month-title-font-size);
}
&__weekdays {
@ -55,8 +83,8 @@
&__weekday {
flex: 1;
font-size: @calendar-weekdays-font-size;
line-height: @calendar-weekdays-height;
font-size: var(--van-calendar-weekdays-font-size);
line-height: var(--van-calendar-weekdays-height);
text-align: center;
}
@ -78,8 +106,8 @@
top: 50%;
left: 50%;
z-index: 0;
color: @calendar-month-mark-color;
font-size: @calendar-month-mark-font-size;
color: var(--van-calendar-month-mark-color);
font-size: var(--van-calendar-month-mark-font-size);
transform: translate(-50%, -50%);
pointer-events: none;
}
@ -95,8 +123,8 @@
&__day {
position: relative;
width: 14.285%;
height: @calendar-day-height;
font-size: @calendar-day-font-size;
height: var(--van-calendar-day-height);
font-size: var(--van-calendar-day-font-size);
cursor: pointer;
&--end,
@ -104,8 +132,8 @@
&--start-end,
&--multiple-middle,
&--multiple-selected {
color: @calendar-range-edge-color;
background-color: @calendar-range-edge-background-color;
color: var(--van-calendar-range-edge-color);
background-color: var(--van-calendar-range-edge-background-color);
}
&--start {
@ -122,7 +150,7 @@
}
&--middle {
color: @calendar-range-middle-color;
color: var(--van-calendar-range-middle-color);
&::after {
position: absolute;
@ -131,13 +159,13 @@
bottom: 0;
left: 0;
background-color: currentColor;
opacity: @calendar-range-middle-background-opacity;
opacity: var(--van-calendar-range-middle-background-opacity);
content: '';
}
}
&--disabled {
color: @calendar-day-disabled-color;
color: var(--van-calendar-day-disabled-color);
cursor: default;
}
}
@ -147,8 +175,8 @@
position: absolute;
right: 0;
left: 0;
font-size: @calendar-info-font-size;
line-height: @calendar-info-line-height;
font-size: var(--van-calendar-info-font-size);
line-height: var(--van-calendar-info-line-height);
@media (max-width: 350px) {
font-size: 9px;
@ -164,10 +192,10 @@
}
&__selected-day {
width: @calendar-selected-day-size;
height: @calendar-selected-day-size;
color: @calendar-selected-day-color;
background-color: @calendar-selected-day-background-color;
width: var(--van-calendar-selected-day-size);
height: var(--van-calendar-selected-day-size);
color: var(--van-calendar-selected-day-color);
background-color: var(--van-calendar-selected-day-background-color);
border-radius: @border-radius-md;
}
@ -182,7 +210,7 @@
}
&__confirm {
height: @calendar-confirm-button-height;
margin: @calendar-confirm-button-margin;
height: var(--van-calendar-confirm-button-height);
margin: var(--van-calendar-confirm-button-margin);
}
}

59
src/card/index.less
View File

@ -1,12 +1,31 @@
@import './var.less';
:root {
--van-card-padding: @card-padding;
--van-card-font-size: @card-font-size;
--van-card-text-color: @card-text-color;
--van-card-background-color: @card-background-color;
--van-card-thumb-size: @card-thumb-size;
--van-card-thumb-border-radius: @card-thumb-border-radius;
--van-card-title-line-height: @card-title-line-height;
--van-card-desc-color: @card-desc-color;
--van-card-desc-line-height: @card-desc-line-height;
--van-card-price-color: @card-price-color;
--van-card-origin-price-color: @card-origin-price-color;
--van-card-num-color: @card-num-color;
--van-card-origin-price-font-size: @card-origin-price-font-size;
--van-card-price-font-size: @card-price-font-size;
--van-card-price-integer-font-size: @card-price-integer-font-size;
--van-card-price-font-family: @card-price-font-family;
}
.van-card {
position: relative;
box-sizing: border-box;
padding: @card-padding;
color: @card-text-color;
font-size: @card-font-size;
background-color: @card-background-color;
padding: var(--van-card-padding);
color: var(--van-card-text-color);
font-size: var(--van-card-font-size);
background-color: var(--van-card-background-color);
&:not(:first-child) {
margin-top: @padding-xs;
@ -19,12 +38,12 @@
&__thumb {
position: relative;
flex: none;
width: @card-thumb-size;
height: @card-thumb-size;
width: var(--van-card-thumb-size);
height: var(--van-card-thumb-size);
margin-right: @padding-xs;
img {
border-radius: @card-thumb-border-radius;
border-radius: var(--van-card-thumb-border-radius);
}
}
@ -35,7 +54,7 @@
flex-direction: column;
justify-content: space-between;
min-width: 0; /* hack for flex box ellipsis */
min-height: @card-thumb-size;
min-height: var(--van-card-thumb-size);
&--centered {
justify-content: center;
@ -50,13 +69,13 @@
&__title {
max-height: 32px;
font-weight: @font-weight-bold;
line-height: @card-title-line-height;
line-height: var(--van-card-title-line-height);
}
&__desc {
max-height: @card-desc-line-height;
color: @card-desc-color;
line-height: @card-desc-line-height;
max-height: var(--van-card-desc-line-height);
color: var(--van-card-desc-color);
line-height: var(--van-card-desc-line-height);
}
&__bottom {
@ -65,31 +84,31 @@
&__price {
display: inline-block;
color: @card-price-color;
color: var(--van-card-price-color);
font-weight: @font-weight-bold;
font-size: @card-price-font-size;
font-size: var(--van-card-price-font-size);
}
&__price-integer {
font-size: @card-price-integer-font-size;
font-family: @card-price-font-family;
font-size: var(--van-card-price-integer-font-size);
font-family: var(--van-card-price-font-family);
}
&__price-decimal {
font-family: @card-price-font-family;
font-family: var(--van-card-price-font-family);
}
&__origin-price {
display: inline-block;
margin-left: 5px;
color: @card-origin-price-color;
font-size: @card-origin-price-font-size;
color: var(--van-card-origin-price-color);
font-size: var(--van-card-origin-price-font-size);
text-decoration: line-through;
}
&__num {
float: right;
color: @card-num-color;
color: var(--van-card-num-color);
}
&__tag {

42
src/cascader/index.less
View File

@ -1,26 +1,42 @@
@import './var.less';
:root {
--van-cascader-header-height: @cascader-header-height;
--van-cascader-header-padding: @cascader-header-padding;
--van-cascader-title-font-size: @cascader-title-font-size;
--van-cascader-title-line-height: @cascader-title-line-height;
--van-cascader-close-icon-size: @cascader-close-icon-size;
--van-cascader-close-icon-color: @cascader-close-icon-color;
--van-cascader-close-icon-active-color: @cascader-close-icon-active-color;
--van-cascader-selected-icon-size: @cascader-selected-icon-size;
--van-cascader-tabs-height: @cascader-tabs-height;
--van-cascader-active-color: @cascader-active-color;
--van-cascader-options-height: @cascader-options-height;
--van-cascader-tab-color: @cascader-tab-color;
--van-cascader-unselected-tab-color: @cascader-unselected-tab-color;
}
.van-cascader {
&__header {
display: flex;
align-items: center;
justify-content: space-between;
height: @cascader-header-height;
padding: @cascader-header-padding;
height: var(--van-cascader-header-height);
padding: var(--van-cascader-header-padding);
}
&__title {
font-weight: @font-weight-bold;
font-size: @cascader-title-font-size;
line-height: @cascader-title-line-height;
font-size: var(--van-cascader-title-font-size);
line-height: var(--van-cascader-title-line-height);
}
&__close-icon {
color: @cascader-close-icon-color;
font-size: @cascader-close-icon-size;
color: var(--van-cascader-close-icon-color);
font-size: var(--van-cascader-close-icon-size);
&:active {
color: @cascader-close-icon-active-color;
color: var(--van-cascader-close-icon-active-color);
}
}
@ -31,7 +47,7 @@
}
&.van-tabs--line .van-tabs__wrap {
height: @cascader-tabs-height;
height: var(--van-cascader-tabs-height);
}
.van-tabs__nav--complete {
@ -41,11 +57,11 @@
}
&__tab {
color: @cascader-tab-color;
color: var(--van-cascader-tab-color);
font-weight: @font-weight-bold;
&--unselected {
color: @cascader-unselected-tab-color;
color: var(--van-cascader-unselected-tab-color);
font-weight: normal;
}
}
@ -63,18 +79,18 @@
}
&--selected {
color: @cascader-active-color;
color: var(--van-cascader-active-color);
font-weight: @font-weight-bold;
}
}
&__selected-icon {
font-size: @cascader-selected-icon-size;
font-size: var(--van-cascader-selected-icon-size);
}
&__options {
box-sizing: border-box;
height: @cascader-options-height;
height: var(--van-cascader-options-height);
padding-top: 6px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;

18
src/cell-group/index.less
View File

@ -1,12 +1,20 @@
@import './var.less';
:root {
--van-cell-group-background-color: @cell-group-background-color;
--van-cell-group-title-color: @cell-group-title-color;
--van-cell-group-title-padding: @cell-group-title-padding;
--van-cell-group-title-font-size: @cell-group-title-font-size;
--van-cell-group-title-line-height: @cell-group-title-line-height;
}
.van-cell-group {
background-color: @cell-group-background-color;
background-color: var(--van-cell-group-background-color);
&__title {
padding: @cell-group-title-padding;
color: @cell-group-title-color;
font-size: @cell-group-title-font-size;
line-height: @cell-group-title-line-height;
padding: var(--van-cell-group-title-padding);
color: var(--van-cell-group-title-color);
font-size: var(--van-cell-group-title-font-size);
line-height: var(--van-cell-group-title-line-height);
}
}

66
src/cell/index.less
View File

@ -1,20 +1,42 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-cell-font-size: @cell-font-size;
--van-cell-line-height: @cell-line-height;
--van-cell-vertical-padding: @cell-vertical-padding;
--van-cell-horizontal-padding: @cell-horizontal-padding;
--van-cell-text-color: @cell-text-color;
--van-cell-background-color: @cell-background-color;
--van-cell-border-color: @cell-border-color;
--van-cell-active-color: @cell-active-color;
--van-cell-required-color: @cell-required-color;
--van-cell-label-color: @cell-label-color;
--van-cell-label-font-size: @cell-label-font-size;
--van-cell-label-line-height: @cell-label-line-height;
--van-cell-label-margin-top: @cell-label-margin-top;
--van-cell-value-color: @cell-value-color;
--van-cell-icon-size: @cell-icon-size;
--van-cell-right-icon-color: @cell-right-icon-color;
--van-cell-large-vertical-padding: @cell-large-vertical-padding;
--van-cell-large-title-font-size: @cell-large-title-font-size;
--van-cell-large-label-font-size: @cell-large-label-font-size;
}
.van-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: @cell-vertical-padding @cell-horizontal-padding;
padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
overflow: hidden;
color: @cell-text-color;
font-size: @cell-font-size;
line-height: @cell-line-height;
background-color: @cell-background-color;
color: var(--van-cell-text-color);
font-size: var(--van-cell-font-size);
line-height: var(--van-cell-line-height);
background-color: var(--van-cell-background-color);
&::after {
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
.hairline-bottom(var(--van-cell-border-color), @padding-md, @padding-md);
}
&:last-child::after,
@ -23,10 +45,10 @@
}
&__label {
margin-top: @cell-label-margin-top;
color: @cell-label-color;
font-size: @cell-label-font-size;
line-height: @cell-label-line-height;
margin-top: var(--van-cell-label-margin-top);
color: var(--van-cell-label-color);
font-size: var(--van-cell-label-font-size);
line-height: var(--van-cell-label-line-height);
}
&__title,
@ -37,7 +59,7 @@
&__value {
position: relative;
overflow: hidden;
color: @cell-value-color;
color: var(--van-cell-value-color);
text-align: right;
vertical-align: middle;
word-wrap: break-word;
@ -50,9 +72,9 @@
&__left-icon,
&__right-icon {
height: @cell-line-height;
font-size: @cell-icon-size;
line-height: @cell-line-height;
height: var(--van-cell-line-height);
font-size: var(--van-cell-icon-size);
line-height: var(--van-cell-line-height);
}
&__left-icon {
@ -61,14 +83,14 @@
&__right-icon {
margin-left: @padding-base;
color: @cell-right-icon-color;
color: var(--van-cell-right-icon-color);
}
&--clickable {
cursor: pointer;
&:active {
background-color: @cell-active-color;
background-color: var(--van-cell-active-color);
}
}
@ -78,8 +100,8 @@
&::before {
position: absolute;
left: @padding-xs;
color: @cell-required-color;
font-size: @cell-font-size;
color: var(--van-cell-required-color);
font-size: var(--van-cell-font-size);
content: '*';
}
}
@ -89,15 +111,15 @@
}
&--large {
padding-top: @cell-large-vertical-padding;
padding-bottom: @cell-large-vertical-padding;
padding-top: var(--van-cell-large-vertical-padding);
padding-bottom: var(--van-cell-large-vertical-padding);
.van-cell__title {
font-size: @cell-large-title-font-size;
font-size: var(--van-cell-large-title-font-size);
}
.van-cell__label {
font-size: @cell-large-label-font-size;
font-size: var(--van-cell-large-label-font-size);
}
}
}

38
src/checkbox/index.less
View File

@ -1,5 +1,17 @@
@import './var.less';
:root {
--van-checkbox-size: @checkbox-size;
--van-checkbox-border-color: @checkbox-border-color;
--van-checkbox-transition-duration: @checkbox-transition-duration;
--van-checkbox-label-margin: @checkbox-label-margin;
--van-checkbox-label-color: @checkbox-label-color;
--van-checkbox-checked-icon-color: @checkbox-checked-icon-color;
--van-checkbox-disabled-icon-color: @checkbox-disabled-icon-color;
--van-checkbox-disabled-label-color: @checkbox-disabled-label-color;
--van-checkbox-disabled-background-color: @checkbox-disabled-background-color;
}
.van-checkbox {
display: flex;
align-items: center;
@ -22,7 +34,7 @@
&__icon {
flex: none;
height: 1em;
font-size: @checkbox-size;
font-size: var(--van-checkbox-size);
line-height: 1em;
cursor: pointer;
@ -35,8 +47,8 @@
font-size: 0.8em;
line-height: 1.25;
text-align: center;
border: 1px solid @checkbox-border-color;
transition-duration: @checkbox-transition-duration;
border: 1px solid var(--van-checkbox-border-color);
transition-duration: var(--van-checkbox-transition-duration);
transition-property: color, border-color, background-color;
}
@ -49,8 +61,8 @@
&--checked {
.van-icon {
color: @white;
background-color: @checkbox-checked-icon-color;
border-color: @checkbox-checked-icon-color;
background-color: var(--van-checkbox-checked-icon-color);
border-color: var(--van-checkbox-checked-icon-color);
}
}
@ -58,29 +70,29 @@
cursor: not-allowed;
.van-icon {
background-color: @checkbox-disabled-background-color;
border-color: @checkbox-disabled-icon-color;
background-color: var(--van-checkbox-disabled-background-color);
border-color: var(--van-checkbox-disabled-icon-color);
}
}
&--disabled&--checked {
.van-icon {
color: @checkbox-disabled-icon-color;
color: var(--van-checkbox-disabled-icon-color);
}
}
}
&__label {
margin-left: @checkbox-label-margin;
color: @checkbox-label-color;
line-height: @checkbox-size;
margin-left: var(--van-checkbox-label-margin);
color: var(--van-checkbox-label-color);
line-height: var(--van-checkbox-size);
&--left {
margin: 0 @checkbox-label-margin 0 0;
margin: 0 var(--van-checkbox-label-margin) 0 0;
}
&--disabled {
color: @checkbox-disabled-label-color;
color: var(--van-checkbox-disabled-label-color);
}
}
}

26
src/circle/index.less
View File

@ -1,10 +1,20 @@
@import './var.less';
:root {
--van-circle-size: @circle-size;
--van-circle-color: @circle-color;
--van-circle-layer-color: @circle-layer-color;
--van-circle-text-color: @circle-text-color;
--van-circle-text-font-weight: @circle-text-font-weight;
--van-circle-text-font-size: @circle-text-font-size;
--van-circle-text-line-height: @circle-text-line-height;
}
.van-circle {
position: relative;
display: inline-block;
width: @circle-size;
height: @circle-size;
width: var(--van-circle-size);
height: var(--van-circle-size);
text-align: center;
svg {
@ -16,12 +26,12 @@
}
&__layer {
stroke: @circle-layer-color;
stroke: var(--van-circle-layer-color);
}
&__hover {
fill: none;
stroke: @circle-color;
stroke: var(--van-circle-color);
stroke-linecap: round;
}
@ -32,10 +42,10 @@
box-sizing: border-box;
width: 100%;
padding: 0 @padding-base;
color: @circle-text-color;
font-weight: @circle-text-font-weight;
font-size: @circle-text-font-size;
line-height: @circle-text-line-height;
color: var(--van-circle-text-color);
font-weight: var(--van-circle-text-font-weight);
font-size: var(--van-circle-text-font-size);
line-height: var(--van-circle-text-line-height);
transform: translateY(-50%);
}
}

26
src/collapse-item/index.less
View File

@ -1,6 +1,16 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-collapse-item-transition-duration: @collapse-item-transition-duration;
--van-collapse-item-content-padding: @collapse-item-content-padding;
--van-collapse-item-content-font-size: @collapse-item-content-font-size;
--van-collapse-item-content-line-height: @collapse-item-content-line-height;
--van-collapse-item-content-text-color: @collapse-item-content-text-color;
--van-collapse-item-content-background-color: @collapse-item-content-background-color;
--van-collapse-item-title-disabled-color: @collapse-item-title-disabled-color;
}
.van-collapse-item {
position: relative;
@ -15,7 +25,7 @@
// using translateZ to fix safari rendering issues
// see: https://github.com/youzan/vant/issues/8608
transform: rotate(90deg) translateZ(0);
transition: transform @collapse-item-transition-duration;
transition: transform var(--van-collapse-item-transition-duration);
}
&::after {
@ -44,22 +54,22 @@
&,
& .van-cell__right-icon {
color: @collapse-item-title-disabled-color;
color: var(--van-collapse-item-title-disabled-color);
}
}
}
&__wrapper {
overflow: hidden;
transition: height @collapse-item-transition-duration ease-in-out;
transition: height var(--van-collapse-item-transition-duration) ease-in-out;
will-change: height;
}
&__content {
padding: @collapse-item-content-padding;
color: @collapse-item-content-text-color;
font-size: @collapse-item-content-font-size;
line-height: @collapse-item-content-line-height;
background-color: @collapse-item-content-background-color;
padding: var(--van-collapse-item-content-padding);
color: var(--van-collapse-item-content-text-color);
font-size: var(--van-collapse-item-content-font-size);
line-height: var(--van-collapse-item-content-line-height);
background-color: var(--van-collapse-item-content-background-color);
}
}

17
src/contact-card/index.less
View File

@ -1,21 +1,28 @@
@import './var.less';
:root {
--van-contact-card-padding: @contact-card-padding;
--van-contact-card-add-icon-size: @contact-card-add-icon-size;
--van-contact-card-add-icon-color: @contact-card-add-icon-color;
--van-contact-card-value-line-height: @contact-card-value-line-height;
}
.van-contact-card {
padding: @contact-card-padding;
padding: var(--van-contact-card-padding);
&__value {
margin-left: 5px;
line-height: @contact-card-value-line-height;
line-height: var(--van-contact-card-value-line-height);
}
&--add {
.van-contact-card__value {
line-height: @contact-card-add-icon-size;
line-height: var(--van-contact-card-add-icon-size);
}
.van-cell__left-icon {
color: @contact-card-add-icon-color;
font-size: @contact-card-add-icon-size;
color: var(--van-contact-card-add-icon-color);
font-size: var(--van-contact-card-add-icon-size);
}
}

23
src/contact-edit/index.less
View File

@ -1,14 +1,23 @@
@import './var.less';
:root {
--van-contact-edit-padding: @contact-edit-padding;
--van-contact-edit-fields-radius: @contact-edit-fields-radius;
--van-contact-edit-buttons-padding: @contact-edit-buttons-padding;
--van-contact-edit-button-margin-bottom: @contact-edit-button-margin-bottom;
--van-contact-edit-button-font-size: @contact-edit-button-font-size;
--van-contact-edit-field-label-width: @contact-edit-field-label-width;
}
.van-contact-edit {
padding: @contact-edit-padding;
padding: var(--van-contact-edit-padding);
&__fields {
overflow: hidden;
border-radius: @contact-edit-fields-radius;
border-radius: var(--van-contact-edit-fields-radius);
.van-field__label {
width: @contact-edit-field-label-width;
width: var(--van-contact-edit-field-label-width);
}
}
@ -16,15 +25,15 @@
margin-top: 10px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: @contact-edit-fields-radius;
border-radius: var(--van-contact-edit-fields-radius);
}
&__buttons {
padding: @contact-edit-buttons-padding;
padding: var(--van-contact-edit-buttons-padding);
}
.van-button {
margin-bottom: @contact-edit-button-margin-bottom;
font-size: @contact-edit-button-font-size;
margin-bottom: var(--van-contact-edit-button-margin-bottom);
font-size: var(--van-contact-edit-button-font-size);
}
}

17
src/contact-list/index.less
View File

@ -1,13 +1,20 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-contact-list-edit-icon-size: @contact-list-edit-icon-size;
--van-contact-list-add-button-z-index: @contact-list-add-button-z-index;
--van-contact-list-item-padding: @contact-list-item-padding;
--van-contact-list-item-radio-icon-color: @contact-list-item-radio-icon-color;
}
.van-contact-list {
box-sizing: border-box;
height: 100%;
padding-bottom: 80px;
&__item {
padding: @contact-list-item-padding;
padding: var(--van-contact-list-item-padding);
}
&__item-value {
@ -33,13 +40,13 @@
}
&__edit {
font-size: @contact-list-edit-icon-size;
font-size: var(--van-contact-list-edit-icon-size);
}
&__radio {
.van-radio__icon--checked .van-icon {
background-color: @contact-list-item-radio-icon-color;
border-color: @contact-list-item-radio-icon-color;
background-color: var(--van-contact-list-item-radio-icon-color);
border-color: var(--van-contact-list-item-radio-icon-color);
}
}
@ -48,7 +55,7 @@
right: 0;
bottom: 0;
left: 0;
z-index: @contact-list-add-button-z-index;
z-index: var(--van-contact-list-add-button-z-index);
padding: 0 @padding-md;
background-color: @white;
.safe-area-inset-bottom();

14
src/count-down/index.less
View File

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

6
src/coupon-cell/index.less
View File

@ -1,7 +1,11 @@
@import './var.less';
:root {
--van-coupon-cell-selected-text-color: @coupon-cell-selected-text-color;
}
.van-coupon-cell {
&__value--selected {
color: @coupon-cell-selected-text-color;
color: var(--van-coupon-cell-selected-text-color);
}
}

31
src/coupon-list/index.less
View File

@ -1,12 +1,23 @@
@import './var.less';
:root {
--van-coupon-list-background-color: @coupon-list-background-color;
--van-coupon-list-field-padding: @coupon-list-field-padding;
--van-coupon-list-exchange-button-height: @coupon-list-exchange-button-height;
--van-coupon-list-close-button-height: @coupon-list-close-button-height;
--van-coupon-list-empty-image-size: @coupon-list-empty-image-size;
--van-coupon-list-empty-tip-color: @coupon-list-empty-tip-color;
--van-coupon-list-empty-tip-font-size: @coupon-list-empty-tip-font-size;
--van-coupon-list-empty-tip-line-height: @coupon-list-empty-tip-line-height;
}
.van-coupon-list {
position: relative;
height: 100%;
background-color: @coupon-list-background-color;
background-color: var(--van-coupon-list-background-color);
&__field {
padding: @coupon-list-field-padding;
padding: var(--van-coupon-list-field-padding);
.van-field__body {
height: 34px;
@ -33,9 +44,9 @@
&__exchange {
flex: none;
height: @coupon-list-exchange-button-height;
height: var(--van-coupon-list-exchange-button-height);
font-size: @font-size-lg;
line-height: @coupon-list-exchange-button-height - 2px;
line-height: calc(var(--van-coupon-list-exchange-button-height) - 2px);
border: 0;
}
@ -67,7 +78,7 @@
}
&__close {
height: @coupon-list-close-button-height;
height: var(--van-coupon-list-close-button-height);
}
&__empty {
@ -76,14 +87,14 @@
p {
margin: @padding-md 0;
color: @coupon-list-empty-tip-color;
font-size: @coupon-list-empty-tip-font-size;
line-height: @coupon-list-empty-tip-line-height;
color: var(--van-coupon-list-empty-tip-color);
font-size: var(--van-coupon-list-empty-tip-font-size);
line-height: var(--van-coupon-list-empty-tip-line-height);
}
img {
width: @coupon-list-empty-image-size;
height: @coupon-list-empty-image-size;
width: var(--van-coupon-list-empty-image-size);
height: var(--van-coupon-list-empty-image-size);
}
}
}

58
src/coupon/index.less
View File

@ -1,31 +1,50 @@
@import './var.less';
@import '../style/mixins/ellipsis';
:root {
--van-coupon-margin: @coupon-margin;
--van-coupon-content-height: @coupon-content-height;
--van-coupon-content-padding: @coupon-content-padding;
--van-coupon-background-color: @coupon-background-color;
--van-coupon-active-background-color: @coupon-active-background-color;
--van-coupon-border-radius: @coupon-border-radius;
--van-coupon-box-shadow: @coupon-box-shadow;
--van-coupon-head-width: @coupon-head-width;
--van-coupon-amount-color: @coupon-amount-color;
--van-coupon-amount-font-size: @coupon-amount-font-size;
--van-coupon-currency-font-size: @coupon-currency-font-size;
--van-coupon-name-font-size: @coupon-name-font-size;
--van-coupon-disabled-text-color: @coupon-disabled-text-color;
--van-coupon-description-padding: @coupon-description-padding;
--van-coupon-description-border-color: @coupon-description-border-color;
--van-coupon-corner-checkbox-icon-color: @coupon-corner-checkbox-icon-color;
}
.van-coupon {
margin: @coupon-margin;
margin: var(--van-coupon-margin);
overflow: hidden;
background-color: @coupon-background-color;
border-radius: @coupon-border-radius;
box-shadow: @coupon-box-shadow;
background-color: var(--van-coupon-background-color);
border-radius: var(--van-coupon-border-radius);
box-shadow: var(--van-coupon-box-shadow);
&:active {
background-color: @coupon-active-background-color;
background-color: var(--van-coupon-active-background-color);
}
&__content {
display: flex;
align-items: center;
box-sizing: border-box;
min-height: @coupon-content-height;
padding: @coupon-content-padding;
min-height: var(--van-coupon-content-height);
padding: var(--van-coupon-content-padding);
color: @gray-8;
}
&__head {
position: relative;
min-width: @coupon-head-width;
min-width: var(--van-coupon-head-width);
padding: 0 @padding-xs;
color: @coupon-amount-color;
color: var(--van-coupon-amount-color);
text-align: center;
}
@ -39,12 +58,12 @@
&__amount {
margin-bottom: 6px;
font-weight: @font-weight-bold;
font-size: @coupon-amount-font-size;
font-size: var(--van-coupon-amount-font-size);
.ellipsis();
span {
font-weight: normal;
font-size: @coupon-currency-font-size;
font-size: var(--van-coupon-currency-font-size);
&:not(:empty) {
margin-left: 2px;
@ -61,13 +80,14 @@
&__body {
position: relative;
flex: 1;
border-radius: 0 @coupon-border-radius @coupon-border-radius 0;
border-radius: 0 var(--van-coupon-border-radius)
var(--van-coupon-border-radius) 0;
}
&__name {
margin-bottom: 10px;
font-weight: bold;
font-size: @coupon-name-font-size;
font-size: var(--van-coupon-name-font-size);
line-height: @line-height-md;
}
@ -82,24 +102,24 @@
bottom: 0;
.van-checkbox__icon--checked .van-icon {
background-color: @coupon-corner-checkbox-icon-color;
border-color: @coupon-corner-checkbox-icon-color;
background-color: var(--van-coupon-corner-checkbox-icon-color);
border-color: var(--van-coupon-corner-checkbox-icon-color);
}
}
&__description {
padding: @coupon-description-padding;
padding: var(--van-coupon-description-padding);
font-size: @font-size-sm;
border-top: 1px dashed @coupon-description-border-color;
border-top: 1px dashed var(--van-coupon-description-border-color);
}
&--disabled {
&:active {
background-color: @coupon-background-color;
background-color: var(--van-coupon-background-color);
}
.van-coupon-item__content {
height: @coupon-content-height - 10px;
height: calc(var(--van-coupon-content-height) - 10px);
}
.van-coupon__head {

60
src/dialog/index.less
View File

@ -1,29 +1,51 @@
@import './var.less';
:root {
--van-dialog-width: @dialog-width;
--van-dialog-small-screen-width: @dialog-small-screen-width;
--van-dialog-font-size: @dialog-font-size;
--van-dialog-transition: @dialog-transition;
--van-dialog-border-radius: @dialog-border-radius;
--van-dialog-background-color: @dialog-background-color;
--van-dialog-header-font-weight: @dialog-header-font-weight;
--van-dialog-header-line-height: @dialog-header-line-height;
--van-dialog-header-padding-top: @dialog-header-padding-top;
--van-dialog-header-isolated-padding: @dialog-header-isolated-padding;
--van-dialog-message-padding: @dialog-message-padding;
--van-dialog-message-font-size: @dialog-message-font-size;
--van-dialog-message-line-height: @dialog-message-line-height;
--van-dialog-message-max-height: @dialog-message-max-height;
--van-dialog-has-title-message-text-color: @dialog-has-title-message-text-color;
--van-dialog-has-title-message-padding-top: @dialog-has-title-message-padding-top;
--van-dialog-button-height: @dialog-button-height;
--van-dialog-round-button-height: @dialog-round-button-height;
--van-dialog-confirm-button-text-color: @dialog-confirm-button-text-color;
}
.van-dialog {
top: 45%;
left: 50%;
width: @dialog-width;
width: var(--van-dialog-width);
overflow: hidden;
font-size: @dialog-font-size;
background-color: @dialog-background-color;
border-radius: @dialog-border-radius;
font-size: var(--van-dialog-font-size);
background-color: var(--van-dialog-background-color);
border-radius: var(--van-dialog-border-radius);
backface-visibility: hidden; // avoid blurry text after scale animation
transition: @dialog-transition;
transition: var(--van-dialog-transition);
transition-property: transform, opacity;
@media (max-width: 321px) {
width: @dialog-small-screen-width;
width: var(--van-dialog-small-screen-width);
}
&__header {
padding-top: @dialog-header-padding-top;
font-weight: @dialog-header-font-weight;
line-height: @dialog-header-line-height;
padding-top: var(--van-dialog-header-padding-top);
font-weight: var(--van-dialog-header-font-weight);
line-height: var(--van-dialog-header-line-height);
text-align: center;
&--isolated {
padding: @dialog-header-isolated-padding;
padding: var(--van-dialog-header-isolated-padding);
}
}
@ -37,11 +59,11 @@
&__message {
flex: 1;
max-height: @dialog-message-max-height;
padding: 26px @dialog-message-padding;
max-height: var(--van-dialog-message-max-height);
padding: 26px var(--van-dialog-message-padding);
overflow-y: auto;
font-size: @dialog-message-font-size;
line-height: @dialog-message-line-height;
font-size: var(--van-dialog-message-font-size);
line-height: var(--van-dialog-message-line-height);
// allow newline charactor
white-space: pre-wrap;
@ -50,8 +72,8 @@
-webkit-overflow-scrolling: touch;
&--has-title {
padding-top: @dialog-has-title-message-padding-top;
color: @dialog-has-title-message-text-color;
padding-top: var(--van-dialog-has-title-message-padding-top);
color: var(--van-dialog-has-title-message-text-color);
}
&--left {
@ -72,7 +94,7 @@
&__confirm,
&__cancel {
flex: 1;
height: @dialog-button-height;
height: var(--van-dialog-button-height);
margin: 0;
border: 0;
}
@ -80,7 +102,7 @@
&__confirm {
&,
&:active {
color: @dialog-confirm-button-text-color;
color: var(--van-dialog-confirm-button-text-color);
}
}
@ -98,7 +120,7 @@
.van-dialog__confirm,
.van-dialog__cancel {
height: @dialog-round-button-height;
height: var(--van-dialog-round-button-height);
}
.van-dialog__confirm {

29
src/divider/index.less
View File

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

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

@ -1,11 +1,15 @@
@import './var.less';
@import '../dropdown-menu/var.less';
:root {
--van-dropdown-item-z-index: @dropdown-item-z-index;
}
.van-dropdown-item {
position: fixed;
right: 0;
left: 0;
z-index: @dropdown-item-z-index;
z-index: var(--van-dropdown-item-z-index);
overflow: hidden;
&__icon {

32
src/dropdown-menu/index.less
View File

@ -1,15 +1,29 @@
@import './var.less';
@import '../dropdown-item/var.less';
:root {
--van-dropdown-menu-height: @dropdown-menu-height;
--van-dropdown-menu-background-color: @dropdown-menu-background-color;
--van-dropdown-menu-box-shadow: @dropdown-menu-box-shadow;
--van-dropdown-menu-title-font-size: @dropdown-menu-title-font-size;
--van-dropdown-menu-title-text-color: @dropdown-menu-title-text-color;
--van-dropdown-menu-title-active-text-color: @dropdown-menu-title-active-text-color;
--van-dropdown-menu-title-disabled-text-color: @dropdown-menu-title-disabled-text-color;
--van-dropdown-menu-title-padding: @dropdown-menu-title-padding;
--van-dropdown-menu-title-line-height: @dropdown-menu-title-line-height;
--van-dropdown-menu-option-active-color: @dropdown-menu-option-active-color;
--van-dropdown-menu-content-max-height: @dropdown-menu-content-max-height;
}
.van-dropdown-menu {
user-select: none;
&__bar {
position: relative;
display: flex;
height: @dropdown-menu-height;
background-color: @dropdown-menu-background-color;
box-shadow: @dropdown-menu-box-shadow;
height: var(--van-dropdown-menu-height);
background-color: var(--van-dropdown-menu-background-color);
box-shadow: var(--van-dropdown-menu-box-shadow);
&--opened {
z-index: @dropdown-item-z-index + 1;
@ -34,7 +48,7 @@
}
.van-dropdown-menu__title {
color: @dropdown-menu-title-disabled-text-color;
color: var(--van-dropdown-menu-title-disabled-text-color);
}
}
}
@ -43,10 +57,10 @@
position: relative;
box-sizing: border-box;
max-width: 100%;
padding: @dropdown-menu-title-padding;
color: @dropdown-menu-title-text-color;
font-size: @dropdown-menu-title-font-size;
line-height: @dropdown-menu-title-line-height;
padding: var(--van-dropdown-menu-title-padding);
color: var(--van-dropdown-menu-title-text-color);
font-size: var(--van-dropdown-menu-title-font-size);
line-height: var(--van-dropdown-menu-title-line-height);
&::after {
position: absolute;
@ -61,7 +75,7 @@
}
&--active {
color: @dropdown-menu-title-active-text-color;
color: var(--van-dropdown-menu-title-active-text-color);
&::after {
border-color: transparent transparent currentColor currentColor;

29
src/empty/index.less
View File

@ -1,16 +1,27 @@
@import './var.less';
:root {
--van-empty-padding: @empty-padding;
--van-empty-image-size: @empty-image-size;
--van-empty-description-margin-top: @empty-description-margin-top;
--van-empty-description-padding: @empty-description-padding;
--van-empty-description-color: @empty-description-color;
--van-empty-description-font-size: @empty-description-font-size;
--van-empty-description-line-height: @empty-description-line-height;
--van-empty-bottom-margin-top: @empty-bottom-margin-top;
}
.van-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: @empty-padding;
padding: var(--van-empty-padding);
&__image {
width: @empty-image-size;
height: @empty-image-size;
width: var(--van-empty-image-size);
height: var(--van-empty-image-size);
img {
width: 100%;
@ -19,14 +30,14 @@
}
&__description {
margin-top: @empty-description-margin-top;
padding: @empty-description-padding;
color: @empty-description-color;
font-size: @empty-description-font-size;
line-height: @empty-description-line-height;
margin-top: var(--van-empty-description-margin-top);
padding: var(--van-empty-description-padding);
color: var(--van-empty-description-color);
font-size: var(--van-empty-description-font-size);
line-height: var(--van-empty-description-line-height);
}
&__bottom {
margin-top: @empty-bottom-margin-top;
margin-top: var(--van-empty-bottom-margin-top);
}
}

59
src/field/index.less
View File

@ -1,13 +1,34 @@
@import './var.less';
@import '../cell/var.less';
:root {
--van-field-label-width: @field-label-width;
--van-field-label-color: @field-label-color;
--van-field-label-margin-right: @field-label-margin-right;
--van-field-input-text-color: @field-input-text-color;
--van-field-input-error-text-color: @field-input-error-text-color;
--van-field-input-disabled-text-color: @field-input-disabled-text-color;
--van-field-placeholder-text-color: @field-placeholder-text-color;
--van-field-icon-size: @field-icon-size;
--van-field-clear-icon-size: @field-clear-icon-size;
--van-field-clear-icon-color: @field-clear-icon-color;
--van-field-right-icon-color: @field-right-icon-color;
--van-field-error-message-color: @field-error-message-color;
--van-field-error-message-text-color: @field-error-message-text-color;
--van-field-text-area-min-height: @field-text-area-min-height;
--van-field-word-limit-color: @field-word-limit-color;
--van-field-word-limit-font-size: @field-word-limit-font-size;
--van-field-word-limit-line-height: @field-word-limit-line-height;
--van-field-disabled-text-color: @field-disabled-text-color;
}
.van-field {
&__label {
flex: none;
box-sizing: border-box;
width: @field-label-width;
margin-right: @field-label-margin-right;
color: @field-label-color;
width: var(--van-field-label-width);
margin-right: var(--van-field-label-margin-right);
color: var(--van-field-label-color);
text-align: left;
word-wrap: break-word;
@ -22,7 +43,7 @@
&--disabled {
.van-field__label {
color: @field-disabled-text-color;
color: var(--van-field-disabled-text-color);
}
}
@ -42,7 +63,7 @@
min-width: 0; // for flex-shrink in field__button
margin: 0;
padding: 0;
color: @field-input-text-color;
color: var(--van-field-input-text-color);
line-height: inherit;
text-align: left;
background-color: transparent;
@ -50,15 +71,15 @@
resize: none;
&::placeholder {
color: @field-placeholder-text-color;
color: var(--van-field-placeholder-text-color);
}
&:disabled {
color: @field-input-disabled-text-color;
color: var(--van-field-input-disabled-text-color);
cursor: not-allowed;
opacity: 1;
// fix disabled color in mobile safari
-webkit-text-fill-color: @field-input-disabled-text-color;
-webkit-text-fill-color: var(--van-field-input-disabled-text-color);
}
&:read-only {
@ -109,15 +130,15 @@
}
&__clear {
color: @field-clear-icon-color;
font-size: @field-clear-icon-size;
color: var(--van-field-clear-icon-color);
font-size: var(--van-field-clear-icon-size);
cursor: pointer;
}
&__left-icon .van-icon,
&__right-icon .van-icon {
display: block;
font-size: @field-icon-size;
font-size: var(--van-field-icon-size);
line-height: inherit;
}
@ -126,7 +147,7 @@
}
&__right-icon {
color: @field-right-icon-color;
color: var(--van-field-right-icon-color);
}
&__button {
@ -134,8 +155,8 @@
}
&__error-message {
color: @field-error-message-color;
font-size: @field-error-message-text-color;
color: var(--van-field-error-message-color);
font-size: var(--van-field-error-message-text-color);
text-align: left;
&--center {
@ -149,9 +170,9 @@
&__word-limit {
margin-top: @padding-base;
color: @field-word-limit-color;
font-size: @field-word-limit-font-size;
line-height: @field-word-limit-line-height;
color: var(--van-field-word-limit-color);
font-size: var(--van-field-word-limit-font-size);
line-height: var(--van-field-word-limit-line-height);
text-align: right;
}
@ -159,7 +180,7 @@
.van-field__control {
&,
&::placeholder {
color: @field-input-error-text-color;
color: var(--van-field-input-error-text-color);
-webkit-text-fill-color: currentColor;
}
}
@ -167,7 +188,7 @@
&--min-height {
.van-field__control {
min-height: @field-text-area-min-height;
min-height: var(--van-field-text-area-min-height);
}
}
}

21
src/grid-item/index.less
View File

@ -1,5 +1,14 @@
@import './var.less';
:root {
--van-grid-item-content-padding: @grid-item-content-padding;
--van-grid-item-content-background-color: @grid-item-content-background-color;
--van-grid-item-content-active-color: @grid-item-content-active-color;
--van-grid-item-icon-size: @grid-item-icon-size;
--van-grid-item-text-color: @grid-item-text-color;
--van-grid-item-text-font-size: @grid-item-text-font-size;
}
.van-grid-item {
position: relative;
box-sizing: border-box;
@ -9,12 +18,12 @@
}
&__icon {
font-size: @grid-item-icon-size;
font-size: var(--van-grid-item-icon-size);
}
&__text {
color: @grid-item-text-color;
font-size: @grid-item-text-font-size;
color: var(--van-grid-item-text-color);
font-size: var(--van-grid-item-text-font-size);
line-height: 1.5;
// https://github.com/youzan/vant/issues/3894
word-break: break-all;
@ -29,8 +38,8 @@
flex-direction: column;
box-sizing: border-box;
height: 100%;
padding: @grid-item-content-padding;
background-color: @grid-item-content-background-color;
padding: var(--van-grid-item-content-padding);
background-color: var(--van-grid-item-content-background-color);
&::after {
z-index: 1;
@ -68,7 +77,7 @@
cursor: pointer;
&:active {
background-color: @grid-item-content-active-color;
background-color: var(--van-grid-item-content-active-color);
}
}
}

47
src/image-preview/index.less
View File

@ -1,5 +1,18 @@
@import './var.less';
:root {
--van-image-preview-index-text-color: @image-preview-index-text-color;
--van-image-preview-index-font-size: @image-preview-index-font-size;
--van-image-preview-index-line-height: @image-preview-index-line-height;
--van-image-preview-index-text-shadow: @image-preview-index-text-shadow;
--van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
--van-image-preview-close-icon-size: @image-preview-close-icon-size;
--van-image-preview-close-icon-color: @image-preview-close-icon-color;
--van-image-preview-close-icon-active-color: @image-preview-close-icon-active-color;
--van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
--van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
}
.van-image-preview {
position: fixed;
top: 0;
@ -60,46 +73,46 @@
position: absolute;
top: @padding-md;
left: 50%;
color: @image-preview-index-text-color;
font-size: @image-preview-index-font-size;
line-height: @image-preview-index-line-height;
text-shadow: @image-preview-index-text-shadow;
color: var(--van-image-preview-index-text-color);
font-size: var(--van-image-preview-index-font-size);
line-height: var(--van-image-preview-index-line-height);
text-shadow: var(--van-image-preview-index-text-shadow);
transform: translate(-50%, 0);
}
&__overlay {
background-color: @image-preview-overlay-background-color;
background-color: var(--van-image-preview-overlay-background-color);
}
&__close-icon {
position: absolute;
z-index: @image-preview-close-icon-z-index;
color: @image-preview-close-icon-color;
font-size: @image-preview-close-icon-size;
z-index: var(--van-image-preview-close-icon-z-index);
color: var(--van-image-preview-close-icon-color);
font-size: var(--van-image-preview-close-icon-size);
cursor: pointer;
&:active {
color: @image-preview-close-icon-active-color;
color: var(--van-image-preview-close-icon-active-color);
}
&--top-left {
top: @image-preview-close-icon-margin;
left: @image-preview-close-icon-margin;
top: var(--van-image-preview-close-icon-margin);
left: var(--van-image-preview-close-icon-margin);
}
&--top-right {
top: @image-preview-close-icon-margin;
right: @image-preview-close-icon-margin;
top: var(--van-image-preview-close-icon-margin);
right: var(--van-image-preview-close-icon-margin);
}
&--bottom-left {
bottom: @image-preview-close-icon-margin;
left: @image-preview-close-icon-margin;
bottom: var(--van-image-preview-close-icon-margin);
left: var(--van-image-preview-close-icon-margin);
}
&--bottom-right {
right: @image-preview-close-icon-margin;
bottom: @image-preview-close-icon-margin;
right: var(--van-image-preview-close-icon-margin);
bottom: var(--van-image-preview-close-icon-margin);
}
}
}

24
src/image/index.less
View File

@ -1,5 +1,15 @@
@import './var.less';
:root {
--van-image-placeholder-text-color: @image-placeholder-text-color;
--van-image-placeholder-font-size: @image-placeholder-font-size;
--van-image-placeholder-background-color: @image-placeholder-background-color;
--van-image-loading-icon-size: @image-loading-icon-size;
--van-image-loading-icon-color: @image-loading-icon-color;
--van-image-error-icon-size: @image-error-icon-size;
--van-image-error-icon-color: @image-error-icon-color;
}
.van-image {
position: relative;
display: inline-block;
@ -30,18 +40,18 @@
flex-direction: column;
align-items: center;
justify-content: center;
color: @image-placeholder-text-color;
font-size: @image-placeholder-font-size;
background-color: @image-placeholder-background-color;
color: var(--van-image-placeholder-text-color);
font-size: var(--van-image-placeholder-font-size);
background-color: var(--van-image-placeholder-background-color);
}
&__loading-icon {
color: @image-loading-icon-color;
font-size: @image-loading-icon-size;
color: var(--van-image-loading-icon-color);
font-size: var(--van-image-loading-icon-size);
}
&__error-icon {
color: @image-error-icon-color;
font-size: @image-error-icon-size;
color: var(--van-image-error-icon-color);
font-size: var(--van-image-error-icon-size);
}
}

30
src/index-anchor/index.less
View File

@ -1,21 +1,33 @@
@import './var.less';
:root {
--van-index-anchor-z-index: @index-anchor-z-index;
--van-index-anchor-padding: @index-anchor-padding;
--van-index-anchor-text-color: @index-anchor-text-color;
--van-index-anchor-font-weight: @index-anchor-font-weight;
--van-index-anchor-font-size: @index-anchor-font-size;
--van-index-anchor-line-height: @index-anchor-line-height;
--van-index-anchor-background-color: @index-anchor-background-color;
--van-index-anchor-sticky-text-color: @index-anchor-sticky-text-color;
--van-index-anchor-sticky-background-color: @index-anchor-sticky-background-color;
}
.van-index-anchor {
z-index: @index-anchor-z-index;
z-index: var(--van-index-anchor-z-index);
box-sizing: border-box;
padding: @index-anchor-padding;
color: @index-anchor-text-color;
font-weight: @index-anchor-font-weight;
font-size: @index-anchor-font-size;
line-height: @index-anchor-line-height;
background-color: @index-anchor-background-color;
padding: var(--van-index-anchor-padding);
color: var(--van-index-anchor-text-color);
font-weight: var(--van-index-anchor-font-weight);
font-size: var(--van-index-anchor-font-size);
line-height: var(--van-index-anchor-line-height);
background-color: var(--van-index-anchor-background-color);
&--sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
color: @index-anchor-sticky-text-color;
background-color: @index-anchor-sticky-background-color;
color: var(--van-index-anchor-sticky-text-color);
background-color: var(--van-index-anchor-sticky-background-color);
}
}

15
src/index-bar/index.less
View File

@ -1,11 +1,18 @@
@import './var.less';
:root {
--van-index-bar-sidebar-z-index: @index-bar-sidebar-z-index;
--van-index-bar-index-font-size: @index-bar-index-font-size;
--van-index-bar-index-line-height: @index-bar-index-line-height;
--van-index-bar-index-active-color: @index-bar-index-active-color;
}
.van-index-bar {
&__sidebar {
position: fixed;
top: 50%;
right: 0;
z-index: @index-bar-sidebar-z-index;
z-index: var(--van-index-bar-sidebar-z-index);
display: flex;
flex-direction: column;
text-align: center;
@ -17,11 +24,11 @@
&__index {
padding: 0 @padding-xs 0 @padding-md;
font-weight: @font-weight-bold;
font-size: @index-bar-index-font-size;
line-height: @index-bar-index-line-height;
font-size: var(--van-index-bar-index-font-size);
line-height: var(--van-index-bar-index-line-height);
&--active {
color: @index-bar-index-active-color;
color: var(--van-index-bar-index-active-color);
}
}
}

17
src/list/index.less
View File

@ -1,12 +1,19 @@
@import './var.less';
:root {
--van-list-text-color: @list-text-color;
--van-list-text-font-size: @list-text-font-size;
--van-list-text-line-height: @list-text-line-height;
--van-list-loading-icon-size: @list-loading-icon-size;
}
.van-list {
&__loading,
&__finished-text,
&__error-text {
color: @list-text-color;
font-size: @list-text-font-size;
line-height: @list-text-line-height;
color: var(--van-list-text-color);
font-size: var(--van-list-text-font-size);
line-height: var(--van-list-text-line-height);
text-align: center;
}
@ -17,8 +24,8 @@
&__loading-icon {
.van-loading__spinner {
width: @list-loading-icon-size;
height: @list-loading-icon-size;
width: var(--van-list-loading-icon-size);
height: var(--van-list-loading-icon-size);
}
}
}

21
src/loading/index.less
View File

@ -1,21 +1,30 @@
@import './var.less';
:root {
--van-loading-text-color: @loading-text-color;
--van-loading-text-font-size: @loading-text-font-size;
--van-loading-spinner-color: @loading-spinner-color;
--van-loading-spinner-size: @loading-spinner-size;
--van-loading-spinner-animation-duration: @loading-spinner-animation-duration;
}
.van-loading {
position: relative;
color: @loading-spinner-color;
color: var(--van-loading-spinner-color);
font-size: 0;
vertical-align: middle;
&__spinner {
position: relative;
display: inline-block;
width: @loading-spinner-size;
width: var(--van-loading-spinner-size);
// compatible for 1.x, users may set width or height in root element
max-width: 100%;
height: @loading-spinner-size;
height: var(--van-loading-spinner-size);
max-height: 100%;
vertical-align: middle;
animation: van-rotate @loading-spinner-animation-duration linear infinite;
animation: van-rotate var(--van-loading-spinner-animation-duration) linear
infinite;
&--spinner {
animation-timing-function: steps(12);
@ -60,8 +69,8 @@
&__text {
display: inline-block;
margin-left: @padding-xs;
color: @loading-text-color;
font-size: @loading-text-font-size;
color: var(--van-loading-text-color);
font-size: var(--van-loading-text-font-size);
vertical-align: middle;
}

27
src/nav-bar/index.less
View File

@ -1,11 +1,22 @@
@import './var.less';
:root {
--van-nav-bar-height: @nav-bar-height;
--van-nav-bar-background-color: @nav-bar-background-color;
--van-nav-bar-arrow-size: @nav-bar-arrow-size;
--van-nav-bar-icon-color: @nav-bar-icon-color;
--van-nav-bar-text-color: @nav-bar-text-color;
--van-nav-bar-title-font-size: @nav-bar-title-font-size;
--van-nav-bar-title-text-color: @nav-bar-title-text-color;
--van-nav-bar-z-index: @nav-bar-z-index;
}
.van-nav-bar {
position: relative;
z-index: @nav-bar-z-index;
z-index: var(--van-nav-bar-z-index);
line-height: @line-height-lg;
text-align: center;
background-color: @nav-bar-background-color;
background-color: var(--van-nav-bar-background-color);
user-select: none;
&--fixed {
@ -21,27 +32,27 @@
}
.van-icon {
color: @nav-bar-icon-color;
color: var(--van-nav-bar-icon-color);
}
&__content {
position: relative;
display: flex;
align-items: center;
height: @nav-bar-height;
height: var(--van-nav-bar-height);
}
&__arrow {
margin-right: @padding-base;
font-size: @nav-bar-arrow-size;
font-size: var(--van-nav-bar-arrow-size);
}
&__title {
max-width: 60%;
margin: 0 auto;
color: @nav-bar-title-text-color;
color: var(--van-nav-bar-title-text-color);
font-weight: @font-weight-bold;
font-size: @nav-bar-title-font-size;
font-size: var(--van-nav-bar-title-font-size);
}
&__left,
@ -69,6 +80,6 @@
}
&__text {
color: @nav-bar-text-color;
color: var(--van-nav-bar-text-color);
}
}

30
src/notice-bar/index.less
View File

@ -1,20 +1,32 @@
@import './var.less';
:root {
--van-notice-bar-height: @notice-bar-height;
--van-notice-bar-padding: @notice-bar-padding;
--van-notice-bar-wrapable-padding: @notice-bar-wrapable-padding;
--van-notice-bar-text-color: @notice-bar-text-color;
--van-notice-bar-font-size: @notice-bar-font-size;
--van-notice-bar-line-height: @notice-bar-line-height;
--van-notice-bar-background-color: @notice-bar-background-color;
--van-notice-bar-icon-size: @notice-bar-icon-size;
--van-notice-bar-icon-min-width: @notice-bar-icon-min-width;
}
.van-notice-bar {
position: relative;
display: flex;
align-items: center;
height: @notice-bar-height;
padding: @notice-bar-padding;
color: @notice-bar-text-color;
font-size: @notice-bar-font-size;
line-height: @notice-bar-line-height;
background-color: @notice-bar-background-color;
height: var(--van-notice-bar-height);
padding: var(--van-notice-bar-padding);
color: var(--van-notice-bar-text-color);
font-size: var(--van-notice-bar-font-size);
line-height: var(--van-notice-bar-line-height);
background-color: var(--van-notice-bar-background-color);
&__left-icon,
&__right-icon {
min-width: @notice-bar-icon-min-width;
font-size: @notice-bar-icon-size;
min-width: var(--van-notice-bar-icon-min-width);
font-size: var(--van-notice-bar-icon-size);
}
&__right-icon {
@ -43,7 +55,7 @@
&--wrapable {
height: auto;
padding: @notice-bar-wrapable-padding;
padding: var(--van-notice-bar-wrapable-padding);
.van-notice-bar {
&__wrap {

27
src/notify/index.less
View File

@ -1,14 +1,25 @@
@import './var.less';
:root {
--van-notify-text-color: @notify-text-color;
--van-notify-padding: @notify-padding;
--van-notify-font-size: @notify-font-size;
--van-notify-line-height: @notify-line-height;
--van-notify-primary-background-color: @notify-primary-background-color;
--van-notify-success-background-color: @notify-success-background-color;
--van-notify-danger-background-color: @notify-danger-background-color;
--van-notify-warning-background-color: @notify-warning-background-color;
}
.van-notify {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: @notify-padding;
color: @notify-text-color;
font-size: @notify-font-size;
line-height: @notify-line-height;
padding: var(--van-notify-padding);
color: var(--van-notify-text-color);
font-size: var(--van-notify-font-size);
line-height: var(--van-notify-line-height);
// allow newline charactor
white-space: pre-wrap;
@ -16,18 +27,18 @@
word-wrap: break-word;
&--primary {
background-color: @notify-primary-background-color;
background-color: var(--van-notify-primary-background-color);
}
&--success {
background-color: @notify-success-background-color;
background-color: var(--van-notify-success-background-color);
}
&--danger {
background-color: @notify-danger-background-color;
background-color: var(--van-notify-danger-background-color);
}
&--warning {
background-color: @notify-warning-background-color;
background-color: var(--van-notify-warning-background-color);
}
}

49
src/number-keyboard/index.less
View File

@ -1,13 +1,30 @@
@import './var.less';
:root {
--van-number-keyboard-background-color: @number-keyboard-background-color;
--van-number-keyboard-key-height: @number-keyboard-key-height;
--van-number-keyboard-key-font-size: @number-keyboard-key-font-size;
--van-number-keyboard-key-active-color: @number-keyboard-key-active-color;
--van-number-keyboard-delete-font-size: @number-keyboard-delete-font-size;
--van-number-keyboard-title-color: @number-keyboard-title-color;
--van-number-keyboard-title-height: @number-keyboard-title-height;
--van-number-keyboard-title-font-size: @number-keyboard-title-font-size;
--van-number-keyboard-close-padding: @number-keyboard-close-padding;
--van-number-keyboard-close-color: @number-keyboard-close-color;
--van-number-keyboard-close-font-size: @number-keyboard-close-font-size;
--van-number-keyboard-button-text-color: @number-keyboard-button-text-color;
--van-number-keyboard-button-background-color: @number-keyboard-button-background-color;
--van-number-keyboard-z-index: @number-keyboard-z-index;
}
.van-number-keyboard {
position: fixed;
bottom: 0;
left: 0;
z-index: @number-keyboard-z-index;
z-index: var(--van-number-keyboard-z-index);
width: 100%;
padding-bottom: 22px;
background-color: @number-keyboard-background-color;
background-color: var(--van-number-keyboard-background-color);
user-select: none;
&--with-title {
@ -20,10 +37,10 @@
align-items: center;
justify-content: center;
box-sizing: content-box;
height: @number-keyboard-title-height;
height: var(--van-number-keyboard-title-height);
padding-top: 6px;
color: @number-keyboard-title-color;
font-size: @number-keyboard-title-font-size;
color: var(--van-number-keyboard-title-color);
font-size: var(--van-number-keyboard-title-font-size);
}
&__title {
@ -51,9 +68,9 @@
position: absolute;
right: 0;
height: 100%;
padding: @number-keyboard-close-padding;
color: @number-keyboard-close-color;
font-size: @number-keyboard-close-font-size;
padding: var(--van-number-keyboard-close-padding);
color: var(--van-number-keyboard-close-color);
font-size: var(--van-number-keyboard-close-font-size);
background-color: transparent;
border: none;
cursor: pointer;
@ -78,8 +95,8 @@
display: flex;
align-items: center;
justify-content: center;
height: @number-keyboard-key-height;
font-size: @number-keyboard-key-font-size;
height: var(--van-number-keyboard-key-height);
font-size: var(--van-number-keyboard-key-font-size);
line-height: 1.5;
background-color: @white;
border-radius: @border-radius-lg;
@ -98,19 +115,19 @@
&--blue,
&--delete {
font-size: @number-keyboard-delete-font-size;
font-size: var(--van-number-keyboard-delete-font-size);
}
&--active {
background-color: @number-keyboard-key-active-color;
background-color: var(--van-number-keyboard-key-active-color);
}
&--blue {
color: @number-keyboard-button-text-color;
background-color: @number-keyboard-button-background-color;
color: var(--van-number-keyboard-button-text-color);
background-color: var(--van-number-keyboard-button-background-color);
&.van-key--active {
background-color: darken(@number-keyboard-button-background-color, 10%);
background-color: var(--van-number-keyboard-button-active-color);
}
}
@ -137,6 +154,6 @@
}
&__loading-icon {
color: @number-keyboard-button-text-color;
color: var(--van-number-keyboard-button-text-color);
}
}

4
src/number-keyboard/var.less
View File

@ -13,4 +13,8 @@
@number-keyboard-close-font-size: @font-size-md;
@number-keyboard-button-text-color: @white;
@number-keyboard-button-background-color: @blue;
@number-keyboard-button-active-color: darken(
@number-keyboard-button-background-color,
10%
);
@number-keyboard-z-index: 100;

9
src/overlay/index.less
View File

@ -1,11 +1,16 @@
@import './var.less';
:root {
--van-overlay-z-index: @overlay-z-index;
--van-overlay-background-color: @overlay-background-color;
}
.van-overlay {
position: fixed;
top: 0;
left: 0;
z-index: @overlay-z-index;
z-index: var(--van-overlay-z-index);
width: 100%;
height: 100%;
background-color: @overlay-background-color;
background-color: var(--van-overlay-background-color);
}

36
src/pagination/index.less
View File

@ -1,8 +1,20 @@
@import './var.less';
:root {
--van-pagination-height: @pagination-height;
--van-pagination-font-size: @pagination-font-size;
--van-pagination-item-width: @pagination-item-width;
--van-pagination-item-default-color: @pagination-item-default-color;
--van-pagination-item-disabled-color: @pagination-item-disabled-color;
--van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
--van-pagination-background-color: @pagination-background-color;
--van-pagination-desc-color: @pagination-desc-color;
--van-pagination-disabled-opacity: @pagination-disabled-opacity;
}
.van-pagination {
display: flex;
font-size: @pagination-font-size;
font-size: var(--van-pagination-font-size);
&__item,
&__page-desc {
@ -14,16 +26,16 @@
&__item {
flex: 1;
box-sizing: border-box;
min-width: @pagination-item-width;
height: @pagination-height;
color: @pagination-item-default-color;
background-color: @pagination-background-color;
min-width: var(--van-pagination-item-width);
height: var(--van-pagination-height);
color: var(--van-pagination-item-default-color);
background-color: var(--van-pagination-background-color);
cursor: pointer;
user-select: none;
&:active {
color: @white;
background-color: @pagination-item-default-color;
background-color: var(--van-pagination-item-default-color);
}
&::after {
@ -36,7 +48,7 @@
&--active {
color: @white;
background-color: @pagination-item-default-color;
background-color: var(--van-pagination-item-default-color);
}
}
@ -49,10 +61,10 @@
&__item--disabled {
&,
&:active {
color: @pagination-item-disabled-color;
background-color: @pagination-item-disabled-background-color;
color: var(--van-pagination-item-disabled-color);
background-color: var(--van-pagination-item-disabled-background-color);
cursor: not-allowed;
opacity: @pagination-disabled-opacity;
opacity: var(--van-pagination-disabled-opacity);
}
}
@ -62,8 +74,8 @@
&__page-desc {
flex: 1;
height: @pagination-height;
color: @pagination-desc-color;
height: var(--van-pagination-height);
color: var(--van-pagination-desc-color);
}
&--simple {

49
src/password-input/index.less
View File

@ -1,33 +1,50 @@
@import './var.less';
:root {
--van-password-input-height: @password-input-height;
--van-password-input-margin: @password-input-margin;
--van-password-input-font-size: @password-input-font-size;
--van-password-input-border-radius: @password-input-border-radius;
--van-password-input-background-color: @password-input-background-color;
--van-password-input-info-color: @password-input-info-color;
--van-password-input-info-font-size: @password-input-info-font-size;
--van-password-input-error-info-color: @password-input-error-info-color;
--van-password-input-dot-size: @password-input-dot-size;
--van-password-input-dot-color: @password-input-dot-color;
--van-password-input-cursor-color: @password-input-cursor-color;
--van-password-input-cursor-width: @password-input-cursor-width;
--van-password-input-cursor-height: @password-input-cursor-height;
--van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration;
}
.van-password-input {
position: relative;
margin: @password-input-margin;
margin: var(--van-password-input-margin);
user-select: none;
&__info,
&__error-info {
margin-top: @padding-md;
font-size: @password-input-info-font-size;
font-size: var(--van-password-input-info-font-size);
text-align: center;
}
&__info {
color: @password-input-info-color;
color: var(--van-password-input-info-color);
}
&__error-info {
color: @password-input-error-info-color;
color: var(--van-password-input-error-info-color);
}
&__security {
display: flex;
width: 100%;
height: @password-input-height;
height: var(--van-password-input-height);
cursor: pointer;
&::after {
border-radius: @password-input-border-radius;
border-radius: var(--van-password-input-border-radius);
}
li {
@ -37,18 +54,18 @@
align-items: center;
justify-content: center;
height: 100%;
font-size: @password-input-font-size;
font-size: var(--van-password-input-font-size);
line-height: 1.2;
background-color: @password-input-background-color;
background-color: var(--van-password-input-background-color);
}
i {
position: absolute;
top: 50%;
left: 50%;
width: @password-input-dot-size;
height: @password-input-dot-size;
background-color: @password-input-dot-color;
width: var(--van-password-input-dot-size);
height: var(--van-password-input-dot-size);
background-color: var(--van-password-input-dot-color);
border-radius: 100%;
transform: translate(-50%, -50%);
visibility: hidden;
@ -59,12 +76,12 @@
position: absolute;
top: 50%;
left: 50%;
width: @password-input-cursor-width;
height: @password-input-cursor-height;
background-color: @password-input-cursor-color;
width: var(--van-password-input-cursor-width);
height: var(--van-password-input-cursor-height);
background-color: var(--van-password-input-cursor-color);
transform: translate(-50%, -50%);
animation: @password-input-cursor-animation-duration van-cursor-flicker
infinite;
animation: var(--van-password-input-cursor-animation-duration)
van-cursor-flicker infinite;
}
}

42
src/picker/index.less
View File

@ -1,22 +1,38 @@
@import './var.less';
:root {
--van-picker-background-color: @picker-background-color;
--van-picker-toolbar-height: @picker-toolbar-height;
--van-picker-title-font-size: @picker-title-font-size;
--van-picker-title-line-height: @picker-title-line-height;
--van-picker-action-padding: @picker-action-padding;
--van-picker-action-font-size: @picker-action-font-size;
--van-picker-confirm-action-color: @picker-confirm-action-color;
--van-picker-cancel-action-color: @picker-cancel-action-color;
--van-picker-option-font-size: @picker-option-font-size;
--van-picker-option-text-color: @picker-option-text-color;
--van-picker-option-disabled-opacity: @picker-option-disabled-opacity;
--van-picker-loading-icon-color: @picker-loading-icon-color;
--van-picker-loading-mask-color: @picker-loading-mask-color;
}
.van-picker {
position: relative;
background-color: @picker-background-color;
background-color: var(--van-picker-background-color);
user-select: none;
&__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
height: @picker-toolbar-height;
height: var(--van-picker-toolbar-height);
}
&__cancel,
&__confirm {
height: 100%;
padding: @picker-action-padding;
font-size: @picker-action-font-size;
padding: var(--van-picker-action-padding);
font-size: var(--van-picker-action-font-size);
background-color: transparent;
border: none;
cursor: pointer;
@ -27,18 +43,18 @@
}
&__confirm {
color: @picker-confirm-action-color;
color: var(--van-picker-confirm-action-color);
}
&__cancel {
color: @picker-cancel-action-color;
color: var(--van-picker-cancel-action-color);
}
&__title {
max-width: 50%;
font-weight: @font-weight-bold;
font-size: @picker-title-font-size;
line-height: @picker-title-line-height;
font-size: var(--van-picker-title-font-size);
line-height: var(--van-picker-title-line-height);
text-align: center;
}
@ -58,8 +74,8 @@
display: flex;
align-items: center;
justify-content: center;
color: @picker-loading-icon-color;
background-color: @picker-loading-mask-color;
color: var(--van-picker-loading-icon-color);
background-color: var(--van-picker-loading-mask-color);
}
&__frame {
@ -95,7 +111,7 @@
&-column {
flex: 1;
overflow: hidden;
font-size: @picker-option-font-size;
font-size: var(--van-picker-option-font-size);
&__wrapper {
transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
@ -106,11 +122,11 @@
align-items: center;
justify-content: center;
padding: 0 @padding-base;
color: @picker-option-text-color;
color: var(--van-picker-option-text-color);
&--disabled {
cursor: not-allowed;
opacity: @picker-option-disabled-opacity;
opacity: var(--van-picker-option-disabled-opacity);
}
}
}

44
src/popover/index.less
View File

@ -1,5 +1,21 @@
@import './var.less';
:root {
--van-popover-arrow-size: @popover-arrow-size;
--van-popover-border-radius: @popover-border-radius;
--van-popover-action-width: @popover-action-width;
--van-popover-action-height: @popover-action-height;
--van-popover-action-font-size: @popover-action-font-size;
--van-popover-action-line-height: @popover-action-line-height;
--van-popover-action-icon-size: @popover-action-icon-size;
--van-popover-light-text-color: @popover-light-text-color;
--van-popover-light-background-color: @popover-light-background-color;
--van-popover-light-action-disabled-text-color: @popover-light-action-disabled-text-color;
--van-popover-dark-text-color: @popover-dark-text-color;
--van-popover-dark-background-color: @popover-dark-background-color;
--van-popover-dark-action-disabled-text-color: @popover-dark-action-disabled-text-color;
}
.van-popover {
position: absolute;
overflow: visible;
@ -16,12 +32,12 @@
height: 0;
border-color: transparent;
border-style: solid;
border-width: @popover-arrow-size;
border-width: var(--van-popover-arrow-size);
}
&__content {
overflow: hidden;
border-radius: @popover-border-radius;
border-radius: var(--van-popover-border-radius);
}
&__action {
@ -29,10 +45,10 @@
display: flex;
align-items: center;
box-sizing: border-box;
width: @popover-action-width;
height: @popover-action-height;
width: var(--van-popover-action-width);
height: var(--van-popover-action-height);
padding: 0 @padding-md;
font-size: @popover-action-font-size;
font-size: var(--van-popover-action-font-size);
line-height: @line-height-md;
cursor: pointer;
@ -52,7 +68,7 @@
&-icon {
margin-right: @padding-xs;
font-size: @popover-action-icon-size;
font-size: var(--van-popover-action-icon-size);
}
&--with-icon {
@ -195,15 +211,15 @@
}
&--light {
color: @popover-light-text-color;
color: var(--van-popover-light-text-color);
.van-popover__content {
background-color: @popover-light-background-color;
background-color: var(--van-popover-light-background-color);
box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
}
.van-popover__arrow {
color: @popover-light-background-color;
color: var(--van-popover-light-background-color);
}
.van-popover__action {
@ -212,7 +228,7 @@
}
&--disabled {
color: @popover-light-action-disabled-text-color;
color: var(--van-popover-light-action-disabled-text-color);
cursor: not-allowed;
&:active {
@ -223,14 +239,14 @@
}
&--dark {
color: @popover-dark-text-color;
color: var(--van-popover-dark-text-color);
.van-popover__content {
background-color: @popover-dark-background-color;
background-color: var(--van-popover-dark-background-color);
}
.van-popover__arrow {
color: @popover-dark-background-color;
color: var(--van-popover-dark-background-color);
}
.van-popover__action {
@ -239,7 +255,7 @@
}
&--disabled {
color: @popover-dark-action-disabled-text-color;
color: var(--van-popover-dark-action-disabled-text-color);
&:active {
background-color: transparent;

53
src/popup/index.less
View File

@ -1,6 +1,17 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-popup-background-color: @popup-background-color;
--van-popup-transition: @popup-transition;
--van-popup-round-border-radius: @popup-round-border-radius;
--van-popup-close-icon-size: @popup-close-icon-size;
--van-popup-close-icon-color: @popup-close-icon-color;
--van-popup-close-icon-active-color: @popup-close-icon-active-color;
--van-popup-close-icon-margin: @popup-close-icon-margin;
--van-popup-close-icon-z-index: @popup-close-icon-z-index;
}
.van {
&-overflow-hidden {
overflow: hidden !important;
@ -10,8 +21,8 @@
position: fixed;
max-height: 100%;
overflow-y: auto;
background-color: @popup-background-color;
transition: @popup-transition;
background-color: var(--van-popup-background-color);
transition: var(--van-popup-transition);
-webkit-overflow-scrolling: touch;
&--center {
@ -20,7 +31,7 @@
transform: translate3d(-50%, -50%, 0);
&.van-popup--round {
border-radius: @popup-round-border-radius;
border-radius: var(--van-popup-round-border-radius);
}
}
@ -30,7 +41,8 @@
width: 100%;
&.van-popup--round {
border-radius: 0 0 @popup-round-border-radius @popup-round-border-radius;
border-radius: 0 0 var(--van-popup-round-border-radius)
var(--van-popup-round-border-radius);
}
}
@ -40,7 +52,8 @@
transform: translate3d(0, -50%, 0);
&.van-popup--round {
border-radius: @popup-round-border-radius 0 0 @popup-round-border-radius;
border-radius: var(--van-popup-round-border-radius) 0 0
var(--van-popup-round-border-radius);
}
}
@ -50,7 +63,8 @@
width: 100%;
&.van-popup--round {
border-radius: @popup-round-border-radius @popup-round-border-radius 0 0;
border-radius: var(--van-popup-round-border-radius)
var(--van-popup-round-border-radius) 0 0;
}
}
@ -60,7 +74,8 @@
transform: translate3d(0, -50%, 0);
&.van-popup--round {
border-radius: 0 @popup-round-border-radius @popup-round-border-radius 0;
border-radius: 0 var(--van-popup-round-border-radius)
var(--van-popup-round-border-radius) 0;
}
}
@ -104,33 +119,33 @@
&__close-icon {
position: absolute;
z-index: @popup-close-icon-z-index;
color: @popup-close-icon-color;
font-size: @popup-close-icon-size;
z-index: var(--van-popup-close-icon-z-index);
color: var(--van-popup-close-icon-color);
font-size: var(--van-popup-close-icon-size);
cursor: pointer;
&:active {
color: @popup-close-icon-active-color;
color: var(--van-popup-close-icon-active-color);
}
&--top-left {
top: @popup-close-icon-margin;
left: @popup-close-icon-margin;
top: var(--van-popup-close-icon-margin);
left: var(--van-popup-close-icon-margin);
}
&--top-right {
top: @popup-close-icon-margin;
right: @popup-close-icon-margin;
top: var(--van-popup-close-icon-margin);
right: var(--van-popup-close-icon-margin);
}
&--bottom-left {
bottom: @popup-close-icon-margin;
left: @popup-close-icon-margin;
bottom: var(--van-popup-close-icon-margin);
left: var(--van-popup-close-icon-margin);
}
&--bottom-right {
right: @popup-close-icon-margin;
bottom: @popup-close-icon-margin;
right: var(--van-popup-close-icon-margin);
bottom: var(--van-popup-close-icon-margin);
}
}
}

29
src/progress/index.less
View File

@ -1,16 +1,27 @@
@import './var.less';
:root {
--van-progress-height: @progress-height;
--van-progress-color: @progress-color;
--van-progress-background-color: @progress-background-color;
--van-progress-pivot-padding: @progress-pivot-padding;
--van-progress-pivot-text-color: @progress-pivot-text-color;
--van-progress-pivot-font-size: @progress-pivot-font-size;
--van-progress-pivot-line-height: @progress-pivot-line-height;
--van-progress-pivot-background-color: @progress-pivot-background-color;
}
.van-progress {
position: relative;
height: @progress-height;
background: @progress-background-color;
border-radius: @progress-height;
height: var(--van-progress-height);
background: var(--van-progress-background-color);
border-radius: var(--van-progress-height);
&__portion {
position: absolute;
left: 0;
height: 100%;
background: @progress-color;
background: var(--van-progress-color);
border-radius: inherit;
}
@ -19,13 +30,13 @@
top: 50%;
box-sizing: border-box;
min-width: 3.6em;
padding: @progress-pivot-padding;
color: @progress-pivot-text-color;
font-size: @progress-pivot-font-size;
line-height: @progress-pivot-line-height;
padding: var(--van-progress-pivot-padding);
color: var(--van-progress-pivot-text-color);
font-size: var(--van-progress-pivot-font-size);
line-height: var(--van-progress-pivot-line-height);
text-align: center;
word-break: keep-all;
background-color: @progress-pivot-background-color;
background-color: var(--van-progress-pivot-background-color);
border-radius: 1em;
transform: translate(0, -50%);
}

19
src/pull-refresh/index.less
View File

@ -1,5 +1,12 @@
@import './var.less';
:root {
--van-pull-refresh-head-height: @pull-refresh-head-height;
--van-pull-refresh-head-font-size: @pull-refresh-head-font-size;
--van-pull-refresh-head-text-color: @pull-refresh-head-text-color;
--van-pull-refresh-loading-icon-size: @pull-refresh-loading-icon-size;
}
.van-pull-refresh {
overflow: hidden;
user-select: none;
@ -14,19 +21,19 @@
position: absolute;
left: 0;
width: 100%;
height: @pull-refresh-head-height;
height: var(--van-pull-refresh-head-height);
overflow: hidden;
color: @pull-refresh-head-text-color;
font-size: @pull-refresh-head-font-size;
line-height: @pull-refresh-head-height;
color: var(--van-pull-refresh-head-text-color);
font-size: var(--van-pull-refresh-head-font-size);
line-height: var(--van-pull-refresh-head-height);
text-align: center;
transform: translateY(-100%);
}
&__loading {
.van-loading__spinner {
width: @pull-refresh-loading-icon-size;
height: @pull-refresh-loading-icon-size;
width: var(--van-pull-refresh-loading-icon-size);
height: var(--van-pull-refresh-loading-icon-size);
}
}
}

38
src/radio/index.less
View File

@ -1,5 +1,17 @@
@import './var.less';
:root {
--van-radio-size: @radio-size;
--van-radio-border-color: @radio-border-color;
--van-radio-transition-duration: @radio-transition-duration;
--van-radio-label-margin: @radio-label-margin;
--van-radio-label-color: @radio-label-color;
--van-radio-checked-icon-color: @radio-checked-icon-color;
--van-radio-disabled-icon-color: @radio-disabled-icon-color;
--van-radio-disabled-label-color: @radio-disabled-label-color;
--van-radio-disabled-background-color: @radio-disabled-background-color;
}
.van-radio {
display: flex;
align-items: center;
@ -22,7 +34,7 @@
&__icon {
flex: none;
height: 1em;
font-size: @radio-size;
font-size: var(--van-radio-size);
line-height: 1em;
cursor: pointer;
@ -35,8 +47,8 @@
font-size: 0.8em;
line-height: 1.25;
text-align: center;
border: 1px solid @radio-border-color;
transition-duration: @radio-transition-duration;
border: 1px solid var(--van-radio-border-color);
transition-duration: var(--van-radio-transition-duration);
transition-property: color, border-color, background-color;
}
@ -49,8 +61,8 @@
&--checked {
.van-icon {
color: @white;
background-color: @radio-checked-icon-color;
border-color: @radio-checked-icon-color;
background-color: var(--van-radio-checked-icon-color);
border-color: var(--van-radio-checked-icon-color);
}
}
@ -58,29 +70,29 @@
cursor: not-allowed;
.van-icon {
background-color: @radio-disabled-background-color;
border-color: @radio-disabled-icon-color;
background-color: var(--van-radio-disabled-background-color);
border-color: var(--van-radio-disabled-icon-color);
}
}
&--disabled&--checked {
.van-icon {
color: @radio-disabled-icon-color;
color: var(--van-radio-disabled-icon-color);
}
}
}
&__label {
margin-left: @radio-label-margin;
color: @radio-label-color;
line-height: @radio-size;
margin-left: var(--van-radio-label-margin);
color: var(--van-radio-label-color);
line-height: var(--van-radio-size);
&--left {
margin: 0 @radio-label-margin 0 0;
margin: 0 var(--van-radio-label-margin) 0 0;
}
&--disabled {
color: @radio-disabled-label-color;
color: var(--van-radio-disabled-label-color);
}
}
}

18
src/rate/index.less
View File

@ -1,5 +1,13 @@
@import './var.less';
:root {
--van-rate-icon-size: @rate-icon-size;
--van-rate-icon-gutter: @rate-icon-gutter;
--van-rate-icon-void-color: @rate-icon-void-color;
--van-rate-icon-full-color: @rate-icon-full-color;
--van-rate-icon-disabled-color: @rate-icon-disabled-color;
}
.van-rate {
display: inline-flex;
cursor: pointer;
@ -9,15 +17,15 @@
position: relative;
&:not(:last-child) {
padding-right: @rate-icon-gutter;
padding-right: var(--van-rate-icon-gutter);
}
}
&__icon {
display: block;
width: 1em;
color: @rate-icon-void-color;
font-size: @rate-icon-size;
color: var(--van-rate-icon-void-color);
font-size: var(--van-rate-icon-size);
&--half {
position: absolute;
@ -27,11 +35,11 @@
}
&--full {
color: @rate-icon-full-color;
color: var(--van-rate-icon-full-color);
}
&--disabled {
color: @rate-icon-disabled-color;
color: var(--van-rate-icon-disabled-color);
}
}

38
src/search/index.less
View File

@ -1,17 +1,31 @@
@import './var.less';
:root {
--van-search-padding: @search-padding;
--van-search-background-color: @search-background-color;
--van-search-content-background-color: @search-content-background-color;
--van-search-input-height: @search-input-height;
--van-search-label-padding: @search-label-padding;
--van-search-label-color: @search-label-color;
--van-search-label-font-size: @search-label-font-size;
--van-search-left-icon-color: @search-left-icon-color;
--van-search-action-padding: @search-action-padding;
--van-search-action-text-color: @search-action-text-color;
--van-search-action-font-size: @search-action-font-size;
}
.van-search {
display: flex;
align-items: center;
box-sizing: border-box;
padding: @search-padding;
background-color: @search-background-color;
padding: var(--van-search-padding);
background-color: var(--van-search-background-color);
&__content {
display: flex;
flex: 1;
padding-left: @padding-sm;
background-color: @search-content-background-color;
background-color: var(--van-search-content-background-color);
border-radius: @border-radius-sm;
&--round {
@ -20,10 +34,10 @@
}
&__label {
padding: @search-label-padding;
color: @search-label-color;
font-size: @search-label-font-size;
line-height: @search-input-height;
padding: var(--van-search-label-padding);
color: var(--van-search-label-color);
font-size: var(--van-search-label-font-size);
line-height: var(--van-search-input-height);
}
.van-cell {
@ -32,7 +46,7 @@
background-color: transparent;
&__left-icon {
color: @search-left-icon-color;
color: var(--van-search-left-icon-color);
}
}
@ -50,10 +64,10 @@
}
&__action {
padding: @search-action-padding;
color: @search-action-text-color;
font-size: @search-action-font-size;
line-height: @search-input-height;
padding: var(--van-search-action-padding);
color: var(--van-search-action-text-color);
font-size: var(--van-search-action-font-size);
line-height: var(--van-search-input-height);
cursor: pointer;
user-select: none;

50
src/share-sheet/index.less
View File

@ -1,26 +1,44 @@
@import './var.less';
@import '../style/mixins/hairline';
:root {
--van-share-sheet-header-padding: @share-sheet-header-padding;
--van-share-sheet-title-color: @share-sheet-title-color;
--van-share-sheet-title-font-size: @share-sheet-title-font-size;
--van-share-sheet-title-line-height: @share-sheet-title-line-height;
--van-share-sheet-description-color: @share-sheet-description-color;
--van-share-sheet-description-font-size: @share-sheet-description-font-size;
--van-share-sheet-description-line-height: @share-sheet-description-line-height;
--van-share-sheet-icon-size: @share-sheet-icon-size;
--van-share-sheet-option-name-color: @share-sheet-option-name-color;
--van-share-sheet-option-name-font-size: @share-sheet-option-name-font-size;
--van-share-sheet-option-description-color: @share-sheet-option-description-color;
--van-share-sheet-option-description-font-size: @share-sheet-option-description-font-size;
--van-share-sheet-cancel-button-font-size: @share-sheet-cancel-button-font-size;
--van-share-sheet-cancel-button-height: @share-sheet-cancel-button-height;
--van-share-sheet-cancel-button-background: @share-sheet-cancel-button-background;
}
.van-share-sheet {
&__header {
padding: @share-sheet-header-padding;
padding: var(--van-share-sheet-header-padding);
text-align: center;
}
&__title {
margin-top: @padding-xs;
color: @share-sheet-title-color;
color: var(--van-share-sheet-title-color);
font-weight: normal;
font-size: @share-sheet-title-font-size;
line-height: @share-sheet-title-line-height;
font-size: var(--van-share-sheet-title-font-size);
line-height: var(--van-share-sheet-title-line-height);
}
&__description {
display: block;
margin-top: @padding-xs;
color: @share-sheet-description-color;
font-size: @share-sheet-description-font-size;
line-height: @share-sheet-description-line-height;
color: var(--van-share-sheet-description-color);
font-size: var(--van-share-sheet-description-font-size);
line-height: var(--van-share-sheet-description-line-height);
}
&__options {
@ -53,32 +71,32 @@
}
&__icon {
width: @share-sheet-icon-size;
height: @share-sheet-icon-size;
width: var(--van-share-sheet-icon-size);
height: var(--van-share-sheet-icon-size);
margin: 0 @padding-md;
}
&__name {
margin-top: @padding-xs;
padding: 0 @padding-base;
color: @share-sheet-option-name-color;
font-size: @share-sheet-option-name-font-size;
color: var(--van-share-sheet-option-name-color);
font-size: var(--van-share-sheet-option-name-font-size);
}
&__option-description {
padding: 0 @padding-base;
color: @share-sheet-option-description-color;
font-size: @share-sheet-option-description-font-size;
color: var(--van-share-sheet-option-description-color);
font-size: var(--van-share-sheet-option-description-font-size);
}
&__cancel {
display: block;
width: 100%;
padding: 0;
font-size: @share-sheet-cancel-button-font-size;
line-height: @share-sheet-cancel-button-height;
font-size: var(--van-share-sheet-cancel-button-font-size);
line-height: var(--van-share-sheet-cancel-button-height);
text-align: center;
background: @share-sheet-cancel-button-background;
background: var(--van-share-sheet-cancel-button-background);
border: none;
cursor: pointer;

44
src/sidebar-item/index.less
View File

@ -1,20 +1,36 @@
@import './var.less';
:root {
--van-sidebar-font-size: @sidebar-font-size;
--van-sidebar-line-height: @sidebar-line-height;
--van-sidebar-text-color: @sidebar-text-color;
--van-sidebar-disabled-text-color: @sidebar-disabled-text-color;
--van-sidebar-padding: @sidebar-padding;
--van-sidebar-active-color: @sidebar-active-color;
--van-sidebar-background-color: @sidebar-background-color;
--van-sidebar-selected-font-weight: @sidebar-selected-font-weight;
--van-sidebar-selected-text-color: @sidebar-selected-text-color;
--van-sidebar-selected-border-width: @sidebar-selected-border-width;
--van-sidebar-selected-border-height: @sidebar-selected-border-height;
--van-sidebar-selected-border-color: @sidebar-selected-border-color;
--van-sidebar-selected-background-color: @sidebar-selected-background-color;
}
.van-sidebar-item {
position: relative;
display: block;
box-sizing: border-box;
padding: @sidebar-padding;
padding: var(--van-sidebar-padding);
overflow: hidden;
color: @sidebar-text-color;
font-size: @sidebar-font-size;
line-height: @sidebar-line-height;
background-color: @sidebar-background-color;
color: var(--van-sidebar-text-color);
font-size: var(--van-sidebar-font-size);
line-height: var(--van-sidebar-line-height);
background-color: var(--van-sidebar-background-color);
cursor: pointer;
user-select: none;
&:active {
background-color: @sidebar-active-color;
background-color: var(--van-sidebar-active-color);
}
&:not(:last-child)::after {
@ -27,32 +43,32 @@
}
&--select {
color: @sidebar-selected-text-color;
font-weight: @sidebar-selected-font-weight;
color: var(--van-sidebar-selected-text-color);
font-weight: var(--van-sidebar-selected-font-weight);
&,
&:active {
background-color: @sidebar-selected-background-color;
background-color: var(--van-sidebar-selected-background-color);
}
&::before {
position: absolute;
top: 50%;
left: 0;
width: @sidebar-selected-border-width;
height: @sidebar-selected-border-height;
background-color: @sidebar-selected-border-color;
width: var(--van-sidebar-selected-border-width);
height: var(--van-sidebar-selected-border-height);
background-color: var(--van-sidebar-selected-border-color);
transform: translateY(-50%);
content: '';
}
}
&--disabled {
color: @sidebar-disabled-text-color;
color: var(--van-sidebar-disabled-text-color);
cursor: not-allowed;
&:active {
background-color: @sidebar-background-color;
background-color: var(--van-sidebar-background-color);
}
}
}

6
src/sidebar/index.less
View File

@ -1,7 +1,11 @@
@import './var.less';
:root {
--van-sidebar-width: @sidebar-width;
}
.van-sidebar {
width: @sidebar-width;
width: var(--van-sidebar-width);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

28
src/skeleton/index.less
View File

@ -1,15 +1,25 @@
@import './var.less';
:root {
--van-skeleton-row-height: @skeleton-row-height;
--van-skeleton-row-background-color: @skeleton-row-background-color;
--van-skeleton-row-margin-top: @skeleton-row-margin-top;
--van-skeleton-title-width: @skeleton-title-width;
--van-skeleton-avatar-size: @skeleton-avatar-size;
--van-skeleton-avatar-background-color: @skeleton-avatar-background-color;
--van-skeleton-animation-duration: @skeleton-animation-duration;
}
.van-skeleton {
display: flex;
padding: 0 @padding-md;
&__avatar {
flex-shrink: 0;
width: @skeleton-avatar-size;
height: @skeleton-avatar-size;
width: var(--van-skeleton-avatar-size);
height: var(--van-skeleton-avatar-size);
margin-right: @padding-md;
background-color: @skeleton-avatar-background-color;
background-color: var(--van-skeleton-avatar-background-color);
&--round {
border-radius: @border-radius-max;
@ -26,18 +36,18 @@
&__row,
&__title {
height: @skeleton-row-height;
background-color: @skeleton-row-background-color;
height: var(--van-skeleton-row-height);
background-color: var(--van-skeleton-row-background-color);
}
&__title {
width: @skeleton-title-width;
width: var(--van-skeleton-title-width);
margin: 0;
}
&__row {
&:not(:first-child) {
margin-top: @skeleton-row-margin-top;
margin-top: var(--van-skeleton-row-margin-top);
}
}
@ -46,8 +56,8 @@
}
&--animate {
animation: van-skeleton-blink @skeleton-animation-duration ease-in-out
infinite;
animation: van-skeleton-blink var(--van-skeleton-animation-duration)
ease-in-out infinite;
}
&--round {

32
src/slider/index.less
View File

@ -1,10 +1,22 @@
@import './var.less';
:root {
--van-slider-active-background-color: @slider-active-background-color;
--van-slider-inactive-background-color: @slider-inactive-background-color;
--van-slider-disabled-opacity: @slider-disabled-opacity;
--van-slider-bar-height: @slider-bar-height;
--van-slider-button-width: @slider-button-width;
--van-slider-button-height: @slider-button-height;
--van-slider-button-border-radius: @slider-button-border-radius;
--van-slider-button-background-color: @slider-button-background-color;
--van-slider-button-box-shadow: @slider-button-box-shadow;
}
.van-slider {
position: relative;
width: 100%;
height: @slider-bar-height;
background-color: @slider-inactive-background-color;
height: var(--van-slider-bar-height);
background-color: var(--van-slider-inactive-background-color);
border-radius: @border-radius-max;
cursor: pointer;
@ -22,17 +34,17 @@
position: relative;
width: 100%;
height: 100%;
background-color: @slider-active-background-color;
background-color: var(--van-slider-active-background-color);
border-radius: inherit;
transition: all @animation-duration-fast;
}
&__button {
width: @slider-button-width;
height: @slider-button-height;
background-color: @slider-button-background-color;
border-radius: @slider-button-border-radius;
box-shadow: @slider-button-box-shadow;
width: var(--van-slider-button-width);
height: var(--van-slider-button-height);
background-color: var(--van-slider-button-background-color);
border-radius: var(--van-slider-button-border-radius);
box-shadow: var(--van-slider-button-box-shadow);
&-wrapper,
&-wrapper-right {
@ -54,7 +66,7 @@
&--disabled {
cursor: not-allowed;
opacity: @slider-disabled-opacity;
opacity: var(--van-slider-disabled-opacity);
.van-slider__button-wrapper,
.van-slider__button-wrapper-left,
@ -65,7 +77,7 @@
&--vertical {
display: inline-block;
width: @slider-bar-height;
width: var(--van-slider-bar-height);
height: 100%;
.van-slider__button-wrapper,

44
src/step/index.less
View File

@ -1,22 +1,36 @@
@import './var.less';
:root {
--van-step-text-color: @step-text-color;
--van-step-active-color: @step-active-color;
--van-step-process-text-color: @step-process-text-color;
--van-step-font-size: @step-font-size;
--van-step-line-color: @step-line-color;
--van-step-finish-line-color: @step-finish-line-color;
--van-step-finish-text-color: @step-finish-text-color;
--van-step-icon-size: @step-icon-size;
--van-step-circle-size: @step-circle-size;
--van-step-circle-color: @step-circle-color;
--van-step-horizontal-title-font-size: @step-horizontal-title-font-size;
}
.van-step {
position: relative;
flex: 1;
color: @step-text-color;
font-size: @step-font-size;
color: var(--van-step-text-color);
font-size: var(--van-step-font-size);
&__circle {
display: block;
width: @step-circle-size;
height: @step-circle-size;
background-color: @step-circle-color;
width: var(--van-step-circle-size);
height: var(--van-step-circle-size);
background-color: var(--van-step-circle-color);
border-radius: 50%;
}
&__line {
position: absolute;
background-color: @step-line-color;
background-color: var(--van-step-line-color);
transition: background-color @animation-duration-base;
}
@ -59,12 +73,8 @@
.van-step__title {
display: inline-block;
margin-left: 3px;
font-size: @step-horizontal-title-font-size;
font-size: var(--van-step-horizontal-title-font-size);
transform: translateX(-50%);
@media (max-width: 321px) {
font-size: @step-horizontal-title-font-size - 1px;
}
}
.van-step__line {
@ -76,11 +86,11 @@
.van-step__icon {
display: block;
font-size: @step-icon-size;
font-size: var(--van-step-icon-size);
}
.van-step--process {
color: @step-process-text-color;
color: var(--van-step-process-text-color);
}
}
@ -112,7 +122,7 @@
top: 19px;
left: -15px;
z-index: 2;
font-size: @step-icon-size;
font-size: var(--van-step-icon-size);
line-height: 1;
transform: translate(-50%, -50%);
}
@ -132,11 +142,11 @@
}
&--finish {
color: @step-finish-text-color;
color: var(--van-step-finish-text-color);
.van-step__circle,
.van-step__line {
background-color: @step-finish-line-color;
background-color: var(--van-step-finish-line-color);
}
}
@ -146,7 +156,7 @@
&--active,
&--finish {
color: @step-active-color;
color: var(--van-step-active-color);
}
}
}

63
src/stepper/index.less
View File

@ -1,5 +1,22 @@
@import './var.less';
:root {
--van-stepper-active-color: @stepper-active-color;
--van-stepper-background-color: @stepper-background-color;
--van-stepper-button-icon-color: @stepper-button-icon-color;
--van-stepper-button-disabled-color: @stepper-button-disabled-color;
--van-stepper-button-disabled-icon-color: @stepper-button-disabled-icon-color;
--van-stepper-button-round-theme-color: @stepper-button-round-theme-color;
--van-stepper-input-width: @stepper-input-width;
--van-stepper-input-height: @stepper-input-height;
--van-stepper-input-font-size: @stepper-input-font-size;
--van-stepper-input-line-height: @stepper-input-line-height;
--van-stepper-input-text-color: @stepper-input-text-color;
--van-stepper-input-disabled-text-color: @stepper-input-disabled-text-color;
--van-stepper-input-disabled-background-color: @stepper-input-disabled-background-color;
--van-stepper-border-radius: @stepper-border-radius;
}
.van-stepper {
display: inline-block;
user-select: none;
@ -8,13 +25,13 @@
&__plus {
position: relative;
box-sizing: border-box;
width: @stepper-input-height;
height: @stepper-input-height;
width: var(--van-stepper-input-height);
height: var(--van-stepper-input-height);
margin: 0;
padding: 0;
color: @stepper-button-icon-color;
color: var(--van-stepper-button-icon-color);
vertical-align: middle;
background-color: @stepper-background-color;
background-color: var(--van-stepper-background-color);
border: 0;
cursor: pointer;
@ -39,22 +56,23 @@
}
&:active {
background-color: @stepper-active-color;
background-color: var(--van-stepper-active-color);
}
&--disabled {
color: @stepper-button-disabled-icon-color;
background-color: @stepper-button-disabled-color;
color: var(--van-stepper-button-disabled-icon-color);
background-color: var(--van-stepper-button-disabled-color);
cursor: not-allowed;
&:active {
background-color: @stepper-button-disabled-color;
background-color: var(--van-stepper-button-disabled-color);
}
}
}
&__minus {
border-radius: @stepper-border-radius 0 0 @stepper-border-radius;
border-radius: var(--van-stepper-border-radius) 0 0
var(--van-stepper-border-radius);
&::after {
display: none;
@ -62,31 +80,32 @@
}
&__plus {
border-radius: 0 @stepper-border-radius @stepper-border-radius 0;
border-radius: 0 var(--van-stepper-border-radius)
var(--van-stepper-border-radius) 0;
}
&__input {
box-sizing: border-box;
width: @stepper-input-width;
height: @stepper-input-height;
width: var(--van-stepper-input-width);
height: var(--van-stepper-input-height);
margin: 0 2px;
padding: 0;
color: @stepper-input-text-color;
font-size: @stepper-input-font-size;
line-height: @stepper-input-line-height;
color: var(--van-stepper-input-text-color);
font-size: var(--van-stepper-input-font-size);
line-height: var(--van-stepper-input-line-height);
text-align: center;
vertical-align: middle;
background-color: @stepper-background-color;
background-color: var(--van-stepper-background-color);
border: 0;
border-width: 1px 0;
border-radius: 0;
-webkit-appearance: none;
&:disabled {
color: @stepper-input-disabled-text-color;
background-color: @stepper-input-disabled-background-color;
color: var(--van-stepper-input-disabled-text-color);
background-color: var(--van-stepper-input-disabled-background-color);
// fix disabled color in iOS
-webkit-text-fill-color: @stepper-input-disabled-text-color;
-webkit-text-fill-color: var(--van-stepper-input-disabled-text-color);
opacity: 1;
}
@ -118,13 +137,13 @@
.van-stepper__plus {
color: @white;
background-color: @stepper-button-round-theme-color;
background-color: var(--van-stepper-button-round-theme-color);
}
.van-stepper__minus {
color: @stepper-button-round-theme-color;
color: var(--van-stepper-button-round-theme-color);
background-color: @white;
border: 1px solid @stepper-button-round-theme-color;
border: 1px solid var(--van-stepper-button-round-theme-color);
}
}
}

6
src/steps/index.less
View File

@ -1,8 +1,12 @@
@import './var.less';
:root {
--van-steps-background-color: @steps-background-color;
}
.van-steps {
overflow: hidden;
background-color: @steps-background-color;
background-color: var(--van-steps-background-color);
&--horizontal {
padding: 10px 10px 0;

6
src/sticky/index.less
View File

@ -1,8 +1,12 @@
@import './var.less';
:root {
--van-sticky-z-index: @sticky-z-index;
}
.van-sticky {
&--fixed {
position: fixed;
z-index: @sticky-z-index;
z-index: var(--van-sticky-z-index);
}
}

61
src/submit-bar/index.less
View File

@ -1,27 +1,50 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-submit-bar-height: @submit-bar-height;
--van-submit-bar-z-index: @submit-bar-z-index;
--van-submit-bar-background-color: @submit-bar-background-color;
--van-submit-bar-button-width: @submit-bar-button-width;
--van-submit-bar-price-color: @submit-bar-price-color;
--van-submit-bar-price-font-size: @submit-bar-price-font-size;
--van-submit-bar-currency-font-size: @submit-bar-currency-font-size;
--van-submit-bar-text-color: @submit-bar-text-color;
--van-submit-bar-text-font-size: @submit-bar-text-font-size;
--van-submit-bar-tip-padding: @submit-bar-tip-padding;
--van-submit-bar-tip-font-size: @submit-bar-tip-font-size;
--van-submit-bar-tip-line-height: @submit-bar-tip-line-height;
--van-submit-bar-tip-color: @submit-bar-tip-color;
--van-submit-bar-tip-background-color: @submit-bar-tip-background-color;
--van-submit-bar-tip-icon-size: @submit-bar-tip-icon-size;
--van-submit-bar-button-height: @submit-bar-button-height;
--van-submit-bar-padding: @submit-bar-padding;
--van-submit-bar-price-font-size: @submit-bar-price-font-size;
--van-submit-bar-price-integer-font-size: @submit-bar-price-integer-font-size;
--van-submit-bar-price-font-family: @submit-bar-price-font-family;
}
.van-submit-bar {
position: fixed;
bottom: 0;
left: 0;
z-index: @submit-bar-z-index;
z-index: var(--van-submit-bar-z-index);
width: 100%;
background-color: @submit-bar-background-color;
background-color: var(--van-submit-bar-background-color);
user-select: none;
.safe-area-inset-bottom();
&__tip {
padding: @submit-bar-tip-padding;
color: @submit-bar-tip-color;
font-size: @submit-bar-tip-font-size;
line-height: @submit-bar-tip-line-height;
background-color: @submit-bar-tip-background-color;
padding: var(--van-submit-bar-tip-padding);
color: var(--van-submit-bar-tip-color);
font-size: var(--van-submit-bar-tip-font-size);
line-height: var(--van-submit-bar-tip-line-height);
background-color: var(--van-submit-bar-tip-background-color);
}
&__tip-icon {
min-width: @submit-bar-tip-icon-size * 1.5;
font-size: @submit-bar-tip-icon-size;
min-width: calc(var(--van-submit-bar-tip-icon-size) * 1.5);
font-size: var(--van-submit-bar-tip-icon-size);
vertical-align: middle;
}
@ -33,15 +56,15 @@
display: flex;
align-items: center;
justify-content: flex-end;
height: @submit-bar-height;
padding: @submit-bar-padding;
font-size: @submit-bar-text-font-size;
height: var(--van-submit-bar-height);
padding: var(--van-submit-bar-padding);
font-size: var(--van-submit-bar-text-font-size);
}
&__text {
flex: 1;
padding-right: @padding-sm;
color: @submit-bar-text-color;
color: var(--van-submit-bar-text-color);
text-align: right;
span {
@ -55,19 +78,19 @@
}
&__price {
color: @submit-bar-price-color;
color: var(--van-submit-bar-price-color);
font-weight: @font-weight-bold;
font-size: @submit-bar-price-font-size;
font-size: var(--van-submit-bar-price-font-size);
&-integer {
font-size: @submit-bar-price-integer-font-size;
font-family: @submit-bar-price-font-family;
font-size: var(--van-submit-bar-price-integer-font-size);
font-family: var(--van-submit-bar-price-font-family);
}
}
&__button {
width: @submit-bar-button-width;
height: @submit-bar-button-height;
width: var(--van-submit-bar-button-width);
height: var(--van-submit-bar-button-height);
font-weight: @font-weight-bold;
border: none;

2
src/swipe-item/index.less
View File

@ -1,5 +1,3 @@
@import './var.less';
.van-swipe-item {
position: relative;
flex-shrink: 0;

1
src/swipe-item/var.less
View File

@ -1 +0,0 @@
@import '../style/var.less';

29
src/swipe/index.less
View File

@ -1,5 +1,14 @@
@import './var.less';
:root {
--van-swipe-indicator-size: @swipe-indicator-size;
--van-swipe-indicator-margin: @swipe-indicator-margin;
--van-swipe-indicator-active-opacity: @swipe-indicator-active-opacity;
--van-swipe-indicator-inactive-opacity: @swipe-indicator-inactive-opacity;
--van-swipe-indicator-active-background-color: @swipe-indicator-active-background-color;
--van-swipe-indicator-inactive-background-color: @swipe-indicator-inactive-background-color;
}
.van-swipe {
position: relative;
overflow: hidden;
@ -17,7 +26,7 @@
&__indicators {
position: absolute;
bottom: @swipe-indicator-margin;
bottom: var(--van-swipe-indicator-margin);
left: 50%;
display: flex;
transform: translateX(-50%);
@ -25,32 +34,32 @@
&--vertical {
top: 50%;
bottom: auto;
left: @swipe-indicator-margin;
left: var(--van-swipe-indicator-margin);
flex-direction: column;
transform: translateY(-50%);
.van-swipe__indicator:not(:last-child) {
margin-bottom: @swipe-indicator-size;
margin-bottom: var(--van-swipe-indicator-size);
}
}
}
&__indicator {
width: @swipe-indicator-size;
height: @swipe-indicator-size;
background-color: @swipe-indicator-inactive-background-color;
width: var(--van-swipe-indicator-size);
height: var(--van-swipe-indicator-size);
background-color: var(--van-swipe-indicator-inactive-background-color);
border-radius: 100%;
opacity: @swipe-indicator-inactive-opacity;
opacity: var(--van-swipe-indicator-inactive-opacity);
transition: opacity @animation-duration-fast,
background-color @animation-duration-fast;
&:not(:last-child) {
margin-right: @swipe-indicator-size;
margin-right: var(--van-swipe-indicator-size);
}
&--active {
background-color: @swipe-indicator-active-background-color;
opacity: @swipe-indicator-active-opacity;
background-color: var(--van-swipe-indicator-active-background-color);
opacity: var(--van-swipe-indicator-active-opacity);
}
}
}

48
src/switch/index.less
View File

@ -1,28 +1,42 @@
@import './var.less';
:root {
--van-switch-size: @switch-size;
--van-switch-width: @switch-width;
--van-switch-height: @switch-height;
--van-switch-node-size: @switch-node-size;
--van-switch-node-background-color: @switch-node-background-color;
--van-switch-node-box-shadow: @switch-node-box-shadow;
--van-switch-background-color: @switch-background-color;
--van-switch-on-background-color: @switch-on-background-color;
--van-switch-transition-duration: @switch-transition-duration;
--van-switch-disabled-opacity: @switch-disabled-opacity;
--van-switch-border: @switch-border;
}
.van-switch {
position: relative;
display: inline-block;
box-sizing: content-box;
width: @switch-width;
height: @switch-height;
font-size: @switch-size;
background-color: @switch-background-color;
border: @switch-border;
border-radius: @switch-node-size;
width: var(--van-switch-width);
height: var(--van-switch-height);
font-size: var(--van-switch-size);
background-color: var(--van-switch-background-color);
border: var(--van-switch-border);
border-radius: var(--van-switch-node-size);
cursor: pointer;
transition: background-color @switch-transition-duration;
transition: background-color var(--van-switch-transition-duration);
&__node {
position: absolute;
top: 0;
left: 0;
width: @switch-node-size;
height: @switch-node-size;
background-color: @switch-node-background-color;
width: var(--van-switch-node-size);
height: var(--van-switch-node-size);
background-color: var(--van-switch-node-background-color);
border-radius: 100%;
box-shadow: @switch-node-box-shadow;
transition: transform @switch-transition-duration
box-shadow: var(--van-switch-node-box-shadow);
transition: transform var(--van-switch-transition-duration)
cubic-bezier(0.3, 1.05, 0.4, 1.05);
}
@ -35,20 +49,22 @@
}
&--on {
background-color: @switch-on-background-color;
background-color: var(--van-switch-on-background-color);
.van-switch__node {
transform: translateX(@switch-width - @switch-node-size);
transform: translateX(
calc(var(--van-switch-width) - var(--van-switch-node-size))
);
}
.van-switch__loading {
color: @switch-on-background-color;
color: var(--van-switch-on-background-color);
}
}
&--disabled {
cursor: not-allowed;
opacity: @switch-disabled-opacity;
opacity: var(--van-switch-disabled-opacity);
}
&--loading {

24
src/tabbar-item/index.less
View File

@ -1,19 +1,29 @@
@import './var.less';
:root {
--van-tabbar-item-font-size: @tabbar-item-font-size;
--van-tabbar-item-text-color: @tabbar-item-text-color;
--van-tabbar-item-active-color: @tabbar-item-active-color;
--van-tabbar-item-active-background-color: @tabbar-item-active-background-color;
--van-tabbar-item-line-height: @tabbar-item-line-height;
--van-tabbar-item-icon-size: @tabbar-item-icon-size;
--van-tabbar-item-margin-bottom: @tabbar-item-margin-bottom;
}
.van-tabbar-item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
color: @tabbar-item-text-color;
font-size: @tabbar-item-font-size;
line-height: @tabbar-item-line-height;
color: var(--van-tabbar-item-text-color);
font-size: var(--van-tabbar-item-font-size);
line-height: var(--van-tabbar-item-line-height);
cursor: pointer;
&__icon {
margin-bottom: @tabbar-item-margin-bottom;
font-size: @tabbar-item-icon-size;
margin-bottom: var(--van-tabbar-item-margin-bottom);
font-size: var(--van-tabbar-item-icon-size);
.van-icon {
display: block;
@ -26,8 +36,8 @@
}
&--active {
color: @tabbar-item-active-color;
background-color: @tabbar-item-active-background-color;
color: var(--van-tabbar-item-active-color);
background-color: var(--van-tabbar-item-active-background-color);
}
.van-badge {

12
src/tabbar/index.less
View File

@ -1,13 +1,19 @@
@import './var.less';
@import '../style/mixins/safe-area.less';
:root {
--van-tabbar-height: @tabbar-height;
--van-tabbar-z-index: @tabbar-z-index;
--van-tabbar-background-color: @tabbar-background-color;
}
.van-tabbar {
z-index: @tabbar-z-index;
z-index: var(--van-tabbar-z-index);
display: flex;
box-sizing: content-box;
width: 100%;
height: @tabbar-height;
background-color: @tabbar-background-color;
height: var(--van-tabbar-height);
background-color: var(--van-tabbar-background-color);
.safe-area-inset-bottom();
&--fixed {

51
src/tabs/index.less
View File

@ -1,5 +1,20 @@
@import './var.less';
:root {
--van-tab-text-color: @tab-text-color;
--van-tab-active-text-color: @tab-active-text-color;
--van-tab-disabled-text-color: @tab-disabled-text-color;
--van-tab-font-size: @tab-font-size;
--van-tab-line-height: @tab-line-height;
--van-tabs-default-color: @tabs-default-color;
--van-tabs-line-height: @tabs-line-height;
--van-tabs-card-height: @tabs-card-height;
--van-tabs-nav-background-color: @tabs-nav-background-color;
--van-tabs-bottom-bar-width: @tabs-bottom-bar-width;
--van-tabs-bottom-bar-height: @tabs-bottom-bar-height;
--van-tabs-bottom-bar-color: @tabs-bottom-bar-color;
}
.van-tab {
position: relative;
display: flex;
@ -8,18 +23,18 @@
justify-content: center;
box-sizing: border-box;
padding: 0 @padding-base;
color: @tab-text-color;
font-size: @tab-font-size;
line-height: @tab-line-height;
color: var(--van-tab-text-color);
font-size: var(--van-tab-font-size);
line-height: var(--van-tab-line-height);
cursor: pointer;
&--active {
color: @tab-active-text-color;
color: var(--van-tab-active-text-color);
font-weight: @font-weight-bold;
}
&--disabled {
color: @tab-disabled-text-color;
color: var(--van-tab-disabled-text-color);
cursor: not-allowed;
}
@ -69,7 +84,7 @@
&__nav {
position: relative;
display: flex;
background-color: @tabs-nav-background-color;
background-color: var(--van-tabs-nav-background-color);
user-select: none;
&--line {
@ -85,14 +100,14 @@
&--card {
box-sizing: border-box;
height: @tabs-card-height;
height: var(--van-tabs-card-height);
margin: 0 @padding-md;
border: @border-width-base solid @tabs-default-color;
border: @border-width-base solid var(--van-tabs-default-color);
border-radius: @border-radius-sm;
.van-tab {
color: @tabs-default-color;
border-right: @border-width-base solid @tabs-default-color;
color: var(--van-tabs-default-color);
border-right: @border-width-base solid var(--van-tabs-default-color);
&:last-child {
border-right: none;
@ -100,11 +115,11 @@
&.van-tab--active {
color: @white;
background-color: @tabs-default-color;
background-color: var(--van-tabs-default-color);
}
&--disabled {
color: @tab-disabled-text-color;
color: var(--van-tab-disabled-text-color);
}
}
}
@ -115,10 +130,10 @@
bottom: 15px;
left: 0;
z-index: 1;
width: @tabs-bottom-bar-width;
height: @tabs-bottom-bar-height;
background-color: @tabs-bottom-bar-color;
border-radius: @tabs-bottom-bar-height;
width: var(--van-tabs-bottom-bar-width);
height: var(--van-tabs-bottom-bar-height);
background-color: var(--van-tabs-bottom-bar-color);
border-radius: var(--van-tabs-bottom-bar-height);
}
&__track {
@ -137,13 +152,13 @@
&--line {
.van-tabs__wrap {
height: @tabs-line-height;
height: var(--van-tabs-line-height);
}
}
&--card {
> .van-tabs__wrap {
height: @tabs-card-height;
height: var(--van-tabs-card-height);
}
}
}

64
src/tag/index.less
View File

@ -1,57 +1,76 @@
@import './var.less';
:root {
--van-tag-padding: @tag-padding;
--van-tag-text-color: @tag-text-color;
--van-tag-font-size: @tag-font-size;
--van-tag-border-radius: @tag-border-radius;
--van-tag-line-height: @tag-line-height;
--van-tag-medium-padding: @tag-medium-padding;
--van-tag-large-padding: @tag-large-padding;
--van-tag-large-border-radius: @tag-large-border-radius;
--van-tag-large-font-size: @tag-large-font-size;
--van-tag-round-border-radius: @tag-round-border-radius;
--van-tag-danger-color: @tag-danger-color;
--van-tag-primary-color: @tag-primary-color;
--van-tag-success-color: @tag-success-color;
--van-tag-warning-color: @tag-warning-color;
--van-tag-default-color: @tag-default-color;
--van-tag-plain-background-color: @tag-plain-background-color;
}
.van-tag {
position: relative;
display: inline-flex;
align-items: center;
padding: @tag-padding;
color: @tag-text-color;
font-size: @tag-font-size;
line-height: @tag-line-height;
border-radius: @tag-border-radius;
padding: var(--van-tag-padding);
color: var(--van-tag-text-color);
font-size: var(--van-tag-font-size);
line-height: var(--van-tag-line-height);
border-radius: var(--van-tag-border-radius);
&--default {
background-color: @tag-default-color;
background-color: var(--van-tag-default-color);
&.van-tag--plain {
color: @tag-default-color;
color: var(--van-tag-default-color);
}
}
&--danger {
background-color: @tag-danger-color;
background-color: var(--van-tag-danger-color);
&.van-tag--plain {
color: @tag-danger-color;
color: var(--van-tag-danger-color);
}
}
&--primary {
background-color: @tag-primary-color;
background-color: var(--van-tag-primary-color);
&.van-tag--plain {
color: @tag-primary-color;
color: var(--van-tag-primary-color);
}
}
&--success {
background-color: @tag-success-color;
background-color: var(--van-tag-success-color);
&.van-tag--plain {
color: @tag-success-color;
color: var(--van-tag-success-color);
}
}
&--warning {
background-color: @tag-warning-color;
background-color: var(--van-tag-warning-color);
&.van-tag--plain {
color: @tag-warning-color;
color: var(--van-tag-warning-color);
}
}
&--plain {
background-color: @tag-plain-background-color;
background-color: var(--van-tag-plain-background-color);
border-color: currentColor;
&::before {
@ -69,17 +88,18 @@
}
&--medium {
padding: @tag-medium-padding;
padding: var(--van-tag-medium-padding);
}
&--large {
padding: @tag-large-padding;
font-size: @tag-large-font-size;
border-radius: @tag-large-border-radius;
padding: var(--van-tag-large-padding);
font-size: var(--van-tag-large-font-size);
border-radius: var(--van-tag-large-border-radius);
}
&--mark {
border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0;
border-radius: 0 var(--van-tag-round-border-radius)
var(--van-tag-round-border-radius) 0;
&::after {
display: block;
@ -89,7 +109,7 @@
}
&--round {
border-radius: @tag-round-border-radius;
border-radius: var(--van-tag-round-border-radius);
}
&__close {

48
src/toast/index.less
View File

@ -1,5 +1,23 @@
@import './var.less';
:root {
--van-toast-max-width: @toast-max-width;
--van-toast-font-size: @toast-font-size;
--van-toast-text-color: @toast-text-color;
--van-toast-loading-icon-color: @toast-loading-icon-color;
--van-toast-line-height: @toast-line-height;
--van-toast-border-radius: @toast-border-radius;
--van-toast-background-color: @toast-background-color;
--van-toast-icon-size: @toast-icon-size;
--van-toast-text-min-width: @toast-text-min-width;
--van-toast-text-padding: @toast-text-padding;
--van-toast-default-padding: @toast-default-padding;
--van-toast-default-width: @toast-default-width;
--van-toast-default-min-height: @toast-default-min-height;
--van-toast-position-top-distance: @toast-position-top-distance;
--van-toast-position-bottom-distance: @toast-position-bottom-distance;
}
.van-toast {
display: flex;
flex-direction: column;
@ -9,20 +27,20 @@
transition: all @animation-duration-fast;
// hack for avoid max-width when use left & fixed
width: @toast-default-width;
max-width: @toast-max-width;
min-height: @toast-default-min-height;
padding: @toast-default-padding;
color: @toast-text-color;
font-size: @toast-font-size;
line-height: @toast-line-height;
width: var(--van-toast-default-width);
max-width: var(--van-toast-max-width);
min-height: var(--van-toast-default-min-height);
padding: var(--van-toast-default-padding);
color: var(--van-toast-text-color);
font-size: var(--van-toast-font-size);
line-height: var(--van-toast-line-height);
// allow newline character
white-space: pre-wrap;
text-align: center;
word-wrap: break-word;
background-color: @toast-background-color;
border-radius: @toast-border-radius;
background-color: var(--van-toast-background-color);
border-radius: var(--van-toast-border-radius);
&--unclickable {
// lock scroll
@ -38,9 +56,9 @@
&--text,
&--html {
width: fit-content;
min-width: @toast-text-min-width;
min-width: var(--van-toast-text-min-width);
min-height: 0;
padding: @toast-text-padding;
padding: var(--van-toast-text-padding);
.van-toast__text {
margin-top: 0;
@ -48,21 +66,21 @@
}
&--top {
top: @toast-position-top-distance;
top: var(--van-toast-position-top-distance);
}
&--bottom {
top: auto;
bottom: @toast-position-bottom-distance;
bottom: var(--van-toast-position-bottom-distance);
}
&__icon {
font-size: @toast-icon-size;
font-size: var(--van-toast-icon-size);
}
&__loading {
padding: @padding-base;
color: @toast-loading-icon-color;
color: var(--van-toast-loading-icon-color);
}
&__text {

27
src/tree-select/index.less
View File

@ -1,26 +1,37 @@
@import './var.less';
:root {
--van-tree-select-font-size: @tree-select-font-size;
--van-tree-select-nav-background-color: @tree-select-nav-background-color;
--van-tree-select-content-background-color: @tree-select-content-background-color;
--van-tree-select-nav-item-padding: @tree-select-nav-item-padding;
--van-tree-select-item-height: @tree-select-item-height;
--van-tree-select-item-active-color: @tree-select-item-active-color;
--van-tree-select-item-disabled-color: @tree-select-item-disabled-color;
--van-tree-select-item-selected-size: @tree-select-item-selected-size;
}
.van-tree-select {
position: relative;
display: flex;
font-size: @tree-select-font-size;
font-size: var(--van-tree-select-font-size);
user-select: none;
&__nav {
flex: 1;
overflow-y: auto;
background-color: @tree-select-nav-background-color;
background-color: var(--van-tree-select-nav-background-color);
-webkit-overflow-scrolling: touch;
&-item {
padding: @tree-select-nav-item-padding;
padding: var(--van-tree-select-nav-item-padding);
}
}
&__content {
flex: 2;
overflow-y: auto;
background-color: @tree-select-content-background-color;
background-color: var(--van-tree-select-content-background-color);
-webkit-overflow-scrolling: touch;
}
@ -28,11 +39,11 @@
position: relative;
padding: 0 32px 0 @padding-md;
font-weight: @font-weight-bold;
line-height: @tree-select-item-height;
line-height: var(--van-tree-select-item-height);
cursor: pointer;
&--active {
color: @tree-select-item-active-color;
color: var(--van-tree-select-item-active-color);
}
&:active {
@ -40,7 +51,7 @@
}
&--disabled {
color: @tree-select-item-disabled-color;
color: var(--van-tree-select-item-disabled-color);
cursor: not-allowed;
&:active {
@ -54,6 +65,6 @@
top: 50%;
right: @padding-md;
margin-top: -@padding-xs;
font-size: @tree-select-item-selected-size;
font-size: var(--van-tree-select-item-selected-size);
}
}

92
src/uploader/index.less
View File

@ -1,5 +1,33 @@
@import './var.less';
:root {
--van-uploader-size: @uploader-size;
--van-uploader-icon-size: @uploader-icon-size;
--van-uploader-icon-color: @uploader-icon-color;
--van-uploader-text-color: @uploader-text-color;
--van-uploader-text-font-size: @uploader-text-font-size;
--van-uploader-upload-background-color: @uploader-upload-background-color;
--van-uploader-upload-active-color: @uploader-upload-active-color;
--van-uploader-delete-color: @uploader-delete-color;
--van-uploader-delete-icon-size: @uploader-delete-icon-size;
--van-uploader-delete-background-color: @uploader-delete-background-color;
--van-uploader-file-background-color: @uploader-file-background-color;
--van-uploader-file-icon-size: @uploader-file-icon-size;
--van-uploader-file-icon-color: @uploader-file-icon-color;
--van-uploader-file-name-padding: @uploader-file-name-padding;
--van-uploader-file-name-margin-top: @uploader-file-name-margin-top;
--van-uploader-file-name-font-size: @uploader-file-name-font-size;
--van-uploader-file-name-text-color: @uploader-file-name-text-color;
--van-uploader-mask-text-color: @uploader-mask-text-color;
--van-uploader-mask-background-color: @uploader-mask-background-color;
--van-uploader-mask-icon-size: @uploader-mask-icon-size;
--van-uploader-mask-message-font-size: @uploader-mask-message-font-size;
--van-uploader-mask-message-line-height: @uploader-mask-message-line-height;
--van-uploader-loading-icon-size: @uploader-loading-icon-size;
--van-uploader-loading-icon-color: @uploader-loading-icon-color;
--van-uploader-disabled-opacity: @uploader-disabled-opacity;
}
.van-uploader {
position: relative;
display: inline-block;
@ -9,7 +37,7 @@
flex-wrap: wrap;
&--disabled {
opacity: @uploader-disabled-opacity;
opacity: var(--van-uploader-disabled-opacity);
}
}
@ -39,24 +67,24 @@
align-items: center;
justify-content: center;
box-sizing: border-box;
width: @uploader-size;
height: @uploader-size;
width: var(--van-uploader-size);
height: var(--van-uploader-size);
margin: 0 @padding-xs @padding-xs 0;
background-color: @uploader-upload-background-color;
background-color: var(--van-uploader-upload-background-color);
&:active {
background-color: @uploader-upload-active-color;
background-color: var(--van-uploader-upload-active-color);
}
&-icon {
color: @uploader-icon-color;
font-size: @uploader-icon-size;
color: var(--van-uploader-icon-color);
font-size: var(--van-uploader-icon-size);
}
&-text {
margin-top: @padding-xs;
color: @uploader-text-color;
font-size: @uploader-text-font-size;
color: var(--van-uploader-text-color);
font-size: var(--van-uploader-text-font-size);
}
}
@ -67,8 +95,8 @@
&-image {
display: block;
width: @uploader-size;
height: @uploader-size;
width: var(--van-uploader-size);
height: var(--van-uploader-size);
overflow: hidden;
}
@ -76,9 +104,9 @@
position: absolute;
top: 0;
right: 0;
width: @uploader-delete-icon-size;
height: @uploader-delete-icon-size;
background-color: @uploader-delete-background-color;
width: var(--van-uploader-delete-icon-size);
height: var(--van-uploader-delete-icon-size);
background-color: var(--van-uploader-delete-background-color);
border-radius: 0 0 0 12px;
&-icon {
@ -86,7 +114,7 @@
top: -2px;
right: -2px;
color: #fff;
color: @uploader-delete-color;
color: var(--van-uploader-delete-color);
font-size: 16px;
transform: scale(0.5);
}
@ -111,25 +139,25 @@
flex-direction: column;
align-items: center;
justify-content: center;
color: @uploader-mask-text-color;
background-color: @uploader-mask-background-color;
color: var(--van-uploader-mask-text-color);
background-color: var(--van-uploader-mask-background-color);
&-icon {
font-size: @uploader-mask-icon-size;
font-size: var(--van-uploader-mask-icon-size);
}
&-message {
margin-top: 6px;
padding: 0 @padding-base;
font-size: @uploader-mask-message-font-size;
line-height: @uploader-mask-message-line-height;
font-size: var(--van-uploader-mask-message-font-size);
line-height: var(--van-uploader-mask-message-line-height);
}
}
&__loading {
width: @uploader-loading-icon-size;
height: @uploader-loading-icon-size;
color: @uploader-loading-icon-color;
width: var(--van-uploader-loading-icon-size);
height: var(--van-uploader-loading-icon-size);
color: var(--van-uploader-loading-icon-color);
}
&__file {
@ -137,22 +165,22 @@
flex-direction: column;
align-items: center;
justify-content: center;
width: @uploader-size;
height: @uploader-size;
background-color: @uploader-file-background-color;
width: var(--van-uploader-size);
height: var(--van-uploader-size);
background-color: var(--van-uploader-file-background-color);
&-icon {
color: @uploader-file-icon-color;
font-size: @uploader-file-icon-size;
color: var(--van-uploader-file-icon-color);
font-size: var(--van-uploader-file-icon-size);
}
&-name {
box-sizing: border-box;
width: 100%;
margin-top: @uploader-file-name-margin-top;
padding: @uploader-file-name-padding;
color: @uploader-file-name-text-color;
font-size: @uploader-file-name-font-size;
margin-top: var(--van-uploader-file-name-margin-top);
padding: var(--van-uploader-file-name-padding);
color: var(--van-uploader-file-name-text-color);
font-size: var(--van-uploader-file-name-font-size);
text-align: center;
}
}