Merge pull request #1564 from Budibase/ak-fixes
Proper font support and multiple fixes
This commit is contained in:
Andrew Kingston
GitHub
commit
684e814bd4
|
|
@ -11,6 +11,7 @@
|
|||
export let icon = ""
|
||||
export let dataCy = null
|
||||
export let size = "M"
|
||||
export let active = false
|
||||
|
||||
function longPress(element) {
|
||||
if (!longPressable) return
|
||||
|
|
@ -40,6 +41,7 @@
|
|||
class:spectrum-ActionButton--emphasized={emphasized}
|
||||
class:is-selected={selected}
|
||||
class="spectrum-ActionButton spectrum-ActionButton--size{size}"
|
||||
class:active
|
||||
{disabled}
|
||||
on:longPress
|
||||
on:click|preventDefault
|
||||
|
|
@ -67,3 +69,10 @@
|
|||
<span class="spectrum-ActionButton-label"><slot /></span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.active,
|
||||
.active svg {
|
||||
color: var(--spectrum-global-color-blue-600);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
color: white;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
background: #3aab87;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
.name {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14px;
|
||||
color: var(--ink);
|
||||
flex: 1 1 auto;
|
||||
|
|
|
|||
|
|
@ -285,9 +285,6 @@
|
|||
--spectrum-global-dimension-font-size-400
|
||||
);
|
||||
}
|
||||
.container * {
|
||||
font-family: "Inter", sans-serif !important;
|
||||
}
|
||||
|
||||
.gallery,
|
||||
.spectrum-Dropzone {
|
||||
|
|
@ -346,7 +343,7 @@
|
|||
.extension {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
overflow: visible;
|
||||
}
|
||||
.spectrum-Dialog-heading {
|
||||
font-family: var(--spectrum-alias-body-text-font-family);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.spectrum-Dialog-buttonGroup {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
border: 1px solid var(--spectrum-global-color-gray-300);
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,11 +40,6 @@
|
|||
--rounded-medium: 8px;
|
||||
--rounded-large: 16px;
|
||||
|
||||
--font-normal: "Inter";
|
||||
--font-black: "Inter Black";
|
||||
--font-bold: "Inter Bold";
|
||||
--font-medium: "Inter Medium";
|
||||
--font-light: "Inter Light";
|
||||
--font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
|
||||
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
|
|
@ -1,31 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M117.33,128H10.67C4.78,128,0,123.22,0,117.33V10.67C0,4.78,4.78,0,10.67,0h106.67
|
||||
C123.22,0,128,4.78,128,10.67v106.67C128,123.22,123.22,128,117.33,128z"/>
|
||||
<g>
|
||||
<path class="st1" d="M75.94,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
|
||||
c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
|
||||
c-1.72,1.87-3.75,3.34-6.08,4.43C92.8,95.46,90.28,96,87.58,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H62.6V32H75.94z M92.74,75.5
|
||||
c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
|
||||
c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
|
||||
s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
|
||||
c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C92.51,77.77,92.74,76.66,92.74,75.5z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M34.67,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
|
||||
c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
|
||||
c-1.72,1.87-3.75,3.34-6.08,4.43C51.53,95.46,49.01,96,46.31,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H21.33V32H34.67z M51.47,75.5
|
||||
c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
|
||||
c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
|
||||
s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
|
||||
c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C51.24,77.77,51.47,76.66,51.47,75.5z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
|
|
@ -1,44 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 115 40" style="enable-background:new 0 0 115 40;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
|
||||
c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z"/>
|
||||
<path class="st1" d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z M10.97,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z"/>
|
||||
<path class="st1" d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
|
||||
c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
|
||||
c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z"/>
|
||||
<path class="st1" d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
|
||||
c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
|
||||
V28.79z M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
|
||||
c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
|
||||
C40.77,20.14,40.12,20.34,39.53,20.91z"/>
|
||||
<path class="st1" d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
|
||||
C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z"/>
|
||||
<path class="st1" d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
|
||||
c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z M61.06,20.98
|
||||
c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
|
||||
c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z"/>
|
||||
<path class="st1" d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
|
||||
c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
|
||||
M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
|
||||
c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z"/>
|
||||
<path class="st1" d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
|
||||
c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
|
||||
c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
|
||||
c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
|
||||
c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
|
||||
c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z"/>
|
||||
<path class="st1" d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
|
||||
c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
|
||||
c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
|
||||
c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
|
||||
c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
Binary file not shown.
|
|
@ -4,7 +4,12 @@
|
|||
<meta charset='utf8'>
|
||||
<meta name='viewport' content='width=device-width'>
|
||||
<title>Budibase</title>
|
||||
<link rel='icon' href='./src/favicon.ico'>
|
||||
<link rel='icon' href='/src/favicon.ico'>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body id="app">
|
||||
<script type="module" src='/src/main.js'></script>
|
||||
|
|
|
|||
|
|
@ -1,157 +0,0 @@
|
|||
/* Budibase Component Styles */
|
||||
|
||||
|
||||
.budibase__title {
|
||||
font-weight: 900;
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.budibase__title--2 {
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.budibase__title--3 {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.budibase__title--4 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.budibase__label--big {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
opacity: 0.6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.budibase__label--medium {
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
opacity: 0.6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.budibase__label--small {
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
opacity: 0.6;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.budibase__sub-heading {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.budibase__nav-item {
|
||||
cursor: pointer;
|
||||
padding: 0 4px 0 2px;
|
||||
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 {
|
||||
color: var(--ink);
|
||||
background: var(--grey-2);
|
||||
}
|
||||
|
||||
.budibase__nav-item:hover {
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.budibase__input {
|
||||
height: 36px;
|
||||
background-color: var(--grey-2);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
padding-left: 8px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.budibase__table {
|
||||
border: 1px solid var(--grey-4);
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.budibase__table thead {
|
||||
background: var(--blue-light);
|
||||
}
|
||||
|
||||
.budibase__table thead > tr > th {
|
||||
color: var(--ink);
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.budibase__table tr {
|
||||
border-bottom: 1px solid var(--grey-1);
|
||||
}
|
||||
|
||||
.button--toggled {
|
||||
background: var(--blue-light);
|
||||
color: var(--grey-7);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Table styles */
|
||||
.bb-table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
* + .bb-table {
|
||||
margin-top: var(--spacing-xl)
|
||||
}
|
||||
|
||||
.bb-table th {
|
||||
padding: var(--spacing-l) var(--spacing-m);
|
||||
text-align: left;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.bb-table td {
|
||||
padding: var(--spacing-l) var(--spacing-m);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.bb-table td > :last-child { margin-bottom: 0; }
|
||||
|
||||
.bb__alert {
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing-m);
|
||||
padding: var(--spacing-l);
|
||||
}
|
||||
|
||||
.bb__alert--danger {
|
||||
background: #fef4f6;
|
||||
color: #f0506e;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -32,8 +32,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
|
|||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
})
|
||||
|
||||
|
|
@ -43,8 +42,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
|
|||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#9e9e9e",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
"margin-right": "8px",
|
||||
"margin-left": "16px",
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@ function generateTitleContainer(table) {
|
|||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
})
|
||||
.hoverStyle({
|
||||
|
|
@ -52,7 +51,7 @@ function generateTitleContainer(table) {
|
|||
flex: "1 1 auto",
|
||||
"text-transform": "capitalize",
|
||||
})
|
||||
.type("h3")
|
||||
.type("h2")
|
||||
.instanceName("Title")
|
||||
.text(table.name)
|
||||
|
||||
|
|
@ -111,8 +110,7 @@ const createScreen = table => {
|
|||
.instanceName("View Button")
|
||||
.normalStyle({
|
||||
background: "transparent",
|
||||
"font-family": "Inter, sans-serif",
|
||||
"font-weight": "500",
|
||||
"font-weight": "600",
|
||||
color: "#888",
|
||||
"border-width": "0",
|
||||
})
|
||||
|
|
|
|||
|
|
@ -97,8 +97,7 @@ export function makeSaveButton(table, formId) {
|
|||
"border-width": "0",
|
||||
"border-style": "None",
|
||||
color: "#fff",
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
"font-weight": "600",
|
||||
"font-size": "14px",
|
||||
"margin-left": "16px",
|
||||
})
|
||||
|
|
@ -145,7 +144,7 @@ export function makeTitleContainer(title) {
|
|||
flex: "1 1 auto",
|
||||
})
|
||||
.customStyle(spectrumColor(900))
|
||||
.type("h3")
|
||||
.type("h2")
|
||||
.instanceName("Title")
|
||||
.text(title)
|
||||
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
header {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
}
|
||||
|
||||
.block-label {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-7);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,12 +16,13 @@
|
|||
</script>
|
||||
|
||||
<div class="block-field">
|
||||
<Select bind:value={value.queryId} extraThin secondary>
|
||||
<option value="">Choose an option</option>
|
||||
{#each $queries.list as query}
|
||||
<option value={query._id}>{query.name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
<Select
|
||||
label="Query"
|
||||
bind:value={value.queryId}
|
||||
options={$queries.list}
|
||||
getOptionValue={query => query._id}
|
||||
getOptionLabel={query => query.name}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if parameters.length}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
|
||||
.block-label {
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
text-align: justify;
|
||||
}
|
||||
.finished-text {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@
|
|||
}
|
||||
.table-title h1 {
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
.table-title > div {
|
||||
|
|
@ -158,7 +158,7 @@
|
|||
gap: var(--spacing-s);
|
||||
}
|
||||
.popovers :global(button) {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
.popovers :global(button svg) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<div>
|
||||
<Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
|
||||
Edit Roles
|
||||
Edit roles
|
||||
</Button>
|
||||
</div>
|
||||
<Modal bind:this={modal}>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
active={!!view.groupBy}
|
||||
on:click={modal.show}
|
||||
>
|
||||
Group By
|
||||
Group by
|
||||
</Button>
|
||||
<Modal bind:this={modal}>
|
||||
<GroupByModal {view} />
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@
|
|||
.field-status {
|
||||
color: var(--green);
|
||||
justify-self: center;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
label {
|
||||
font-family: var(--font-sans);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius-s);
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@
|
|||
|
||||
div.delete-items div {
|
||||
margin-top: 4px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
|
||||
h5 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
.error {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
.error:first-letter {
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
|
||||
.text {
|
||||
flex: 1 1 auto;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.binding__label {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.binding__description {
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
border-radius: var(--border-radius-m);
|
||||
padding: 2px;
|
||||
margin-left: 2px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.syntax-error {
|
||||
|
|
|
|||
|
|
@ -209,7 +209,7 @@
|
|||
|
||||
.deploy-time {
|
||||
color: var(--grey-7);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
font-size: var(--font-size-s);
|
||||
padding: var(--spacing-s);
|
||||
border-radius: var(--border-radius-s);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-transform: lowercase;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
|
|
@ -235,7 +235,7 @@
|
|||
|
||||
a {
|
||||
color: var(--blue);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,8 +61,7 @@
|
|||
"icon": "More",
|
||||
"children": [
|
||||
"screenslot",
|
||||
"navigation",
|
||||
"login"
|
||||
"navigation"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,15 +1,28 @@
|
|||
export default `
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body, html {
|
||||
height: 100% !important;
|
||||
font-family: Inter, sans-serif !important;
|
||||
margin: 0 !important;
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
align-items: center;
|
||||
list-style: none;
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
margin-bottom: var(--spacing-m);
|
||||
margin-top: var(--spacing-xs);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--grey-7);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@
|
|||
|
||||
i:hover {
|
||||
transform: scale(1.1);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@
|
|||
margin-bottom: var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--grey-7);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-header:hover,
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
color: var(--grey-7);
|
||||
border-radius: var(--border-radius-m);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -386,8 +386,7 @@ export const typography = [
|
|||
{ label: "Impact", value: "Impact" },
|
||||
{ label: "Inter", value: "Inter" },
|
||||
{ label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
|
||||
{ label: "Roboto", value: "Roboto" },
|
||||
{ label: "Roboto Mono", value: "Roboto Mono" },
|
||||
{ label: "Source Sans Pro", value: "Source Sans Pro" },
|
||||
{ label: "Times New Roman", value: "Times New Roman" },
|
||||
{ label: "Verdana", value: "Verdana" },
|
||||
],
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
cursor: pointer;
|
||||
color: var(--grey-7);
|
||||
margin: 0 12px 0 0;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
cursor: pointer;
|
||||
color: var(--grey-7);
|
||||
margin: 0 12px 0 0;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,6 @@
|
|||
|
||||
span {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
/* latin-ext */
|
||||
/* Inter-regular - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Inter'), local('Inter-Regular'),
|
||||
url('/assets/Inter-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/assets/Inter-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* Inter-500 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Inter Medium'), local('Inter-Medium'),
|
||||
url('/assets/Inter-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/assets/Inter-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* Inter-600 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: local('Inter SemiBold'), local('Inter-SemiBold'),
|
||||
url('/assets/Inter-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/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('Inter Bold'), local('Inter-Bold'),
|
||||
url('/assets/Inter-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/assets/Inter-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
/* Inter-800 - latin-ext_latin */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
|
||||
url('/assets/Inter-ExtraBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/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('Inter Black'), local('Inter-Black'),
|
||||
url('/assets/Inter-Black.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
|
||||
url('/assets/Inter-Black.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
|
||||
}
|
||||
|
||||
|
|
@ -36,6 +36,9 @@ body {
|
|||
.hoverable:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Top bottom spacing */
|
||||
.bb-margin-m {
|
||||
|
|
@ -44,11 +47,9 @@ body {
|
|||
* + .bb-margin-m {
|
||||
margin-top: var(--spacing-m);
|
||||
}
|
||||
|
||||
.bb-margin-xl {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
* + .bb-margin-xl {
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,6 @@ import "@spectrum-css/vars/dist/spectrum-light.css"
|
|||
import "@spectrum-css/vars/dist/spectrum-lightest.css"
|
||||
import "@spectrum-css/page/dist/index-vars.css"
|
||||
import "./global.css"
|
||||
import "./fonts.css"
|
||||
import "./budibase.css"
|
||||
import "./fonts.css"
|
||||
|
||||
import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
|
||||
loadSpectrumIcons()
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
|
||||
.topnavitemright a:hover {
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
import { ActionButton } from "@budibase/bbui"
|
||||
import GoogleLogo from "/assets/google-logo.png"
|
||||
import GoogleLogo from "assets/google-logo.png"
|
||||
import { admin } from "stores/portal"
|
||||
|
||||
let show = false
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@
|
|||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
.content {
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -55,6 +55,6 @@
|
|||
padding: 10px;
|
||||
display: block;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,11 @@
|
|||
<title>{title}</title>
|
||||
<link rel="icon" type="image/png" href={favicon} />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
|
||||
rel="stylesheet"
|
||||
|
|
@ -21,11 +26,10 @@
|
|||
<style>
|
||||
html,
|
||||
body {
|
||||
font-family: Inter;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@ const { BUILTIN_ROLE_IDS } = require("@budibase/auth/roles")
|
|||
const { UserStatus } = require("@budibase/auth").constants
|
||||
const { ObjectStoreBuckets } = require("@budibase/auth").objectStore
|
||||
|
||||
exports.LOGO_URL = "https://i.imgur.com/ycNeYTy.png"
|
||||
|
||||
exports.JobQueues = {
|
||||
AUTOMATIONS: "automationQueue",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
const { LOGO_URL } = require("../constants")
|
||||
|
||||
const BASE_LAYOUT_PROP_IDS = {
|
||||
PRIVATE: "layout_private_master",
|
||||
PUBLIC: "layout_public_master",
|
||||
|
|
@ -100,7 +98,6 @@ const BASE_LAYOUTS = [
|
|||
"margin-left": "auto",
|
||||
"margin-right": "auto",
|
||||
padding: "20px",
|
||||
color: "#757575",
|
||||
"font-weight": "400",
|
||||
"font-size": "16px",
|
||||
flex: "1 1 auto",
|
||||
|
|
@ -109,7 +106,6 @@ const BASE_LAYOUTS = [
|
|||
active: {},
|
||||
selected: {},
|
||||
},
|
||||
logoUrl: LOGO_URL,
|
||||
title: "",
|
||||
backgroundColor: "",
|
||||
color: "",
|
||||
|
|
@ -123,9 +119,7 @@ const BASE_LAYOUTS = [
|
|||
_component: "@budibase/standard-components/link",
|
||||
_styles: {
|
||||
normal: {
|
||||
"font-family": "Inter",
|
||||
"font-weight": "500",
|
||||
color: "#000000",
|
||||
"font-weight": "600",
|
||||
"text-decoration-line": "none",
|
||||
"font-size": "16px",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -304,29 +304,6 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"login": {
|
||||
"name": "Login Form",
|
||||
"description": "A component that automatically generates a login screen for your app.",
|
||||
"icon": "Login",
|
||||
"styleable": true,
|
||||
"settings": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Logo",
|
||||
"key": "logo"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Title",
|
||||
"key": "title"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "Button Text",
|
||||
"key": "buttonText"
|
||||
}
|
||||
]
|
||||
},
|
||||
"navigation": {
|
||||
"name": "Nav Bar",
|
||||
"description": "A component for handling the navigation within your app.",
|
||||
|
|
@ -338,6 +315,12 @@
|
|||
"type": "text",
|
||||
"label": "Logo URL",
|
||||
"key": "logoUrl"
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
"label": "Hide logo",
|
||||
"key": "hideLogo",
|
||||
"defaultValue": false
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -33,5 +33,6 @@
|
|||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,14 +28,14 @@
|
|||
.title {
|
||||
font-size: 0.85rem;
|
||||
color: #9e9e9e;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
margin: 1rem 1.5rem 0.5rem 1.5rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
margin: 0 1.5rem 1.5rem 1.5rem;
|
||||
color: inherit;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
|
||||
.error {
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--red-dark);
|
||||
}
|
||||
.error:first-letter {
|
||||
|
|
|
|||
|
|
@ -23,3 +23,9 @@
|
|||
<slot />
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: var(--spectrum-alias-text-color);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,194 +0,0 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
|
||||
const { authStore, styleable, builderStore } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
export let buttonText = "Log In"
|
||||
export let logo = ""
|
||||
export let title = ""
|
||||
export let buttonClass = ""
|
||||
export let inputClass = ""
|
||||
|
||||
let email = ""
|
||||
let password = ""
|
||||
let loading = false
|
||||
let error = false
|
||||
let _buttonClass = ""
|
||||
let _inputClass = ""
|
||||
|
||||
$: {
|
||||
_buttonClass = buttonClass || "default-button"
|
||||
_inputClass = inputClass || "default-input"
|
||||
}
|
||||
|
||||
const login = async () => {
|
||||
if ($builderStore.inBuilder) {
|
||||
return
|
||||
}
|
||||
loading = true
|
||||
await authStore.actions.logIn({ email, password })
|
||||
loading = false
|
||||
}
|
||||
|
||||
function handleKeydown(evt) {
|
||||
if (evt.key === "Enter") {
|
||||
login()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeydown} />
|
||||
<div class="root" use:styleable={$component.styles}>
|
||||
<div class="content">
|
||||
{#if logo}
|
||||
<div class="logo-container"><img src={logo} alt="logo" /></div>
|
||||
{/if}
|
||||
|
||||
{#if title}
|
||||
<h2 class="header-content">{title}</h2>
|
||||
{/if}
|
||||
|
||||
<div class="form-root">
|
||||
<div class="control">
|
||||
<input
|
||||
bind:value={email}
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
class={_inputClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<input
|
||||
bind:value={password}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
class={_inputClass}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button disabled={loading} on:click={login} class={_buttonClass}>
|
||||
{buttonText || "Log In"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="incorrect-details-panel">Incorrect email or password</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo-container > img {
|
||||
max-height: 80px;
|
||||
max-width: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
font-family: Inter;
|
||||
font-weight: 700;
|
||||
color: #1f1f1f;
|
||||
font-size: 32px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "case" "rlig" "calt" 0;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.incorrect-details-panel {
|
||||
margin-top: 26px;
|
||||
padding: 10px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: maroon;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
color: maroon;
|
||||
background-color: mistyrose;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.form-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.default-input {
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
color: #393c44;
|
||||
padding: 2px 6px 2px 12px;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 0.5px solid #d8d8d8;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
transition: border-color 100ms ease-in 0s;
|
||||
outline-color: #797979;
|
||||
}
|
||||
|
||||
.default-button {
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
padding: 0.4em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: #393c44;
|
||||
outline: none;
|
||||
width: 300px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease 0s;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.default-button:hover {
|
||||
background-color: white;
|
||||
border-color: #393c44;
|
||||
color: #393c44;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,16 +5,22 @@
|
|||
const component = getContext("component")
|
||||
|
||||
export let logoUrl
|
||||
export let hideLogo
|
||||
</script>
|
||||
|
||||
<div class="nav" use:styleable={$component.styles}>
|
||||
<div class="nav__top">
|
||||
<a href="/" use:linkable>
|
||||
{#if logoUrl}
|
||||
<img class="logo" alt="logo" src={logoUrl} height="48" />
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
{#if !hideLogo}
|
||||
<div class="nav__top">
|
||||
<a href="/" use:linkable>
|
||||
<img
|
||||
class="logo"
|
||||
alt="logo"
|
||||
src={logoUrl || "https://i.imgur.com/Dn7Xt1G.png"}
|
||||
height="48"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="nav__menu">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -33,6 +39,7 @@
|
|||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.nav__top img {
|
||||
margin-right: 16px;
|
||||
|
|
@ -52,7 +59,6 @@
|
|||
|
||||
.nav__menu {
|
||||
display: flex;
|
||||
margin-top: 40px;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ export { default as repeater } from "./Repeater.svelte"
|
|||
export { default as stackedlist } from "./StackedList.svelte"
|
||||
export { default as card } from "./Card.svelte"
|
||||
export { default as text } from "./Text.svelte"
|
||||
export { default as login } from "./Login.svelte"
|
||||
export { default as navigation } from "./Navigation.svelte"
|
||||
export { default as link } from "./Link.svelte"
|
||||
export { default as heading } from "./Heading.svelte"
|
||||
|
|
|
|||
Loading…
Reference in a new issue