Merge pull request #347 from ingokpp/enhancement/#2979-scrollable-tab…

…s-fade

Enhancement/#2979 scrollable tabs fade out effect

development.md

@@ -9,14 +9,20 @@ make sure you are in the supabase-ui folder
 cd supabase-ui
 ```
 
+install dependencies
+
+> :warning: **This project currently won't work using the latest node version. Internally we are using node 17.**
+
+```cli
+npm install
+```
+
 run storybook
 
 ```cli
 npm run storybook
 ```
 
-(you may need to run `npm install` first)
-
 Storybook runs by default on `http://localhost:6006/`
 
 ## Local Development

src/lib/theme/defaultTheme.ts

@@ -388,8 +388,8 @@ export default {
     size: {
       ...default__padding_and_text,
     },
-    scrollable: `overflow-auto whitespace-nowrap`,
-    content: `focus:outline-none focus:ring`,
+    scrollable: `overflow-auto whitespace-nowrap no-scrollbar mask-fadeout-right`,
+    content: `focus:outline-none focus:ring text-scale-900`,
   },
 
   /*

ui.config.js

@@ -300,6 +300,27 @@ const uiConfig = {
           border: '1px solid hsla(0, 0%, 39.2%, 0.2)',
           borderRadius: '3px',
         },
+        '.no-scrollbar': {
+          /* Hide scrollbar for IE, Edge*/
+          '-ms-overflow-style': 'none',
+
+          /* Firefox */
+          'scrollbar-width': 'none', /* Firefox */
+
+          /* Hide scrollbar for Chrome, Safari and Opera */
+          '&::-webkit-scrollbar': {
+            display: 'none'
+          }
+        },
+        /* Add fadeout effect */
+        '.mask-fadeout-right': {
+          '-webkit-mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
+          'mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
+        },
+        '.mask-fadeout-left': {
+          '-webkit-mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
+          'mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
+        },
       })
       addVariant('data-open-parent', '[data-state="open"] &')
       addVariant('data-closed-parent', '[data-state="closed"] &')