CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 23:35:49 +12:00
Code Issues Projects Releases Wiki Activity

Allow color picker to have spectrum theme overridden

Browse source
This commit is contained in:
Andrew Kingston 2021-06-29 08:20:34 +01:00
parent 76c42c4094
commit 2aa829b782
1 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
packages/bbui/src/ColorPicker/ColorPicker.svelte
View file

@ -11,8 +11,6 @@
export let size = "M" export let size = "M"
export let spectrumTheme export let spectrumTheme
$: console.log(spectrumTheme)
let open = false let open = false
$: color = value || "transparent" $: color = value || "transparent"
@ -111,12 +109,8 @@
</script> </script>
<div class="container"> <div class="container">
<div class="spectrum-wrapper {spectrumTheme || ''}"> <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
<div <div class="fill {spectrumTheme || ''}" style="background: {color};" />
class="preview size--{size || 'M'}"
style="background: {color};"
on:click={() => (open = true)}
/>
</div> </div>
{#if open} {#if open}
<div <div
@ -129,14 +123,16 @@
<div class="heading">{category.label}</div> <div class="heading">{category.label}</div>
<div class="colors"> <div class="colors">
{#each category.colors as color} {#each category.colors as color}
<div class="spectrum-wrapper {spectrumTheme || ''}">
<div <div
on:click={() => { on:click={() => {
onChange(`var(--spectrum-global-color-${color})`) onChange(`var(--spectrum-global-color-${color})`)
}} }}
class="color" class="color"
style="background: var(--spectrum-global-color-{color}); color: {checkColor};"
title={prettyPrint(color)} title={prettyPrint(color)}
>
<div
class="fill {spectrumTheme || ''}"
style="background: var(--spectrum-global-color-{color}); color: {checkColor};"
> >
{#if value === `var(--spectrum-global-color-${color})`} {#if value === `var(--spectrum-global-color-${color})`}
<Icon name="Checkmark" size="S" /> <Icon name="Checkmark" size="S" />
@ -177,6 +173,7 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 100%; border-radius: 100%;
position: relative;
transition: border-color 130ms ease-in-out; transition: border-color 130ms ease-in-out;
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300); box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
} }
@ -184,6 +181,16 @@
cursor: pointer; cursor: pointer;
box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300); box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
} }
.fill {
width: 100%;
height: 100%;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
place-items: center;
}
.size--S { .size--S {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -226,8 +233,7 @@
width: 16px; width: 16px;
border-radius: 100%; border-radius: 100%;
box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300); box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
display: grid; position: relative;
place-items: center;
} }
.color:hover { .color:hover {
cursor: pointer; cursor: pointer;