feat(scroll): add page scroll

components/Atoms/Scroll/Scroll.stories.js

@@ -0,0 +1,7 @@
+import Scroll from './Scroll.twig';
+
+export default {
+  title: 'Design System/Atoms/Scroll'
+};
+
+export const pageScroll = () => Scroll();

components/Atoms/Scroll/Scroll.twig

@@ -0,0 +1,8 @@
+<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>

components/base.css

@@ -1,17 +1,47 @@
-@import "variables.css";
-@import "../assets/css/*.css";
-@import url("./**/*.css");
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap");
+@import 'variables.css';
+@import '../assets/css/*.css';
+@import url('./**/*.css');
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap');
 
 body {
-  font-family: "Poppins", "Roboto", serif;
+  font-family: 'Poppins', 'Roboto', serif;
   color: var(--grey-dark);
 }
 
 svg {
   width: 100%;
   height: 100%;
 }
+
+*::-webkit-scrollbar {
+  width: 7px;
+}
+
+*::-webkit-scrollbar-track {
+  border-radius: 0px;
+  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;
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background-color: #fa533c;
+}