From 37ea64b1f113598fd82e6fe23d854daf8605dc8d Mon Sep 17 00:00:00 2001 From: Felipe D'Abrantes <felidabrantes@gmail> Date: Fri, 21 Apr 2023 22:32:09 +0100 Subject: [PATCH] Add shadows to the scrollable list --- .../src/components/questions/QuestionList.tsx | 6 +++++- daily-thought-frontend/src/styles/Scrollbox.module.css | 9 +++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 daily-thought-frontend/src/styles/Scrollbox.module.css diff --git a/daily-thought-frontend/src/components/questions/QuestionList.tsx b/daily-thought-frontend/src/components/questions/QuestionList.tsx index 6c74c962..049e02be 100644 --- a/daily-thought-frontend/src/components/questions/QuestionList.tsx +++ b/daily-thought-frontend/src/components/questions/QuestionList.tsx @@ -1,6 +1,7 @@ import { FC } from 'react'; import { QuestionRecord } from '@/hooks/useQuestions'; import { TrashIcon } from '@heroicons/react/24/outline'; +import styles from '../../styles/Scrollbox.module.css'; type QuestionListProps = { questions: QuestionRecord[]; @@ -9,7 +10,10 @@ type QuestionListProps = { const QuestionList: FC<QuestionListProps> = ({ questions }) => ( <ul role="list" - className="flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 " + className={ + 'flex flex-col min-h-min max-w-lg overflow-y-scroll divide-y divide-gray-100 mt-4 ' + + styles['scrollbox-shadows'] + } > {questions.map((question: QuestionRecord) => ( <li diff --git a/daily-thought-frontend/src/styles/Scrollbox.module.css b/daily-thought-frontend/src/styles/Scrollbox.module.css new file mode 100644 index 00000000..26c6b892 --- /dev/null +++ b/daily-thought-frontend/src/styles/Scrollbox.module.css @@ -0,0 +1,9 @@ +.scrollbox-shadows { + background: /* Shadow covers */ + linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */ + radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%; + background-repeat: no-repeat; + background-color: white; + background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; + background-attachment: local, local, scroll, scroll; +} -- GitLab