CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 21:40:55 +12:00
Code Issues Projects Releases Wiki Activity

Improve style of ModelViewSelect and fix text wrapping

Browse source
This commit is contained in:
Andrew Kingston 2020-10-12 15:13:38 +01:00
parent 01dedf9e91
commit 63c14c11d6
1 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
packages/builder/src/components/userInterface/ModelViewSelect.svelte
View file

@ -49,11 +49,12 @@
}))
</script>
<div class="dropdownbutton" bind:this={anchorRight}>
<Button secondary wide on:click={dropdownRight.show}>
<span>{value.label ? value.label : 'Model / View'}</span>
<Icon name="arrowdown" />
</Button>
<div
class="dropdownbutton"
bind:this={anchorRight}
on:click={dropdownRight.show}>
<span>{value.label ? value.label : 'Model / View'}</span>
<Icon name="arrowdown" />
</div>
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
<div class="dropdown">
@ -100,8 +101,33 @@
<style>
.dropdownbutton {
width: 100%;
background-color: var(--grey-2);
border: var(--border-transparent);
padding: var(--spacing-m);
border-radius: var(--border-radius-m);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
overflow: hidden;
flex: 1 1 auto;
}
.dropdownbutton:hover {
cursor: pointer;
background-color: var(--grey-3);
}
.dropdownbutton span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 1 1 auto;
text-align: left;
font-size: var(--font-size-xs);
}
.dropdownbutton :global(svg) {
margin: -4px 0;
}
.dropdown {
padding: var(--spacing-m) 0;
z-index: 99999999;