CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-04 05:50:57 +12:00
Code Issues Projects Releases Wiki Activity

global ui changes

Browse source 
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 fc979eecd4
commit c469d765c5
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 {

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

@ -46,7 +46,7 @@
</div>
{/if}
</div>
<style>
@ -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 {