feat(comp:style): add min scroll and css variable support (#1564)

IDuxFE · May 26, 2023 · d425a6f · d425a6f
1 parent 15be909
commit d425a6f
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 25 deletions.
diff --git a/packages/components/style/mixins/reset.less b/packages/components/style/mixins/reset.less
@@ -28,30 +28,41 @@
 
 .reset-scroll() {
   ::-webkit-scrollbar {
-    width: @scrollbar-width;
-    height: @scrollbar-height;
+    width: var(--ix-scrollbar-width);
+    height: var(--ix-scrollbar-height);
   }
 
   ::-webkit-scrollbar-thumb {
     background-clip: padding-box;
-    background-color: @scrollbar-thumb-background-color;
-    border: @scrollbar-thumb-border solid transparent;
-    border-radius: @scrollbar-thumb-border-radius;
-    box-shadow: @scrollbar-thumb-box-shadow;
+    background-color: var(--ix-scrollbar-thumb-background-color);
+    border: var(--ix-scrollbar-thumb-border-width) solid transparent;
+    border-radius: var(--ix-scrollbar-thumb-border-radius);
+    box-shadow: var(--ix-scrollbar-thumb-box-shadow);
 
     &:hover {
-      background-color: @scrollbar-thumb-hover-background-color;
+      background-color: var(--ix-scrollbar-thumb-background-color-hover);
     }
 
     &:active {
-      background-color: @scrollbar-thumb-active-background-color;
+      background-color: var(--ix-scrollbar-thumb-background-color-active);
     }
   }
 
   ::-webkit-scrollbar-track,
   ::-webkit-scrollbar-corner {
-    background-color: @scrollbar-track-background-color;
-    border-radius: @scrollbar-track-border-radius;
-    box-shadow: @scrollbar-track-box-shadow;
+    background-color: var(--ix-scrollbar-track-background-color);
+    border-radius: var(--ix-scrollbar-track-border-radius);
+    box-shadow: var(--ix-scrollbar-track-box-shadow);
+  }
+
+  .@{idux-prefix}-scroll-min {
+    ::-webkit-scrollbar-thumb {
+      border-width: calc(var(--ix-scrollbar-thumb-border-width) * 2);
+
+      &:hover,
+      &:active {
+        border-width: var(--ix-scrollbar-thumb-border-width);
+      }
+    }
   }
 }
diff --git a/packages/components/style/themes/default.less b/packages/components/style/themes/default.less
@@ -94,6 +94,19 @@
   --ix-spacing-xl: 24px;
   --ix-spacing-2xl: 32px;
 
+  // scroll
+  --ix-scrollbar-width: 8px;
+  --ix-scrollbar-height: 8px;
+  --ix-scrollbar-thumb-background-color: @color-grey-l30;
+  --ix-scrollbar-thumb-background-color-hover: @color-grey-l10;
+  --ix-scrollbar-thumb-background-color-active: @color-grey-d10;
+  --ix-scrollbar-thumb-border-width: 0;
+  --ix-scrollbar-thumb-border-radius: 4px;
+  --ix-scrollbar-thumb-box-shadow: none;
+  --ix-scrollbar-track-background-color: unset;
+  --ix-scrollbar-track-border-radius: 0;
+  --ix-scrollbar-track-box-shadow: unset;
+
   // Motion
   --ix-transition-duration-fast: 0.18s;
   --ix-transition-duration-medium: 0.24s;
@@ -126,6 +139,7 @@
 @border-color-inverse: @color-white;
 @border-color-split: @color-grey-l30;
 
+// 临时兼容，后面需要移除
 // Scrollbar
 @scrollbar-width: 8px;
 @scrollbar-height: 8px;

diff --git a/packages/components/style/themes/seer.less b/packages/components/style/themes/seer.less
@@ -24,6 +24,15 @@
 
   // Font-Size
   --ix-font-size: 12px;
+
+  // Scrollbar
+  --ix-scrollbar-width: 12px;
+  --ix-scrollbar-height: 12px;
+  --ix-scrollbar-thumb-background-color: @color-graphite-l30;
+  --ix-scrollbar-thumb-background-color-hover: @color-graphite-l10;
+  --ix-scrollbar-thumb-background-color-active: @color-graphite-l10;
+  --ix-scrollbar-thumb-border-width: 2px;
+  --ix-scrollbar-thumb-border-radius: 6px;
 }
 
 // 临时兼容，后面需要移除
@@ -39,6 +48,7 @@
 @border-color: @color-graphite-l20;
 @border-color-split: @color-graphite-l30;
 
+// 临时兼容，后面需要移除
 // Scrollbar
 @scrollbar-width: 12px;
 @scrollbar-height: 12px;

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -334,28 +334,28 @@
       position: sticky;
       bottom: 0;
       z-index: 3;
-      background-color: @scrollbar-track-background-color;
-      border-radius: @scrollbar-track-border-radius;
-      box-shadow: @scrollbar-track-box-shadow;
+      background-color: var(--ix-scrollbar-track-background-color);
+      border-radius: var(--ix-scrollbar-track-border-radius);
+      box-shadow: var(--ix-scrollbar-track-box-shadow);
 
       &:hover {
         transform-origin: center bottom;
       }
 
       &-thumb {
-        height: @scrollbar-height;
+        height: var(--ix-scrollbar-height);
         background-clip: padding-box;
-        background-color: @scrollbar-thumb-background-color;
-        border: @scrollbar-thumb-border solid transparent;
-        border-radius: @scrollbar-thumb-border-radius;
-        box-shadow: @scrollbar-thumb-box-shadow;
+        background-color: var(--ix-scrollbar-thumb-background-color);
+        border: var(--ix-scrollbar-thumb-border-width) solid transparent;
+        border-radius: var(--ix-scrollbar-thumb-border-radius);
+        box-shadow: var(--ix-scrollbar-thumb-box-shadow);
 
         &:hover {
-          background-color: @scrollbar-thumb-hover-background-color;
+          background-color: var(--ix-scrollbar-thumb-background-color-hover);
         }
 
         &&-active {
-          background-color: @scrollbar-thumb-active-background-color;
+          background-color: var(--ix-scrollbar-thumb-background-color-active);
         }
       }
     }

diff --git a/packages/pro/search/src/ProSearch.tsx b/packages/pro/search/src/ProSearch.tsx
@@ -217,7 +217,7 @@ export default defineComponent({
 
       const quickSelectOverlayProps = {
         ...commonOverlayProps.value,
-        class: `${mergedPrefixCls.value}-quick-select-overlay`,
+        class: `${mergedPrefixCls.value}-quick-select-overlay ${componentCommon.prefixCls}-scroll-min`,
         style: {
           width: convertCssPixel(elementWidth.value),
         },

diff --git a/packages/pro/search/style/quick-select.less b/packages/pro/search/style/quick-select.less
@@ -3,7 +3,7 @@
 
 .@{pro-search-prefix}-quick-select {
   &-overlay {
-    .overlay()
+    .overlay();
   }
 
   &-panel {
@@ -69,7 +69,7 @@
       height: 100%;
       max-width: calc(100% - 24px);
       color: @color-graphite;
-      .ellipsis()
+      .ellipsis();
     }
     &-search-bar {
       position: absolute;
@@ -136,4 +136,4 @@
       }
     }
   }
-}
+}