mirror of
https://github.com/revoltchat/revite.git
synced 2024-11-10 01:03:36 -05:00
Fix: Working on scrollable color swatch
This commit is contained in:
parent
92964d74b1
commit
123020d77d
1 changed files with 17 additions and 1 deletions
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue