[improvement] Picker: add less vars

This commit is contained in:
陈嘉涵 2019-05-16 17:42:00 +08:00
parent 4305c5cfdf
commit 399f245460
3 changed files with 31 additions and 14 deletions

View File

@ -3,32 +3,32 @@
.van-picker {
position: relative;
overflow: hidden;
background-color: @white;
background-color: @picker-background-color;
user-select: none;
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
&__toolbar {
display: flex;
justify-content: space-between;
height: 44px;
line-height: 44px;
height: @picker-toolbar-height;
line-height: @picker-toolbar-height;
}
&__cancel,
&__confirm {
padding: 0 15px;
color: @blue;
font-size: 14px;
padding: @picker-action-padding;
color: @picker-action-text-color;
font-size: @picker-action-font-size;
&:active {
background-color: @active-color;
background-color: @picker-action-active-color;
}
}
&__title {
max-width: 50%;
font-weight: 500;
font-size: 16px;
font-size: @picker-title-font-size;
text-align: center;
}
@ -64,20 +64,20 @@
&-column {
flex: 1;
overflow: hidden;
font-size: 16px;
font-size: @picker-option-font-size;
text-align: center;
&__item {
padding: 0 5px;
color: @gray-dark;
color: @picker-option-text-color;
&--selected {
color: @text-color;
color: @picker-option-selected-text-color;
font-weight: 500;
}
&--disabled {
opacity: .3;
opacity: @picker-option-disabled-opacity;
}
}
}

View File

@ -9,8 +9,8 @@
position: fixed;
max-height: 100%;
overflow-y: auto;
background-color: @white;
transition: .3s ease-out;
background-color: @popup-background-color;
transition: @popup-transition;
-webkit-overflow-scrolling: touch;
&--center {

View File

@ -346,6 +346,23 @@
@password-input-dot-size: 10px;
@password-input-dot-color: @black;
// Picker
@picker-background-color: @white;
@picker-toolbar-height: 44px;
@picker-title-font-size: 16px;
@picker-action-padding: 0 15px;
@picker-action-font-size: 14px;
@picker-action-text-color: @blue;
@picker-action-active-color: @active-color;
@picker-option-font-size: 16px;
@picker-option-text-color: @gray-dark;
@picker-option-selected-text-color: @text-color;
@picker-option-disabled-opacity: .3;
// Popup
@popup-background-color: @white;
@popup-transition: .3s ease-out;
// Radio
@radio-size: 20px;
@radio-border-color: @gray-light;