Add scroll style

NASA-IMPACT · Oct 11, 2023 · 93fda36 · 93fda36
1 parent 7868db7
commit 93fda36
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/app/scripts/components/common/dropdown-scrollable.tsx b/app/scripts/components/common/dropdown-scrollable.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
-import { glsp } from '@devseed-ui/theme-provider';
+import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import {
   Dropdown,
   DropdownProps,
@@ -16,8 +16,21 @@ const DropdownWithScroll = styled(Dropdown)`
   padding: 0;
   overflow: hidden;
   max-height: 320px;
-  overflow-y: auto;
   overscroll-behavior: none;
+  overflow-y: scroll;
+
+  /* Scroll style firefox */
+  scrollbar-color: ${themeVal('color.base-100')} transparent;
+  
+  /* Scroll style for webkit - chrome, safari */
+  &::-webkit-scrollbar {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${themeVal('color.base-100')};
+    border-radius: ${themeVal('shape.rounded')}
+  }
 
   ${DropTitle} {
     margin: 0;