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