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

Merge pull request #155 from Budibase/global-ui-changes 

global ui changes
This commit is contained in:
Joe 2020-03-16 18:30:43 +00:00 committed by GitHub
parent 88f1129688 150a919c6c
commit 01a09df1e7
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 */
.header {
font-size: 0.75rem;
color: #999;
color: #000333;
opacity: 0.4;
text-transform: uppercase;
margin-top: 1rem;
font-weight: 500;
@ -68,7 +69,7 @@
.budibase__nav-item.selected {
color: var(--button-text);
background: var(--background-button) !important;
background: #fafafa !important;
}
.budibase__nav-item:hover {
@ -82,7 +83,7 @@
border: 1px solid #DBDBDB;
text-align: left;
letter-spacing: 0.7px;
color: #163057;
color: #000333;
font-size: 16px;
padding-left: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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