Integrate Changes

Integrate Changes (#421)
Adapcon · May 15, 2024 · 939ec30 · 939ec30
2 parents 2d182ad + 69dd960
commit 939ec30
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-polar-bear",
-  "version": "4.3.5",
+  "version": "4.3.6",
   "author": "adapcon",
   "scripts": {
     "storybook": "start-storybook --quiet -p 6006 -s ./src/static",

diff --git a/src/components/Inputs/MultiSelect/MultiSelect.vue b/src/components/Inputs/MultiSelect/MultiSelect.vue
@@ -386,6 +386,9 @@ export default {
       &::-webkit-scrollbar {
         width: 2px;
       }
+      &:hover::-webkit-scrollbar {
+       width: 8px; 
+      }
       &::-webkit-scrollbar-track {
         background: none;
       }

diff --git a/src/components/Inputs/Select/Select.vue b/src/components/Inputs/Select/Select.vue
@@ -333,6 +333,10 @@ export default {
 
       &::-webkit-scrollbar {
         width: 2px;
+        transition: width 0.3s ease;
+      }
+      &:hover::-webkit-scrollbar {
+       width: 8px; 
       }
       &::-webkit-scrollbar-track {
         background: none;

diff --git a/src/components/index.scss b/src/components/index.scss
@@ -285,12 +285,24 @@
   @include pb-scroll-base;
   &::-webkit-scrollbar-thumb {
     background: var(--color-primary);
+    width: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::-webkit-scrollbar {
+    width: 8px;
   }
 
   &-large {
     @include pb-scroll-large;
     &::-webkit-scrollbar-thumb {
       background: var(--color-primary);
+      width: 8px;
+      transition: width 0.3s ease;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      width: 16px;
     }
   }
 }
@@ -299,12 +311,24 @@
   @include pb-scroll-base;
   &::-webkit-scrollbar-thumb {
     background: var(--color-secondary);
+    width: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    width: 12px;
   }
 
   &-large {
     @include pb-scroll-large;
     &::-webkit-scrollbar-thumb {
       background: var(--color-secondary);
+      width: 8px;
+      transition: width 0.3s ease;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      width: 16px;
     }
   }
 }
@@ -313,16 +337,29 @@
   @include pb-scroll-base;
   &::-webkit-scrollbar-thumb {
     background: var(--color-white);
+    width: 3px;
+    transition: width 0.3s ease;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    width: 12px;
   }
 
   &-large {
     @include pb-scroll-large;
     &::-webkit-scrollbar-thumb {
       background: var(--color-white);
+      width: 8px;
+      transition: width 0.3s ease;
+    }
+
+    &:hover::-webkit-scrollbar-thumb {
+      width: 16px;
     }
   }
 }
 
+
 // PB Typography
 @mixin pb-font-light { font-weight: 300 !important; }
 @mixin pb-font-regular { font-weight: 400 !important; }