From 123020d77d242f01aefba8410d371750aeec3e59 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Thu, 8 Jul 2021 13:30:14 +0200
Subject: [PATCH] Fix: Working on scrollable color swatch
---
src/components/ui/ColourSwatches.tsx | 18 +++++++++++++++++-
1 file changed, 17 insertions(+), 1 deletion(-)
diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index a30b242..dda0915 100644
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -34,7 +34,7 @@ const presets = [
];
const SwatchesBase = styled.div`
- gap: 8px;
+ /*gap: 8px;*/
display: flex;
input {
@@ -83,11 +83,21 @@ const Rows = styled.div`
gap: 8px;
display: flex;
flex-direction: column;
+ overflow: auto;
+
> div {
gap: 8px;
display: flex;
flex-direction: row;
+ padding-inline-start: 8px;
+ }
+
+ .overlay {
+ position: absolute;
+ height: 68px;
+ width: 8px;
+ background: linear-gradient(to right, var(--primary-background), transparent);
}
`;
@@ -108,8 +118,11 @@ export default function ColourSwatches({ value, onChange }: Props) {
ref={ref}
onChange={(ev) => onChange(ev.currentTarget.value)}
/>
+
<Rows>
{presets.map((row, i) => (
+ <>
+ <div class="overlay" />
<div key={i}>
{row.map((swatch, i) => (
<Swatch
@@ -121,8 +134,11 @@ export default function ColourSwatches({ value, onChange }: Props) {
</Swatch>
))}
</div>
+ </>
))}
</Rows>
+
+
</SwatchesBase>
);
}
--
GitLab