Merge branch 'master' of github.com:Budibase/budibase
This commit is contained in:
Michael Shanks
commit
59afd2c572
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.
|
|
@ -51,7 +51,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@beyonk/svelte-notifications": "^2.0.3",
|
"@beyonk/svelte-notifications": "^2.0.3",
|
||||||
"@budibase/bbui": "^1.8.0",
|
"@budibase/bbui": "^1.10.1",
|
||||||
"@budibase/client": "^0.0.32",
|
"@budibase/client": "^0.0.32",
|
||||||
"@nx-js/compiler-util": "^2.0.0",
|
"@nx-js/compiler-util": "^2.0.0",
|
||||||
"codemirror": "^5.51.0",
|
"codemirror": "^5.51.0",
|
||||||
|
|
|
||||||
|
|
@ -57,13 +57,14 @@
|
||||||
.budibase__nav-item {
|
.budibase__nav-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0 4px 0 2px;
|
padding: 0 4px 0 2px;
|
||||||
height: 35px;
|
height: 36px;
|
||||||
margin: 5px 0px 4px 0px;
|
margin: 0px 0px 0px 0px;
|
||||||
border-radius: 0 5px 5px 0;
|
border-radius: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
|
border-top: var(--grey-1) .5px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase__nav-item.selected {
|
.budibase__nav-item.selected {
|
||||||
|
|
@ -72,14 +73,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase__nav-item:hover {
|
.budibase__nav-item:hover {
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase__input {
|
.budibase__input {
|
||||||
height: 35px;
|
height: 36px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -100,7 +101,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase__table {
|
.budibase__table {
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
@ -116,12 +117,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase__table tr {
|
.budibase__table tr {
|
||||||
border-bottom: 1px solid var(--grey-light);
|
border-bottom: 1px solid var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button--toggled {
|
.button--toggled {
|
||||||
background: var(--blue-light);
|
background: var(--blue-light);
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
|
|
||||||
.secondary {
|
.secondary {
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
border: solid 1px var(--grey-dark);
|
border: solid 1px var(--grey-4);
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,9 +55,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.uk-notification-message-danger) {
|
:global(.uk-notification-message-danger) {
|
||||||
background: var(--ink-light) !important;
|
background: var(--grey-9) !important;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
font-family: Roboto;
|
|
||||||
font-size: 16px !important;
|
font-size: 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -72,6 +71,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.refresh-page-button):hover {
|
:global(.refresh-page-button):hover {
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -42,14 +42,14 @@
|
||||||
|
|
||||||
/* ---- PRIMARY ----*/
|
/* ---- PRIMARY ----*/
|
||||||
.primary {
|
.primary {
|
||||||
background-color: var(--primary100);
|
background-color: var(--blue);
|
||||||
border-color: var(--primary100);
|
border-color: var(--blue);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary:hover {
|
.primary:hover {
|
||||||
background-color: var(--primary75);
|
background-color: var(--blue);
|
||||||
border-color: var(--primary75);
|
border-color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary:active {
|
.primary:active {
|
||||||
|
|
@ -59,8 +59,8 @@
|
||||||
|
|
||||||
.primary-outline {
|
.primary-outline {
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
border-color: var(--primary100);
|
border-color: var(--blue);
|
||||||
color: var(--primary100);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.primary-outline:hover {
|
.primary-outline:hover {
|
||||||
|
|
@ -74,8 +74,8 @@
|
||||||
/* ---- secondary ----*/
|
/* ---- secondary ----*/
|
||||||
|
|
||||||
.secondary {
|
.secondary {
|
||||||
background-color: var(--secondary100);
|
background-color: var(--ink);
|
||||||
border-color: var(--secondary100);
|
border-color: var(--ink);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -91,8 +91,8 @@
|
||||||
|
|
||||||
.secondary-outline {
|
.secondary-outline {
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
border-color: var(--secondary100);
|
border-color: var(--ink);
|
||||||
color: var(--secondary100);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary-outline:hover {
|
.secondary-outline:hover {
|
||||||
|
|
@ -136,32 +136,36 @@
|
||||||
|
|
||||||
/* ---- deletion ----*/
|
/* ---- deletion ----*/
|
||||||
.deletion {
|
.deletion {
|
||||||
background-color: var(--deletion100);
|
background-color: var(--red);
|
||||||
border-color: var(--deletion100);
|
border-color: var(--red);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.deletion:hover {
|
.deletion:hover {
|
||||||
background-color: var(--deletion75);
|
background-color: var(--red-light);
|
||||||
border-color: var(--deletion75);
|
border-color: var(--red);
|
||||||
|
color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.deletion:pressed {
|
.deletion:pressed {
|
||||||
background-color: var(--deletiondark);
|
background-color: var(--red-dark);
|
||||||
border-color: var(--deletiondark);
|
border-color: var(--red-dark);
|
||||||
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.deletion-outline {
|
.deletion-outline {
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
border-color: var(--deletion100);
|
border-color: var(--red);
|
||||||
color: var(--deletion100);
|
color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.deletion-outline:hover {
|
.deletion-outline:hover {
|
||||||
background-color: var(--deletion10);
|
background-color: var(--red-light);
|
||||||
|
color: var(--red);
|
||||||
}
|
}
|
||||||
|
|
||||||
.deletion-outline:pressed {
|
.deletion-outline:pressed {
|
||||||
background-color: var(--deletion25);
|
background-color: var(--red-dark);
|
||||||
|
color: var(--white);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background: var(--secondary80);
|
background: var(--grey-7);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-family: "Courier New", Courier, monospace;
|
font-family: "Courier New", Courier, monospace;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.uk-modal-footer {
|
.uk-modal-footer {
|
||||||
background: var(--lightslate);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-modal-dialog {
|
.uk-modal-dialog {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
export let size = 18
|
export let size = 18
|
||||||
export let icon = ""
|
export let icon = ""
|
||||||
export let style = ""
|
export let style = ""
|
||||||
export let color = "var(--secondary100)"
|
export let color = "var(--ink)"
|
||||||
export let hoverColor = "var(--secondary75)"
|
export let hoverColor = "var(--secondary75)"
|
||||||
export let attributes = {}
|
export let attributes = {}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -37,19 +37,18 @@
|
||||||
<style>
|
<style>
|
||||||
input {
|
input {
|
||||||
/* width: 32px; */
|
/* width: 32px; */
|
||||||
height: 32px;
|
height: 36px;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 400;
|
||||||
margin: 0px 0px 0px 1px;
|
margin: 0px 0px 0px 2px;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
opacity: 0.7;
|
padding: 0px 8px;
|
||||||
padding: 0px 4px;
|
font-family: inter;
|
||||||
line-height: 1.3;
|
|
||||||
/* padding: 12px; */
|
|
||||||
width: 164px;
|
width: 164px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid var(--grey);
|
background-color: var(--grey-2);
|
||||||
border-radius: 2px;
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--grey-2);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: var(--secondary100);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
.select-container {
|
.select-container {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
position: relative;
|
position: relative;
|
||||||
border: var(--grey-dark) 1px solid;
|
border: var(--grey-4) 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.adjusted {
|
.adjusted {
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 20px 20px;
|
padding: 20px 20px;
|
||||||
border-left: solid 1px var(--grey);
|
border-left: solid 1px var(--grey-2);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -60,10 +60,11 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
background: none;
|
background: none;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher > .selected {
|
.switcher > .selected {
|
||||||
|
|
|
||||||
|
|
@ -55,14 +55,12 @@
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if ($backendUiStore.selectedView) {
|
if ($backendUiStore.selectedView) {
|
||||||
api
|
api.fetchDataForView($backendUiStore.selectedView).then(records => {
|
||||||
.fetchDataForView($backendUiStore.selectedView)
|
data = records || []
|
||||||
.then(records => {
|
headers = Object.keys($backendUiStore.selectedModel.schema).filter(
|
||||||
data = records || []
|
key => !INTERNAL_HEADERS.includes(key)
|
||||||
headers = Object.keys($backendUiStore.selectedModel.schema).filter(
|
)
|
||||||
key => !INTERNAL_HEADERS.includes(key)
|
})
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -143,7 +141,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
@ -151,7 +149,7 @@
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
background: var(--blue-light);
|
background: var(--blue-light);
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
thead th {
|
thead th {
|
||||||
|
|
@ -160,18 +158,17 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr {
|
tbody tr {
|
||||||
border-bottom: 1px solid var(--grey-dark);
|
border-bottom: 1px solid var(--grey-4);
|
||||||
transition: 0.3s background-color;
|
transition: 0.3s background-color;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr:hover {
|
tbody tr:hover {
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-controls {
|
.table-controls {
|
||||||
|
|
|
||||||
|
|
@ -58,20 +58,19 @@
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid var(--grey-4);
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-family: Roboto;
|
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
transition: 0.3s background-color;
|
transition: 0.3s background-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination__buttons button:hover {
|
.pagination__buttons button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: #fafafa;
|
background-color: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
color: var(--button-text);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fafafa;
|
background: var(--grey-1);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -130,7 +130,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody > tr:hover {
|
tbody > tr:hover {
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-controls {
|
.table-controls {
|
||||||
|
|
@ -156,7 +156,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
padding: 20px 40px 20px 40px;
|
padding: 20px 40px 20px 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,7 @@
|
||||||
border-radius: 0 0 5px 5px;
|
border-radius: 0 0 5px 5px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fafafa;
|
background: var(--grey-1);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@
|
||||||
.snippet-selector__heading {
|
.snippet-selector__heading {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
|
@ -116,7 +116,7 @@
|
||||||
.buttons {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
margin: 0 40px;
|
margin: 0 40px;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
|
|
@ -84,7 +84,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
border-radius: 0 0 5px 5px;
|
border-radius: 0 0 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
|
|
||||||
export let record
|
export let record
|
||||||
export let onClosed
|
export let onClosed
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|
@ -36,13 +35,13 @@
|
||||||
<style>
|
<style>
|
||||||
.alert {
|
.alert {
|
||||||
color: rgba(255, 0, 31, 1);
|
color: rgba(255, 0, 31, 1);
|
||||||
background: #fafafa;
|
background: var(--grey-1);
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-actions {
|
.modal-actions {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #fafafa;
|
background: var(--grey-1);
|
||||||
border-top: 1px solid #ccc;
|
border-top: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,7 @@
|
||||||
.hierarchy-title {
|
.hierarchy-title {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
<style>
|
<style>
|
||||||
.root {
|
.root {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: var(--secondary100);
|
color: var(--ink);
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
@ -76,7 +76,6 @@
|
||||||
margin: 0 0 0 6px;
|
margin: 0 0 0 6px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
font-family: Roboto;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -126,7 +126,7 @@
|
||||||
.hierarchy-title {
|
.hierarchy-title {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,6 @@
|
||||||
margin: 0 0 0 6px;
|
margin: 0 0 0 6px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
font-family: Roboto;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -21,23 +21,25 @@
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
max-height: 150px;
|
max-height: 150px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid var(--grey-medium);
|
border: 1px solid var(--grey-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-button:hover {
|
.app-button:hover {
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-title {
|
.app-title {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
font-family: Inter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-desc {
|
.app-desc {
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
|
font-family: Inter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-footer {
|
.card-footer {
|
||||||
|
|
@ -56,7 +58,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 12px 20px;
|
padding: 12px 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px var(--grey) solid;
|
border: 1px var(--grey-2) solid;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -142,11 +142,11 @@
|
||||||
background-color: var(--blue-light);
|
background-color: var(--blue-light);
|
||||||
}
|
}
|
||||||
.info {
|
.info {
|
||||||
color: var(--primary100);
|
color: var(--blue);
|
||||||
text-decoration-color: var(--primary100);
|
text-decoration-color: var(--blue);
|
||||||
}
|
}
|
||||||
.info :global(svg) {
|
.info :global(svg) {
|
||||||
fill: var(--primary100);
|
fill: var(--blue);
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
|
@ -164,7 +164,7 @@
|
||||||
padding: 30px 40px;
|
padding: 30px 40px;
|
||||||
border-bottom-left-radius: 5px;
|
border-bottom-left-radius: 5px;
|
||||||
border-bottom-right-radius: 50px;
|
border-bottom-right-radius: 50px;
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
}
|
}
|
||||||
.spinner-container {
|
.spinner-container {
|
||||||
background: white;
|
background: white;
|
||||||
|
|
@ -183,7 +183,7 @@
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
.error {
|
.error {
|
||||||
color: var(--deletion100);
|
color: var(--red);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,11 +21,11 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,21 @@
|
||||||
<script>
|
<script>
|
||||||
import FlatButton from "./FlatButton.svelte";
|
import FlatButton from "./FlatButton.svelte"
|
||||||
|
|
||||||
export let format = "hex";
|
export let format = "hex"
|
||||||
export let onclick = format => {};
|
export let onclick = format => {}
|
||||||
|
|
||||||
let colorFormats = ["hex", "rgb", "hsl"];
|
let colorFormats = ["hex", "rgb", "hsl"]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="flatbutton-group">
|
||||||
|
{#each colorFormats as text}
|
||||||
|
<FlatButton
|
||||||
|
selected={format === text}
|
||||||
|
{text}
|
||||||
|
on:click={() => onclick(text)} />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.flatbutton-group {
|
.flatbutton-group {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -18,12 +27,3 @@
|
||||||
align-self: center;
|
align-self: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="flatbutton-group">
|
|
||||||
{#each colorFormats as text}
|
|
||||||
<FlatButton
|
|
||||||
selected={format === text}
|
|
||||||
{text}
|
|
||||||
on:click={() => onclick(text)} />
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,25 @@
|
||||||
<script>
|
<script>
|
||||||
import {buildStyle} from "./helpers.js"
|
import { buildStyle } from "./helpers.js"
|
||||||
import {fade} from "svelte/transition"
|
import { fade } from "svelte/transition"
|
||||||
|
|
||||||
export let backgroundSize = "10px"
|
export let backgroundSize = "10px"
|
||||||
export let borderRadius = ""
|
export let borderRadius = ""
|
||||||
export let height = ""
|
export let height = ""
|
||||||
export let width = ""
|
export let width = ""
|
||||||
export let margin = ""
|
export let margin = ""
|
||||||
|
|
||||||
$: style = buildStyle({backgroundSize, borderRadius, height, width, margin})
|
$: style = buildStyle({ backgroundSize, borderRadius, height, width, margin })
|
||||||
|
|
||||||
|
$: style = buildStyle({ backgroundSize, borderRadius, height, width })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<div in:fade {style}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
|
background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
|
||||||
|
|
@ -19,7 +27,3 @@
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div in:fade {style}>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,39 +1,39 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte";
|
import { onMount, createEventDispatcher } from "svelte"
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from "svelte/transition"
|
||||||
import Swatch from "./Swatch.svelte";
|
import Swatch from "./Swatch.svelte"
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
import {buildStyle} from "./helpers.js"
|
import { buildStyle } from "./helpers.js"
|
||||||
import {
|
import {
|
||||||
getColorFormat,
|
getColorFormat,
|
||||||
convertToHSVA,
|
convertToHSVA,
|
||||||
convertHsvaToFormat
|
convertHsvaToFormat,
|
||||||
} from "./utils.js";
|
} from "./utils.js"
|
||||||
import Slider from "./Slider.svelte";
|
import Slider from "./Slider.svelte"
|
||||||
import Palette from "./Palette.svelte";
|
import Palette from "./Palette.svelte"
|
||||||
import ButtonGroup from "./ButtonGroup.svelte";
|
import ButtonGroup from "./ButtonGroup.svelte"
|
||||||
import Input from "./Input.svelte";
|
import Input from "./Input.svelte"
|
||||||
|
|
||||||
export let value = "#3ec1d3ff";
|
export let value = "#3ec1d3ff"
|
||||||
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
export let swatches = [] //TODO: Safe swatches - limit to 12. warn in console
|
||||||
export let disableSwatches = false
|
export let disableSwatches = false
|
||||||
export let format = "hexa";
|
export let format = "hexa"
|
||||||
export let open = false;
|
export let open = false
|
||||||
|
|
||||||
export let pickerHeight = 0;
|
|
||||||
export let pickerWidth = 0;
|
|
||||||
|
|
||||||
let adder = null;
|
export let pickerHeight = 0
|
||||||
|
export let pickerWidth = 0
|
||||||
|
|
||||||
let h = null;
|
let adder = null
|
||||||
let s = null;
|
|
||||||
let v = null;
|
|
||||||
let a = null;
|
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
let h = null
|
||||||
|
let s = null
|
||||||
|
let v = null
|
||||||
|
let a = null
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if(!swatches.length > 0) {
|
if (!swatches.length > 0) {
|
||||||
//Don't use locally stored recent colors if swatches have been passed as props
|
//Don't use locally stored recent colors if swatches have been passed as props
|
||||||
getRecentColors()
|
getRecentColors()
|
||||||
}
|
}
|
||||||
|
|
@ -41,12 +41,12 @@
|
||||||
if (format) {
|
if (format) {
|
||||||
convertAndSetHSVA()
|
convertAndSetHSVA()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
function getRecentColors() {
|
function getRecentColors() {
|
||||||
let colorStore = localStorage.getItem("cp:recent-colors")
|
let colorStore = localStorage.getItem("cp:recent-colors")
|
||||||
if (colorStore) {
|
if (colorStore) {
|
||||||
swatches = JSON.parse(colorStore)
|
swatches = JSON.parse(colorStore)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -61,39 +61,39 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function convertAndSetHSVA() {
|
function convertAndSetHSVA() {
|
||||||
let hsva = convertToHSVA(value, format);
|
let hsva = convertToHSVA(value, format)
|
||||||
setHSVA(hsva);
|
setHSVA(hsva)
|
||||||
}
|
}
|
||||||
|
|
||||||
function setHSVA([hue, sat, val, alpha]) {
|
function setHSVA([hue, sat, val, alpha]) {
|
||||||
h = hue;
|
h = hue
|
||||||
s = sat;
|
s = sat
|
||||||
v = val;
|
v = val
|
||||||
a = alpha;
|
a = alpha
|
||||||
}
|
}
|
||||||
|
|
||||||
//fired by choosing a color from the palette
|
//fired by choosing a color from the palette
|
||||||
function setSaturationAndValue({ detail }) {
|
function setSaturationAndValue({ detail }) {
|
||||||
s = detail.s;
|
s = detail.s
|
||||||
v = detail.v;
|
v = detail.v
|
||||||
value = convertHsvaToFormat([h, s, v, a], format);
|
value = convertHsvaToFormat([h, s, v, a], format)
|
||||||
dispatchValue()
|
dispatchValue()
|
||||||
}
|
}
|
||||||
|
|
||||||
function setHue({color, isDrag}) {
|
function setHue({ color, isDrag }) {
|
||||||
h = color;
|
h = color
|
||||||
value = convertHsvaToFormat([h, s, v, a], format);
|
value = convertHsvaToFormat([h, s, v, a], format)
|
||||||
if(!isDrag) {
|
if (!isDrag) {
|
||||||
dispatchValue()
|
dispatchValue()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAlpha({color, isDrag}) {
|
function setAlpha({ color, isDrag }) {
|
||||||
a = color === "1.00" ? "1" : color;
|
a = color === "1.00" ? "1" : color
|
||||||
value = convertHsvaToFormat([h, s, v, a], format);
|
value = convertHsvaToFormat([h, s, v, a], format)
|
||||||
if(!isDrag) {
|
if (!isDrag) {
|
||||||
dispatchValue()
|
dispatchValue()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function dispatchValue() {
|
function dispatchValue() {
|
||||||
|
|
@ -101,43 +101,42 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeFormatAndConvert(f) {
|
function changeFormatAndConvert(f) {
|
||||||
format = f;
|
format = f
|
||||||
value = convertHsvaToFormat([h, s, v, a], format);
|
value = convertHsvaToFormat([h, s, v, a], format)
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleColorInput(text) {
|
function handleColorInput(text) {
|
||||||
let format = getColorFormat(text)
|
let format = getColorFormat(text)
|
||||||
if(format) {
|
if (format) {
|
||||||
value = text
|
value = text
|
||||||
convertAndSetHSVA()
|
convertAndSetHSVA()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function dispatchInputChange() {
|
function dispatchInputChange() {
|
||||||
if(format) {
|
if (format) {
|
||||||
dispatchValue()
|
dispatchValue()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function addSwatch() {
|
function addSwatch() {
|
||||||
if(format) {
|
if (format) {
|
||||||
dispatch("addswatch", value)
|
dispatch("addswatch", value)
|
||||||
setRecentColor(value)
|
setRecentColor(value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeSwatch(idx) {
|
function removeSwatch(idx) {
|
||||||
let removedSwatch = swatches.splice(idx, 1);
|
let removedSwatch = swatches.splice(idx, 1)
|
||||||
swatches = swatches
|
swatches = swatches
|
||||||
dispatch("removeswatch", removedSwatch)
|
dispatch("removeswatch", removedSwatch)
|
||||||
localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
|
localStorage.setItem("cp:recent-colors", JSON.stringify(swatches))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function applySwatch(color) {
|
function applySwatch(color) {
|
||||||
if(value !== color) {
|
if (value !== color) {
|
||||||
format = getColorFormat(color)
|
format = getColorFormat(color)
|
||||||
if(format) {
|
if (format) {
|
||||||
value = color
|
value = color
|
||||||
convertAndSetHSVA()
|
convertAndSetHSVA()
|
||||||
dispatchValue()
|
dispatchValue()
|
||||||
|
|
@ -145,11 +144,112 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: border = (v > 90 && s < 5) ? "1px dashed #dedada" : ""
|
$: border = v > 90 && s < 5 ? "1px dashed #dedada" : ""
|
||||||
$: style = buildStyle({background: value, border})
|
$: style = buildStyle({ background: value, border })
|
||||||
$: shrink = swatches.length > 0
|
$: shrink = swatches.length > 0
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="colorpicker-container">
|
||||||
|
|
||||||
|
<div class="palette-panel">
|
||||||
|
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-panel">
|
||||||
|
<div class="alpha-hue-panel">
|
||||||
|
<div>
|
||||||
|
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
||||||
|
<div class="selected-color" {style} />
|
||||||
|
</CheckedBackground>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
|
||||||
|
|
||||||
|
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
||||||
|
<Slider
|
||||||
|
type="alpha"
|
||||||
|
value={a}
|
||||||
|
on:change={alpha => setAlpha(alpha.detail)} />
|
||||||
|
</CheckedBackground>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-input-panel">
|
||||||
|
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
||||||
|
<Input {value} on:input={event => handleColorInput(event.target.value)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="colorpicker-container"
|
||||||
|
bind:clientHeight={pickerHeight}
|
||||||
|
bind:clientWidth={pickerWidth}>
|
||||||
|
|
||||||
|
<div class="palette-panel">
|
||||||
|
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control-panel">
|
||||||
|
<div class="alpha-hue-panel">
|
||||||
|
<div>
|
||||||
|
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
||||||
|
<div class="selected-color" {style} />
|
||||||
|
</CheckedBackground>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Slider
|
||||||
|
type="hue"
|
||||||
|
value={h}
|
||||||
|
on:change={hue => setHue(hue.detail)}
|
||||||
|
on:dragend={dispatchValue} />
|
||||||
|
|
||||||
|
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
||||||
|
<Slider
|
||||||
|
type="alpha"
|
||||||
|
value={a}
|
||||||
|
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
|
||||||
|
on:dragend={dispatchValue} />
|
||||||
|
</CheckedBackground>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if !disableSwatches}
|
||||||
|
<div transition:fade class="swatch-panel">
|
||||||
|
{#if swatches.length > 0}
|
||||||
|
{#each swatches as color, idx}
|
||||||
|
<Swatch
|
||||||
|
{color}
|
||||||
|
on:click={() => applySwatch(color)}
|
||||||
|
on:removeswatch={() => removeSwatch(idx)} />
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
{#if swatches.length !== 12}
|
||||||
|
<div
|
||||||
|
bind:this={adder}
|
||||||
|
transition:fade
|
||||||
|
class="adder"
|
||||||
|
on:click={addSwatch}
|
||||||
|
class:shrink>
|
||||||
|
<span>+</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="format-input-panel">
|
||||||
|
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
||||||
|
<Input
|
||||||
|
{value}
|
||||||
|
on:input={event => handleColorInput(event.target.value)}
|
||||||
|
on:change={dispatchInputChange} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.colorpicker-container {
|
.colorpicker-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -161,7 +261,8 @@
|
||||||
width: 220px;
|
width: 220px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
box-shadow: 0 0.15em 1.5em 0 rgba(0,0,0,.1), 0 0 1em 0 rgba(0,0,0,.03);
|
box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1),
|
||||||
|
0 0 1em 0 rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.palette-panel {
|
.palette-panel {
|
||||||
|
|
@ -192,7 +293,7 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swatch-panel {
|
.swatch-panel {
|
||||||
flex: 0 0 15px;
|
flex: 0 0 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
|
@ -203,7 +304,7 @@
|
||||||
|
|
||||||
.adder {
|
.adder {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
transition: flex 0.5s;
|
transition: flex 0.5s;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -217,7 +318,7 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shrink {
|
.shrink {
|
||||||
flex: 0 0 20px;
|
flex: 0 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -228,54 +329,3 @@
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="colorpicker-container" bind:clientHeight={pickerHeight} bind:clientWidth={pickerWidth}>
|
|
||||||
|
|
||||||
<div class="palette-panel">
|
|
||||||
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="control-panel">
|
|
||||||
<div class="alpha-hue-panel">
|
|
||||||
<div>
|
|
||||||
<CheckedBackground borderRadius="50%" backgroundSize="8px">
|
|
||||||
<div class="selected-color" {style} />
|
|
||||||
</CheckedBackground>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Slider type="hue" value={h} on:change={(hue) => setHue(hue.detail)} on:dragend={dispatchValue} />
|
|
||||||
|
|
||||||
<CheckedBackground borderRadius="10px" backgroundSize="7px">
|
|
||||||
<Slider
|
|
||||||
type="alpha"
|
|
||||||
value={a}
|
|
||||||
on:change={(alpha, isDrag) => setAlpha(alpha.detail, isDrag)}
|
|
||||||
on:dragend={dispatchValue}
|
|
||||||
/>
|
|
||||||
</CheckedBackground>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if !disableSwatches}
|
|
||||||
<div transition:fade class="swatch-panel">
|
|
||||||
{#if swatches.length > 0}
|
|
||||||
{#each swatches as color, idx}
|
|
||||||
<Swatch {color} on:click={() => applySwatch(color)} on:removeswatch={() => removeSwatch(idx)} />
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
{#if swatches.length !== 12}
|
|
||||||
<div bind:this={adder} transition:fade class="adder" on:click={addSwatch} class:shrink>
|
|
||||||
<span>+</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="format-input-panel">
|
|
||||||
<ButtonGroup {format} onclick={changeFormatAndConvert} />
|
|
||||||
<Input {value} on:input={event => handleColorInput(event.target.value)} on:change={dispatchInputChange} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,152 +1,184 @@
|
||||||
<script>
|
<script>
|
||||||
import Colorpicker from "./Colorpicker.svelte"
|
import Colorpicker from "./Colorpicker.svelte"
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
import {createEventDispatcher, afterUpdate, beforeUpdate} from "svelte"
|
import { createEventDispatcher, afterUpdate, beforeUpdate } from "svelte"
|
||||||
|
|
||||||
import {buildStyle} from "./helpers.js"
|
import { buildStyle } from "./helpers.js"
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from "svelte/transition"
|
||||||
import {getColorFormat} from "./utils.js"
|
import { getColorFormat } from "./utils.js"
|
||||||
|
|
||||||
export let value = "#3ec1d3ff"
|
export let value = "#3ec1d3ff"
|
||||||
export let swatches = []
|
export let swatches = []
|
||||||
export let disableSwatches = false
|
export let disableSwatches = false
|
||||||
export let open = false;
|
export let open = false
|
||||||
export let width = "25px"
|
export let width = "25px"
|
||||||
export let height = "25px"
|
export let height = "25px"
|
||||||
|
|
||||||
let format = "hexa";
|
let format = "hexa"
|
||||||
let dimensions = {top: 0, left: 0}
|
let dimensions = { top: 0, left: 0 }
|
||||||
let colorPreview = null
|
let colorPreview = null
|
||||||
|
|
||||||
let previewHeight = null
|
let previewHeight = null
|
||||||
let previewWidth = null
|
let previewWidth = null
|
||||||
let pickerWidth = 0
|
let pickerWidth = 0
|
||||||
let pickerHeight = 0
|
let pickerHeight = 0
|
||||||
|
|
||||||
let anchorEl = null
|
let anchorEl = null
|
||||||
let parentNodes = [];
|
let parentNodes = []
|
||||||
let errorMsg = null
|
let errorMsg = null
|
||||||
|
|
||||||
$: previewStyle = buildStyle({width, height, background: value})
|
$: previewStyle = buildStyle({ width, height, background: value })
|
||||||
$: errorPreviewStyle = buildStyle({width, height})
|
$: errorPreviewStyle = buildStyle({ width, height })
|
||||||
$: pickerStyle = buildStyle({top: `${dimensions.top}px`, left: `${dimensions.left}px`})
|
$: pickerStyle = buildStyle({
|
||||||
|
top: `${dimensions.top}px`,
|
||||||
|
left: `${dimensions.left}px`,
|
||||||
|
})
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
beforeUpdate(() => {
|
beforeUpdate(() => {
|
||||||
format = getColorFormat(value)
|
format = getColorFormat(value)
|
||||||
if(!format) {
|
if (!format) {
|
||||||
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
errorMsg = `Colorpicker - ${value} is an unknown color format. Please use a hex, rgb or hsl value`
|
||||||
console.error(errorMsg)
|
console.error(errorMsg)
|
||||||
}else{
|
} else {
|
||||||
errorMsg = null
|
errorMsg = null
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
if(colorPreview && colorPreview.offsetParent && !anchorEl) {
|
if (colorPreview && colorPreview.offsetParent && !anchorEl) {
|
||||||
//Anchor relative to closest positioned ancestor element. If none, then anchor to body
|
//Anchor relative to closest positioned ancestor element. If none, then anchor to body
|
||||||
anchorEl = colorPreview.offsetParent
|
anchorEl = colorPreview.offsetParent
|
||||||
let curEl = colorPreview
|
let curEl = colorPreview
|
||||||
let els = []
|
let els = []
|
||||||
//Travel up dom tree from preview element to find parent elements that scroll
|
//Travel up dom tree from preview element to find parent elements that scroll
|
||||||
while(!anchorEl.isSameNode(curEl)) {
|
while (!anchorEl.isSameNode(curEl)) {
|
||||||
curEl = curEl.parentNode
|
curEl = curEl.parentNode
|
||||||
let elOverflow = window.getComputedStyle(curEl).getPropertyValue("overflow")
|
let elOverflow = window
|
||||||
if(/scroll|auto/.test(elOverflow)) {
|
.getComputedStyle(curEl)
|
||||||
els.push(curEl)
|
.getPropertyValue("overflow")
|
||||||
}
|
if (/scroll|auto/.test(elOverflow)) {
|
||||||
}
|
els.push(curEl)
|
||||||
parentNodes = els
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
function openColorpicker(event) {
|
|
||||||
if(colorPreview) {
|
|
||||||
open = true;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
parentNodes = els
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
$: if(open && colorPreview) {
|
function openColorpicker(event) {
|
||||||
const {top: spaceAbove, width, bottom, right, left: spaceLeft} = colorPreview.getBoundingClientRect()
|
if (colorPreview) {
|
||||||
const {innerHeight, innerWidth} = window
|
open = true
|
||||||
|
|
||||||
const {offsetLeft, offsetTop} = colorPreview
|
|
||||||
//get the scrollTop value for all scrollable parent elements
|
|
||||||
let scrollTop = parentNodes.reduce((scrollAcc, el) => scrollAcc += el.scrollTop, 0);
|
|
||||||
|
|
||||||
const spaceBelow = (innerHeight - spaceAbove) - previewHeight
|
|
||||||
const top = spaceAbove > spaceBelow ? (offsetTop - pickerHeight) - scrollTop : (offsetTop + previewHeight) - scrollTop
|
|
||||||
|
|
||||||
//TOO: Testing and Scroll Awareness for x Scroll
|
|
||||||
const spaceRight = (innerWidth - spaceLeft) + previewWidth
|
|
||||||
const left = spaceRight > spaceLeft ? (offsetLeft + previewWidth) : offsetLeft - pickerWidth
|
|
||||||
|
|
||||||
dimensions = {top, left}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onColorChange(color) {
|
$: if (open && colorPreview) {
|
||||||
value = color.detail;
|
const {
|
||||||
dispatch("change", color.detail)
|
top: spaceAbove,
|
||||||
}
|
width,
|
||||||
|
bottom,
|
||||||
|
right,
|
||||||
|
left: spaceLeft,
|
||||||
|
} = colorPreview.getBoundingClientRect()
|
||||||
|
const { innerHeight, innerWidth } = window
|
||||||
|
|
||||||
|
const { offsetLeft, offsetTop } = colorPreview
|
||||||
|
//get the scrollTop value for all scrollable parent elements
|
||||||
|
let scrollTop = parentNodes.reduce(
|
||||||
|
(scrollAcc, el) => (scrollAcc += el.scrollTop),
|
||||||
|
0
|
||||||
|
)
|
||||||
|
|
||||||
|
const spaceBelow = innerHeight - spaceAbove - previewHeight
|
||||||
|
const top =
|
||||||
|
spaceAbove > spaceBelow
|
||||||
|
? offsetTop - pickerHeight - scrollTop
|
||||||
|
: offsetTop + previewHeight - scrollTop
|
||||||
|
|
||||||
|
//TOO: Testing and Scroll Awareness for x Scroll
|
||||||
|
const spaceRight = innerWidth - spaceLeft + previewWidth
|
||||||
|
const left =
|
||||||
|
spaceRight > spaceLeft
|
||||||
|
? offsetLeft + previewWidth
|
||||||
|
: offsetLeft - pickerWidth
|
||||||
|
|
||||||
|
dimensions = { top, left }
|
||||||
|
}
|
||||||
|
|
||||||
|
function onColorChange(color) {
|
||||||
|
value = color.detail
|
||||||
|
dispatch("change", color.detail)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="color-preview-container">
|
<div class="color-preview-container">
|
||||||
{#if !errorMsg}
|
{#if !errorMsg}
|
||||||
<CheckedBackground borderRadius="3px" backgroundSize="8px">
|
<CheckedBackground borderRadius="3px" backgroundSize="8px">
|
||||||
<div bind:this={colorPreview} bind:clientHeight={previewHeight} bind:clientWidth={previewWidth} class="color-preview" style={previewStyle} on:click={openColorpicker} />
|
<div
|
||||||
</CheckedBackground>
|
bind:this={colorPreview}
|
||||||
|
bind:clientHeight={previewHeight}
|
||||||
|
bind:clientWidth={previewWidth}
|
||||||
|
class="color-preview"
|
||||||
|
style={previewStyle}
|
||||||
|
on:click={openColorpicker} />
|
||||||
|
</CheckedBackground>
|
||||||
|
|
||||||
{#if open}
|
{#if open}
|
||||||
<div transition:fade class="picker-container" style={pickerStyle}>
|
<div transition:fade class="picker-container" style={pickerStyle}>
|
||||||
<Colorpicker on:change={onColorChange} on:addswatch on:removeswatch bind:format bind:value bind:pickerHeight bind:pickerWidth {swatches} {disableSwatches} {open} />
|
<Colorpicker
|
||||||
</div>
|
on:change={onColorChange}
|
||||||
<div on:click|self={() => open = false} class="overlay"></div>
|
on:addswatch
|
||||||
{/if}
|
on:removeswatch
|
||||||
{:else}
|
bind:format
|
||||||
<div class="color-preview preview-error" style={errorPreviewStyle}>
|
bind:value
|
||||||
<span>×</span>
|
bind:pickerHeight
|
||||||
</div>
|
bind:pickerWidth
|
||||||
|
{swatches}
|
||||||
|
{disableSwatches}
|
||||||
|
{open} />
|
||||||
|
</div>
|
||||||
|
<div on:click|self={() => (open = false)} class="overlay" />
|
||||||
{/if}
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<div class="color-preview preview-error" style={errorPreviewStyle}>
|
||||||
|
<span>×</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.color-preview-container{
|
.color-preview-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row nowrap;
|
flex-flow: row nowrap;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-preview {
|
.color-preview {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid #dedada;
|
border: 1px solid #dedada;
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-error {
|
.preview-error {
|
||||||
background: #cccccc;
|
background: #cccccc;
|
||||||
color: #808080;
|
color: #808080;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker-container {
|
.picker-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay{
|
.overlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
export let text = "";
|
export let text = ""
|
||||||
export let selected = false;
|
export let selected = false
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="flatbutton" class:selected on:click>{text}</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.flatbutton {
|
.flatbutton {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -25,5 +27,3 @@
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="flatbutton" class:selected on:click>{text}</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,14 @@
|
||||||
<script>
|
<script>
|
||||||
export let value = "";
|
export let value = ""
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input on:input type="text" {value} maxlength="25" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input on:input on:change type="text" {value} maxlength="25" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -22,7 +29,3 @@
|
||||||
font-weight: 550;
|
font-weight: 550;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div>
|
|
||||||
<input on:input on:change type="text" {value} maxlength="25" />
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,58 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte";
|
import { onMount, createEventDispatcher } from "svelte"
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
export let h = 0;
|
export let h = 0
|
||||||
export let s = 0;
|
export let s = 0
|
||||||
export let v = 0;
|
export let v = 0
|
||||||
export let a = 1;
|
export let a = 1
|
||||||
|
|
||||||
let palette;
|
let palette
|
||||||
|
|
||||||
let paletteHeight, paletteWidth = 0;
|
|
||||||
|
|
||||||
|
let paletteHeight,
|
||||||
|
paletteWidth = 0
|
||||||
|
|
||||||
function handleClick(event) {
|
function handleClick(event) {
|
||||||
const { left, top } = palette.getBoundingClientRect();
|
const { left, top } = palette.getBoundingClientRect()
|
||||||
let clickX = (event.clientX - left)
|
let clickX = event.clientX - left
|
||||||
let clickY = (event.clientY - top)
|
let clickY = event.clientY - top
|
||||||
if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
|
if (
|
||||||
|
clickX > 0 &&
|
||||||
|
clickY > 0 &&
|
||||||
|
clickX < paletteWidth &&
|
||||||
|
clickY < paletteHeight
|
||||||
|
) {
|
||||||
let s = (clickX / paletteWidth) * 100
|
let s = (clickX / paletteWidth) * 100
|
||||||
let v = 100 - ((clickY / paletteHeight) * 100)
|
let v = 100 - (clickY / paletteHeight) * 100
|
||||||
dispatch("change", {s, v})
|
dispatch("change", { s, v })
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$: pickerX = (s * paletteWidth) / 100;
|
$: pickerX = (s * paletteWidth) / 100
|
||||||
$: pickerY = paletteHeight * ((100 - v) / 100)
|
$: pickerY = paletteHeight * ((100 - v) / 100)
|
||||||
|
|
||||||
$: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
|
$: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
|
||||||
linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
|
linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
|
||||||
`;
|
`
|
||||||
$: style = `background: ${paletteGradient};`;
|
$: style = `background: ${paletteGradient};`
|
||||||
|
|
||||||
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
|
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<CheckedBackground width="100%">
|
||||||
|
<div
|
||||||
|
bind:this={palette}
|
||||||
|
bind:clientHeight={paletteHeight}
|
||||||
|
bind:clientWidth={paletteWidth}
|
||||||
|
on:click={handleClick}
|
||||||
|
class="palette"
|
||||||
|
{style}>
|
||||||
|
<div class="picker" style={pickerStyle} />
|
||||||
|
</div>
|
||||||
|
</CheckedBackground>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.palette {
|
.palette {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -55,9 +71,3 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<CheckedBackground width="100%">
|
|
||||||
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
|
|
||||||
<div class="picker" style={pickerStyle} />
|
|
||||||
</div>
|
|
||||||
</CheckedBackground>
|
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,62 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount, createEventDispatcher } from "svelte";
|
import { onMount, createEventDispatcher } from "svelte"
|
||||||
import dragable from "./drag.js";
|
import dragable from "./drag.js"
|
||||||
|
|
||||||
export let value = 1;
|
export let value = 1
|
||||||
export let type = "hue";
|
export let type = "hue"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
let slider;
|
let slider
|
||||||
let sliderWidth = 0;
|
let sliderWidth = 0
|
||||||
|
|
||||||
function onSliderChange(mouseX, isDrag = false) {
|
function onSliderChange(mouseX, isDrag = false) {
|
||||||
const { left, width } = slider.getBoundingClientRect();
|
const { left, width } = slider.getBoundingClientRect()
|
||||||
let clickPosition = mouseX - left;
|
let clickPosition = mouseX - left
|
||||||
|
|
||||||
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
let percentageClick = (clickPosition / sliderWidth).toFixed(2)
|
||||||
|
|
||||||
if (percentageClick >= 0 && percentageClick <= 1) {
|
if (percentageClick >= 0 && percentageClick <= 1) {
|
||||||
let value =
|
let value = type === "hue" ? 360 * percentageClick : percentageClick
|
||||||
type === "hue"
|
|
||||||
? 360 * percentageClick
|
dispatch("change", { color: value, isDrag })
|
||||||
: percentageClick;
|
|
||||||
|
|
||||||
dispatch("change", {color: value, isDrag});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$: thumbPosition =
|
$: thumbPosition =
|
||||||
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value;
|
type === "hue" ? sliderWidth * (value / 360) : sliderWidth * value
|
||||||
|
|
||||||
$: style = `transform: translateX(${thumbPosition - 6}px);`;
|
$: style = `transform: translateX(${thumbPosition - 6}px);`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
bind:this={slider}
|
||||||
|
bind:clientWidth={sliderWidth}
|
||||||
|
on:click={event => handleClick(event.clientX)}
|
||||||
|
class="color-format-slider"
|
||||||
|
class:hue={type === 'hue'}
|
||||||
|
class:alpha={type === 'alpha'}>
|
||||||
|
<div
|
||||||
|
use:dragable
|
||||||
|
on:drag={e => handleClick(e.detail)}
|
||||||
|
class="slider-thumb"
|
||||||
|
{style} />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
bind:this={slider}
|
||||||
|
bind:clientWidth={sliderWidth}
|
||||||
|
on:click={event => onSliderChange(event.clientX)}
|
||||||
|
class="color-format-slider"
|
||||||
|
class:hue={type === 'hue'}
|
||||||
|
class:alpha={type === 'alpha'}>
|
||||||
|
<div
|
||||||
|
use:dragable
|
||||||
|
on:drag={e => onSliderChange(e.detail, true)}
|
||||||
|
on:dragend
|
||||||
|
class="slider-thumb"
|
||||||
|
{style} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.color-format-slider {
|
.color-format-slider {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -69,21 +94,6 @@
|
||||||
border: 1px solid #777676;
|
border: 1px solid #777676;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
cursor:grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div
|
|
||||||
bind:this={slider}
|
|
||||||
bind:clientWidth={sliderWidth}
|
|
||||||
on:click={event => onSliderChange(event.clientX)}
|
|
||||||
class="color-format-slider"
|
|
||||||
class:hue={type === 'hue'}
|
|
||||||
class:alpha={type === 'alpha'}>
|
|
||||||
<div
|
|
||||||
use:dragable
|
|
||||||
on:drag={e => onSliderChange(e.detail, true)}
|
|
||||||
on:dragend
|
|
||||||
class="slider-thumb"
|
|
||||||
{style} />
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,47 @@
|
||||||
<script>
|
<script>
|
||||||
import {createEventDispatcher} from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from "svelte/transition"
|
||||||
import CheckedBackground from "./CheckedBackground.svelte"
|
import CheckedBackground from "./CheckedBackground.svelte"
|
||||||
|
|
||||||
export let hovered = false
|
export let hovered = false
|
||||||
export let color = "#fff"
|
export let color = "#fff"
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div class="space">
|
||||||
|
<CheckedBackground borderRadius="6px">
|
||||||
|
<div
|
||||||
|
in:fade
|
||||||
|
class="swatch"
|
||||||
|
style={`background: ${color};`}
|
||||||
|
on:click|self
|
||||||
|
on:mouseover={() => (hovered = true)}
|
||||||
|
on:mouseleave={() => (hovered = false)}>
|
||||||
|
{#if hovered}
|
||||||
|
<div
|
||||||
|
in:fade
|
||||||
|
class="remove-icon"
|
||||||
|
on:click|self={() => dispatch('removeswatch')}>
|
||||||
|
<span on:click|self={() => dispatch('removeswatch')}>×</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</CheckedBackground>
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.swatch {
|
.swatch {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid #dedada;
|
border: 1px solid #dedada;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.space {
|
.space {
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.remove-icon {
|
.remove-icon {
|
||||||
|
|
@ -29,7 +49,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
top: -5px;
|
top: -5px;
|
||||||
right: -4px;
|
right: -4px;
|
||||||
width:10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #800000;
|
background-color: #800000;
|
||||||
|
|
@ -39,15 +59,3 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="space">
|
|
||||||
<CheckedBackground borderRadius="6px">
|
|
||||||
<div in:fade class="swatch" style={`background: ${color};`} on:click|self on:mouseover={() => hovered = true} on:mouseleave={() => hovered = false}>
|
|
||||||
{#if hovered}
|
|
||||||
<div in:fade class="remove-icon" on:click|self={()=> dispatch("removeswatch")}>
|
|
||||||
<span on:click|self={()=> dispatch("removeswatch")}>×</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</CheckedBackground>
|
|
||||||
</div>
|
|
||||||
|
|
@ -257,21 +257,21 @@
|
||||||
|
|
||||||
.menu li:not(.disabled) {
|
.menu li:not(.disabled) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li:not(.disabled):hover {
|
.menu li:not(.disabled):hover {
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled {
|
.disabled {
|
||||||
color: var(--grey-dark);
|
color: var(--grey-4);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hr-style {
|
.hr-style {
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
color: var(--grey-dark);
|
color: var(--grey-4);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 0 0 1px 0;
|
border-width: 0 0 1px 0;
|
||||||
border-color: var(--lightslate);
|
border-color: var(--grey-1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,12 +48,12 @@
|
||||||
|
|
||||||
.component > .title {
|
.component > .title {
|
||||||
font-size: 13pt;
|
font-size: 13pt;
|
||||||
color: var(--secondary100);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.component > .description {
|
.component > .description {
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
color: var(--primary75);
|
color: var(--blue);
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -77,8 +77,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
margin-left: 10px;
|
margin-left: 14px;
|
||||||
margin-top: 2px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
@ -87,9 +86,8 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
width: 20px;
|
width: 18px;
|
||||||
margin-top: 2px;
|
color: var(--grey-7);
|
||||||
color: var(--ink-light);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon:nth-of-type(2) {
|
.icon:nth-of-type(2) {
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
<div
|
<div
|
||||||
class="budibase__nav-item item"
|
class="budibase__nav-item item"
|
||||||
class:selected={currentComponent === component}
|
class:selected={currentComponent === component}
|
||||||
style="padding-left: {level * 20 + 53}px">
|
style="padding-left: {level * 20 + 40}px">
|
||||||
<div class="nav-item">
|
<div class="nav-item">
|
||||||
<i class="icon ri-arrow-right-circle-fill" />
|
<i class="icon ri-arrow-right-circle-fill" />
|
||||||
{get_capitalised_name(component._component)}
|
{get_capitalised_name(component._component)}
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
padding: 0px 5px 0px 15px;
|
padding: 0px 5px 0px 15px;
|
||||||
margin: auto 0px;
|
margin: auto 0px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
height: 35px;
|
height: 36px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:hover {
|
.item:hover {
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.item:hover .actions {
|
.item:hover .actions {
|
||||||
|
|
@ -105,7 +105,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 20px 5px 20px 10px;
|
padding: 20px 5px 20px 10px;
|
||||||
border-left: solid 1px var(--grey);
|
border-left: solid 1px var(--grey-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.switcher {
|
.switcher {
|
||||||
|
|
@ -70,8 +70,8 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,6 @@
|
||||||
{ value: "normal", text: "Normal" },
|
{ value: "normal", text: "Normal" },
|
||||||
{ value: "hover", text: "Hover" },
|
{ value: "hover", text: "Hover" },
|
||||||
{ value: "active", text: "Active" },
|
{ value: "active", text: "Active" },
|
||||||
{ value: "selected", text: "Selected" },
|
|
||||||
]
|
]
|
||||||
|
|
||||||
$: propertyGroupNames = Object.keys(panelDefinition)
|
$: propertyGroupNames = Object.keys(panelDefinition)
|
||||||
|
|
@ -31,26 +30,26 @@
|
||||||
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
|
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="positioned-wrapper">
|
<div class="positioned-wrapper">
|
||||||
<div class="design-view-property-groups">
|
<div class="design-view-property-groups">
|
||||||
{#if propertyGroupNames.length > 0}
|
{#if propertyGroupNames.length > 0}
|
||||||
{#each propertyGroupNames as groupName}
|
{#each propertyGroupNames as groupName}
|
||||||
<PropertyGroup
|
<PropertyGroup
|
||||||
name={groupName}
|
name={groupName}
|
||||||
properties={getProperties(groupName)}
|
properties={getProperties(groupName)}
|
||||||
styleCategory={selectedCategory}
|
styleCategory={selectedCategory}
|
||||||
{onStyleChanged}
|
{onStyleChanged}
|
||||||
{componentDefinition}
|
{componentDefinition}
|
||||||
{componentInstance} />
|
{componentInstance} />
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="no-design">
|
<div class="no-design">
|
||||||
<span>This component does not have any design properties</span>
|
<span>This component does not have any design properties</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.design-view-container {
|
.design-view-container {
|
||||||
|
|
@ -64,7 +63,7 @@
|
||||||
flex: 0 0 50px;
|
flex: 0 0 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.positioned-wrapper{
|
.positioned-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
|
|
||||||
.title > div:nth-child(1) {
|
.title > div:nth-child(1) {
|
||||||
grid-column-start: name;
|
grid-column-start: name;
|
||||||
color: var(--secondary100);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title > div:nth-child(2) {
|
.title > div:nth-child(2) {
|
||||||
|
|
|
||||||
|
|
@ -165,7 +165,7 @@
|
||||||
padding: 30px 40px;
|
padding: 30px 40px;
|
||||||
border-bottom-left-radius: 5px;
|
border-bottom-left-radius: 5px;
|
||||||
border-bottom-right-radius: 50px;
|
border-bottom-right-radius: 50px;
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
}
|
}
|
||||||
.save {
|
.save {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
|
|
|
||||||
|
|
@ -93,7 +93,7 @@
|
||||||
|
|
||||||
.newevent {
|
.newevent {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
|
@ -109,7 +109,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.newevent:hover {
|
.newevent:hover {
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|
@ -155,7 +155,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
color: var(--button-text);
|
color: var(--blue);
|
||||||
background: var(--background-button) !important;
|
background: var(--grey-1) !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,20 +3,13 @@
|
||||||
export let value = ""
|
export let value = ""
|
||||||
export let text = ""
|
export let text = ""
|
||||||
export let icon = ""
|
export let icon = ""
|
||||||
export let padding = "8px 5px;"
|
|
||||||
export let onClick = value => {}
|
export let onClick = value => {}
|
||||||
export let selected = false
|
export let selected = false
|
||||||
export let fontWeight = ""
|
|
||||||
|
|
||||||
$: style = buildStyle({ padding, fontWeight })
|
|
||||||
$: useIcon = !!icon
|
$: useIcon = !!icon
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
|
||||||
class="flatbutton"
|
|
||||||
{style}
|
|
||||||
class:selected
|
|
||||||
on:click={() => onClick(value || text)}>
|
|
||||||
{#if useIcon}
|
{#if useIcon}
|
||||||
<i class={icon} />
|
<i class={icon} />
|
||||||
{:else}
|
{:else}
|
||||||
|
|
@ -29,25 +22,27 @@
|
||||||
<style>
|
<style>
|
||||||
.flatbutton {
|
.flatbutton {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
max-height: 36px;
|
||||||
padding: 8px 2px;
|
padding: 8px 2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-family: Roboto;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
margin-left: 5px;
|
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
background: var(--ink-light);
|
background: var(--grey-3);
|
||||||
color: #ffffff;
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -46,6 +46,7 @@
|
||||||
<style>
|
<style>
|
||||||
.flatbutton-group {
|
.flatbutton-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
|
|
|
||||||
|
|
@ -14,10 +14,7 @@
|
||||||
|
|
||||||
<PagesList />
|
<PagesList />
|
||||||
|
|
||||||
<button class="newscreen" on:click={newScreen}>
|
<button class="newscreen" on:click={newScreen}>Create New Screen</button>
|
||||||
<i class="icon ri-add-circle-fill" />
|
|
||||||
Create New Screen
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<PageLayout layout={$store.pages[$store.currentPageName]} />
|
<PageLayout layout={$store.pages[$store.currentPageName]} />
|
||||||
|
|
||||||
|
|
@ -30,23 +27,26 @@
|
||||||
<style>
|
<style>
|
||||||
.newscreen {
|
.newscreen {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--purple);
|
||||||
border-radius: 3px;
|
border-radius: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
margin: 20px 0px 12px 0px;
|
margin: 20px 0px 12px 0px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: white;
|
background: var(--purple);
|
||||||
color: var(--ink);
|
color: var(--white);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 2ms;
|
transition: all 3ms;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.newscreen:hover {
|
.newscreen:hover {
|
||||||
background: var(--grey-light);
|
background: var(--purple-light);
|
||||||
|
color: var(--purple);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|
|
||||||
|
|
@ -28,12 +28,12 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
background-color: var(--grey-light);
|
background-color: var(--grey-1);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-item:hover {
|
.item-item:hover {
|
||||||
background: var(--grey);
|
background: var(--grey-2);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
@ -55,6 +55,6 @@
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -132,8 +132,8 @@
|
||||||
h3 {
|
h3 {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
color: #000333;
|
color: var(--ink);
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -142,16 +142,15 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #000333;
|
color: var(--ink);
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
letter-spacing: 1px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #000333;
|
color: var(--ink);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
padding-top: 13px;
|
padding-top: 13px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.selected {
|
.selected {
|
||||||
color: var(--button-text);
|
color: var(--blue);
|
||||||
background: #f9f9f9;
|
background: #f9f9f9;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -70,7 +70,7 @@
|
||||||
|
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #000333;
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputs {
|
.inputs {
|
||||||
|
|
|
||||||
|
|
@ -137,7 +137,7 @@
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: var(--secondary80);
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-input {
|
.uk-input {
|
||||||
|
|
@ -148,8 +148,8 @@
|
||||||
.uk-select {
|
.uk-select {
|
||||||
height: 40px !important;
|
height: 40px !important;
|
||||||
font-weight: 500px;
|
font-weight: 500px;
|
||||||
color: var(--secondary60);
|
color: var(--grey-5);
|
||||||
border: 1px solid var(--slate);
|
border: 1px solid var(--grey-2);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -142,24 +142,24 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
outline: none;
|
outline: none;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
height: 32px;
|
height: 36px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bb-select-anchor {
|
.bb-select-anchor {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 5px 10px;
|
padding: 0px 12px;
|
||||||
background-color: #f2f2f2;
|
height: 36px;
|
||||||
border-radius: 2px;
|
background-color: var(--grey-2);
|
||||||
border: 1px solid var(--grey-dark);
|
border-radius: 5px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bb-select-anchor > span {
|
.bb-select-anchor > span {
|
||||||
color: #565a66;
|
color: var(--ink);
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
width: 140px;
|
width: 140px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -173,8 +173,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
color: #565a66;
|
color: var(--ink);
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bb-select-menu {
|
.bb-select-menu {
|
||||||
|
|
@ -185,15 +185,15 @@
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
color: #808192;
|
color: var(--ink);
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
height: fit-content !important;
|
height: fit-content !important;
|
||||||
border-bottom-left-radius: 2px;
|
border-bottom-left-radius: 2px;
|
||||||
border-bottom-right-radius: 2px;
|
border-bottom-right-radius: 2px;
|
||||||
border-right: 1px solid var(--grey-dark);
|
border-right: 1px solid var(--grey-4);
|
||||||
border-left: 1px solid var(--grey-dark);
|
border-left: 1px solid var(--grey-4);
|
||||||
border-bottom: 1px solid var(--grey-dark);
|
border-bottom: 1px solid var(--grey-4);
|
||||||
background-color: #f2f2f2;
|
background-color: var(--grey-2);
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
|
transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
|
||||||
|
|
@ -73,12 +73,12 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-big {
|
.icon-big {
|
||||||
font-size: 24px;
|
font-size: 20px;
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(svg) {
|
:global(svg) {
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
.help-text {
|
.help-text {
|
||||||
color: var(--slate);
|
color: var(--grey-2);
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -43,22 +43,24 @@
|
||||||
|
|
||||||
button {
|
button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 8px 16px;
|
padding: 0px 16px;
|
||||||
|
height: 36px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-family: Roboto;
|
font-family: inter;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: var(--ink-light);
|
background: var(--grey-3);
|
||||||
color: var(--white);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #000333;
|
color: var(--ink);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
padding-top: 13px;
|
padding-top: 13px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
if (v.target) {
|
if (v.target) {
|
||||||
let val = props.valueKey ? v.target[props.valueKey] : v.target.value
|
let val = props.valueKey ? v.target[props.valueKey] : v.target.value
|
||||||
onChange(key, val)
|
onChange(key, val)
|
||||||
}else if(v.detail) {
|
} else if (v.detail) {
|
||||||
onChange(key, v.detail)
|
onChange(key, v.detail)
|
||||||
} else {
|
} else {
|
||||||
onChange(key, v)
|
onChange(key, v)
|
||||||
|
|
@ -55,7 +55,6 @@
|
||||||
flex: 0 0 50px;
|
flex: 0 0 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0px 5px;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
|
||||||
|
|
@ -100,7 +100,7 @@
|
||||||
grid-template-columns: 300px 1fr 300px;
|
grid-template-columns: 300px 1fr 300px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fbfbfb;
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-nav {
|
.ui-nav {
|
||||||
|
|
@ -128,23 +128,21 @@
|
||||||
|
|
||||||
.components-nav-page {
|
.components-nav-page {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #000333;
|
color: var(--ink);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.components-nav-header {
|
.components-nav-header {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #000333;
|
color: var(--ink);
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-header {
|
.nav-header {
|
||||||
|
|
@ -184,21 +182,20 @@
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
grid-column-start: button;
|
grid-column-start: button;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--primary75);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-group-header > div:nth-child(3):hover {
|
.nav-group-header > div:nth-child(3):hover {
|
||||||
color: var(--primary75);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigator-title {
|
.navigator-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--secondary100);
|
color: var(--ink);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
padding: 0 20px 20px 20px;
|
padding: 0 20px 20px 20px;
|
||||||
line-height: 1rem !important;
|
line-height: 1rem !important;
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.components-list-container {
|
.components-list-container {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import Input from "../common/Input.svelte"
|
import Input from "../common/Input.svelte"
|
||||||
import OptionSelect from "./OptionSelect.svelte"
|
import OptionSelect from "./OptionSelect.svelte"
|
||||||
import InputGroup from "../common/Inputs/InputGroup.svelte"
|
|
||||||
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
import FlatButtonGroup from "./FlatButtonGroup.svelte"
|
||||||
import Colorpicker from "./Colorpicker"
|
import Colorpicker from "./Colorpicker"
|
||||||
/*
|
/*
|
||||||
|
|
@ -14,7 +13,7 @@ export const layout = [
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "",
|
initialValue: "",
|
||||||
options: [
|
options: [
|
||||||
{ label: "", value: "" },
|
{ label: "N/A ", value: "N/A" },
|
||||||
{ label: "Flex", value: "flex" },
|
{ label: "Flex", value: "flex" },
|
||||||
{ label: "Inline Flex", value: "inline-flex" },
|
{ label: "Inline Flex", value: "inline-flex" },
|
||||||
],
|
],
|
||||||
|
|
@ -73,27 +72,169 @@ export const layout = [
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const spacingMeta = [
|
export const margin = [
|
||||||
{ placeholder: "T" },
|
|
||||||
{ placeholder: "R" },
|
|
||||||
{ placeholder: "B" },
|
|
||||||
{ placeholder: "L" },
|
|
||||||
]
|
|
||||||
|
|
||||||
export const spacing = [
|
|
||||||
{
|
{
|
||||||
label: "Margin",
|
label: "All sides",
|
||||||
key: "margin",
|
key: "margin",
|
||||||
control: InputGroup,
|
control: OptionSelect,
|
||||||
meta: spacingMeta,
|
options: [
|
||||||
defaultValue: ["0", "0", "0", "0"],
|
{ 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",
|
key: "padding",
|
||||||
control: InputGroup,
|
control: OptionSelect,
|
||||||
meta: spacingMeta,
|
options: [
|
||||||
defaultValue: ["0", "0", "0", "0"],
|
{ 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",
|
key: "width",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -111,39 +251,34 @@ export const size = [
|
||||||
key: "height",
|
key: "height",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Min W",
|
label: "Min Width",
|
||||||
key: "min-width",
|
key: "min-width",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Min H",
|
label: "Max Width",
|
||||||
key: "min-height",
|
|
||||||
control: Input,
|
|
||||||
placeholder: "px",
|
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Max W",
|
|
||||||
key: "max-width",
|
key: "max-width",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Max H",
|
label: "Min Height",
|
||||||
|
key: "min-height",
|
||||||
|
control: Input,
|
||||||
|
placeholder: "px",
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Max Height",
|
||||||
key: "max-height",
|
key: "max-height",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
@ -153,8 +288,9 @@ export const position = [
|
||||||
label: "Position",
|
label: "Position",
|
||||||
key: "position",
|
key: "position",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
initialValue: "Wrap",
|
initialValue: "None",
|
||||||
options: [
|
options: [
|
||||||
|
{ label: "None", value: "none" },
|
||||||
{ label: "Static", value: "static" },
|
{ label: "Static", value: "static" },
|
||||||
{ label: "Relative", value: "relative" },
|
{ label: "Relative", value: "relative" },
|
||||||
{ label: "Fixed", value: "fixed" },
|
{ label: "Fixed", value: "fixed" },
|
||||||
|
|
@ -167,7 +303,6 @@ export const position = [
|
||||||
key: "top",
|
key: "top",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -175,7 +310,6 @@ export const position = [
|
||||||
key: "right",
|
key: "right",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -183,7 +317,6 @@ export const position = [
|
||||||
key: "bottom",
|
key: "bottom",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -191,16 +324,13 @@ export const position = [
|
||||||
key: "left",
|
key: "left",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Z-index",
|
label: "Z-index",
|
||||||
key: "z-index",
|
key: "z-index",
|
||||||
control: Input,
|
control: OptionSelect,
|
||||||
placeholder: "num",
|
options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -239,19 +369,28 @@ export const typography = [
|
||||||
{
|
{
|
||||||
label: "size",
|
label: "size",
|
||||||
key: "font-size",
|
key: "font-size",
|
||||||
defaultValue: "",
|
control: OptionSelect,
|
||||||
control: Input,
|
options: [
|
||||||
placeholder: "px",
|
"8px",
|
||||||
width: "48px",
|
"10px",
|
||||||
|
"12px",
|
||||||
|
"14px",
|
||||||
|
"16px",
|
||||||
|
"18px",
|
||||||
|
"20px",
|
||||||
|
"24px",
|
||||||
|
"32px",
|
||||||
|
"48px",
|
||||||
|
"60px",
|
||||||
|
"72px",
|
||||||
|
],
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Line H",
|
label: "Line H",
|
||||||
key: "line-height",
|
key: "line-height",
|
||||||
control: Input,
|
control: OptionSelect,
|
||||||
placeholder: "lh",
|
options: ["1", "1.25", "1.5", "1.75", "2", "4"],
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Color",
|
label: "Color",
|
||||||
|
|
@ -275,25 +414,20 @@ export const typography = [
|
||||||
key: "text-transform",
|
key: "text-transform",
|
||||||
control: FlatButtonGroup,
|
control: FlatButtonGroup,
|
||||||
buttonProps: [
|
buttonProps: [
|
||||||
{ text: "BB", padding: "0px 5px", fontWeight: 500, value: "uppercase" },
|
{ text: "BB", value: "uppercase" },
|
||||||
{ text: "Bb", padding: "0px 5px", fontWeight: 500, value: "capitalize" },
|
{ text: "Bb", value: "capitalize" },
|
||||||
{ text: "bb", padding: "0px 5px", fontWeight: 500, value: "lowercase" },
|
{ text: "bb", value: "lowercase" },
|
||||||
{
|
{ text: "×", value: "none" },
|
||||||
text: "×",
|
|
||||||
padding: "0px 5px",
|
|
||||||
fontWeight: 500,
|
|
||||||
value: "none",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Decoration",
|
label: "Decoration",
|
||||||
key: "text-decoration-line",
|
key: "text-decoration-line",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
defaultValue: "Underline",
|
defaultValue: "None",
|
||||||
options: [
|
options: [
|
||||||
{ label: "Underline", value: "underline" },
|
|
||||||
{ label: "None", value: "none" },
|
{ label: "None", value: "none" },
|
||||||
|
{ label: "Underline", value: "underline" },
|
||||||
{ label: "Overline", value: "overline" },
|
{ label: "Overline", value: "overline" },
|
||||||
{ label: "Line-through", value: "line-through" },
|
{ label: "Line-through", value: "line-through" },
|
||||||
{ label: "Under Over", value: "underline overline" },
|
{ label: "Under Over", value: "underline overline" },
|
||||||
|
|
@ -308,11 +442,64 @@ export const background = [
|
||||||
control: Colorpicker,
|
control: Colorpicker,
|
||||||
defaultValue: "#000",
|
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",
|
label: "Image",
|
||||||
key: "background-image",
|
key: "background-image",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "src",
|
placeholder: "Src",
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -324,11 +511,13 @@ export const border = [
|
||||||
defaultValue: "None",
|
defaultValue: "None",
|
||||||
options: [
|
options: [
|
||||||
{ label: "None", value: "0" },
|
{ label: "None", value: "0" },
|
||||||
{ label: "small", value: "0.125rem" },
|
{ label: "X Small", value: "0.125rem" },
|
||||||
{ label: "Medium", value: "0.25rem;" },
|
{ label: "Small", value: "0.25rem" },
|
||||||
{ label: "Large", value: "0.375rem" },
|
{ label: "Medium", value: "0.5rem" },
|
||||||
{ label: "Extra large", value: "0.5rem" },
|
{ label: "Large", value: "1rem" },
|
||||||
{ label: "Full", value: "5678px" },
|
{ label: "X Large", value: "2rem" },
|
||||||
|
{ label: "XX Large", value: "4rem" },
|
||||||
|
{ label: "Round", value: "5678px" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -338,11 +527,11 @@ export const border = [
|
||||||
defaultValue: "None",
|
defaultValue: "None",
|
||||||
options: [
|
options: [
|
||||||
{ label: "None", value: "0" },
|
{ label: "None", value: "0" },
|
||||||
{ label: "Extra small", value: "0.5px" },
|
{ label: "X Small", value: "0.5px" },
|
||||||
{ label: "Small", value: "1px" },
|
{ label: "Small", value: "1px" },
|
||||||
{ label: "Medium", value: "2px" },
|
{ label: "Medium", value: "2px" },
|
||||||
{ label: "Large", value: "4px" },
|
{ label: "Large", value: "4px" },
|
||||||
{ label: "Extra large", value: "8px" },
|
{ label: "X large", value: "8px" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -357,16 +546,16 @@ export const border = [
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
defaultValue: "None",
|
defaultValue: "None",
|
||||||
options: [
|
options: [
|
||||||
"none",
|
"None",
|
||||||
"hidden",
|
"Hidden",
|
||||||
"dotted",
|
"Dotted",
|
||||||
"dashed",
|
"Dashed",
|
||||||
"solid",
|
"Solid",
|
||||||
"double",
|
"Double",
|
||||||
"groove",
|
"Groove",
|
||||||
"ridge",
|
"Ridge",
|
||||||
"inset",
|
"Inset",
|
||||||
"outset",
|
"Outset",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
@ -375,28 +564,27 @@ export const effects = [
|
||||||
{
|
{
|
||||||
label: "Opacity",
|
label: "Opacity",
|
||||||
key: "opacity",
|
key: "opacity",
|
||||||
control: Input,
|
control: OptionSelect,
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
placeholder: "%",
|
options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Rotate",
|
label: "Rotate",
|
||||||
key: "transform-rotate",
|
key: "transform",
|
||||||
control: OptionSelect,
|
control: OptionSelect,
|
||||||
defaultValue: "0",
|
defaultValue: "0",
|
||||||
options: [
|
options: [
|
||||||
"0",
|
{ label: "None", value: "0" },
|
||||||
"45deg",
|
{ label: "45 deg", value: "rotate(45deg)" },
|
||||||
"90deg",
|
{ label: "90 deg", value: "rotate(90deg)" },
|
||||||
"90deg",
|
{ label: "135 deg", value: "rotate(135deg)" },
|
||||||
"135deg",
|
{ label: "180 deg", value: "rotate(180deg)" },
|
||||||
"180deg",
|
{ label: "225 deg", value: "rotate(225deg)" },
|
||||||
"225deg",
|
{ label: "270 deg", value: "rotate(270deg)" },
|
||||||
"270deg",
|
{ label: "315 deg", value: "rotate(315deg)" },
|
||||||
"315dev",
|
{ label: "360 deg", value: "rotate(360deg)" },
|
||||||
],
|
],
|
||||||
}, //needs special control
|
},
|
||||||
{
|
{
|
||||||
label: "Shadow",
|
label: "Shadow",
|
||||||
key: "box-shadow",
|
key: "box-shadow",
|
||||||
|
|
@ -404,7 +592,7 @@ export const effects = [
|
||||||
defaultValue: "None",
|
defaultValue: "None",
|
||||||
options: [
|
options: [
|
||||||
{ label: "None", value: "none" },
|
{ 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",
|
label: "Small",
|
||||||
value:
|
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)",
|
"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:
|
value:
|
||||||
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
"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",
|
label: "Duration",
|
||||||
key: "transition-duration",
|
key: "transition-duration",
|
||||||
control: Input,
|
control: OptionSelect,
|
||||||
width: "48px",
|
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
placeholder: "sec",
|
placeholder: "sec",
|
||||||
|
options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "Ease",
|
label: "Ease",
|
||||||
|
|
@ -468,7 +656,8 @@ export const transitions = [
|
||||||
|
|
||||||
export const all = {
|
export const all = {
|
||||||
layout,
|
layout,
|
||||||
spacing,
|
margin,
|
||||||
|
padding,
|
||||||
size,
|
size,
|
||||||
position,
|
position,
|
||||||
typography,
|
typography,
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
<style>
|
<style>
|
||||||
header {
|
header {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--font);
|
color: var(--ink);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background: var(--secondary);
|
background: var(--secondary);
|
||||||
color: var(--dark-grey);
|
color: var(--grey-4);
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
grid-gap: 5px;
|
grid-gap: 5px;
|
||||||
grid-auto-columns: 3fr 1fr 1fr;
|
grid-auto-columns: 3fr 1fr 1fr;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fafafa;
|
background: var(--grey-1);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -172,7 +172,7 @@
|
||||||
|
|
||||||
header {
|
header {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
|
|
@ -192,15 +192,15 @@
|
||||||
|
|
||||||
.config-item {
|
.config-item {
|
||||||
margin: 0px 0px 4px 0px;
|
margin: 0px 0px 4px 0px;
|
||||||
padding: 12px;
|
padding: 12px 0px;
|
||||||
background: var(--light-grey);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase_input {
|
.budibase_input {
|
||||||
height: 35px;
|
height: 36px;
|
||||||
width: 220px;
|
width: 244px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid var(--grey-dark);
|
background-color: var(--grey-2);
|
||||||
|
border: 1px solid var(--grey-2);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -208,7 +208,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
header > span {
|
header > span {
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -253,7 +253,7 @@
|
||||||
|
|
||||||
.workflow-button {
|
.workflow-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
|
@ -269,7 +269,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.workflow-button:hover {
|
.workflow-button:hover {
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.access-level {
|
.access-level {
|
||||||
|
|
|
||||||
|
|
@ -67,16 +67,16 @@
|
||||||
<style>
|
<style>
|
||||||
.block-field {
|
.block-field {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin: 0px 0px 4px 0px;
|
margin: 0px 0px 4px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.budibase_input {
|
.budibase_input {
|
||||||
height: 35px;
|
height: 36px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
||||||
|
|
@ -85,6 +85,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.stop-button.highlighted {
|
.stop-button.highlighted {
|
||||||
background: var(--coral);
|
background: var(--red);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: 0.3s all;
|
transition: 0.3s all;
|
||||||
box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
|
box-shadow: 0 4px 30px 0 rgba(57, 60, 68, 0.08);
|
||||||
background-color: var(--font);
|
background-color: var(--ink);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
@ -54,17 +54,17 @@
|
||||||
|
|
||||||
.ACTION {
|
.ACTION {
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
color: var(--font);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.TRIGGER {
|
.TRIGGER {
|
||||||
background-color: var(--font);
|
background-color: var(--ink);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
.LOGIC {
|
.LOGIC {
|
||||||
background-color: var(--secondary);
|
background-color: var(--secondary);
|
||||||
color: var(--font);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
div:hover {
|
div:hover {
|
||||||
|
|
|
||||||
|
|
@ -52,29 +52,31 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.subtabs {
|
.subtabs {
|
||||||
margin-top: 27px;
|
margin-top: 20px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 5px;
|
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
grid-auto-columns: 1fr 1fr 1fr;
|
grid-auto-columns: 1fr 1fr 1fr;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtabs span {
|
.subtabs span {
|
||||||
transition: 0.3s all;
|
transition: 0.3s all;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--dark-grey);
|
color: var(--grey-7);
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
padding: 10px;
|
padding: 8px 16px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
border: none !important;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtabs span.selected {
|
.subtabs span.selected {
|
||||||
background: var(--dark-grey);
|
background: var(--grey-3);
|
||||||
color: var(--white);
|
color: var(--ink);
|
||||||
border-radius: 2px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtabs span:not(.selected) {
|
.subtabs span:not(.selected) {
|
||||||
color: var(--dark-grey);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -30,19 +30,34 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.workflow-block {
|
.workflow-block {
|
||||||
display: flex;
|
display: grid;
|
||||||
padding: 20px;
|
grid-template-columns: 40px auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 16px 0px;
|
||||||
|
border-radius: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.workflow-block:hover {
|
||||||
|
background-color: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.workflow-text {
|
.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 {
|
i {
|
||||||
background: var(--secondary);
|
color: var(--grey-7);
|
||||||
color: var(--dark-grey);
|
font-size: 20px;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
|
@ -53,7 +68,7 @@
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: var(--dark-grey);
|
color: var(--grey-7);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
<style>
|
<style>
|
||||||
header {
|
header {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--font);
|
color: var(--ink);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background: var(--secondary);
|
background: var(--secondary);
|
||||||
color: var(--dark-grey);
|
color: var(--grey-4);
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
grid-gap: 5px;
|
grid-gap: 5px;
|
||||||
grid-auto-columns: 3fr 1fr 1fr;
|
grid-auto-columns: 3fr 1fr 1fr;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #fafafa;
|
background: var(--grey-1);
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -89,7 +89,7 @@
|
||||||
|
|
||||||
.workflow-item:hover {
|
.workflow-item:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.workflow-item.selected {
|
.workflow-item.selected {
|
||||||
|
|
@ -98,7 +98,7 @@
|
||||||
|
|
||||||
.new-workflow-button {
|
.new-workflow-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid var(--grey-dark);
|
border: 1px solid var(--grey-4);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
|
|
@ -113,7 +113,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-workflow-button:hover {
|
.new-workflow-button:hover {
|
||||||
background: var(--grey-light);
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
<style>
|
<style>
|
||||||
header {
|
header {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
background: none;
|
background: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
span:not(.selected) {
|
span:not(.selected) {
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
span:not(.selected):hover {
|
span:not(.selected):hover {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ body, html {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-size: 30px 30px;
|
background-size: 30px 30px;
|
||||||
background-color: #FBFBFB;
|
background-color: var(--grey-1);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
#navigation {
|
#navigation {
|
||||||
|
|
@ -63,7 +63,7 @@ body, html {
|
||||||
}
|
}
|
||||||
#leftswitch {
|
#leftswitch {
|
||||||
border: 1px solid #E8E8EF;
|
border: 1px solid #E8E8EF;
|
||||||
background-color: #FBFBFB;
|
background-color: var(--grey-1);
|
||||||
width: 111px;
|
width: 111px;
|
||||||
height: 39px;
|
height: 39px;
|
||||||
line-height: 39px;
|
line-height: 39px;
|
||||||
|
|
@ -326,7 +326,7 @@ body, html {
|
||||||
|
|
||||||
.blockico i {
|
.blockico i {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
color: var(--dark-grey);
|
color: var(--grey-4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.blockico span {
|
.blockico span {
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,56 @@
|
||||||
/* latin-ext */
|
/* latin-ext */
|
||||||
/* roboto-regular - latin-ext_latin */
|
/* Inter-regular - latin-ext_latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Inter';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: local('Roboto'), local('Roboto-Regular'),
|
src: local('Inter'), local('Inter-Regular'),
|
||||||
url('/_builder/assets/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
url('/_builder/assets/Inter-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+ */
|
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-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Inter';
|
||||||
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-style: normal;
|
font-style: normal;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
src: local('Inter Medium'), local('Inter-Medium'),
|
||||||
url('/_builder/assets/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
url('/_builder/assets/Inter-Medium.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+ */
|
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-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-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
src: local('Inter Bold'), local('Inter-Bold'),
|
||||||
url('/_builder/assets/roboto-v20-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
url('/_builder/assets/Inter-Bold.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+ */
|
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-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-style: normal;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
src: local('Roboto Black'), local('Roboto-Black'),
|
src: local('Inter Black'), local('Inter-Black'),
|
||||||
url('/_builder/assets/roboto-v20-latin-ext_latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
url('/_builder/assets/Inter-Black.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+ */
|
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;
|
--blue-dark: #2F4C9B;
|
||||||
|
|
||||||
--ink: #393C44;
|
--ink: #393C44;
|
||||||
--ink-light: #808192;
|
--grey-7: #808192;
|
||||||
--ink-lighter: #ADAEC4;
|
--grey-5: #ADAEC4;
|
||||||
|
|
||||||
--grey: #F2F2F2;
|
--grey: #F2F2F2;
|
||||||
--grey-light: #FBFBFB;
|
--grey-1: var(--grey-1);
|
||||||
--grey-medium: #e8e8ef;
|
--grey-4: #e8e8ef;
|
||||||
--grey-dark: #E6E6E6;
|
--grey-4: #E6E6E6;
|
||||||
|
|
||||||
--red: #E26D69;
|
--red: #E26D69;
|
||||||
--red-light:#FFE6E6;
|
--red-light:#FFE6E6;
|
||||||
--red-dark: #800400;
|
--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;
|
--font-black: "Inter Black";
|
||||||
--secondary80: rgba(0, 3, 51, 0.8);
|
--font-bold: "Inter Bold";
|
||||||
--secondary60: rgba(0, 3, 51, 0.6);
|
--fontsemibold: "Inter Medium";
|
||||||
--secondary40: rgba(0, 3, 51, 0.4);
|
--font-normal: "Inter";
|
||||||
--secondary20: rgba(0, 3, 51, 0.2);
|
|
||||||
--secondary10: rgba(0, 3, 51, 0.1);
|
|
||||||
--secondary5: rgba(0, 3, 51, 0.05);
|
|
||||||
--secondarydark: #00021a;
|
|
||||||
|
|
||||||
--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 {
|
html, body {
|
||||||
display: grid;
|
display: grid;
|
||||||
font-family: var(--fontnormal);
|
font-family: inter;
|
||||||
color: var(--secondary80);
|
color: var(--ink);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height:100%;
|
height: 100%;
|
||||||
width:100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
|
@ -108,43 +54,43 @@ html, body {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-family: var(--fontblack);
|
font-family: var(--font-black);
|
||||||
font-size: 36pt;
|
font-size: 36pt;
|
||||||
color: var(--secondary100);
|
color: var(--secondary100);
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-family: var(--fontbold);
|
font-family: var(--font-bold);
|
||||||
font-size: 30pt;
|
font-size: 30pt;
|
||||||
color: var(--secondary100);
|
color: var(--secondary100);
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-family: var(--fontbold);
|
font-family: var(--font-bold);
|
||||||
font-size: 24pt;
|
font-size: 24pt;
|
||||||
color: var(--secondary60);
|
color: var(--secondary60);
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-family: var(--fontbold);
|
font-family: var(--font-bold);
|
||||||
font-size: 18pt;
|
font-size: 18pt;
|
||||||
color: var(--ink);
|
color: var(--ink);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-family: var(--fontblack);
|
font-family: var(--font-black);
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
color: var(--secondary100);
|
color: var(--secondary100);
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-family: var(--fontblack);
|
font-family: var(--font-black);
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
color: var(--darkslate);
|
color: var(--darkslate);
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
font-family: var(--fontnormal);
|
font-family: var(--font-normal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hoverable:hover {
|
.hoverable:hover {
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
import "./global.css"
|
import "./global.css"
|
||||||
import "./fonts.css"
|
import "./fonts.css"
|
||||||
import "./budibase.css"
|
import "./budibase.css"
|
||||||
import "/assets/roboto-v20-latin-ext_latin-300"
|
import "/assets/Inter-Regular"
|
||||||
import "/assets/roboto-v20-latin-ext_latin-400"
|
import "/assets/Inter-Medium"
|
||||||
import "/assets/roboto-v20-latin-ext_latin-500"
|
import "/assets/Inter-SemiBold"
|
||||||
import "/assets/roboto-v20-latin-ext_latin-700"
|
import "/assets/Inter-Bold"
|
||||||
import "/assets/roboto-v20-latin-ext_latin-900"
|
import "/assets/Inter-ExtraBold"
|
||||||
|
import "/assets/Inter-Black"
|
||||||
import "/_builder/assets/budibase-logo.png"
|
import "/_builder/assets/budibase-logo.png"
|
||||||
import "/_builder/assets/budibase-logo-only.png"
|
import "/_builder/assets/budibase-logo-only.png"
|
||||||
import "uikit/dist/css/uikit.min.css"
|
import "uikit/dist/css/uikit.min.css"
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/each}
|
||||||
<!-- <IconButton icon="home"
|
<!-- <IconButton icon="home"
|
||||||
color="var(--slate)"
|
color="var(--grey-2)"
|
||||||
hoverColor="var(--secondary75)"/> -->
|
hoverColor="var(--secondary75)"/> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="toprightnav">
|
<div class="toprightnav">
|
||||||
|
|
@ -92,7 +92,7 @@
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-nav {
|
.top-nav {
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid var(--grey);
|
border-bottom: 1px solid var(--grey-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content > div {
|
.content > div {
|
||||||
|
|
@ -123,18 +123,18 @@
|
||||||
|
|
||||||
.topnavitem {
|
.topnavitem {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--ink-lighter);
|
color: var(--grey-5);
|
||||||
margin: 0px 00px 0px 20px;
|
margin: 0px 00px 0px 20px;
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1rem;
|
font-size: var(--font-size-md);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnavitem:hover {
|
.topnavitem:hover {
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -145,7 +145,7 @@
|
||||||
|
|
||||||
.topnavitemright {
|
.topnavitemright {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--ink-light);
|
color: var(--grey-7);
|
||||||
margin: 0px 20px 0px 0px;
|
margin: 0px 20px 0px 0px;
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
.root {
|
.root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
background: #fafafa;
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
|
|
||||||
|
|
@ -43,9 +43,7 @@
|
||||||
{#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
|
{#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
|
||||||
<ModelDataTable {selectRecord} />
|
<ModelDataTable {selectRecord} />
|
||||||
{:else}
|
{:else}
|
||||||
<i style="color: var(--grey-dark)">
|
<i style="color: var(--grey-4)">create your first model to start building</i>
|
||||||
create your first model to start building
|
|
||||||
</i>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue