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

style: css vars support gradient background color (#9678)

Browse Source
This commit is contained in:
neverland 2021-10-15 10:27:03 +08:00 committed by GitHub
parent d4fe6cd44e
commit 2ec219ea85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/action-bar-icon/index.less
View File

@ -21,7 +21,7 @@
font-size: var(--van-action-bar-icon-font-size);
line-height: 1;
text-align: center;
background-color: var(--van-action-bar-icon-background-color);
background: var(--van-action-bar-icon-background-color);
cursor: pointer;
&:active {

2
packages/vant/src/action-bar/index.less
View File

@ -14,5 +14,5 @@
align-items: center;
box-sizing: content-box;
height: var(--van-action-bar-height);
background-color: var(--van-action-bar-background-color);
background: var(--van-action-bar-background-color);
}

4
packages/vant/src/action-sheet/index.less
View File

@ -45,7 +45,7 @@
width: 100%;
padding: 14px var(--van-padding-md);
font-size: var(--van-action-sheet-item-font-size);
background-color: var(--van-action-sheet-item-background);
background: var(--van-action-sheet-item-background);
border: none;
cursor: pointer;
@ -91,7 +91,7 @@
&__gap {
display: block;
height: var(--van-action-sheet-cancel-padding-top);
background-color: var(--van-action-sheet-cancel-padding-color);
background: var(--van-action-sheet-cancel-padding-color);
}
&__header {

2
packages/vant/src/address-edit/index.less
View File

@ -36,7 +36,7 @@
&-detail {
&__search-item {
background-color: var(--van-gray-2);
background: var(--van-gray-2);
}
&__keyword {

4
packages/vant/src/badge/index.less
View File

@ -24,7 +24,7 @@
font-family: var(--van-badge-font-family);
line-height: 1.2;
text-align: center;
background-color: var(--van-badge-background-color);
background: var(--van-badge-background-color);
border: var(--van-badge-border-width) solid var(--van-white);
border-radius: var(--van-border-radius-max);
@ -40,7 +40,7 @@
width: var(--van-badge-dot-size);
min-width: 0;
height: var(--van-badge-dot-size);
background-color: var(--van-badge-dot-color);
background: var(--van-badge-dot-color);
border-radius: 100%;
}

6
packages/vant/src/calendar/index.less
View File

@ -32,7 +32,7 @@
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--van-calendar-background-color);
background: var(--van-calendar-background-color);
&__popup {
&.van-popup--top,
@ -132,7 +132,7 @@
&--multiple-middle,
&--multiple-selected {
color: var(--van-calendar-range-edge-color);
background-color: var(--van-calendar-range-edge-background-color);
background: var(--van-calendar-range-edge-background-color);
}
&--start {
@ -194,7 +194,7 @@
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);
background: var(--van-calendar-selected-day-background-color);
border-radius: var(--van-border-radius-md);
}

2
packages/vant/src/card/index.less
View File

@ -25,7 +25,7 @@
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);
background: var(--van-card-background-color);
&:not(:first-child) {
margin-top: var(--van-padding-xs);

2
packages/vant/src/cell-group/index.less
View File

@ -12,7 +12,7 @@
}
.van-cell-group {
background-color: var(--van-cell-group-background-color);
background: var(--van-cell-group-background-color);
&--inset {
margin: var(--van-cell-group-inset-padding);

2
packages/vant/src/cell/index.less
View File

@ -33,7 +33,7 @@
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);
background: var(--van-cell-background-color);
&::after {
.hairline-bottom(var(--van-cell-border-color), var(--van-padding-md), var(--van-padding-md));

2
packages/vant/src/collapse-item/index.less
View File

@ -70,6 +70,6 @@
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);
background: var(--van-collapse-item-content-background-color);
}
}

2
packages/vant/src/coupon-list/index.less
View File

