Merge pull request #7 from study-hex/f/todo

chore: Add npm i scrollbar and style
study-hex · Sep 10, 2023 · 44dcd74 · 44dcd74
2 parents 6f67964 + a69a826
commit 44dcd74
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 </head>
 
 <body
-  class="font-noto text-dark bg-primary selection:text-primary selection:bg-dark overflow-y-hidden">
+  class="font-noto text-dark bg-primary selection:text-primary overflow-y-hidden">
   <div id="root"></div>
 
   <script type="module" src="/src/main.tsx"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.15.0",
     "sweetalert2": "^11.7.27",
+    "tailwind-scrollbar": "^3.0.5",
     "vitawind": "^2.0.0",
     "vite": "^2.7.2",
     "yup": "^1.2.0"

diff --git a/src/components/TodoCardBody.tsx b/src/components/TodoCardBody.tsx
@@ -131,8 +131,8 @@ function TodoCardBody(props: ITodoCardBodyProps): React.ReactElement {
   }, [isClickTab, todoData]);
 
   return (
-    <div className="-mt-[2px] flex-1 border-t-[1px] pt-6">
-      <ul className="flex flex-col gap-4 px-4">
+    <div className="-mt-[2px] flex-1 overflow-y-scroll border-t-[1px] pt-6">
+      <ul className="flex h-32 flex-col gap-4 px-4 scrollbar-thin scrollbar-track-light scrollbar-thumb-dark">
         {!filterData.length && (
           <li className="text-center text-xl">
             <p>目前沒有資料 \(^Д^)/</p>

diff --git a/src/index.css b/src/index.css
@@ -12,4 +12,16 @@ input:checked+.custom-check {
 
 input:checked+.custom-check svg {
   @apply block;
+}
+
+::-webkit-scrollbar {
+  width: .5rem;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  @apply bg-dark border border-primary rounded-xl shadow-lg shadow-light;
+
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,9 +12,10 @@ module.exports = {
       },
       backgroundImage: {
         logo: "url('/src/images/logo.svg')",
-        linear: 'linear-gradient(173deg, #FFD370 5.12%, #FFD370 53.33%, #FFD370 53.44%, #FFF 53.45%, #FFF 94.32%)',
+        linear:
+          'linear-gradient(173deg, #FFD370 5.12%, #FFD370 53.33%, #FFD370 53.44%, #FFF 53.45%, #FFF 94.32%)',
       },
     },
   },
-  plugins: [],
+  plugins: [require('tailwind-scrollbar')({ nocompatible: true })],
 };