mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
5 years ago
committed by
GitHub
GitHub
75 changed files with 129 additions and 610 deletions
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 |
|
Before Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
Binary file not shown.
@ -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; |
|||
} |
|||
@ -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+ */ |
|||
} |
|||
|
|||
@ -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> |
|||
Loading…
Reference in new issue