@ -14,7 +14,7 @@
.van-coupon-list {
position: relative;
height: 100%;
background-color: var(--van-coupon-list-background-color);
background: var(--van-coupon-list-background-color);
&__field {
padding: var(--van-coupon-list-field-padding);

2
packages/vant/src/coupon/index.less
View File

@ -23,7 +23,7 @@
.van-coupon {
margin: var(--van-coupon-margin);
overflow: hidden;
background-color: var(--van-coupon-background-color);
background: var(--van-coupon-background-color);
border-radius: var(--van-coupon-border-radius);
box-shadow: var(--van-coupon-box-shadow);

2
packages/vant/src/dialog/index.less
View File

@ -28,7 +28,7 @@
width: var(--van-dialog-width);
overflow: hidden;
font-size: var(--van-dialog-font-size);
background-color: var(--van-dialog-background-color);
background: var(--van-dialog-background-color);
border-radius: var(--van-dialog-border-radius);
backface-visibility: hidden; // avoid blurry text after scale animation
transition: var(--van-dialog-transition);

2
packages/vant/src/dropdown-menu/index.less
View File

@ -22,7 +22,7 @@
position: relative;
display: flex;
height: var(--van-dropdown-menu-height);
background-color: var(--van-dropdown-menu-background-color);
background: var(--van-dropdown-menu-background-color);
box-shadow: var(--van-dropdown-menu-box-shadow);
&--opened {

2
packages/vant/src/grid-item/index.less
View File

@ -39,7 +39,7 @@
box-sizing: border-box;
height: 100%;
padding: var(--van-grid-item-content-padding);
background-color: var(--van-grid-item-content-background-color);
background: var(--van-grid-item-content-background-color);
&::after {
z-index: 1;

2
packages/vant/src/image-preview/index.less
View File

@ -81,7 +81,7 @@
}
&__overlay {
background-color: var(--van-image-preview-overlay-background-color);
background: var(--van-image-preview-overlay-background-color);
}
&__close-icon {

2
packages/vant/src/image/index.less
View File

@ -42,7 +42,7 @@
justify-content: center;
color: var(--van-image-placeholder-text-color);
font-size: var(--van-image-placeholder-font-size);
background-color: var(--van-image-placeholder-background-color);
background: var(--van-image-placeholder-background-color);
}
&__loading-icon {

4
packages/vant/src/index-anchor/index.less
View File

@ -20,7 +20,7 @@
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);
background: var(--van-index-anchor-background-color);
&--sticky {
position: fixed;
@ -28,6 +28,6 @@
right: 0;
left: 0;
color: var(--van-index-anchor-sticky-text-color);
background-color: var(--van-index-anchor-sticky-background-color);
background: var(--van-index-anchor-sticky-background-color);
}
}

2
packages/vant/src/nav-bar/index.less
View File

@ -16,7 +16,7 @@
z-index: var(--van-nav-bar-z-index);
line-height: var(--van-line-height-lg);
text-align: center;
background-color: var(--van-nav-bar-background-color);
background: var(--van-nav-bar-background-color);
user-select: none;
&--fixed {

2
packages/vant/src/notice-bar/index.less
View File

@ -21,7 +21,7 @@
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);
background: var(--van-notice-bar-background-color);
&__left-icon,
&__right-icon {

8
packages/vant/src/notify/index.less
View File

@ -27,18 +27,18 @@
word-wrap: break-word;
&--primary {
background-color: var(--van-notify-primary-background-color);
background: var(--van-notify-primary-background-color);
}
&--success {
background-color: var(--van-notify-success-background-color);
background: var(--van-notify-success-background-color);
}
&--danger {
background-color: var(--van-notify-danger-background-color);
background: var(--van-notify-danger-background-color);
}
&--warning {
background-color: var(--van-notify-warning-background-color);
background: var(--van-notify-warning-background-color);
}
}

6
packages/vant/src/number-keyboard/index.less
View File

@ -25,7 +25,7 @@
z-index: var(--van-number-keyboard-z-index);
width: 100%;
padding-bottom: 22px;
background-color: var(--van-number-keyboard-background-color);
background: var(--van-number-keyboard-background-color);
user-select: none;
&--with-title {
@ -99,7 +99,7 @@
height: var(--van-number-keyboard-key-height);
font-size: var(--van-number-keyboard-key-font-size);
line-height: 1.5;
background-color: var(--van-number-keyboard-key-background-color);
background: var(--van-number-keyboard-key-background-color);
border-radius: var(--van-border-radius-lg);
cursor: pointer;
@ -125,7 +125,7 @@
&--blue {
color: var(--van-number-keyboard-button-text-color);
background-color: var(--van-number-keyboard-button-background-color);
background: var(--van-number-keyboard-button-background-color);
&.van-key--active {
opacity: var(--van-active-opacity);

2
packages/vant/src/overlay/index.less
View File

@ -12,5 +12,5 @@
z-index: var(--van-overlay-z-index);
width: 100%;
height: 100%;
background-color: var(--van-overlay-background-color);
background: var(--van-overlay-background-color);
}

2
packages/vant/src/pagination/index.less
View File

@ -29,7 +29,7 @@
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);
background: var(--van-pagination-background-color);
cursor: pointer;
user-select: none;

6
packages/vant/src/password-input/index.less
View File

@ -58,7 +58,7 @@
color: var(--van-password-input-text-color);
font-size: var(--van-password-input-font-size);
line-height: 1.2;
background-color: var(--van-password-input-background-color);
background: var(--van-password-input-background-color);
}
i {
@ -67,7 +67,7 @@
left: 50%;
width: var(--van-password-input-dot-size);
height: var(--van-password-input-dot-size);
background-color: var(--van-password-input-dot-color);
background: var(--van-password-input-dot-color);
border-radius: 100%;
transform: translate(-50%, -50%);
visibility: hidden;
@ -80,7 +80,7 @@
left: 50%;
width: var(--van-password-input-cursor-width);
height: var(--van-password-input-cursor-height);
background-color: var(--van-password-input-cursor-color);
background: var(--van-password-input-cursor-color);
transform: translate(-50%, -50%);
animation: var(--van-password-input-cursor-animation-duration)
van-cursor-flicker infinite;

4
packages/vant/src/picker/index.less
View File

@ -19,7 +19,7 @@
.van-picker {
position: relative;
background-color: var(--van-picker-background-color);
background: var(--van-picker-background-color);
user-select: none;
&__toolbar {
@ -76,7 +76,7 @@
align-items: center;
justify-content: center;
color: var(--van-picker-loading-icon-color);
background-color: var(--van-picker-loading-mask-color);
background: var(--van-picker-loading-mask-color);
}
&__frame {

4
packages/vant/src/popover/index.less
View File

@ -214,7 +214,7 @@
color: var(--van-popover-light-text-color);
.van-popover__content {
background-color: var(--van-popover-light-background-color);
background: var(--van-popover-light-background-color);
box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
}
@ -242,7 +242,7 @@
color: var(--van-popover-dark-text-color);
.van-popover__content {
background-color: var(--van-popover-dark-background-color);
background: var(--van-popover-dark-background-color);
}
.van-popover__arrow {

2
packages/vant/src/popup/index.less
View File

@ -20,7 +20,7 @@
position: fixed;
max-height: 100%;
overflow-y: auto;
background-color: var(--van-popup-background-color);
background: var(--van-popup-background-color);
transition: var(--van-popup-transition);
-webkit-overflow-scrolling: touch;

2
packages/vant/src/progress/index.less
View File

@ -40,7 +40,7 @@
line-height: var(--van-progress-pivot-line-height);
text-align: center;
word-break: keep-all;
background-color: var(--van-progress-pivot-background-color);
background: var(--van-progress-pivot-background-color);
border-radius: 1em;
transition: all var(--van-animation-duration-base)
var(--van-animation-timing-function-enter);

4
packages/vant/src/search/index.less
View File

@ -19,13 +19,13 @@
align-items: center;
box-sizing: border-box;
padding: var(--van-search-padding);
background-color: var(--van-search-background-color);
background: var(--van-search-background-color);
&__content {
display: flex;
flex: 1;
padding-left: var(--van-padding-sm);
background-color: var(--van-search-content-background-color);
background: var(--van-search-content-background-color);
border-radius: var(--van-border-radius-sm);
&--round {

2
packages/vant/src/sidebar-item/index.less
View File

@ -25,7 +25,7 @@
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);
background: var(--van-sidebar-background-color);
cursor: pointer;
user-select: none;

4
packages/vant/src/skeleton/index.less
View File

@ -19,7 +19,7 @@
width: var(--van-skeleton-avatar-size);
height: var(--van-skeleton-avatar-size);
margin-right: var(--van-padding-md);
background-color: var(--van-skeleton-avatar-background-color);
background: var(--van-skeleton-avatar-background-color);
&--round {
border-radius: var(--van-border-radius-max);
@ -37,7 +37,7 @@
&__row,
&__title {
height: var(--van-skeleton-row-height);
background-color: var(--van-skeleton-row-background-color);
background: var(--van-skeleton-row-background-color);
}
&__title {

6
packages/vant/src/slider/index.less
View File

@ -16,7 +16,7 @@
position: relative;
width: 100%;
height: var(--van-slider-bar-height);
background-color: var(--van-slider-inactive-background-color);
background: var(--van-slider-inactive-background-color);
border-radius: var(--van-border-radius-max);
cursor: pointer;
@ -34,7 +34,7 @@
position: absolute;
width: 100%;
height: 100%;
background-color: var(--van-slider-active-background-color);
background: var(--van-slider-active-background-color);
border-radius: inherit;
transition: all var(--van-animation-duration-fast);
}
@ -42,7 +42,7 @@
&__button {
width: var(--van-slider-button-width);
height: var(--van-slider-button-height);
background-color: var(--van-slider-button-background-color);
background: var(--van-slider-button-background-color);
border-radius: var(--van-slider-button-border-radius);
box-shadow: var(--van-slider-button-box-shadow);

6
packages/vant/src/stepper/index.less
View File

@ -31,7 +31,7 @@
padding: 0;
color: var(--van-stepper-button-icon-color);
vertical-align: middle;
background-color: var(--van-stepper-background-color);
background: var(--van-stepper-background-color);
border: 0;
cursor: pointer;
@ -95,7 +95,7 @@
line-height: var(--van-stepper-input-line-height);
text-align: center;
vertical-align: middle;
background-color: var(--van-stepper-background-color);
background: var(--van-stepper-background-color);
border: 0;
border-width: 1px 0;
border-radius: 0;
@ -137,7 +137,7 @@
.van-stepper__plus {
color: var(--van-white);
background-color: var(--van-stepper-button-round-theme-color);
background: var(--van-stepper-button-round-theme-color);
}
.van-stepper__minus {

4
packages/vant/src/submit-bar/index.less
View File

@ -28,7 +28,7 @@
left: 0;
z-index: var(--van-submit-bar-z-index);
width: 100%;
background-color: var(--van-submit-bar-background-color);
background: var(--van-submit-bar-background-color);
user-select: none;
&__tip {
@ -36,7 +36,7 @@
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);
background: var(--van-submit-bar-tip-background-color);
}
&__tip-icon {

6
packages/vant/src/switch/index.less
View File

@ -21,7 +21,7 @@
width: var(--van-switch-width);
height: var(--van-switch-height);
font-size: var(--van-switch-size);
background-color: var(--van-switch-background-color);
background: var(--van-switch-background-color);
border: var(--van-switch-border);
border-radius: var(--van-switch-node-size);
cursor: pointer;
@ -33,7 +33,7 @@
left: 0;
width: var(--van-switch-node-size);
height: var(--van-switch-node-size);
background-color: var(--van-switch-node-background-color);
background: var(--van-switch-node-background-color);
border-radius: 100%;
box-shadow: var(--van-switch-node-box-shadow);
transition: transform var(--van-switch-transition-duration)
@ -49,7 +49,7 @@
}
&--on {
background-color: var(--van-switch-on-background-color);
background: var(--van-switch-on-background-color);
.van-switch__node {
transform: translateX(

2
packages/vant/src/tabbar/index.less
View File

@ -12,7 +12,7 @@
box-sizing: content-box;
width: 100%;
height: var(--van-tabbar-height);
background-color: var(--van-tabbar-background-color);
background: var(--van-tabbar-background-color);
&--fixed {
position: fixed;

4
packages/vant/src/tabs/index.less
View File

@ -84,7 +84,7 @@
&__nav {
position: relative;
display: flex;
background-color: var(--van-tabs-nav-background-color);
background: var(--van-tabs-nav-background-color);
user-select: none;
&--line {
@ -133,7 +133,7 @@
z-index: 1;
width: var(--van-tabs-bottom-bar-width);
height: var(--van-tabs-bottom-bar-height);
background-color: var(--van-tabs-bottom-bar-color);
background: var(--van-tabs-bottom-bar-color);
border-radius: var(--van-tabs-bottom-bar-height);
}

12
packages/vant/src/tag/index.less
View File

@ -30,7 +30,7 @@
border-radius: var(--van-tag-border-radius);
&--default {
background-color: var(--van-tag-default-color);
background: var(--van-tag-default-color);
&.van-tag--plain {
color: var(--van-tag-default-color);
@ -38,7 +38,7 @@
}
&--danger {
background-color: var(--van-tag-danger-color);
background: var(--van-tag-danger-color);
&.van-tag--plain {
color: var(--van-tag-danger-color);
@ -46,7 +46,7 @@
}
&--primary {
background-color: var(--van-tag-primary-color);
background: var(--van-tag-primary-color);
&.van-tag--plain {
color: var(--van-tag-primary-color);
@ -54,7 +54,7 @@
}
&--success {
background-color: var(--van-tag-success-color);
background: var(--van-tag-success-color);
&.van-tag--plain {
color: var(--van-tag-success-color);
@ -62,7 +62,7 @@
}
&--warning {
background-color: var(--van-tag-warning-color);
background: var(--van-tag-warning-color);
&.van-tag--plain {
color: var(--van-tag-warning-color);
@ -70,7 +70,7 @@
}
&--plain {
background-color: var(--van-tag-plain-background-color);
background: var(--van-tag-plain-background-color);
border-color: currentColor;
&::before {

2
packages/vant/src/toast/index.less
View File

@ -40,7 +40,7 @@
text-align: center;
// https://github.com/youzan/vant/issues/8959
word-break: break-all;
background-color: var(--van-toast-background-color);
background: var(--van-toast-background-color);
border-radius: var(--van-toast-border-radius);
&--unclickable {

4
packages/vant/src/tree-select/index.less
View File

@ -20,7 +20,7 @@
&__nav {
flex: 1;
overflow-y: auto;
background-color: var(--van-tree-select-nav-background-color);
background: var(--van-tree-select-nav-background-color);
-webkit-overflow-scrolling: touch;
&-item {
@ -31,7 +31,7 @@
&__content {
flex: 2;
overflow-y: auto;
background-color: var(--van-tree-select-content-background-color);
background: var(--van-tree-select-content-background-color);
-webkit-overflow-scrolling: touch;
}

8
packages/vant/src/uploader/index.less
View File

@ -70,7 +70,7 @@
width: var(--van-uploader-size);
height: var(--van-uploader-size);
margin: 0 var(--van-padding-xs) var(--van-padding-xs) 0;
background-color: var(--van-uploader-upload-background-color);
background: var(--van-uploader-upload-background-color);
&:active {
background-color: var(--van-uploader-upload-active-color);
@ -110,7 +110,7 @@
right: 0;
width: var(--van-uploader-delete-icon-size);
height: var(--van-uploader-delete-icon-size);
background-color: var(--van-uploader-delete-background-color);
background: var(--van-uploader-delete-background-color);
border-radius: 0 0 0 12px;
&-icon {
@ -143,7 +143,7 @@
align-items: center;
justify-content: center;
color: var(--van-uploader-mask-text-color);
background-color: var(--van-uploader-mask-background-color);
background: var(--van-uploader-mask-background-color);
&-icon {
font-size: var(--van-uploader-mask-icon-size);
@ -170,7 +170,7 @@
justify-content: center;
width: var(--van-uploader-size);
height: var(--van-uploader-size);
background-color: var(--van-uploader-file-background-color);
background: var(--van-uploader-file-background-color);
&-icon {
color: var(--van-uploader-file-icon-color);