MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Styling update to Binding Dropdown 

Spacing improved
New Typography component added
Link pointing to docs added
Item hover improved
Textbox updated
This commit is contained in:
Joe 2020-09-28 10:21:57 +01:00
parent e528d1fc3b
commit bbc87ce6ca
1 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/builder/src/components/userInterface/BindingDropdown.svelte
View File

@ -34,6 +34,7 @@
<div class="container" data-cy="binding-dropdown-modal"> <div class="container" data-cy="binding-dropdown-modal">
<div class="list"> <div class="list">
<Heading extraSmall>Objects</Heading> <Heading extraSmall>Objects</Heading>
<Spacer medium />
{#if context} {#if context}
<Heading extraSmall>Tables</Heading> <Heading extraSmall>Tables</Heading>
<ul> <ul>
@ -59,9 +60,13 @@
the objects on the left, to add them to the textbox. the objects on the left, to add them to the textbox.
</Body> </Body>
<Spacer large /> <Spacer large />
<TextArea bind:value placeholder="" /> <TextArea
thin
bind:value
placeholder="Add text, or lick the objects on the left to add them to the
textbox." />
<div class="controls"> <div class="controls">
<a href="https://docs.budibase.com"> <a href="https://docs.budibase.com/design/binding">
<Body small grey>Learn more about binding</Body> <Body small grey>Learn more about binding</Body>
</a> </a>
<Button on:click={cancel} secondary>Cancel</Button> <Button on:click={cancel} secondary>Cancel</Button>
@ -110,15 +115,16 @@
display: flex; display: flex;
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
color: var(--ink); color: var(--grey-7);
padding: var(--spacing-s) var(--spacing-m); padding: var(--spacing-s) 0;
margin: auto 0px; margin: auto 0px;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
li:hover { li:hover {
background-color: var(--grey-2); color: var(--ink);
font-weight: 500;
} }
li:active { li:active {