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

global ui changes 

Changes include:
Label font weights
Secondary color
Icon background colors
Positioning of icons
This commit is contained in:
Joe 2020-03-16 18:18:42 +00:00
parent 88f1129688
commit 150a919c6c
12 changed files with 72 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/builder/src/budibase.css
View File

@ -1,7 +1,8 @@
/* Budibase Component Styles */ /* Budibase Component Styles */
.header { .header {
font-size: 0.75rem; font-size: 0.75rem;
color: #999; color: #000333;
opacity: 0.4;
text-transform: uppercase; text-transform: uppercase;
margin-top: 1rem; margin-top: 1rem;
font-weight: 500; font-weight: 500;
@ -68,7 +69,7 @@
.budibase__nav-item.selected { .budibase__nav-item.selected {
color: var(--button-text); color: var(--button-text);
background: var(--background-button) !important; background: #fafafa !important;
} }
.budibase__nav-item:hover { .budibase__nav-item:hover {
@ -82,7 +83,7 @@
border: 1px solid #DBDBDB; border: 1px solid #DBDBDB;
text-align: left; text-align: left;
letter-spacing: 0.7px; letter-spacing: 0.7px;
color: #163057; color: #000333;
font-size: 16px; font-size: 16px;
padding-left: 5px; padding-left: 5px;
} }

17
packages/builder/src/global.css
View File

@ -9,12 +9,13 @@
--primary5: #454ca00c; --primary5: #454ca00c;
--primarydark: #3F448A; --primarydark: #3F448A;
--secondary100:#828fa5; --secondary100:#000333;
--secondary75: #162B4DBF; --secondary80: rgba(0, 3, 51, 0.8);
--secondary50: #162B4D80; --secondary60: rgba(0, 3, 51, 0.6);
--secondary25: #162B4D40; --secondary40: rgba(0, 3, 51, 0.4);
--secondary10: #162B4D1A; --secondary20: rgba(0, 3, 51, 0.2);
--secondary5:#fff; --secondary10: rgba(0, 3, 51, 0.1);
--secondary5: rgba(0, 3, 51, 0.05);
--secondarydark: #3F448A; --secondarydark: #3F448A;
--tertiary: #F2F5F7; --tertiary: #F2F5F7;
@ -61,7 +62,7 @@
html, body { html, body {
font-family: var(--fontnormal); font-family: var(--fontnormal);
color: var(--secondary100); color: var(--secondary80);
padding: 0; padding: 0;
margin: 0; margin: 0;
height:100%; height:100%;
@ -83,7 +84,7 @@ h2 {
h3 { h3 {
font-family: var(--fontbold); font-family: var(--fontbold);
font-size: 24pt; font-size: 24pt;
color: var(--darkslate); color: var(--secondary60);
} }
h4 { h4 {

2
packages/builder/src/nav/BackendNav.svelte
View File

@ -99,7 +99,7 @@
flex-direction: column; flex-direction: column;
max-height: 100%; max-height: 100%;
height: 100%; height: 100%;
background-color: var(--secondary5); background-color: var(--white);
} }
.nav-group-header { .nav-group-header {

27
packages/builder/src/userInterface/ComponentPropertiesPanel.svelte
View File

@ -162,38 +162,49 @@
.component-props-container { .component-props-container {
margin-top: 10px; margin-top: 10px;
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto;
} }
ul { ul {
list-style: none; list-style: none;
display: flex; display: flex;
justify-content: space-between;
padding: 0; padding: 0;
} }
li { li {
margin-right: 20px;
background: none; background: none;
border-radius: 5px; border-radius: 3px;
width: 48px; width: 48px;
height: 48px; height: 48px;
} }
li button { li button {
width: 100%; width: 48px;
height: 100%; height: 48px;
background: none; background: none;
border: none; border: none;
border-radius: 5px; border-radius: 3px;
padding: 12px; padding: 7px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
li:nth-last-child(1) {
margin-right: 0px;
background: none;
border-radius: 3px;
width: 48px;
height: 48px;
}
.selected { .selected {
color: var(--button-text); color: var(--button-text);
background: var(--background-button) !important; background: #f9f9f9 !important;
width: 48px;
height: 48px;
} }
.button-indicator { .button-indicator {

2
packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -94,7 +94,7 @@
border-radius: 3px; border-radius: 3px;
height: 35px; height: 35px;
align-items: center; align-items: center;
font-weight: normal; font-weight: 400;
} }
.item button { .item button {

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

@ -46,7 +46,7 @@
</div> </div>
{/if} {/if}
</div> </div>
<style> <style>
@ -85,6 +85,6 @@
flex: 1 1 auto; flex: 1 1 auto;
height: 0px; height: 0px;
overflow-y: auto; overflow-y: auto;
padding: 0 1.5rem 1.5rem 1.5rem; padding: 0 20px 40px 20px;
} }
</style> </style>

13
packages/builder/src/userInterface/LayoutEditor.svelte
View File

@ -136,7 +136,8 @@
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: #8997ab; color: #000333;
opacity: 0.6;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -144,16 +145,16 @@
text-transform: uppercase; text-transform: uppercase;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
color: #163057; color: #000333;
opacity: 0.3; opacity: 0.4;
margin-bottom: 15px; margin-bottom: 15px;
} }
h5 { h5 {
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 400;
color: #163057; color: #000333;
opacity: 0.6; opacity: 0.8;
padding-top: 12px; padding-top: 12px;
margin-bottom: 0; margin-bottom: 0;
} }

10
packages/builder/src/userInterface/LayoutTemplateControls.svelte
View File

@ -51,26 +51,26 @@
<style> <style>
.selected { .selected {
color: var(--button-text); color: var(--button-text);
background: var(--background-button); background: #f9f9f9;
opacity: 1;
} }
button { button {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
border: none; border: none;
border-radius: 5px; border-radius: 3px;
background: rgba(249, 249, 249, 1);
min-width: 1.6rem; min-width: 1.6rem;
min-height: 1.6rem; min-height: 1.6rem;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 500; font-weight: 500;
color: rgba(22, 48, 87, 1); color: #000333;
} }
.inputs { .inputs {

4
packages/builder/src/userInterface/PagesList.svelte
View File

@ -46,7 +46,7 @@
.root { .root {
padding-bottom: 10px; padding-bottom: 10px;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--secondary50); color: #000333;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
padding-left: 1.8rem; padding-left: 1.8rem;
@ -79,6 +79,6 @@
.icon { .icon {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
color: #333; color: #000333;
} }
</style> </style>

6
packages/builder/src/userInterface/PropControl.svelte
View File

@ -39,9 +39,9 @@
h5 { h5 {
word-wrap: break-word; word-wrap: break-word;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 400;
color: #163057; color: #000333;
opacity: 0.6; opacity: 0.8;
padding-top: 12px; padding-top: 12px;
margin-bottom: 0; margin-bottom: 0;
} }

4
packages/builder/src/userInterface/PropertyCascader/PropertyCascader.svelte
View File

@ -91,9 +91,7 @@
cursor: pointer; cursor: pointer;
outline: none; outline: none;
border: none; border: none;
border-radius: 5px; border-radius: 3px;
background: rgba(249, 249, 249, 1);
font-size: 1.6rem; font-size: 1.6rem;
font-weight: 700; font-weight: 700;
color: rgba(22, 48, 87, 1); color: rgba(22, 48, 87, 1);

24
packages/builder/src/userInterface/UserInterfaceRoot.svelte
View File

@ -108,17 +108,28 @@
padding: 0; padding: 0;
} }
.root {
display: grid;
grid-template-columns: 275px 1fr 275px;
height: 100%;
width: 100%;
background: #fafafa;
}
@media only screen and (min-width: 1800px) {
.root { .root {
display: grid; display: grid;
grid-template-columns: 290px 1fr 350px; grid-template-columns: 300px 1fr 300px;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: #fafafa; background: #fafafa;
} }
}
.ui-nav { .ui-nav {
grid-column: 1; grid-column: 1;
background-color: var(--secondary5); background-color: var(--white);
height: calc(100vh - 49px); height: calc(100vh - 49px);
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
@ -136,17 +147,18 @@
.components-pane { .components-pane {
grid-column: 3; grid-column: 3;
background-color: var(--secondary5); background-color: var(--white);
min-height: 0px; min-height: 0px;
overflow-y: hidden; overflow-y: hidden;
} }
.components-nav-header { .components-nav-header {
font-size: 0.75rem; font-size: 12px;
color: #999; color: #000333;
text-transform: uppercase; text-transform: uppercase;
margin-top: 1rem; margin-top: 1rem;
font-weight: 500; font-weight: 700;
opacity: 0.6;
} }
.nav-group-header { .nav-group-header {