refactor(time-spinner): [date-picker] roll back some styles for time-…

…spinner (#2383)

* refactor(time-spinner): [date-picker] roll back some styles for time-spinner

* feat(time-spinner): [date-picker] adapt to xdesign theme

* refactor(time-panel): [date-picker,time-select] fallback style

packages/theme/src/time-panel/index.less

@@ -38,24 +38,20 @@
 
   &__header-input {
     margin: var(--tv-TimePanel-header-margin);
-
-    input {
-      height: 28px;
-    }
   }
 
   &__header-title {
     display: flex;
     justify-content: space-around;
     color: var(--tv-TimePanel-header-text-color);
-    margin-top: 8px;
     align-items: center;
   }
 
   &__content {
     font-size: 0;
     position: relative;
     overflow: hidden;
+    padding-bottom: var(--tv-TimePanel-content-padding-bottom);
 
     &:after,
     &:before {

packages/theme/src/time-panel/vars.less

@@ -18,7 +18,7 @@
   // 面板外间距
   --tv-TimePanel-margin: var(--tv-space-sm, 4px) 0;
   // 面板内间距
-  --tv-TimePanel-padding: 0 var(--tv-space-xl, 16px);
+  --tv-TimePanel-padding: 0 14px;
   // 面板背景色
   --tv-TimePanel-bg-color: var(--tv-color-bg-secondary, #ffffff);
   // 面板圆角
@@ -29,9 +29,11 @@
   --tv-TimePanel-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
 
   // 头部外间距
-  --tv-TimePanel-header-margin: var(--tv-space-lg, 12px) 0;
+  --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 24px 2px;
   // 头部文本色
   --tv-TimePanel-header-text-color: var(--tv-color-text-weaken, #808080);
+  // 内容区底部内间距
+  --tv-TimePanel-content-padding-bottom: var(--tv-space-lg, 12px);
 
   // 按钮高度
   --tv-TimePanel-btn-height: var(--tv-size-height-sm, 28px);

packages/theme/src/time-spinner/index.less

@@ -31,7 +31,7 @@
     }
 
     .@{scrollbar-prefix-cls}__wrap:not(.@{scrollbar-prefix-cls}__wrap--hidden-default) {
-      padding-bottom: 12px;
+      padding-bottom: 15px;
     }
 
     &.is-arrow {
@@ -43,10 +43,7 @@
       .@{time-spinner-prefix-cls}__list {
         &::after,
         &::before {
-          content: '';
-          display: block;
-          width: 100%;
-          height: 52px;
+          transform: translateY(-32px);
         }
       }
 
@@ -56,6 +53,11 @@
       }
     }
 
+    .@{time-spinner-prefix-cls}__list {
+      transform: translateY(-6px);
+      margin: var(--tv-TimeSpinner-list-margin);
+    }
+
     &:last-child {
       .@{time-spinner-prefix-cls}__list {
         border-right: 0;
@@ -64,7 +66,8 @@
   }
 
   &__arrow {
-    padding: var(--tv-TimeSpinner-arrow-padding);
+    height: 30px;
+    line-height: 30px;
     position: absolute;
     left: 0;
     width: 100%;
@@ -82,11 +85,11 @@
     }
 
     &.@{css-prefix}icon-arrow-up {
-      top: 12px;
+      top: 10px;
     }
 
     &.@{css-prefix}icon-arrow-down {
-      bottom: 12px;
+      bottom: 10px;
     }
 
     &.@{input-prefix-cls} {
@@ -110,7 +113,7 @@
       content: '';
       display: block;
       width: 100%;
-      height: 4px;
+      height: 80px;
     }
   }
 
@@ -122,6 +125,7 @@
     line-height: var(--tv-TimeSpinner-line-height);
     color: var(--tv-TimeSpinner-text-color);
     border-radius: var(--tv-TimeSpinner-item-border-radius);
+    width: 52px;
 
     &:hover:not(.disabled):not(.active) {
       background: var(--tv-TimeSpinner-item-bg-color-hover);

packages/theme/src/time-spinner/vars.less

@@ -29,8 +29,10 @@
   // 图标尺寸
   --tv-TimeSpinner-icon-size: var(--tv-icon-size, 16px);
 
+  // 列表外间距
+  --tv-TimeSpinner-list-margin: 10px 0 30px 0;
   // 时间项外间距
-  --tv-TimeSpinner-item-margin: var(--tv-space-lg, 12px) var(--tv-space-md, 8px) 0 var(--tv-space-md, 8px);
+  --tv-TimeSpinner-item-margin: var(--tv-space-lg, 12px) 10px 0 10px;
   // 时间项内间距
   --tv-TimeSpinner-item-padding: 3.5px 0;
   // 时间项圆角
@@ -41,7 +43,4 @@
   --tv-TimeSpinner-item-bg-color-active: var(--tv-color-bg-active-emphasize, #deecff);
   // 时间项背景色（禁用）
   --tv-TimeSpinner-item-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
-
-  // 箭头内间距
-  --tv-TimeSpinner-arrow-padding: calc((var(--tv-size-height-sm) - var(--tv-TimeSpinner-icon-size)) / 2) 0;
 }