CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-02 18:16:29 +13:00
Code Issues Projects Releases Wiki Activity

rework selector styles

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-06-04 14:34:40 +02:00
parent 01b9e890d5
commit f51c9d693a
1 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
packages/builder/src/components/design/PropertiesPanel/PropertyControls/ModalSelect.svelte
View file

@ -1,6 +1,6 @@
<script>
import { createEventDispatcher } from "svelte"
import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
import { ActionButton, Body, Icon, Modal, ModalContent } from "@budibase/bbui"
const dispatch = createEventDispatcher()
@ -9,14 +9,26 @@
let modal
let layoutMap = {
mainSidebar: "Main with Sidebar",
sidebarMain: "Sidebar with Main",
twoColumns: "Two columns",
threeColumns: "Three columns",
mainSidebar: {
name: "Main with Sidebar",
icon: "ColumnTwoB",
},
sidebarMain: {
name: "Sidebar with Main",
icon: "ColumnTwoC",
},
twoColumns: {
name: "Two columns",
icon: "ColumnTwoA",
},
threeColumns: {
name: "Three columns",
icon: "ViewColumn",
},
}
</script>
<ActionButton on:click={modal.show}>{layoutMap[value]}</ActionButton>
<ActionButton on:click={modal.show}>{layoutMap[value].name}</ActionButton>
<Modal bind:this={modal}>
<ModalContent
@ -31,7 +43,8 @@
on:click={() => (selected = key)}
class="layout"
>
{value}
<Icon color="white" size="L" name={value.icon} />
<Body size="XS">{value.name}</Body>
</button>
{/each}
</div>
@ -39,24 +52,26 @@
</Modal>
<style>
button {
border: none;
}
.container {
display: grid;
grid-gap: 16px;
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
.layout {
color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color));
border: none;
box-sizing: border-box;
display: grid;
place-items: center;
background: rebeccapurple;
color: white;
height: 100px;
background: var(--background-alt);
border-radius: 3px;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
transition: 0.3s all;
border-radius: var(--spacing-s);
}
.selected {
border: 3px dashed red;
background: var(--spectrum-alias-background-color-tertiary);
}
</style>