diff --git a/packages/common/style/var.less b/packages/common/style/var.less index cb7d778b..c6fc507e 100644 --- a/packages/common/style/var.less +++ b/packages/common/style/var.less @@ -269,6 +269,21 @@ @panel-header-value-color: @red; @panel-footer-padding: @padding-xs @padding-md; +// Picker +@picker-background-color: @white; +@picker-toolbar-height: 44px; +@picker-title-font-size: @font-size-lg; +@picker-action-padding: 0 @padding-md; +@picker-action-font-size: @font-size-md; +@picker-action-text-color: @blue; +@picker-action-active-color: @active-color; +@picker-option-font-size: @font-size-lg; +@picker-option-text-color: @black; +@picker-loading-icon-color: @blue; +@picker-loading-mask-color: rgba(255, 255, 255, .9); +@picker-option-disabled-opacity: .3; +@picker-option-selected-text-color: @text-color; + // Popup @popup-background-color: @white; @popup-round-border-radius: 20px; diff --git a/packages/picker-column/index.less b/packages/picker-column/index.less index 9cd07479..797b098f 100644 --- a/packages/picker-column/index.less +++ b/packages/picker-column/index.less @@ -3,20 +3,20 @@ .van-picker-column { overflow: hidden; - font-size: 16px; text-align: center; - .theme(color, '@gray-dark'); + .theme(color, '@picker-option-text-color'); + .theme(font-size, '@picker-option-font-size'); &__item { padding: 0 5px; &--selected { - font-weight: 500; - .theme(color, '@text-color'); + .theme(font-weight, '@font-weight-bold'); + .theme(color, '@picker-option-selected-text-color'); } &--disabled { - opacity: 0.3; + .theme(opacity, '@picker-option-disabled-opacity'); } } } diff --git a/packages/picker/index.less b/packages/picker/index.less index 02d26fd1..f28b5035 100644 --- a/packages/picker/index.less +++ b/packages/picker/index.less @@ -6,31 +6,31 @@ overflow: hidden; -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */ user-select: none; - .theme(background-color, '@white'); + .theme(background-color, '@picker-background-color'); &__toolbar { display: flex; justify-content: space-between; - height: 44px; - line-height: 44px; + .theme(height, '@picker-toolbar-height'); + .theme(line-height, '@picker-toolbar-height'); } &__cancel, &__confirm { - padding: 0 15px; - font-size: 14px; - .theme(color, '@blue'); + .theme(padding, '@picker-action-padding'); + .theme(font-size, '@picker-action-font-size'); + .theme(color, '@picker-action-text-color'); &--hover { - .theme(background-color, '@active-color'); + .theme(background-color, '@picker-action-active-color'); } } &__title { max-width: 50%; - font-weight: 500; - font-size: 16px; text-align: center; + .theme(font-weight, '@font-weight-bold'); + .theme(font-size, '@picker-option-font-size'); } &__columns { @@ -53,7 +53,7 @@ display: flex; align-items: center; justify-content: center; - background-color: rgba(255, 255, 255, 0.9); + .theme(background-color, '@picker-loading-mask-color'); } &__loading .van-loading,