CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-05 22:40:39 +12:00
Code Issues Projects Releases Wiki Activity

Make settings bar spectrum compatible

Browse source
This commit is contained in:
Andrew Kingston 2021-06-08 08:14:50 +01:00
parent 7c421ab480
commit a88eeb7de3
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/SettingsBar.svelte
View file

@ -82,6 +82,7 @@
prop={setting.key} prop={setting.key}
value={option.value} value={option.value}
icon={option.barIcon} icon={option.barIcon}
title={option.barTitle}
/> />
{/each} {/each}
{/if} {/if}
@ -97,10 +98,10 @@
display: flex; display: flex;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
padding: 6px 12px; padding: 6px 10px;
opacity: 0; opacity: 0;
background-color: white;
flex-direction: row; flex-direction: row;
background: var(--background);
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
@ -115,6 +116,6 @@
flex: 0 0 1px; flex: 0 0 1px;
align-self: stretch; align-self: stretch;
margin: 0 4px; margin: 0 4px;
background-color: #ddd; background-color: var(--spectrum-global-color-gray-300);
} }
</style> </style>

11
packages/client/src/components/SettingsButton.svelte
View file

@ -5,6 +5,7 @@
export let prop export let prop
export let value export let value
export let icon export let icon
export let title
export let rotate = false export let rotate = false
export let bool = false export let bool = false
@ -13,6 +14,7 @@
</script> </script>
<div <div
{title}
class:rotate class:rotate
class:active class:active
on:click={() => { on:click={() => {
@ -28,17 +30,18 @@
<style> <style>
div { div {
padding: 6px; padding: 6px;
border-radius: 4px; border-radius: 2px;
color: #666; color: var(--spectrum-global-color-gray-700);
display: flex; display: flex;
transition: color 0.13s ease-in-out, background-color 0.13s ease-in-out;
} }
div:hover { div:hover {
background-color: #eee; background-color: var(--spectrum-global-color-gray-200);
cursor: pointer; cursor: pointer;
} }
.active, .active,
.active:hover { .active:hover {
background-color: #e5f2ff; background-color: rgba(13, 102, 208, 0.1);
color: var(--spectrum-global-color-blue-600); color: var(--spectrum-global-color-blue-600);
} }
.rotate { .rotate {