feat(scrollbar): more CSS variables to control appearance

nolimits4web · Jan 24, 2023 · cfad536 · cfad536
1 parent 825708b
commit cfad536
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git a/src/modules/scrollbar/scrollbar.less b/src/modules/scrollbar/scrollbar.less
@@ -1,10 +1,14 @@
 :root {
   /*
   --swiper-scrollbar-border-radius: 10px;
-  --swiper-scrollbar-offset: 3px;
+  --swiper-scrollbar-top: auto;
+  --swiper-scrollbar-bottom: 4px;
+  --swiper-scrollbar-left: auto;
+  --swiper-scrollbar-right: 4px;
+  --swiper-scrollbar-sides-offset: 1%;
   --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
   --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
-  --swiper-scrollbar-size: 5px;
+  --swiper-scrollbar-size: 4px;
   */
 }
 .swiper-scrollbar {
@@ -19,20 +23,22 @@
   .swiper-horizontal > &,
   &.swiper-scrollbar-horizontal {
     position: absolute;
-    left: 1%;
-    bottom: var(--swiper-scrollbar-offset, 3px);
+    left: var(--swiper-scrollbar-sides-offset, 1%);
+    bottom: var(--swiper-scrollbar-bottom, 4px);
+    top: var(--swiper-scrollbar-top, auto);
     z-index: 50;
-    height: var(--swiper-scrollbar-size, 5px);
-    width: 98%;
+    height: var(--swiper-scrollbar-size, 4px);
+    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
   }
   .swiper-vertical > &,
   &.swiper-scrollbar-vertical {
     position: absolute;
-    right: var(--swiper-scrollbar-offset, 3px);
-    top: 1%;
+    left: var(--swiper-scrollbar-left, auto);
+    right: var(--swiper-scrollbar-right, 4px);
+    top: var(--swiper-scrollbar-sides-offset, 1%);
     z-index: 50;
-    width: var(--swiper-scrollbar-size, 5px);
-    height: 98%;
+    width: var(--swiper-scrollbar-size, 4px);
+    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
   }
 }
 .swiper-scrollbar-drag {

diff --git a/src/modules/scrollbar/scrollbar.scss b/src/modules/scrollbar/scrollbar.scss
@@ -2,10 +2,14 @@
   :root {
     /*
   --swiper-scrollbar-border-radius: 10px;
-  --swiper-scrollbar-offset: 3px;
+  --swiper-scrollbar-top: auto;
+  --swiper-scrollbar-bottom: 4px;
+  --swiper-scrollbar-left: auto;
+  --swiper-scrollbar-right: 4px;
+  --swiper-scrollbar-sides-offset: 1%;
   --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
   --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
-  --swiper-scrollbar-size: 5px;
+  --swiper-scrollbar-size: 4px;
   */
   }
 }
@@ -21,20 +25,22 @@
   .swiper-horizontal > &,
   &.swiper-scrollbar-horizontal {
     position: absolute;
-    left: 1%;
-    bottom: var(--swiper-scrollbar-offset, 3px);
+    left: var(--swiper-scrollbar-sides-offset, 1%);
+    bottom: var(--swiper-scrollbar-bottom, 4px);
+    top: var(--swiper-scrollbar-top, auto);
     z-index: 50;
-    height: var(--swiper-scrollbar-size, 5px);
-    width: 98%;
+    height: var(--swiper-scrollbar-size, 4px);
+    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
   }
   .swiper-vertical > &,
   &.swiper-scrollbar-vertical {
     position: absolute;
-    right: var(--swiper-scrollbar-offset, 3px);
-    top: 1%;
+    left: var(--swiper-scrollbar-left, auto);
+    right: var(--swiper-scrollbar-right, 4px);
+    top: var(--swiper-scrollbar-sides-offset, 1%);
     z-index: 50;
-    width: var(--swiper-scrollbar-size, 5px);
-    height: 98%;
+    width: var(--swiper-scrollbar-size, 4px);
+    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
   }
 }
 .swiper-scrollbar-drag {