CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-07 15:25:52 +12:00
Code Issues Projects Releases Wiki Activity

Styling update to Binding Dropdown

Browse source 
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 b4dc0708d1
commit b79626450b
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 {