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 1f8fa462a0 8d522e3eaf
commit e45c176883
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 {