blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 15:39:15 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Progress、Search: add less vars

Browse Source
This commit is contained in:
陈嘉涵 2019-05-16 17:56:48 +08:00
parent 399f245460
commit aacd168dd6
4 changed files with 72 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/progress/index.less
View File

@ -2,9 +2,9 @@
.van-progress {
position: relative;
height: 4px;
background: @gray-light;
border-radius: 4px;
height: @progress-height;
background: @progress-background-color;
border-radius: @progress-height;
&__portion {
position: absolute;
@ -24,12 +24,12 @@
right: 0;
box-sizing: border-box;
min-width: 2em;
padding: 0 5px;
font-size: 10px;
line-height: 1.6;
padding: @progress-pivot-padding;
font-size: @progress-pivot-font-size;
line-height: @progress-pivot-line-height;
text-align: center;
word-break: keep-all;
background-color: @gray-light;
background-color: @progress-pivot-background-color;
border-radius: 1em;
transform: translate(100%, -50%);
}

10
packages/pull-refresh/index.less
View File

@ -10,14 +10,14 @@
&__head {
position: absolute;
top: -50px;
top: -@pull-refresh-head-height;
left: 0;
width: 100%;
height: 50px;
height: @pull-refresh-head-height;
overflow: hidden;
color: @gray-dark;
font-size: 14px;
line-height: 50px;
color: @pull-refresh-head-text-color;
font-size: @pull-refresh-head-font-size;
line-height: @pull-refresh-head-height;
text-align: center;
}
}

22
packages/search/index.less
View File

@ -4,7 +4,7 @@
display: flex;
align-items: center;
box-sizing: border-box;
padding: 10px 16px;
padding: @search-padding;
&__content {
display: flex;
@ -14,15 +14,15 @@
border-radius: 2px;
&--round {
border-radius: 17px;
border-radius: @search-input-height / 2;
}
}
&__label {
padding: 0 5px;
color: @text-color;
font-size: 14px;
line-height: 34px;
padding: @search-label-padding;
color: @search-label-color;
font-size: @search-label-font-size;
line-height: @search-input-height;
}
.van-cell {
@ -31,7 +31,7 @@
background-color: transparent;
&__left-icon {
color: @gray-dark;
color: @search-left-icon-color;
}
}
@ -49,10 +49,10 @@
}
&__action {
padding: 0 10px;
color: @text-color;
font-size: 14px;
line-height: 34px;
padding: @search-action-padding;
color: @search-action-text-color;
font-size: @search-action-font-size;
line-height: @search-input-height;
&:active {
background-color: @active-color;

76
packages/style/var.less
View File

@ -363,6 +363,19 @@
@popup-background-color: @white;
@popup-transition: .3s ease-out;
// Progress
@progress-height: 4px;
@progress-background-color: @gray-light;
@progress-pivot-padding: 0 5px;
@progress-pivot-font-size: 10px;
@progress-pivot-line-height: 1.6;
@progress-pivot-background-color: @gray-light;
// PullRefresh
@pull-refresh-head-height: 50px;
@pull-refresh-head-font-size: 14px;
@pull-refresh-head-text-color: @gray-dark;
// Radio
@radio-size: 20px;
@radio-border-color: @gray-light;
@ -377,6 +390,18 @@
// Rate
@rate-horizontal-padding: 2px;
// Search
@search-padding: 10px 16px;
@search-background-color: #f7f8fA;
@search-input-height: 34px;
@search-label-padding: 0 5px;
@search-label-color: @text-color;
@search-label-font-size: 14px;
@search-left-icon-color: @gray-dark;
@search-action-padding: 0 10px;
@search-action-text-color: @text-color;
@search-action-font-size: 14px;
// Sidebar
@sidebar-width: 85px;
@ -409,6 +434,30 @@
@slider-button-background-color: @white;
@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
// Stepper
@stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color;
@stepper-button-disabled-color: #f7f8fa;
@stepper-input-disabled-color: @active-color;
@stepper-border-radius: 4px;
// SubmitBar
@submit-bar-height: 50px;
@submit-bar-z-index: 100;
@submit-bar-background-color: @white;
@submit-bar-button-width: 110px;
@submit-bar-price-color: @red;
@submit-bar-price-font-size: 18px;
@submit-bar-currency-font-size: 14px;
@submit-bar-text-color: @text-color;
@submit-bar-text-font-size: 14px;
@submit-bar-tip-padding: 10px;
@submit-bar-tip-font-size: 12px;
@submit-bar-tip-line-height: 1.5;
@submit-bar-tip-color: #f56723;
@submit-bar-tip-background-color: #fff7cc;
@submit-bar-tip-icon-size: 12px;
// Swipe
@swipe-indicator-size: 6px;
@swipe-indicator-margin: 10px;
@ -477,33 +526,6 @@
@toast-position-top-distance: 50px;
@toast-position-bottom-distance: 50px;
// Search
@search-background-color: #f7f8fA;
// Stepper
@stepper-active-color: #e8e8e8;
@stepper-background-color: @active-color;
@stepper-button-disabled-color: #f7f8fa;
@stepper-input-disabled-color: @active-color;
@stepper-border-radius: 4px;
// SubmitBar
@submit-bar-height: 50px;
@submit-bar-z-index: 100;
@submit-bar-background-color: @white;
@submit-bar-button-width: 110px;
@submit-bar-price-color: @red;
@submit-bar-price-font-size: 18px;
@submit-bar-currency-font-size: 14px;
@submit-bar-text-color: @text-color;
@submit-bar-text-font-size: 14px;
@submit-bar-tip-padding: 10px;
@submit-bar-tip-font-size: 12px;
@submit-bar-tip-line-height: 1.5;
@submit-bar-tip-color: #f56723;
@submit-bar-tip-background-color: #fff7cc;
@submit-bar-tip-icon-size: 12px;
// TreeSelect
@tree-select-font-size: 14px;
@tree-select-nav-background-color: @background-color-light;