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

View File

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

View File

@ -346,6 +346,23 @@
@password-input-dot-size: 10px; @password-input-dot-size: 10px;
@password-input-dot-color: @black; @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
@radio-size: 20px; @radio-size: 20px;
@radio-border-color: @gray-light; @radio-border-color: @gray-light;