CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-27 02:20:35 +12:00
Code Issues Projects Releases Wiki Activity

merge

Browse source
This commit is contained in:
Martin McKeaveney 2020-06-24 17:02:38 +01:00
parent ee86d6fb16 dec4a5c7cd
commit 65d0454377
112 changed files with 666 additions and 527 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
packages/builder/assets/Inter-Black.woff Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-Black.woff2 Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-Bold.woff Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-ExtraBold.woff Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-ExtraBold.woff2 Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-Medium.woff Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-Medium.woff2 Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-Regular.woff Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-SemiBold.woff Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/Inter-SemiBold.woff2 Normal file
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-300.woff
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-500.woff
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-700.woff
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-900.woff
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff
View file

Binary file not shown.

BIN
packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2
View file

Binary file not shown.

2
packages/builder/package.json
View file

@ -50,7 +50,7 @@
]
},
"dependencies": {
"@budibase/bbui": "^1.8.0",
"@budibase/bbui": "^1.10.1",
"@budibase/client": "^0.0.32",
"@nx-js/compiler-util": "^2.0.0",
"codemirror": "^5.51.0",

22
packages/builder/src/budibase.css
View file

@ -57,13 +57,14 @@
.budibase__nav-item {
cursor: pointer;
padding: 0 4px 0 2px;
height: 35px;
margin: 5px 0px 4px 0px;
border-radius: 0 5px 5px 0;
height: 36px;
margin: 0px 0px 0px 0px;
border-radius: 5px;
display: flex;
align-items: center;
font-size: 14px;
transition: 0.2s;
border-top: var(--grey-1) .5px solid;
}
.budibase__nav-item.selected {
@ -72,15 +73,14 @@
}
.budibase__nav-item:hover {
background: var(--grey-light);
background: var(--grey-1);
}
.budibase__input {
height: 35px;
width: 100%;
max-width: 220px;
height: 36px;
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;

2
packages/builder/src/components/common/ActionButton.svelte
View file

@ -41,7 +41,7 @@
.secondary {
color: var(--ink);
border: solid 1px var(--grey-dark);
border: solid 1px var(--grey-4);
background: white;
}

44
packages/builder/src/components/common/Button.svelte
View file

@ -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>

2
packages/builder/src/components/common/CodeArea.svelte
View file

@ -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;

2
packages/builder/src/components/common/ConfirmDialog.svelte
View file

@ -54,7 +54,7 @@
<style>
.uk-modal-footer {
background: var(--lightslate);
background: var(--grey-1);
}
.uk-modal-dialog {

2
packages/builder/src/components/common/IconButton.svelte
View file

@ -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 = {}

19
packages/builder/src/components/common/Input.svelte
View file

@ -37,19 +37,18 @@
<style>
input {
/* width: 32px; */
height: 32px;
font-size: 12px;
font-weight: 700;
margin: 0px 0px 0px 1px;
height: 36px;
font-size: 14px;
font-weight: 400;
margin: 0px 0px 0px 2px;
color: var(--ink);
opacity: 0.7;
padding: 0px 4px;
line-height: 1.3;
/* padding: 12px; */
padding: 0px 8px;
font-family: inter;
width: 164px;
box-sizing: border-box;
border: 1px solid var(--grey);
border-radius: 2px;
background-color: var(--grey-2);
border-radius: 4px;
border: 1px solid var(--grey-2);
outline: none;
}

4
packages/builder/src/components/common/PlusButton.svelte
View file

@ -17,7 +17,7 @@
align-items: center;
font-size: 1.2rem;
font-weight: 700;
color: var(--secondary100);
font-weight: 600;
color: var(--ink);
}
</style>

2
packages/builder/src/components/common/Select.svelte
View file

@ -21,7 +21,7 @@
.select-container {
font-size: 14px;
position: relative;
border: var(--grey-dark) 1px solid;
border: var(--grey-4) 1px solid;
}
.adjusted {

7
packages/builder/src/components/common/Switcher.svelte
View file

@ -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 {

9
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View file

@ -157,7 +157,7 @@
}
table {
border: 1px solid var(--grey-dark);
border: 1px solid var(--grey-4);
background: #fff;
border-radius: 3px;
border-collapse: collapse;
@ -165,7 +165,7 @@
thead {
background: var(--blue-light);
border: 1px solid var(--grey-dark);
border: 1px solid var(--grey-4);
}
thead th {
@ -174,18 +174,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 {

7
packages/builder/src/components/database/ModelDataTable/TablePagination.svelte
View file

@ -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>

2
packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
View file

@ -34,7 +34,7 @@
}
footer {
padding: 20px;
background: #fafafa;
background: var(--grey-1);
border-radius: 0.5rem;
}
</style>

4
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
View file

@ -130,7 +130,7 @@
}
tbody > tr:hover {
background-color: var(--grey-light);
background-color: var(--grey-1);
}
.table-controls {
@ -156,7 +156,7 @@
}
footer {
background-color: var(--grey-light);
background-color: var(--grey-1);
margin-top: 40px;
padding: 20px 40px 20px 40px;
display: flex;

2
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View file

@ -132,7 +132,7 @@
footer {
padding: 20px;
background: #fafafa;
background: var(--grey-1);
border-radius: 0.5rem;
}
</style>

4
packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
View file

@ -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;
}

4
packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
View file

@ -69,7 +69,7 @@
.title {
font-size: 24px;
font-weight: 700;
font-weight: 600;
color: var(--ink);
margin-left: 12px;
}
@ -84,7 +84,7 @@
align-items: center;
justify-content: flex-end;
padding: 20px;
background: var(--grey-light);
background: var(--grey-1);
border-radius: 0 0 5px 5px;
}

4
packages/builder/src/components/database/ModelDataTable/modals/DeleteRecord.svelte
View file

@ -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;
}

3
packages/builder/src/components/nav/DatabasesList.svelte
View file

@ -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;

1
packages/builder/src/components/nav/UsersList.svelte
View file

@ -64,7 +64,6 @@
margin: 0 0 0 6px;
padding: 0;
border: none;
font-family: Roboto;
font-size: 13px;
outline: none;
cursor: pointer;

12
packages/builder/src/components/start/AppCard.svelte
View file

@ -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;

10
packages/builder/src/components/start/CreateAppModal.svelte
View file

@ -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;
}

4
packages/builder/src/components/userInterface/CategoryTab.svelte
View file

@ -21,11 +21,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;
}

