Merge pull request #2 from Robertw8/feature/search-filter

add scrollbar restyling to mixins
Robertw8 · Aug 17, 2023 · 7626f31 · 7626f31
2 parents 3b5e299 + 8050e9f
commit 7626f31
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/src/scss/partials/catalog/_search-filter.scss b/src/scss/partials/catalog/_search-filter.scss
@@ -99,6 +99,8 @@
   -moz-transform: scaleY(0);
   -ms-transform: scaleY(0);
   -o-transform: scaleY(0);
+
+  @include scrollbar-primary;
 }
 
 .extra-options-item {

diff --git a/src/scss/utilities/_mixins.scss b/src/scss/utilities/_mixins.scss
@@ -13,3 +13,31 @@
   -ms-border-radius: 15px;
   -o-border-radius: 15px;
 }
+
+@mixin scrollbar-primary {
+  &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $color-black-20;
+      border-radius: 15px;
+      -webkit-border-radius: 15px;
+      -moz-border-radius: 15px;
+      -ms-border-radius: 15px;
+      -o-border-radius: 15px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $color-black-30;
+      border-radius: 15px;
+      -webkit-border-radius: 15px;
+      -moz-border-radius: 15px;
+      -ms-border-radius: 15px;
+      -o-border-radius: 15px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: $color-black-50;
+    }
+}