feat(scroll): contextual scroll

thelia · Jun 21, 2024 · e1a1635 · e1a1635
1 parent 8b81bb2
commit e1a1635
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/components/Atoms/Scroll/Scroll.stories.js b/components/Atoms/Scroll/Scroll.stories.js
@@ -4,4 +4,4 @@ export default {
   title: 'Design System/Atoms/Scroll'
 };
 
-export const pageScroll = () => Scroll();
+export const base = () => Scroll();
diff --git a/components/Atoms/Scroll/Scroll.twig b/components/Atoms/Scroll/Scroll.twig
@@ -1,8 +1,23 @@
-<h1 class="h1 text-center mb-4">Page Scroll</h1>
+<div class="flex gap-12">
+  <div class="flex grow flex-col gap-4">
+    <h1 class="h1 text-center mb-4">Page Scroll</h1>
 
-<div class="mx-auto w-1/2 max-h-[300px] overflow-y-auto bg-blue-300 p-4">
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
-  <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+    </div>
+  </div>
+
+  <div class="flex grow flex-col gap-4 contextual-scroll">
+    <h1 class="h1 text-center mb-4">Contextual Scroll</h1>
+
+    <div class="mx-auto w-full max-h-[300px] overflow-y-auto bg-blue-300 p-4">
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+      <div class="w-1/2 mb-4 mx-auto h-[100px] bg-vermillon-light"></div>
+    </div>
+  </div>
 </div>
diff --git a/components/base.css b/components/base.css
@@ -25,23 +25,23 @@ svg {
   background-color: #d6d6d6;
 }
 
-*::-webkit-scrollbar-track:hover {
-  background-color: #d6d6d6;
-}
-
-*::-webkit-scrollbar-track:active {
-  background-color: #d6d6d6;
-}
-
 *::-webkit-scrollbar-thumb {
   border-radius: 0px;
   background-color: #fa533c;
 }
 
-*::-webkit-scrollbar-thumb:hover {
-  background-color: #fa533c;
-}
+.contextual-scroll {
+  ::-webkit-scrollbar {
+    width: 7px;
+  }
 
-*::-webkit-scrollbar-thumb:active {
-  background-color: #fa533c;
+  ::-webkit-scrollbar-track {
+    border-radius: 0px;
+    background-color: #d6d6d6;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 0px;
+    background-color: var(--grey-dark);
+  }
 }