feat(module:theme): add scrollbar style service of div (#267)

ng-alain · Nov 8, 2018 · 161d328 · 161d328
1 parent 9cd3671
commit 161d328
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 13 deletions.
diff --git a/packages/theme/docs/tools.en-US.md b/packages/theme/docs/tools.en-US.md
@@ -320,6 +320,7 @@ DEMO:
 | `point` | `cursor: pointer` |
 | `no-resize` | Setting does not allow adjustment elements |
 | `bg-center` | Background image is vertically centered |
+| `scrollbar` | Custom scrollbar for a div |
 
 ## Widgets
 

diff --git a/packages/theme/docs/tools.zh-CN.md b/packages/theme/docs/tools.zh-CN.md
@@ -320,6 +320,7 @@ Ant Design 是以 `14px` 为基准字号。
 | `point` | `cursor: pointer` |
 | `no-resize` | 设置不允许调整元素 |
 | `bg-center` | 背景图垂直居中 |
+| `scrollbar` | 美化 div 滚动条 |
 
 ## 小部件
 

diff --git a/packages/theme/styles/app/widgets/scrollbar.less b/packages/theme/styles/app/widgets/scrollbar.less
@@ -1,17 +1,38 @@
-.scrollbar-mixin(@enabled) when(@enabled=true) {
-  body::-webkit-scrollbar {
-    height: @scrollbar-width;
-    width: @scrollbar-height;
+.scrollbar-style-mixin(@element-name) {
+  @{element-name} {
+    &::-webkit-scrollbar {
+      height: @scrollbar-width;
+      width: @scrollbar-height;
+    }
+    &::-webkit-scrollbar-track {
+      -webkit-box-shadow: inset 0 0 @scrollbar-width @scrollbar-track-color;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: @scrollbar-thumb-color;
+      outline: 1px solid #333;
+    }
   }
+}
 
-  body::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 @scrollbar-width @scrollbar-track-color;
-  }
+// body scrollbar
+.scrollbar-mixin(@enabled) when(@enabled=true) {
+  .scrollbar-style-mixin(body);
+}
+.scrollbar-mixin(@scrollbar-enabled);
 
-  body::-webkit-scrollbar-thumb {
-    background-color: @scrollbar-thumb-color;
-    outline: 1px solid #333;
+// 自定义div scrollbar
+@scrollbar-prefix: ~'.scrollbar';
+
+.scrollbar-style-mixin(@scrollbar-prefix);
+@{scrollbar-prefix} {
+  overflow: auto;
+
+  &-x {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  &-y {
+    overflow-x: hidden;
+    overflow-y: auto;
   }
 }
-
-.scrollbar-mixin(@scrollbar-enabled);
diff --git a/scripts/ci/deploy.sh b/scripts/ci/deploy.sh
@@ -81,7 +81,7 @@ travisFoldStart "publish.dist"
     echo "===== Release version does not need to change version ====="
   else
     echo "Replace build version..."
-    sed -i "s/${buildVersion}/${buildVersionName}/g" $(find . -type f -not -path '*\/.*')
+    sed -i "s/${buildVersion}/${buildVersionName}/g" $(find . -type f -not -path '*\/.*' -name 'theme.js' -o -name 'package.json')
   fi
 
   echo "Updated the build version in every file to include the SHA of the latest commit."