CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-26 18:10:51 +12:00
Code Issues Projects Releases Wiki Activity

Add new common components for dropdown styles

Browse source
This commit is contained in:
Andrew Kingston 2020-10-26 11:00:34 +00:00
parent 51c11cb537
commit d356f8d609
3 changed files with 72 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/builder/src/components/common/Dropdowns/DropdownContainer.svelte Normal file
View file

@ -0,0 +1,13 @@
<div class="dropdown-container">
<slot />
</div>
<style>
.dropdown-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: var(--spacing-s) 0;
}
</style>

57
packages/builder/src/components/common/Dropdowns/DropdownItem.svelte Normal file
View file

@ -0,0 +1,57 @@
<script>
export let icon
export let title
export let subtitle
</script>
<div class="dropdown-item" on:click>
{#if icon}<i class={icon} />{/if}
<div class="content">
<div class="title">{title}</div>
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
</div>
<style>
.dropdown-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
padding: var(--spacing-s) var(--spacing-l);
}
.dropdown-item:hover {
background-color: var(--grey-2);
cursor: pointer;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.title,
.subtitle {
font-size: var(--font-size-xs);
}
.title {
font-weight: 500;
color: var(--ink);
}
.subtitle {
color: var(--grey-7);
font-weight: 400;
}
i {
font-size: 16px;
color: var(--ink);
}
</style>

2
packages/builder/src/components/common/Dropdowns/index.js Normal file
View file

@ -0,0 +1,2 @@
export { default as DropdownContainer } from "./DropdownContainer.svelte"
export { default as DropdownItem } from "./DropdownItem.svelte"