improve scrollbar styles

KingSora · Jun 21, 2024 · 7305bb4 · 7305bb4
1 parent a0af734
commit 7305bb4
Showing 1 changed file with 50 additions and 36 deletions.
diff --git a/packages/overlayscrollbars/src/styles/themes.scss b/packages/overlayscrollbars/src/styles/themes.scss
@@ -47,48 +47,48 @@
   --os-handle-interactive-area-offset: 0;
 }
 
-.os-scrollbar {
-  .os-scrollbar-track {
-    border: var(--os-track-border);
-    border-radius: var(--os-track-border-radius);
-    background: var(--os-track-bg);
-    transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
-
-    &:hover {
-      border: var(--os-track-border-hover);
-      background: var(--os-track-bg-hover);
-    }
+.os-scrollbar-track {
+  border: var(--os-track-border);
+  border-radius: var(--os-track-border-radius);
+  background: var(--os-track-bg);
+  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
 
-    &:active {
-      border: var(--os-track-border-active);
-      background: var(--os-track-bg-active);
-    }
+  &:hover {
+    border: var(--os-track-border-hover);
+    background: var(--os-track-bg-hover);
   }
-  .os-scrollbar-handle {
-    border: var(--os-handle-border);
-    border-radius: var(--os-handle-border-radius);
-    background: var(--os-handle-bg);
 
-    &:before {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      display: block;
-    }
+  &:active {
+    border: var(--os-track-border-active);
+    background: var(--os-track-bg-active);
+  }
+}
 
-    &:hover {
-      border: var(--os-handle-border-hover);
-      background: var(--os-handle-bg-hover);
-    }
+.os-scrollbar-handle {
+  border: var(--os-handle-border);
+  border-radius: var(--os-handle-border-radius);
+  background: var(--os-handle-bg);
 
-    &:active {
-      border: var(--os-handle-border-active);
-      background: var(--os-handle-bg-active);
-    }
+  &:hover {
+    border: var(--os-handle-border-hover);
+    background: var(--os-handle-bg-hover);
   }
+
+  &:active {
+    border: var(--os-handle-border-active);
+    background: var(--os-handle-bg-active);
+  }
+}
+
+.os-scrollbar-track:before,
+.os-scrollbar-handle:before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: block;
 }
 
 .os-scrollbar-horizontal {
@@ -101,6 +101,13 @@
     right: 0;
   }
 
+  .os-scrollbar-track {
+    &:before {
+      top: calc(var(--os-padding-perpendicular) * -1);
+      bottom: calc(var(--os-padding-perpendicular) * -1);
+    }
+  }
+
   .os-scrollbar-handle {
     min-width: var(--os-handle-min-size);
     max-width: var(--os-handle-max-size);
@@ -131,6 +138,13 @@
   bottom: var(--os-size);
   width: var(--os-size);
 
+  .os-scrollbar-track {
+    &:before {
+      left: calc(var(--os-padding-perpendicular) * -1);
+      right: calc(var(--os-padding-perpendicular) * -1);
+    }
+  }
+
   .os-scrollbar-handle {
     min-height: var(--os-handle-min-size);
     max-height: var(--os-handle-max-size);