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

Merge pull request #258 from Budibase/Design-UI-edit-panel-update 

Ui Update
This commit is contained in:
Martin McKeaveney 2020-05-26 22:45:00 +01:00 committed by GitHub
parent 105d901bdf b632cc59a5
commit d21cadfa47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 42 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/builder/src/components/common/Input.svelte
View File

@ -11,12 +11,12 @@
input { input {
display: block; display: block;
font-size: 14px; font-size: 14px;
font-family: sans-serif;
font-weight: 500; font-weight: 500;
color: #163057; color: var(--ink);
line-height: 1.3; line-height: 1.3;
padding: 1em 2.6em 0.9em 1.4em; padding: 12px;
width: 100%; width: 164px;
float: right;
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
@ -24,7 +24,7 @@
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid var(--grey-dark);
height: 35px; height: 32px;
} }
</style> </style>

13
packages/builder/src/components/common/Inputs/InputGroup.svelte
View File

@ -29,7 +29,6 @@
<style> <style>
.input-container { .input-container {
display: flex;
} }
.label { .label {
@ -43,16 +42,18 @@
input { input {
width: 40px; width: 40px;
height: 32px; height: 32px;
font-size: 13px; font-size: 12px;
font-weight: 700; font-weight: 700;
margin: 0px 5px; margin: 0px 0px 0px 1px;
color: #163057; text-align: center;
color: var(--ink);
opacity: 0.7; opacity: 0.7;
padding: 5px 10px; padding: 0px 4px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #dbdbdb; border: 1px solid var(--grey);
border-radius: 2px; border-radius: 2px;
outline: none; outline: none;
float: right;
} }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button,

22
packages/builder/src/components/userInterface/CategoryTab.svelte
View File

@ -4,7 +4,7 @@
export let onClick = category => {} export let onClick = category => {}
</script> </script>
<ul class="tabs"> <div class="tabs">
{#each categories as category} {#each categories as category}
<li <li
on:click={() => onClick(category)} on:click={() => onClick(category)}
@ -13,31 +13,23 @@
</li> </li>
{/each} {/each}
</ul> </div>
<style> <style>
.tabs { .tabs {
display: flex; display: flex;
justify-content: center;
list-style: none; list-style: none;
margin: 0 auto; font-size: 18px;
padding: 0 30px; font-weight: 700;
border-bottom: 1px solid #d8d8d8;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.14px;
} }
li { li {
color: #808192; color: var(--ink-lighter);
margin: 0 5px;
padding: 0 8px;
cursor: pointer; cursor: pointer;
margin-right: 20px;
} }
.active { .active {
border-bottom: solid 3px #0055ff; color: var(--ink);
color: #393c44;
} }
</style> </style>

2
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -117,7 +117,7 @@
} }
.component-props-container { .component-props-container {
margin-top: 10px; margin-top: 20px;
flex: 1 1 auto; flex: 1 1 auto;
} }
</style> </style>

4
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
View File

@ -54,13 +54,13 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 0; padding: 20px 20px;
border-left: solid 1px #e8e8ef; border-left: solid 1px #e8e8ef;
} }
.switcher { .switcher {
display: flex; display: flex;
margin: 0px 20px 20px 20px; margin: 0px 20px 20px 0px;
} }
.switcher > button { .switcher > button {

10
packages/builder/src/components/userInterface/FlatButton.svelte
View File

@ -19,16 +19,16 @@
<style> <style>
.flatbutton { .flatbutton {
cursor: pointer; cursor: pointer;
padding: 5px; padding: 8px 4px;
text-align: center; text-align: center;
background: #ffffff; background: #ffffff;
color: #808192; color: var(--ink-light);
border-radius: 4px; border-radius: 5px;
font-family: Roboto; font-family: Roboto;
font-size: 11px; font-size: 13px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.11px;
transition: background 0.5s, color 0.5s ease; transition: background 0.5s, color 0.5s ease;
text-rendering: optimizeLegibility;
} }
.selected { .selected {

2
packages/builder/src/components/userInterface/FlatButtonGroup.svelte
View File

@ -44,11 +44,9 @@
<style> <style>
.flatbutton-group { .flatbutton-group {
display: flex; display: flex;
flex-flow: row nowrap;
} }
.button-container { .button-container {
flex: 1; flex: 1;
margin: 5px;
} }
</style> </style>

13
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -43,21 +43,24 @@
<style> <style>
.property-control { .property-control {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row;
margin: 8px 0px; margin: 8px 0px;
align-items: center;
} }
.label { .label {
flex: 0 0 50px; flex: 0 0 50px;
padding: 0px 5px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 400;
letter-spacing: 0.12px;
text-align: left; text-align: left;
color: var(--ink);
margin-right: auto;
text-transform: capitalize;
} }
.control { .control {
flex: 1; flex: 1;
padding-left: 5px; padding-left: 2px;
max-width: 164px;
} }
</style> </style>

11
packages/builder/src/components/userInterface/PropertyGroup.svelte
View File

@ -42,14 +42,15 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: auto; height: auto;
background: #fbfbfb; background: var(--grey-light);
margin: 5px; margin: 0px 0px 4px 0px;
padding: 5px; padding: 8px 12px;
justify-content: center;
border-radius: 4px;
} }
.property-group-name { .property-group-name {
cursor: pointer; cursor: pointer;
flex: 0 0 20px;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
} }
@ -61,7 +62,7 @@
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
letter-spacing: 0.14px; letter-spacing: 0.14px;
color: #393c44; color: var(--ink);
} }
.icon { .icon {

4
packages/builder/src/pages/[application]/frontend/_layout.svelte
View File

@ -127,7 +127,6 @@
.root { .root {
display: grid; display: grid;
grid-template-columns: 275px 1fr 275px; grid-template-columns: 275px 1fr 275px;
height: 100%;
width: 100%; width: 100%;
background: var(--grey-light); background: var(--grey-light);
} }
@ -136,7 +135,6 @@
.root { .root {
display: grid; display: grid;
grid-template-columns: 300px 1fr 300px; grid-template-columns: 300px 1fr 300px;
height: 100%;
width: 100%; width: 100%;
background: var(--grey-light); background: var(--grey-light);
} }
@ -162,8 +160,6 @@
.components-pane { .components-pane {
grid-column: 3; grid-column: 3;
background-color: var(--white); background-color: var(--white);
min-height: 0px;
overflow-y: scroll;
} }
.components-nav-page { .components-nav-page {