CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 12:30:41 +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}
value={option.value}
icon={option.barIcon}
title={option.barTitle}
/>
{/each}
{/if}
@ -97,10 +98,10 @@
display: flex;
position: absolute;
z-index: 999;
padding: 6px 12px;
padding: 6px 10px;
opacity: 0;
background-color: white;
flex-direction: row;
background: var(--background);
justify-content: center;
align-items: center;
border-radius: 4px;
@ -115,6 +116,6 @@
flex: 0 0 1px;
align-self: stretch;
margin: 0 4px;
background-color: #ddd;
background-color: var(--spectrum-global-color-gray-300);
}
</style>

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

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