20
packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
View file

@ -151,19 +151,27 @@
<div class="colorpicker-container">
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
<div class="palette-panel">
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
</div>
<div class="control-panel">
<div class="alpha-hue-panel">
<div>
<div class="selected-color" style={`background: ${value}`} />
<CheckedBackground borderRadius="50%" backgroundSize="8px">
<div class="selected-color" {style} />
</CheckedBackground>
</div>
<div>
<Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
<Slider
type="alpha"
value={a}
on:change={alpha => setAlpha(alpha.detail)} />
<CheckedBackground borderRadius="10px" backgroundSize="7px">
<Slider
type="alpha"
value={a}
on:change={alpha => setAlpha(alpha.detail)} />
</CheckedBackground>
</div>
</div>

9
packages/builder/src/components/userInterface/Colorpicker/Palette.svelte
View file

@ -41,15 +41,6 @@
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
</script>
<div
bind:this={palette}
bind:clientHeight={paletteHeight}
bind:clientWidth={paletteWidth}
on:click={handleClick}
class="palette"
{style}>
<div class="picker" style={pickerStyle} />
</div>
<CheckedBackground width="100%">
<div
bind:this={palette}

8
packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
View file

@ -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>

6
packages/builder/src/components/userInterface/ComponentSearch.svelte
View file

@ -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>

8
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View file

@ -77,8 +77,7 @@
}
.title {
margin-left: 10px;
margin-top: 2px;
margin-left: 14px;
font-size: 14px;
font-weight: 400;
}
@ -87,9 +86,8 @@
display: inline-block;
transition: 0.2s;
font-size: 24px;
width: 20px;
margin-top: 2px;
color: var(--ink-light);
width: 18px;
color: var(--grey-7);
}
.icon:nth-of-type(2) {

8
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View file

@ -39,7 +39,7 @@
<div
class="budibase__nav-item item"
class:selected={currentComponent === component}
style="padding-left: {level * 20 + 53}px">
style="padding-left: {level * 20 + 40}px">
<div class="nav-item">
<i class="icon ri-arrow-right-circle-fill" />
{get_capitalised_name(component._component)}
@ -73,7 +73,7 @@
padding: 0px 5px 0px 15px;
margin: auto 0px;
border-radius: 3px;
height: 35px;
height: 36px;
align-items: center;
}
@ -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>

