CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 05:20:32 +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

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

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