CSS update UI refresh
Font changed to Inter Colors reflect BBUI Panel background removed
This commit is contained in:
Joe
parent
7812bad567
commit
28fadac7f7
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -39,7 +39,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@beyonk/svelte-notifications": "^2.0.3",
|
||||
"@budibase/bbui": "^1.8.0",
|
||||
"@budibase/bbui": "^1.9.0",
|
||||
"@budibase/client": "^0.0.32",
|
||||
"@nx-js/compiler-util": "^2.0.0",
|
||||
"codemirror": "^5.51.0",
|
||||
|
|
|
|||
|
|
@ -72,14 +72,14 @@
|
|||
}
|
||||
|
||||
.budibase__nav-item:hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.budibase__input {
|
||||
height: 35px;
|
||||
width: 220px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
}
|
||||
|
||||
.budibase__table {
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -116,12 +116,12 @@
|
|||
}
|
||||
|
||||
.budibase__table tr {
|
||||
border-bottom: 1px solid var(--grey-light);
|
||||
border-bottom: 1px solid var(--grey-1);
|
||||
}
|
||||
|
||||
.button--toggled {
|
||||
background: var(--blue-light);
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
.secondary {
|
||||
color: var(--ink);
|
||||
border: solid 1px var(--grey-dark);
|
||||
border: solid 1px var(--grey-4);
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,9 +55,8 @@
|
|||
}
|
||||
|
||||
:global(.uk-notification-message-danger) {
|
||||
background: var(--ink-light) !important;
|
||||
background: var(--grey-7) !important;
|
||||
color: #fff !important;
|
||||
font-family: Roboto;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
|
|
@ -72,6 +71,6 @@
|
|||
}
|
||||
|
||||
:global(.refresh-page-button):hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,14 +42,14 @@
|
|||
|
||||
/* ---- PRIMARY ----*/
|
||||
.primary {
|
||||
background-color: var(--primary100);
|
||||
border-color: var(--primary100);
|
||||
background-color: var(--blue);
|
||||
border-color: var(--blue);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.primary:hover {
|
||||
background-color: var(--primary75);
|
||||
border-color: var(--primary75);
|
||||
background-color: var(--blue);
|
||||
border-color: var(--blue);
|
||||
}
|
||||
|
||||
.primary:active {
|
||||
|
|
@ -59,8 +59,8 @@
|
|||
|
||||
.primary-outline {
|
||||
background-color: var(--white);
|
||||
border-color: var(--primary100);
|
||||
color: var(--primary100);
|
||||
border-color: var(--blue);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.primary-outline:hover {
|
||||
|
|
@ -74,8 +74,8 @@
|
|||
/* ---- secondary ----*/
|
||||
|
||||
.secondary {
|
||||
background-color: var(--secondary100);
|
||||
border-color: var(--secondary100);
|
||||
background-color: var(--ink);
|
||||
border-color: var(--ink);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
|
||||
.secondary-outline {
|
||||
background-color: var(--white);
|
||||
border-color: var(--secondary100);
|
||||
color: var(--secondary100);
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.secondary-outline:hover {
|
||||
|
|
@ -136,32 +136,36 @@
|
|||
|
||||
/* ---- deletion ----*/
|
||||
.deletion {
|
||||
background-color: var(--deletion100);
|
||||
border-color: var(--deletion100);
|
||||
background-color: var(--red);
|
||||
border-color: var(--red);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.deletion:hover {
|
||||
background-color: var(--deletion75);
|
||||
border-color: var(--deletion75);
|
||||
background-color: var(--red-light);
|
||||
border-color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.deletion:pressed {
|
||||
background-color: var(--deletiondark);
|
||||
border-color: var(--deletiondark);
|
||||
background-color: var(--red-dark);
|
||||
border-color: var(--red-dark);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.deletion-outline {
|
||||
background-color: var(--white);
|
||||
border-color: var(--deletion100);
|
||||
color: var(--deletion100);
|
||||
border-color: var(--red);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.deletion-outline:hover {
|
||||
background-color: var(--deletion10);
|
||||
background-color: var(--red-light);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.deletion-outline:pressed {
|
||||
background-color: var(--deletion25);
|
||||
background-color: var(--red-dark);
|
||||
color: var(--white);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
background: var(--secondary80);
|
||||
background: var(--grey-7);
|
||||
color: var(--white);
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
height: 200px;
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
<style>
|
||||
.uk-modal-footer {
|
||||
background: var(--lightslate);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.uk-modal-dialog {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
export let size = 18
|
||||
export let icon = ""
|
||||
export let style = ""
|
||||
export let color = "var(--secondary100)"
|
||||
export let color = "var(--ink)"
|
||||
export let hoverColor = "var(--secondary75)"
|
||||
export let attributes = {}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
/* width: 32px; */
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
margin: 0px 0px 0px 1px;
|
||||
color: var(--ink);
|
||||
opacity: 0.7;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
/* padding: 12px; */
|
||||
width: 164px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--grey);
|
||||
border: 1px solid var(--grey-2);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
align-items: center;
|
||||
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--secondary100);
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
.select-container {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
border: var(--grey-dark) 1px solid;
|
||||
border: var(--grey-4) 1px solid;
|
||||
}
|
||||
|
||||
.adjusted {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 20px;
|
||||
border-left: solid 1px var(--grey);
|
||||
border-left: solid 1px var(--grey-2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
@ -60,10 +60,11 @@
|
|||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ink-lighter);
|
||||
font-weight: 600;
|
||||
color: var(--grey-5);
|
||||
margin-right: 20px;
|
||||
background: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.switcher > .selected {
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@
|
|||
}
|
||||
|
||||
table {
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
|
||||
thead {
|
||||
background: var(--blue-light);
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
}
|
||||
|
||||
thead th {
|
||||
|
|
@ -162,18 +162,17 @@
|
|||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid var(--grey-dark);
|
||||
border-bottom: 1px solid var(--grey-4);
|
||||
transition: 0.3s background-color;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
|
|
|
|||
|
|
@ -58,20 +58,19 @@
|
|||
padding: 10px;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--grey-4);
|
||||
text-transform: capitalize;
|
||||
border-radius: 3px;
|
||||
font-family: Roboto;
|
||||
min-width: 20px;
|
||||
transition: 0.3s background-color;
|
||||
}
|
||||
|
||||
.pagination__buttons button:hover {
|
||||
cursor: pointer;
|
||||
background-color: #fafafa;
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
}
|
||||
footer {
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
background: var(--grey-1);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
|
||||
tbody > tr:hover {
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.table-controls {
|
||||
|
|
@ -154,7 +154,7 @@
|
|||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
margin-top: 40px;
|
||||
padding: 20px 40px 20px 40px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
border-radius: 0 0 5px 5px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
}
|
||||
footer {
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
background: var(--grey-1);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@
|
|||
.snippet-selector__heading {
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
color: var(--ink-lighter);
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
margin: 0 40px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@
|
|||
<style>
|
||||
.alert {
|
||||
color: rgba(255, 0, 31, 1);
|
||||
background: #fafafa;
|
||||
background: var(--grey-1);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
background: var(--grey-1);
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
.hierarchy-title {
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
text-rendering: optimizeLegibility;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
<style>
|
||||
.root {
|
||||
font-size: 13px;
|
||||
color: var(--secondary100);
|
||||
color: var(--ink);
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
|
@ -76,7 +76,6 @@
|
|||
margin: 0 0 0 6px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
font-family: Roboto;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
.hierarchy-title {
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
text-rendering: optimizeLegibility;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,23 +21,25 @@
|
|||
max-width: 400px;
|
||||
max-height: 150px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--grey-medium);
|
||||
border: 1px solid var(--grey-4);
|
||||
}
|
||||
|
||||
.app-button:hover {
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
font-family: Inter;
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
font-family: Inter;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
|
|
@ -56,7 +58,7 @@
|
|||
justify-content: center;
|
||||
padding: 12px 20px;
|
||||
border-radius: 5px;
|
||||
border: 1px var(--grey) solid;
|
||||
border: 1px var(--grey-2) solid;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -142,11 +142,11 @@
|
|||
background-color: var(--blue-light);
|
||||
}
|
||||
.info {
|
||||
color: var(--primary100);
|
||||
text-decoration-color: var(--primary100);
|
||||
color: var(--blue);
|
||||
text-decoration-color: var(--blue);
|
||||
}
|
||||
.info :global(svg) {
|
||||
fill: var(--primary100);
|
||||
fill: var(--blue);
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -164,7 +164,7 @@
|
|||
padding: 30px 40px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
.spinner-container {
|
||||
background: white;
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
font-size: 2em;
|
||||
}
|
||||
.error {
|
||||
color: var(--deletion100);
|
||||
color: var(--red);
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
display: flex;
|
||||
list-style: none;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
li {
|
||||
color: var(--ink-lighter);
|
||||
color: var(--grey-5);
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -257,21 +257,21 @@
|
|||
|
||||
.menu li:not(.disabled) {
|
||||
cursor: pointer;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.menu li:not(.disabled):hover {
|
||||
color: var(--ink);
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: var(--grey-dark);
|
||||
color: var(--grey-4);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.hr-style {
|
||||
margin: 8px 0;
|
||||
color: var(--grey-dark);
|
||||
color: var(--grey-4);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
padding: 5px;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--lightslate);
|
||||
border-color: var(--grey-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -48,12 +48,12 @@
|
|||
|
||||
.component > .title {
|
||||
font-size: 13pt;
|
||||
color: var(--secondary100);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.component > .description {
|
||||
font-size: 10pt;
|
||||
color: var(--primary75);
|
||||
color: var(--blue);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@
|
|||
font-size: 24px;
|
||||
width: 20px;
|
||||
margin-top: 2px;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.icon:nth-of-type(2) {
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
.item:hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.item:hover .actions {
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 5px 20px 10px;
|
||||
border-left: solid 1px var(--grey);
|
||||
border-left: solid 1px var(--grey-2);
|
||||
}
|
||||
|
||||
.switcher {
|
||||
|
|
@ -70,8 +70,8 @@
|
|||
padding: 0;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--ink-lighter);
|
||||
font-weight: 600;
|
||||
color: var(--grey-5);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
|
||||
.title > div:nth-child(1) {
|
||||
grid-column-start: name;
|
||||
color: var(--secondary100);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.title > div:nth-child(2) {
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@
|
|||
padding: 30px 40px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 50px;
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
.save {
|
||||
margin-left: 20px;
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
|
||||
.newevent {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
|
||||
.newevent:hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
}
|
||||
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
background: var(--background-button) !important;
|
||||
color: var(--blue);
|
||||
background: var(--grey-1) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,9 +32,8 @@
|
|||
padding: 8px 2px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
border-radius: 5px;
|
||||
font-family: Roboto;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s;
|
||||
|
|
@ -43,8 +42,8 @@
|
|||
}
|
||||
|
||||
.selected {
|
||||
background: var(--ink-light);
|
||||
color: #ffffff;
|
||||
background: var(--grey-3);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<style>
|
||||
.newscreen {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.newscreen:hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -24,12 +24,12 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
background-color: var(--grey-light);
|
||||
background-color: var(--grey-1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.item-item:hover {
|
||||
background: var(--grey);
|
||||
background: var(--grey-2);
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
|
@ -51,6 +51,6 @@
|
|||
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -132,8 +132,8 @@
|
|||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #000333;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
opacity: 0.6;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -142,16 +142,15 @@
|
|||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
opacity: 0.8;
|
||||
padding-top: 13px;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
<style>
|
||||
.selected {
|
||||
color: var(--button-text);
|
||||
color: var(--blue);
|
||||
background: #f9f9f9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.inputs {
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@
|
|||
padding-bottom: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: var(--secondary80);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.uk-input {
|
||||
|
|
@ -148,8 +148,8 @@
|
|||
.uk-select {
|
||||
height: 40px !important;
|
||||
font-weight: 500px;
|
||||
color: var(--secondary60);
|
||||
border: 1px solid var(--slate);
|
||||
color: var(--grey-5);
|
||||
border: 1px solid var(--grey-2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -151,15 +151,14 @@
|
|||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
background-color: var(--grey-2);
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb-select-anchor > span {
|
||||
color: #565a66;
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
font-weight: 400;
|
||||
width: 140px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
|
@ -173,8 +172,8 @@
|
|||
}
|
||||
|
||||
.selected {
|
||||
color: #565a66;
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.bb-select-menu {
|
||||
|
|
@ -185,15 +184,15 @@
|
|||
opacity: 0;
|
||||
width: 160px;
|
||||
z-index: 2;
|
||||
color: #808192;
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
font-weight: 400;
|
||||
height: fit-content !important;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-right: 1px solid var(--grey-dark);
|
||||
border-left: 1px solid var(--grey-dark);
|
||||
border-bottom: 1px solid var(--grey-dark);
|
||||
background-color: #f2f2f2;
|
||||
border-right: 1px solid var(--grey-4);
|
||||
border-left: 1px solid var(--grey-4);
|
||||
border-bottom: 1px solid var(--grey-4);
|
||||
background-color: var(--grey-2);
|
||||
transform: scale(0);
|
||||
transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -73,12 +73,12 @@
|
|||
display: inline-block;
|
||||
transition: 0.2s;
|
||||
width: 20px;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
.icon-big {
|
||||
font-size: 24px;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
padding: 15px;
|
||||
}
|
||||
.help-text {
|
||||
color: var(--slate);
|
||||
color: var(--grey-2);
|
||||
font-size: 10pt;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,19 +46,20 @@
|
|||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
background: #ffffff;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
border-radius: 5px;
|
||||
font-family: Roboto;
|
||||
font-family: inter;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s;
|
||||
text-rendering: optimizeLegibility;
|
||||
border: none !important;
|
||||
transition: 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--ink-light);
|
||||
color: var(--white);
|
||||
background: var(--grey-3);
|
||||
color: var(--ink);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
word-wrap: break-word;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
opacity: 0.8;
|
||||
padding-top: 13px;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
grid-template-columns: 300px 1fr 300px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #fbfbfb;
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.ui-nav {
|
||||
|
|
@ -128,23 +128,21 @@
|
|||
|
||||
.components-nav-page {
|
||||
font-size: 13px;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
text-transform: uppercase;
|
||||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.components-nav-header {
|
||||
font-size: 13px;
|
||||
color: #000333;
|
||||
color: var(--ink);
|
||||
text-transform: uppercase;
|
||||
margin-top: 20px;
|
||||
font-weight: 600;
|
||||
opacity: 0.4;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
|
|
@ -184,21 +182,20 @@
|
|||
vertical-align: bottom;
|
||||
grid-column-start: button;
|
||||
cursor: pointer;
|
||||
color: var(--primary75);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.nav-group-header > div:nth-child(3):hover {
|
||||
color: var(--primary75);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.navigator-title {
|
||||
font-size: 14px;
|
||||
color: var(--secondary100);
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
padding: 0 20px 20px 20px;
|
||||
line-height: 1rem !important;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.components-list-container {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const layout = [
|
|||
control: OptionSelect,
|
||||
initialValue: "",
|
||||
options: [
|
||||
{ label: "", value: "" },
|
||||
{ label: " ", value: " " },
|
||||
{ label: "Flex", value: "flex" },
|
||||
{ label: "Inline Flex", value: "inline-flex" },
|
||||
],
|
||||
|
|
@ -103,7 +103,6 @@ export const size = [
|
|||
key: "width",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -111,7 +110,6 @@ export const size = [
|
|||
key: "height",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -119,7 +117,6 @@ export const size = [
|
|||
key: "min-width",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -127,7 +124,6 @@ export const size = [
|
|||
key: "min-height",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -135,7 +131,6 @@ export const size = [
|
|||
key: "max-width",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -143,7 +138,6 @@ export const size = [
|
|||
key: "max-height",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
]
|
||||
|
|
@ -167,7 +161,6 @@ export const position = [
|
|||
key: "top",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -175,7 +168,6 @@ export const position = [
|
|||
key: "right",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -183,7 +175,6 @@ export const position = [
|
|||
key: "bottom",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -191,7 +182,6 @@ export const position = [
|
|||
key: "left",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -199,7 +189,6 @@ export const position = [
|
|||
key: "z-index",
|
||||
control: Input,
|
||||
placeholder: "num",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
]
|
||||
|
|
@ -242,7 +231,6 @@ export const typography = [
|
|||
defaultValue: "",
|
||||
control: Input,
|
||||
placeholder: "px",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
@ -250,7 +238,6 @@ export const typography = [
|
|||
key: "line-height",
|
||||
control: Input,
|
||||
placeholder: "lh",
|
||||
width: "48px",
|
||||
textAlign: "center",
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<style>
|
||||
header {
|
||||
font-size: 24px;
|
||||
color: var(--font);
|
||||
color: var(--ink);
|
||||
font-weight: bold;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
background: var(--secondary);
|
||||
color: var(--dark-grey);
|
||||
color: var(--grey-4);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
grid-gap: 5px;
|
||||
grid-auto-columns: 3fr 1fr 1fr;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
background: var(--grey-1);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@
|
|||
|
||||
header {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
|
|
@ -181,14 +181,14 @@
|
|||
.config-item {
|
||||
margin: 0px 0px 4px 0px;
|
||||
padding: 12px;
|
||||
background: var(--light-grey);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.budibase_input {
|
||||
height: 35px;
|
||||
width: 220px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
}
|
||||
|
||||
header > span {
|
||||
color: var(--ink-lighter);
|
||||
color: var(--grey-5);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
|
||||
.workflow-button {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
}
|
||||
|
||||
.workflow-button:hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.access-level {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
<style>
|
||||
.block-field {
|
||||
border-radius: 3px;
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
padding: 12px;
|
||||
margin: 0px 0px 4px 0px;
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
height: 35px;
|
||||
width: 220px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -85,6 +85,6 @@
|
|||
}
|
||||
|
||||
.stop-button.highlighted {
|
||||
background: var(--coral);
|
||||
background: var(--red);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
border-radius: 5px;
|
||||
transition: 0.3s all;
|
||||
box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
|
||||
background-color: var(--font);
|
||||
background-color: var(--ink);
|
||||
font-size: 16px;
|
||||
color: var(--white);
|
||||
}
|
||||
|
|
@ -54,17 +54,17 @@
|
|||
|
||||
.ACTION {
|
||||
background-color: var(--white);
|
||||
color: var(--font);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.TRIGGER {
|
||||
background-color: var(--font);
|
||||
background-color: var(--ink);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.LOGIC {
|
||||
background-color: var(--secondary);
|
||||
color: var(--font);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
div:hover {
|
||||
|
|
|
|||
|
|
@ -64,18 +64,18 @@
|
|||
.subtabs span {
|
||||
transition: 0.3s all;
|
||||
text-align: center;
|
||||
color: var(--dark-grey);
|
||||
color: var(--grey-7);
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.subtabs span.selected {
|
||||
background: var(--dark-grey);
|
||||
background: var(--grey-7);
|
||||
color: var(--white);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.subtabs span:not(.selected) {
|
||||
color: var(--dark-grey);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</script>
|
||||
|
||||
<div class="workflow-block hoverable" on:click={addBlockToWorkflow}>
|
||||
<div>
|
||||
<div class="icon">
|
||||
<i class={blockDefinition.icon} />
|
||||
</div>
|
||||
<div class="workflow-text">
|
||||
|
|
@ -27,19 +27,34 @@
|
|||
|
||||
<style>
|
||||
.workflow-block {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding: 16px 0px;
|
||||
border-radius: var(--border);
|
||||
}
|
||||
|
||||
.workflow-block:hover {
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.workflow-text {
|
||||
margin-left: 10px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: var(--blue-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
i {
|
||||
background: var(--secondary);
|
||||
color: var(--dark-grey);
|
||||
padding: 10px;
|
||||
color: var(--grey-7);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
|
@ -50,7 +65,7 @@
|
|||
|
||||
p {
|
||||
font-size: 12px;
|
||||
color: var(--dark-grey);
|
||||
color: var(--grey-7);
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<style>
|
||||
header {
|
||||
font-size: 24px;
|
||||
color: var(--font);
|
||||
color: var(--ink);
|
||||
font-weight: bold;
|
||||
padding: 30px;
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
margin-right: 10px;
|
||||
font-size: 20px;
|
||||
background: var(--secondary);
|
||||
color: var(--dark-grey);
|
||||
color: var(--grey-4);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
grid-gap: 5px;
|
||||
grid-auto-columns: 3fr 1fr 1fr;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
background: var(--grey-1);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
|
||||
.workflow-item:hover {
|
||||
cursor: pointer;
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.workflow-item.selected {
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
|
||||
.new-workflow-button {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-dark);
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
}
|
||||
|
||||
.new-workflow-button:hover {
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<style>
|
||||
header {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
span:not(.selected) {
|
||||
color: var(--ink-lighter);
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
span:not(.selected):hover {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ body, html {
|
|||
overflow: hidden;
|
||||
background-repeat: repeat;
|
||||
background-size: 30px 30px;
|
||||
background-color: #FBFBFB;
|
||||
background-color: var(--grey-1);
|
||||
height: 100%;
|
||||
}
|
||||
#navigation {
|
||||
|
|
@ -63,7 +63,7 @@ body, html {
|
|||
}
|
||||
#leftswitch {
|
||||
border: 1px solid #E8E8EF;
|
||||
background-color: #FBFBFB;
|
||||
background-color: var(--grey-1);
|
||||
width: 111px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
|
|
@ -326,7 +326,7 @@ body, html {
|
|||
|
||||
.blockico i {
|
||||
font-size: 24px;
|
||||
color: var(--dark-grey);
|
||||
color: var(--grey-4);
|
||||
}
|
||||
|
||||
.blockico span {
|
||||
|
|
|
|||
|
|
@ -1,47 +1,56 @@
|
|||
/* latin-ext */
|
||||
/* roboto-regular - latin-ext_latin */
|
||||
/* Inter-regular - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: local('Inter'), local('Inter-Regular'),
|
||||
url('/_builder/assets/Inter-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/Inter-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* roboto-300 - latin-ext_latin */
|
||||
/* Inter-500 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'),
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* roboto-500 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: local('Inter Medium'), local('Inter-Medium'),
|
||||
url('/_builder/assets/Inter-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/Inter-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* roboto-700 - latin-ext_latin */
|
||||
/* Inter-600 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Inter SemiBold'), local('Inter-SemiBold'),
|
||||
url('/_builder/assets/Inter-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/Inter-SemiBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* Inter-700 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: local('Inter Bold'), local('Inter-Bold'),
|
||||
url('/_builder/assets/Inter-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/Inter-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* roboto-900 - latin-ext_latin */
|
||||
/* Inter-800 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
|
||||
url('/_builder/assets/Inter-ExtraBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/Inter-ExtraBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* Inter-900 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local('Roboto Black'), local('Roboto-Black'),
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
src: local('Inter Black'), local('Inter-Black'),
|
||||
url('/_builder/assets/Inter-Black.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/_builder/assets/Inter-Black.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
|
|
@ -8,97 +8,43 @@
|
|||
--blue-dark: #2F4C9B;
|
||||
|
||||
--ink: #393C44;
|
||||
--ink-light: #808192;
|
||||
--ink-lighter: #ADAEC4;
|
||||
--grey-7: #808192;
|
||||
--grey-5: #ADAEC4;
|
||||
|
||||
--grey: #F2F2F2;
|
||||
--grey-light: #FBFBFB;
|
||||
--grey-medium: #e8e8ef;
|
||||
--grey-dark: #E6E6E6;
|
||||
--grey-1: var(--grey-1);
|
||||
--grey-4: #e8e8ef;
|
||||
--grey-4: #E6E6E6;
|
||||
|
||||
--red: #E26D69;
|
||||
--red-light:#FFE6E6;
|
||||
--red-dark: #800400;
|
||||
|
||||
--primary100: #0055ff;
|
||||
--primary80: rgba(0, 85, 255, 0.8);
|
||||
--primary60: #rgba(0, 85, 255, 0.6);
|
||||
--primary40: #rgba(0, 85, 255, 0.4);
|
||||
--primary20: #rgba(0, 85, 255, 0.2);
|
||||
--primary10: #rgba(0, 85, 255, 0.1);
|
||||
--primary5: #rgba(0, 85, 255, 0.05);
|
||||
--primarydark: #0044cc;
|
||||
|
||||
--secondary100:#393C44;
|
||||
--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: #00021a;
|
||||
--font-black: "Inter Black";
|
||||
--font-bold: "Inter Bold";
|
||||
--fontsemibold: "Inter Medium";
|
||||
--font-normal: "Inter";
|
||||
|
||||
--tertiary: #F2F5F7;
|
||||
|
||||
--success100: #49C39EFF;
|
||||
--success75: #49C39EBF;
|
||||
--success50: #49C39E80;
|
||||
--success25: #49C39E40;
|
||||
--success10: #49C39E1A;
|
||||
--successdark: #44B492;
|
||||
|
||||
--deletion100: #F2545BFF;
|
||||
--deletion75: #F2545BBF;
|
||||
--deletion50: #F2545B80;
|
||||
--deletion25: #F2545B40;
|
||||
--deletion10: #F2545B1A;
|
||||
--deletiondark: #CF4046;
|
||||
--bodytext: var(--font-normal) "regular" var(--secondary100) 16pt;
|
||||
--bigbodytext: var(--font-normal) "regular" var(--secondary100) 20pt;
|
||||
--smallbodytext: var(--font-normal) "regular" var(--secondary100) 12pt;
|
||||
--lightbodytext: "regular" "normal" 16pt var(--font-normal);
|
||||
--heavybodytext: var(--font-bold) "regular" var(--secondary100) 16pt;
|
||||
--quotation: var(--font-normal) "italics" var(--darkslate) 16pt;
|
||||
--smallheavybodytext: var(--font-bold) "regular" var(--secondary100) 14pt;
|
||||
|
||||
|
||||
--darkslate: #1a202c;
|
||||
--slate: #d8d8d8;
|
||||
--lightslate: #f9f9f9;
|
||||
|
||||
--borderradius: 2px;
|
||||
--borderradiusall: 2px 2px 2px 2px;
|
||||
|
||||
--fontblack: "Roboto Black";
|
||||
--fontbold: "Roboto Bold";
|
||||
--fontsemibold: "Roboto Medium";
|
||||
--fontnormal: "Roboto";
|
||||
--fontlight: "Roboto Light";
|
||||
|
||||
--bodytext: var(--fontnormal) "regular" var(--secondary100) 16pt;
|
||||
--bigbodytext: var(--fontnormal) "regular" var(--secondary100) 20pt;
|
||||
--smallbodytext: var(--fontnormal) "regular" var(--secondary100) 12pt;
|
||||
--lightbodytext: "regular" "normal" 16pt var(--fontnormal);
|
||||
--heavybodytext: var(--fontbold) "regular" var(--secondary100) 16pt;
|
||||
--quotation: var(--fontnormal) "italics" var(--darkslate) 16pt;
|
||||
--smallheavybodytext: var(--fontbold) "regular" var(--secondary100) 14pt;
|
||||
|
||||
--background-button: #f9f9f9;
|
||||
--button-text: #0055ff;
|
||||
|
||||
/* Budibase Styleguide Colors */
|
||||
--primary: #0055ff;
|
||||
--secondary: #f1f4fc;
|
||||
--color: #393c44;
|
||||
--light-grey: #fbfbfb;
|
||||
--dark-grey: #808192;
|
||||
--medium-grey: #e8e8ef;
|
||||
--background: rgb(251, 251, 251);
|
||||
--font: #393c44;
|
||||
--coral: #eb5757;
|
||||
}
|
||||
|
||||
html, body {
|
||||
display: grid;
|
||||
font-family: var(--fontnormal);
|
||||
color: var(--secondary80);
|
||||
font-family: var(--font-normal);
|
||||
color: var(--ink);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
@ -108,43 +54,43 @@ html, body {
|
|||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--fontblack);
|
||||
font-family: var(--font-black);
|
||||
font-size: 36pt;
|
||||
color: var(--secondary100);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--fontbold);
|
||||
font-family: var(--font-bold);
|
||||
font-size: 30pt;
|
||||
color: var(--secondary100);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--fontbold);
|
||||
font-family: var(--font-bold);
|
||||
font-size: 24pt;
|
||||
color: var(--secondary60);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: var(--fontbold);
|
||||
font-family: var(--font-bold);
|
||||
font-size: 18pt;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: var(--fontblack);
|
||||
font-family: var(--font-black);
|
||||
font-size: 14pt;
|
||||
color: var(--secondary100);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: var(--fontblack);
|
||||
font-family: var(--font-black);
|
||||
font-size: 12pt;
|
||||
color: var(--darkslate);
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: var(--fontnormal);
|
||||
font-family: var(--font-normal);
|
||||
}
|
||||
|
||||
.hoverable:hover {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import "./global.css"
|
||||
import "./fonts.css"
|
||||
import "./budibase.css"
|
||||
import "/assets/roboto-v20-latin-ext_latin-300"
|
||||
import "/assets/roboto-v20-latin-ext_latin-400"
|
||||
import "/assets/roboto-v20-latin-ext_latin-500"
|
||||
import "/assets/roboto-v20-latin-ext_latin-700"
|
||||
import "/assets/roboto-v20-latin-ext_latin-900"
|
||||
import "/assets/Inter-Regular"
|
||||
import "/assets/Inter-Medium"
|
||||
import "/assets/Inter-SemiBold"
|
||||
import "/assets/Inter-Bold"
|
||||
import "/assets/Inter-ExtraBold"
|
||||
import "/assets/Inter-Black"
|
||||
import "/_builder/assets/budibase-logo.png"
|
||||
import "/_builder/assets/budibase-logo-only.png"
|
||||
import "uikit/dist/css/uikit.min.css"
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
</span>
|
||||
{/each}
|
||||
<!-- <IconButton icon="home"
|
||||
color="var(--slate)"
|
||||
color="var(--grey-2)"
|
||||
hoverColor="var(--secondary75)"/> -->
|
||||
</div>
|
||||
<div class="toprightnav">
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
|
||||
a {
|
||||
text-transform: none;
|
||||
color: var(--ink-lighter);
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--grey);
|
||||
border-bottom: 1px solid var(--grey-2);
|
||||
}
|
||||
|
||||
.content > div {
|
||||
|
|
@ -122,18 +122,18 @@
|
|||
|
||||
.topnavitem {
|
||||
cursor: pointer;
|
||||
color: var(--ink-lighter);
|
||||
color: var(--grey-5);
|
||||
margin: 0px 00px 0px 20px;
|
||||
padding-top: 4px;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-md);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.topnavitem:hover {
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
|
||||
.topnavitemright {
|
||||
cursor: pointer;
|
||||
color: var(--ink-light);
|
||||
color: var(--grey-7);
|
||||
margin: 0px 20px 0px 0px;
|
||||
padding-top: 4px;
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: #fafafa;
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
{#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
|
||||
<ModelDataTable {selectRecord} />
|
||||
{:else}
|
||||
<i style="color: var(--grey-dark)">
|
||||
<i style="color: var(--grey-4)">
|
||||
create your first model to start building
|
||||
</i>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
display: grid;
|
||||
grid-template-columns: 300px 1fr 300px;
|
||||
width: 100%;
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
align-items: stretch;
|
||||
|
|
@ -116,10 +116,10 @@
|
|||
vertical-align: bottom;
|
||||
grid-column-start: button;
|
||||
cursor: pointer;
|
||||
color: var(--primary75);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.nav-group-header > div:nth-child(3):hover {
|
||||
color: var(--primary75);
|
||||
color: var(--blue);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
<style>
|
||||
.content {
|
||||
position: relative;
|
||||
background: var(--background);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
.nav {
|
||||
overflow: auto;
|
||||
width: 300px;
|
||||
border-right: 1px solid var(--grey);
|
||||
border-right: 1px solid var(--grey-2);
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
grid-template-columns: 300px 1fr;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--grey-light);
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.main {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--grey-medium);
|
||||
border-right: 1px solid var(--grey-4);
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
.nav-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@
|
|||
.banner-button:hover {
|
||||
background-color: var(--white);
|
||||
color: var(--ink);
|
||||
border: var(--grey-dark) 1px solid;
|
||||
border: var(--grey-4) 1px solid;
|
||||
}
|
||||
|
||||
.app-section-header {
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
.app-section-title {
|
||||
font-size: 20px;
|
||||
color: var(--ink);
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue