feat: Radio, Rate, Search, Sidebar, Slider, Step, Stepper 组件样式调整 (#2260)

packages/common/style/var.less

@@ -315,6 +315,7 @@
 
 // Rate
 @rate-horizontal-padding: 2px;
+@rate-icon-size: 20px;
 
 // Switch
 @switch-width: 2em;
@@ -331,6 +332,56 @@
 
 // Search
 @search-background-color: #f7f8fA;
+@search-padding: 10px @padding-sm;
+@search-input-height: 34px;
+@search-label-padding: 0 5px;
+@search-label-color: @text-color;
+@search-label-font-size: @font-size-md;
+@search-left-icon-color: @gray-dark;
+@search-action-padding: 0 @padding-xs;
+@search-action-text-color: @text-color;
+@search-action-font-size: @font-size-md;
+
+// Sidebar
+@sidebar-width: 85px;
+
+// SidebarItem
+@sidebar-font-size: @font-size-md;
+@sidebar-line-height: 20px;
+@sidebar-text-color: @text-color;
+@sidebar-disabled-text-color: @gray;
+@sidebar-padding: 20px @padding-sm 20px @padding-xs;
+@sidebar-active-color: @active-color;
+@sidebar-background-color: @background-color-light;
+@sidebar-selected-font-weight: @font-weight-bold;
+@sidebar-selected-text-color: @text-color;
+@sidebar-selected-border-color: @red;
+@sidebar-selected-background-color: @white;
+
+// Slider
+@slider-active-background-color: @blue;
+@slider-inactive-background-color: @gray-light;
+@slider-disabled-opacity: @disabled-opacity;
+@slider-button-width: 24px;
+@slider-button-height: 24px;
+@slider-button-border-radius: 50%;
+@slider-button-background-color: @white;
+@slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+
+// Step
+@step-text-color: @gray-dark;
+@step-process-text-color: @text-color;
+@step-font-size: @font-size-md;
+@step-line-color: @border-color;
+@step-finish-line-color: @green;
+@step-finish-text-color: @text-color;
+@step-icon-size: 12px;
+@step-circle-size: 5px;
+@step-circle-color: @gray-dark;
+@step-horizontal-title-font-size: @font-size-sm;
+
+// Steps
+@steps-background-color: @white;
 
 // Sidebar
 @sidebar-width: 85px;
@@ -351,9 +402,16 @@
 // Stepper
 @stepper-active-color: #e8e8e8;
 @stepper-background-color: @active-color;
+@stepper-button-icon-color: @text-color;
 @stepper-button-disabled-color: #f7f8fa;
-@stepper-input-disabled-color: @active-color;
+@stepper-button-disabled-icon-color: @gray;
-@stepper-border-radius: 4px;
+@stepper-input-width: 32px;
+@stepper-input-height: 28px;
+@stepper-input-font-size: @font-size-md;
+@stepper-input-text-color: @text-color;
+@stepper-input-disabled-text-color: @gray;
+@stepper-input-disabled-background-color: @active-color;
+@stepper-border-radius: @border-radius-md;
 
 // SubmitBar
 @submit-bar-height: 50px;

packages/radio/index.less

@@ -20,6 +20,7 @@
     text-align: center;
     transition-property: color, border-color, background-color;
     .theme(border, '1px solid @radio-border-color');
+    .theme(font-size, '@radio-size');
     .theme(transition-duration, '@radio-transition-duration');
 
     &--round {
@@ -46,6 +47,7 @@
     word-wrap: break-word;
     .theme(margin-left, '@radio-label-margin');
     .theme(color, '@radio-label-color');
+    .theme(line-height, '@radio-size');
 
     &--left {
       float: left;

packages/rate/index.less

@@ -13,6 +13,7 @@
   &__icon {
     display: block;
     height: 1em;
+    .theme(font-size, '@rate-icon-size');
 
     &--half {
       position: absolute;

packages/search/index.less

@@ -5,32 +5,32 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  padding: 10px 16px;
+  .theme(padding, '@search-padding');
 
   &__content {
     display: flex;
     flex: 1;
-    padding-left: 10px;
+    .theme(padding-left, '@padding-xs');
-    border-radius: 2px;
+    .theme(border-radius, '@border-radius-sm');
     .theme(background-color, '@search-background-color');
 
     &--round {
-      border-radius: 17px;
+      .theme(border-radius, 'calc(@search-input-height / 2)');
     }
   }
 
   &__label {
-    padding: 0 5px;
+    .theme(padding, '@search-label-padding');
-    font-size: 14px;
+    .theme(font-size, '@search-label-font-size');
-    line-height: 34px;
+    .theme(line-height, '@search-input-height');
-    .theme(color, '@text-color');
+    .theme(color, '@search-label-color');
   }
 
   &__field {
     flex: 1;
 
     &__left-icon {
-      .theme(color, '@gray-dark');
+      .theme(color, '@search-left-icon-color');
     }
   }
 
@@ -39,10 +39,10 @@
   }
 
   &__action {
-    padding: 0 10px;
+    .theme(padding, '@search-action-padding');
-    font-size: 14px;
+    .theme(font-size, '@search-action-font-size');
-    line-height: 34px;
+    .theme(line-height, '@search-input-height');
-    .theme(color, '@text-color');
+    .theme(color, '@search-action-text-color');
 
     &--hover {
       .theme(background-color, '@active-color');

packages/slider/index.less

@@ -3,8 +3,8 @@
 
 .van-slider {
   position: relative;
-  border-radius: 999px;
+  .theme(border-radius, '@border-radius-max');
-  .theme(background-color, '@gray-light');
+  .theme(background-color, '@slider-inactive-background-color');
 
   // use pseudo element to expand click area
   &::before {
@@ -20,15 +20,15 @@
     position: relative;
     border-radius: inherit;
     .theme(transition, 'width @animation-duration-fast');
-    .theme(background-color, '@blue');
+    .theme(background-color, '@slider-active-background-color');
   }
 
   &__button {
-    width: 24px;
+    width: @slider-button-width;
-    height: 24px;
+    height: @slider-button-height;
-    border-radius: 50%;
+    border-radius: @slider-button-border-radius;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    box-shadow: @slider-button-box-shadow;
-    .theme(background-color, '@white');
+    .theme(background-color, '@slider-button-background-color');
 
     &-wrapper {
       position: absolute;
@@ -39,6 +39,6 @@
   }
 
   &--disabled {
-    opacity: 0.3;
+    opacity: @slider-disabled-opacity;
   }
 }

packages/stepper/index.less

@@ -9,13 +9,14 @@
     position: relative;
     display: inline-block;
     box-sizing: border-box;
-    width: 28px;
-    height: 28px;
     margin: 1px;
-    padding: 5px;
     vertical-align: middle;
     border: 0;
     .theme(background-color, '@stepper-background-color');
+    .theme(color, '@stepper-button-icon-color');
+    .theme(width, '@stepper-input-height');
+    .theme(height, '@stepper-input-height');
+    .theme(padding, '@padding-base');
 
     &::before {
       width: 9px;
@@ -44,11 +45,12 @@
     }
 
     &--disabled {
+      .theme(color, '@stepper-button-disabled-icon-color');
       .theme(background-color, '@stepper-button-disabled-color');
 
       &::before,
       &::after {
-        .theme(background-color, '@gray');
+        .theme(background-color, '@stepper-button-disabled-color');
       }
     }
 
@@ -72,8 +74,6 @@
   &__input {
     display: inline-block;
     box-sizing: border-box;
-    width: 32px;
-    height: 28px;
     // 覆盖 common style 中 input 的 min-height: 1.4rem;
     // 避免 button-size 对 input 设置的 height 不生效
     min-height: 0;
@@ -86,12 +86,15 @@
     border-width: 1px 0;
     border-radius: 0;
     -webkit-appearance: none;
-    .theme(color, '@text-color');
+    .theme(font-size, '@stepper-input-font-size');
+    .theme(color, '@stepper-input-text-color');
     .theme(background-color, '@stepper-background-color');
+    .theme(width, '@stepper-input-width');
+    .theme(height, '@stepper-input-height');
 
     &--disabled {
-      .theme(color, '@gray');
+      .theme(color, '@stepper-input-disabled-text-color');
-      .theme(background-color, '@stepper-input-disabled-color');
+      .theme(background-color, '@stepper-input-disabled-background-color');
     }
   }
 }

packages/steps/index.less

@@ -3,7 +3,7 @@
 
 .van-steps {
   overflow: hidden;
-  .theme(background-color, '@white');
+  .theme(background-color, '@steps-background-color');
 
   &--horizontal {
     padding: 10px;
@@ -27,18 +27,18 @@
 .van-step {
   position: relative;
   flex: 1;
-  font-size: 14px;
+  .theme(font-size, '@step-font-size');
-  .theme(color, '@gray-dark');
+  .theme(color, '@step-text-color');
 
   &--finish {
-    .theme(color, '@text-color');
+    .theme(color, '@step-finish-text-color');
   }
 
   &__circle {
-    width: 5px;
-    height: 5px;
     border-radius: 50%;
-    .theme(background-color, '@gray-dark');
+    .theme(width, '@step-circle-size');
+    .theme(height, '@step-circle-size');
+    .theme(background-color, '@step-circle-color');
   }
 
   &--horizontal {
@@ -76,15 +76,15 @@
       position: absolute;
       bottom: 6px;
       z-index: 1;
-      padding: 0 8px;
       transform: translate3d(-50%, 50%, 0);
       .theme(background-color, '@white');
+      .theme(padding, '0 @padding-xs');
     }
 
     .van-step__title {
       display: inline-block;
-      font-size: 12px;
       transform: translate3d(-50%, 0, 0);
+      .theme(font-size, '@step-horizontal-title-font-size');
     }
 
     .van-step__line {
@@ -94,23 +94,22 @@
       left: 0;
       height: 1px;
       transform: translate3d(0, 50%, 0);
-      .theme(background-color, '@border-color');
+      .theme(background-color, '@step-line-color');
     }
 
     &.van-step--process {
-      .theme(color, '@text-color');
+      .theme(color, '@step-process-text-color');
 
       .van-step__icon {
         display: block;
-        font-size: 12px;
         line-height: 1;
+        .theme(font-size, '@step-icon-size');
       }
     }
   }
 
   &--vertical {
     padding: 10px 10px 10px 0;
-    font-size: 14px;
     line-height: 18px;
 
     &::after {
@@ -145,8 +144,8 @@
     }
 
     .van-step__icon {
-      font-size: 12px;
       line-height: 1;
+      .theme(font-size, '@step-icon-size');
     }
 
     .van-step__line {
@@ -154,7 +153,7 @@
       width: 1px;
       height: 100%;
       transform: translate3d(-50%, 0, 0);
-      .theme(background-color, '@border-color');
+      .theme(background-color, '@step-line-color');
     }
   }
 }