6
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
View file

@ -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;
}

1
packages/builder/src/components/userInterface/DesignView.svelte
View file

@ -19,7 +19,6 @@
{ value: "normal", text: "Normal" },
{ value: "hover", text: "Hover" },
{ value: "active", text: "Active" },
{ value: "selected", text: "Selected" },
]
$: propertyGroupNames = Object.keys(panelDefinition)

2
packages/builder/src/components/userInterface/EditComponentProps.svelte
View file

@ -53,7 +53,7 @@
.title > div:nth-child(1) {
grid-column-start: name;
color: var(--secondary100);
color: var(--ink);
}
.title > div:nth-child(2) {

2
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View file

@ -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;

8
packages/builder/src/components/userInterface/EventsEditor/EventsEditor.svelte
View file

@ -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>

23
packages/builder/src/components/userInterface/FlatButton.svelte
View file

@ -3,20 +3,13 @@
export let value = ""
export let text = ""
export let icon = ""
export let padding = "8px 5px;"
export let onClick = value => {}
export let selected = false
export let fontWeight = ""
$: style = buildStyle({ padding, fontWeight })
$: useIcon = !!icon
</script>
<div
class="flatbutton"
{style}
class:selected
on:click={() => onClick(value || text)}>
<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
{#if useIcon}
<i class={icon} />
{:else}
@ -29,25 +22,27 @@
<style>
.flatbutton {
cursor: pointer;
max-height: 36px;
padding: 8px 2px;
display: flex;
align-items: center;
justify-content: center;
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;
margin-left: 5px;
text-rendering: optimizeLegibility;
}
.selected {
background: var(--ink-light);
color: #ffffff;
background: var(--grey-3);
color: var(--ink);
}
i {
font-size: 20px;
font-size: 16px;
}
</style>

1
packages/builder/src/components/userInterface/FlatButtonGroup.svelte
View file

@ -46,6 +46,7 @@
<style>
.flatbutton-group {
display: flex;
width: 100%;
}
.button-container {

20
packages/builder/src/components/userInterface/FrontendNavigatePane.svelte
View file

@ -14,10 +14,7 @@
<PagesList />
<button class="newscreen" on:click={newScreen}>
<i class="icon ri-add-circle-fill" />
Create New Screen
</button>
<button class="newscreen" on:click={newScreen}>Create New Screen</button>
<PageLayout layout={$store.pages[$store.currentPageName]} />
@ -30,23 +27,26 @@
<style>
.newscreen {
cursor: pointer;
border: 1px solid var(--grey-dark);
border-radius: 3px;
border: 1px solid var(--purple);
border-radius: 5px;
width: 100%;
height: 36px;
padding: 8px 16px;
margin: 20px 0px 12px 0px;
display: flex;
justify-content: center;
align-items: center;
background: white;
color: var(--ink);
background: var(--purple);
color: var(--white);
font-size: 14px;
font-weight: 500;
transition: all 2ms;
transition: all 3ms;
outline: none;
}
.newscreen:hover {
background: var(--grey-light);
background: var(--purple-light);
color: var(--purple);
}
.icon {

6
packages/builder/src/components/userInterface/ItemTab/Item.svelte
View file

@ -28,12 +28,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;
}
@ -55,6 +55,6 @@
i {
font-size: 24px;
color: var(--ink-light);
color: var(--grey-7);
}
</style>

9
packages/builder/src/components/userInterface/LayoutEditor.svelte
View file

@ -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;

4
packages/builder/src/components/userInterface/LayoutTemplateControls.svelte
View file

@ -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 {

6
packages/builder/src/components/userInterface/NewScreen.svelte
View file

@ -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>

32
packages/builder/src/components/userInterface/OptionSelect.svelte
View file

@ -142,24 +142,24 @@
position: relative;
outline: none;
width: 160px;
height: 32px;
height: 36px;
cursor: pointer;
font-size: 12px;
font-size: 14px;
}
.bb-select-anchor {
cursor: pointer;
display: flex;
padding: 5px 10px;
background-color: #f2f2f2;
border-radius: 2px;
border: 1px solid var(--grey-dark);
padding: 0px 12px;
height: 36px;
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 +173,8 @@
}
.selected {
color: #565a66;
font-weight: 500;
color: var(--ink);
font-weight: 400;
}
.bb-select-menu {
@ -185,15 +185,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;

6
packages/builder/src/components/userInterface/PageLayout.svelte
View file

@ -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);
font-size: 20px;
color: var(--grey-7);
}
:global(svg) {

2
packages/builder/src/components/userInterface/PageView.svelte
View file

@ -59,7 +59,7 @@
padding: 15px;
}
.help-text {
color: var(--slate);
color: var(--grey-2);
font-size: 10pt;
}
</style>

12
packages/builder/src/components/userInterface/PagesList.svelte
View file

@ -43,22 +43,24 @@
button {
cursor: pointer;
padding: 8px 16px;
padding: 0px 16px;
height: 36px;
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>

2
packages/builder/src/components/userInterface/PropControl.svelte
View file

@ -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;

1
packages/builder/src/components/userInterface/PropertyControl.svelte
View file

@ -55,7 +55,6 @@
flex: 0 0 50px;
display: flex;
align-items: center;
padding: 0px 5px;
font-size: 12px;
font-weight: 400;
text-align: left;

15
packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
View file

@ -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 {

387
packages/builder/src/components/userInterface/propertyCategories.js
View file

@ -1,6 +1,5 @@
import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Colorpicker from "./Colorpicker"
/*
@ -14,7 +13,7 @@ export const layout = [
control: OptionSelect,
initialValue: "",
options: [
{ label: "", value: "" },
{ label: "N/A ", value: "N/A" },
{ label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" },
],
@ -73,27 +72,169 @@ export const layout = [
},
]
const spacingMeta = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
export const spacing = [
export const margin = [
{
label: "Margin",
label: "All sides",
key: "margin",
control: InputGroup,
meta: spacingMeta,
defaultValue: ["0", "0", "0", "0"],
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Padding",
label: "Top",
key: "margin-top",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Right",
key: "margin-right",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Bottom",
key: "padding-bottom",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Left",
key: "margin-left",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
]
export const padding = [
{
label: "All sides",
key: "padding",
control: InputGroup,
meta: spacingMeta,
defaultValue: ["0", "0", "0", "0"],
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Top",
key: "padding-top",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Right",
key: "padding-right",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Bottom",
key: "padding-bottom",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{
label: "Left",
key: "padding-left",
control: OptionSelect,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
]
@ -103,7 +244,6 @@ export const size = [
key: "width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
@ -111,39 +251,34 @@ export const size = [
key: "height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Min W",
label: "Min Width",
key: "min-width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Min H",
key: "min-height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Max W",
label: "Max Width",
key: "max-width",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Max H",
label: "Min Height",
key: "min-height",
control: Input,
placeholder: "px",
textAlign: "center",
},
{
label: "Max Height",
key: "max-height",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
]
@ -153,8 +288,9 @@ export const position = [
label: "Position",
key: "position",
control: OptionSelect,
initialValue: "Wrap",
initialValue: "None",
options: [
{ label: "None", value: "none" },
{ label: "Static", value: "static" },
{ label: "Relative", value: "relative" },
{ label: "Fixed", value: "fixed" },
@ -167,7 +303,6 @@ export const position = [
key: "top",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
@ -175,7 +310,6 @@ export const position = [
key: "right",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
@ -183,7 +317,6 @@ export const position = [
key: "bottom",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
@ -191,16 +324,13 @@ export const position = [
key: "left",
control: Input,
placeholder: "px",
width: "48px",
textAlign: "center",
},
{
label: "Z-index",
key: "z-index",
control: Input,
placeholder: "num",
width: "48px",
textAlign: "center",
control: OptionSelect,
options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
},
]
@ -239,19 +369,28 @@ export const typography = [
{
label: "size",
key: "font-size",
defaultValue: "",
control: Input,
placeholder: "px",
width: "48px",
control: OptionSelect,
options: [
"8px",
"10px",
"12px",
"14px",
"16px",
"18px",
"20px",
"24px",
"32px",
"48px",
"60px",
"72px",
],
textAlign: "center",
},
{
label: "Line H",
key: "line-height",
control: Input,
placeholder: "lh",
width: "48px",
textAlign: "center",
control: OptionSelect,
options: ["1", "1.25", "1.5", "1.75", "2", "4"],
},
{
label: "Color",
@ -275,25 +414,20 @@ export const typography = [
key: "text-transform",
control: FlatButtonGroup,
buttonProps: [
{ text: "BB", padding: "0px 5px", fontWeight: 500, value: "uppercase" },
{ text: "Bb", padding: "0px 5px", fontWeight: 500, value: "capitalize" },
{ text: "bb", padding: "0px 5px", fontWeight: 500, value: "lowercase" },
{
text: "&times;",
padding: "0px 5px",
fontWeight: 500,
value: "none",
},
{ text: "BB", value: "uppercase" },
{ text: "Bb", value: "capitalize" },
{ text: "bb", value: "lowercase" },
{ text: "&times;", value: "none" },
],
},
{
label: "Decoration",
key: "text-decoration-line",
control: OptionSelect,
defaultValue: "Underline",
defaultValue: "None",
options: [
{ label: "Underline", value: "underline" },
{ label: "None", value: "none" },
{ label: "Underline", value: "underline" },
{ label: "Overline", value: "overline" },
{ label: "Line-through", value: "line-through" },
{ label: "Under Over", value: "underline overline" },
@ -308,11 +442,64 @@ export const background = [
control: Colorpicker,
defaultValue: "#000",
},
{
label: "Gradient",
key: "background-image",
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "None" },
{
label: "Warm Flame",
value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
},
{
label: "Night Fade",
value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
},
{
label: "Spring Warmth",
value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
},
{
label: "Sunny Morning",
value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
},
{
label: "Winter Neva",
value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
},
{
label: "Tempting Azure",
value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
},
{
label: "Heavy Rain",
value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
},
{
label: "Deep Blue",
value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
},
{
label: "Near Moon",
value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
},
{
label: "Wild Apple",
value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
},
{
label: "Plum Plate",
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
},
],
},
{
label: "Image",
key: "background-image",
control: Input,
placeholder: "src",
placeholder: "Src",
},
]
@ -324,11 +511,13 @@ export const border = [
defaultValue: "None",
options: [
{ label: "None", value: "0" },
{ label: "small", value: "0.125rem" },
{ label: "Medium", value: "0.25rem;" },
{ label: "Large", value: "0.375rem" },
{ label: "Extra large", value: "0.5rem" },
{ label: "Full", value: "5678px" },
{ label: "X Small", value: "0.125rem" },
{ label: "Small", value: "0.25rem" },
{ label: "Medium", value: "0.5rem" },
{ label: "Large", value: "1rem" },
{ label: "X Large", value: "2rem" },
{ label: "XX Large", value: "4rem" },
{ label: "Round", value: "5678px" },
],
},
{
@ -338,11 +527,11 @@ export const border = [
defaultValue: "None",
options: [
{ label: "None", value: "0" },
{ label: "Extra small", value: "0.5px" },
{ label: "X Small", value: "0.5px" },
{ label: "Small", value: "1px" },
{ label: "Medium", value: "2px" },
{ label: "Large", value: "4px" },
{ label: "Extra large", value: "8px" },
{ label: "X large", value: "8px" },
],
},
{
@ -357,16 +546,16 @@ export const border = [
control: OptionSelect,
defaultValue: "None",
options: [
"none",
"hidden",
"dotted",
"dashed",
"solid",
"double",
"groove",
"ridge",
"inset",
"outset",
"None",
"Hidden",
"Dotted",
"Dashed",
"Solid",
"Double",
"Groove",
"Ridge",
"Inset",
"Outset",
],
},
]
@ -375,28 +564,27 @@ export const effects = [
{
label: "Opacity",
key: "opacity",
control: Input,
width: "48px",
control: OptionSelect,
textAlign: "center",
placeholder: "%",
options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
},
{
label: "Rotate",
key: "transform-rotate",
key: "transform",
control: OptionSelect,
defaultValue: "0",
options: [
"0",
"45deg",
"90deg",
"90deg",
"135deg",
"180deg",
"225deg",
"270deg",
"315dev",
{ label: "None", value: "0" },
{ label: "45 deg", value: "rotate(45deg)" },
{ label: "90 deg", value: "rotate(90deg)" },
{ label: "135 deg", value: "rotate(135deg)" },
{ label: "180 deg", value: "rotate(180deg)" },
{ label: "225 deg", value: "rotate(225deg)" },
{ label: "270 deg", value: "rotate(270deg)" },
{ label: "315 deg", value: "rotate(315deg)" },
{ label: "360 deg", value: "rotate(360deg)" },
],
}, //needs special control
},
{
label: "Shadow",
key: "box-shadow",
@ -404,7 +592,7 @@ export const effects = [
defaultValue: "None",
options: [
{ label: "None", value: "none" },
{ label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{ label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{
label: "Small",
value:
@ -421,7 +609,7 @@ export const effects = [
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
},
{
label: "Extra large",
label: "X Large",
value:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
},
@ -453,10 +641,10 @@ export const transitions = [
{
label: "Duration",
key: "transition-duration",
control: Input,
width: "48px",
control: OptionSelect,
textAlign: "center",
placeholder: "sec",
options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s"],
},
{
label: "Ease",
@ -468,7 +656,8 @@ export const transitions = [
export const all = {
layout,
spacing,
margin,
padding,
size,
position,
typography,

6
packages/builder/src/components/workflow/SetupPanel/DeleteWorkflowModal.svelte
View file

@ -41,7 +41,7 @@
<style>
header {
font-size: 24px;
color: var(--font);
color: var(--ink);
font-weight: bold;
padding: 30px;
}
@ -50,7 +50,7 @@
margin-right: 10px;
font-size: 20px;
background: var(--secondary);
color: var(--dark-grey);
color: var(--grey-4);
padding: 8px;
}
@ -69,7 +69,7 @@
grid-gap: 5px;
grid-auto-columns: 3fr 1fr 1fr;
padding: 20px;
background: #fafafa;
background: var(--grey-1);
border-radius: 0.5rem;
}

18
packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
View file

@ -162,7 +162,7 @@
header {
font-size: 20px;
font-weight: 700;
font-weight: 600;
display: flex;
align-items: center;
margin-bottom: 18px;
@ -182,15 +182,15 @@
.config-item {
margin: 0px 0px 4px 0px;
padding: 12px;
background: var(--light-grey);
padding: 12px 0px;
}
.budibase_input {
height: 35px;
width: 220px;
height: 36px;
width: 244px;
border-radius: 3px;
border: 1px solid var(--grey-dark);
background-color: var(--grey-2);
border: 1px solid var(--grey-2);
text-align: left;
color: var(--ink);
font-size: 14px;
@ -198,7 +198,7 @@
}
header > span {
color: var(--ink-lighter);
color: var(--grey-5);
margin-right: 20px;
}
@ -243,7 +243,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;
@ -259,7 +259,7 @@
}
.workflow-button:hover {
background: var(--grey-light);
background: var(--grey-1);
}
.access-level {

6
packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
View file

@ -67,16 +67,16 @@
<style>
.block-field {
border-radius: 3px;
background: var(--grey-light);
background: var(--grey-1);
padding: 12px;
margin: 0px 0px 4px 0px;
}
.budibase_input {
height: 35px;
height: 36px;
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;

2
packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte
View file

@ -85,6 +85,6 @@
}
.stop-button.highlighted {
background: var(--coral);
background: var(--red);
}
</style>

8
packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
View file

@ -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 {

22
packages/builder/src/components/workflow/WorkflowPanel/BlockList/BlockList.svelte
View file

@ -52,29 +52,31 @@
<style>
.subtabs {
margin-top: 27px;
margin-top: 20px;
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
grid-auto-columns: 1fr 1fr 1fr;
margin-bottom: 10px;
margin-bottom: 12px;
}
.subtabs span {
transition: 0.3s all;
text-align: center;
color: var(--dark-grey);
font-weight: 500;
padding: 10px;
color: var(--grey-7);
font-weight: 400;
padding: 8px 16px;
text-rendering: optimizeLegibility;
border: none !important;
outline: none;
}
.subtabs span.selected {
background: var(--dark-grey);
color: var(--white);
border-radius: 2px;
background: var(--grey-3);
color: var(--ink);
border-radius: 5px;
}
.subtabs span:not(.selected) {
color: var(--dark-grey);
color: var(--ink);
}
</style>

29
packages/builder/src/components/workflow/WorkflowPanel/BlockList/WorkflowBlock.svelte
View file

@ -30,19 +30,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 {
@ -53,7 +68,7 @@
p {
font-size: 12px;
color: var(--dark-grey);
color: var(--grey-7);
margin: 0;
}
</style>

6
packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
View file

@ -41,7 +41,7 @@
<style>
header {
font-size: 24px;
color: var(--font);
color: var(--ink);
font-weight: bold;
padding: 30px;
}
@ -50,7 +50,7 @@
margin-right: 10px;
font-size: 20px;
background: var(--secondary);
color: var(--dark-grey);
color: var(--grey-4);
padding: 8px;
}
@ -69,7 +69,7 @@
grid-gap: 5px;
grid-auto-columns: 3fr 1fr 1fr;
padding: 20px;
background: #fafafa;
background: var(--grey-1);
border-radius: 0.5rem;
}

6
packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
View file

@ -89,7 +89,7 @@
.workflow-item:hover {
cursor: pointer;
background: var(--grey-light);
background: var(--grey-1);
}
.workflow-item.selected {
@ -98,7 +98,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;
@ -113,7 +113,7 @@
}
.new-workflow-button:hover {
background: var(--grey-light);
background: var(--grey-1);
}
.icon {

4
packages/builder/src/components/workflow/WorkflowPanel/WorkflowPanel.svelte
View file

@ -35,7 +35,7 @@
<style>
header {
font-size: 18px;
font-weight: 700;
font-weight: 600;
background: none;
display: flex;
align-items: center;
@ -47,7 +47,7 @@
}
span:not(.selected) {
color: var(--ink-lighter);
color: var(--grey-5);
}
span:not(.selected):hover {

67
packages/builder/src/fonts.css
View file

@ -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+ */
}

108
packages/builder/src/global.css
View file

@ -8,96 +8,42 @@
--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;
--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;
--success100: #49C39EFF;
--success75: #49C39EBF;
--success50: #49C39E80;
--success25: #49C39E40;
--success10: #49C39E1A;
--successdark: #44B492;
--deletion100: #F2545BFF;
--deletion75: #F2545BBF;
--deletion50: #F2545B80;
--deletion25: #F2545B40;
--deletion10: #F2545B1A;
--deletiondark: #CF4046;
--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 {
font-family: var(--fontnormal);
color: var(--secondary80);
font-family: inter;
color: var(--ink);
padding: 0;
margin: 0;
height:100%;
width:100%;
height: 100%;
width: 100%;
}
#app {
@ -107,43 +53,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 {

11
packages/builder/src/main.js
View file

@ -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"

14
packages/builder/src/pages/[application]/_reset.svelte
View file

@ -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;

2
packages/builder/src/pages/[application]/backend/_layout.svelte
View file

@ -23,7 +23,7 @@
.root {
height: 100%;
display: flex;
background: #fafafa;
background: var(--grey-1);
}
.content {

4
packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
View file

@ -28,9 +28,7 @@
{:else if $backendUiStore.selectedDatabase._id && selectedModel.name}
<ModelDataTable />
{:else}
<i style="color: var(--grey-dark)">
create your first model to start building
</i>
<i style="color: var(--grey-4)">create your first model to start building</i>
{/if}
<style>

6
packages/builder/src/pages/[application]/frontend/_layout.svelte
View file

@ -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>

6
packages/builder/src/pages/[application]/workflow/_layout.svelte
View file

@ -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);
}

7
packages/builder/src/pages/_layout.svelte
View file

@ -36,7 +36,6 @@
<Link icon={DocumentationIcon} title="Documentation" href="/" />
<Link icon={TutorialsIcon} title="Tutorials" href="/" />
<Link icon={CommunityIcon} title="Community" href="/" />
<Link icon={ContributionIcon} title="Contact" href="/" />
</div>
<div class="nav-section">
@ -63,7 +62,7 @@
grid-template-columns: 300px 1fr;
height: 100%;
width: 100%;
background: var(--grey-light);
background: var(--grey-1);
}
.main {
@ -76,7 +75,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 +97,7 @@
.nav-section-title {
font-size: 20px;
color: var(--ink);
font-weight: 700;
font-weight: 600;
margin-bottom: 12px;
}
</style>

6
packages/builder/src/pages/index.svelte
View file

@ -73,7 +73,7 @@
.welcome {
font-size: 42px;
color: var(--ink);
font-weight: 900;
font-weight: 700;
margin: 40px 0px 0px 80px;
}
@ -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>

BIN
packages/server/builder/assets/Inter-Black.woff Normal file
View file

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Black.woff2 Normal file
View file

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Bold.woff Normal file
View file

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
packages/server/builder/assets/Inter-ExtraBold.woff Normal file
View file

Binary file not shown.

BIN
packages/server/builder/assets/Inter-ExtraBold.woff2 Normal file
View file

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Medium.woff Normal file
View file

Binary file not shown.

BIN
packages/server/builder/assets/Inter-Medium.woff2 Normal file
View file

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show more