mirror of https://github.com/Budibase/budibase.git
Keviin Åberg Kultalahti
5 years ago
15 changed files with 38 additions and 212 deletions
@ -1,128 +0,0 @@ |
|||
<script> |
|||
export let active = false, |
|||
text = false, |
|||
small = false, |
|||
medium = false, |
|||
large = false, |
|||
blue = false, |
|||
green = false, |
|||
yellow = false, |
|||
purple = false, |
|||
red = false, |
|||
orange = false, |
|||
disabled = false, |
|||
href = false |
|||
</script> |
|||
|
|||
{#if href} |
|||
<a |
|||
{href} |
|||
class:active |
|||
class:small |
|||
class:medium |
|||
class:large |
|||
class:text |
|||
class:blue |
|||
class:green |
|||
class:yellow |
|||
class:purple |
|||
class:red |
|||
class:orange><slot /></a> |
|||
{:else} |
|||
<button |
|||
class:active |
|||
class:small |
|||
class:medium |
|||
class:large |
|||
class:text |
|||
class:blue |
|||
class:green |
|||
class:yellow |
|||
class:purple |
|||
class:red |
|||
class:orange |
|||
{disabled} |
|||
on:click|preventDefault> |
|||
<slot /> |
|||
</button> |
|||
{/if} |
|||
|
|||
<style> |
|||
button, |
|||
a { |
|||
font-family: var(--font-sans); |
|||
cursor: pointer; |
|||
font-weight: 600; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
transition: all 0.08s ease 0s; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
text-rendering: optimizeLegibility; |
|||
text-decoration: none; |
|||
outline: none; |
|||
-webkit-box-align: center; |
|||
user-select: none; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.text { |
|||
background-color: transparent; |
|||
color: var(--grey-7); |
|||
border: none; |
|||
font-weight: 500; |
|||
} |
|||
button.text:hover:not([disabled]) { |
|||
color: var(--ink); |
|||
} |
|||
button.text:active:not([disabled]) { |
|||
color: var(--blue); |
|||
} |
|||
button.text.active:not([disabled]) { |
|||
color: var(--blue); |
|||
} |
|||
button.text:disabled { |
|||
cursor: not-allowed; |
|||
color: var(--grey-4); |
|||
} |
|||
|
|||
.blue { |
|||
color: var(--blue); |
|||
} |
|||
|
|||
.green { |
|||
color: var(--green); |
|||
} |
|||
|
|||
.red { |
|||
color: var(--red); |
|||
} |
|||
|
|||
.purple { |
|||
color: var(--purple); |
|||
} |
|||
|
|||
.yellow { |
|||
color: var(--yellow); |
|||
} |
|||
|
|||
.orange { |
|||
color: var(--orange); |
|||
} |
|||
|
|||
.small { |
|||
font-size: var(--font-size-xs); |
|||
margin: 0; |
|||
} |
|||
|
|||
.medium { |
|||
font-size: var(--font-size-s); |
|||
margin: 0; |
|||
} |
|||
|
|||
.large { |
|||
font-size: var(--font-size-m); |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
@ -1,69 +0,0 @@ |
|||
<script> |
|||
import { View } from "svench"; |
|||
import TextButton from "./TextButton.svelte"; |
|||
import Icon from "../Icons/Icon.svelte"; |
|||
</script> |
|||
|
|||
<style> |
|||
div { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|||
gap: var(--spacing-xl); |
|||
} |
|||
</style> |
|||
|
|||
<View name="Text"> |
|||
<div> |
|||
<TextButton text small on:click={() => alert('Clicked!')}> |
|||
<Icon name="view" /> |
|||
Add View |
|||
</TextButton> |
|||
<TextButton text medium on:click={() => alert('Clicked!')}> |
|||
<Icon name="addcolumn" /> |
|||
Add Column |
|||
</TextButton> |
|||
<TextButton text large on:click={() => alert('Clicked!')}> |
|||
<Icon name="addrow" /> |
|||
Add Row |
|||
</TextButton> |
|||
<TextButton text disabled on:click={() => alert('Clicked!')}> |
|||
<Icon name="arrow" direction="w" /> |
|||
Disabled Text Button |
|||
</TextButton> |
|||
<TextButton active text on:click={() => alert('Clicked!')}> |
|||
<Icon name="calculate" /> |
|||
Active Calculation |
|||
</TextButton> |
|||
</div> |
|||
</View> |
|||
|
|||
<View name="Colours"> |
|||
<div> |
|||
<TextButton text medium yellow on:click={() => alert('Clicked!')}> |
|||
<Icon name="view" /> |
|||
Add View |
|||
</TextButton> |
|||
<TextButton text medium blue on:click={() => alert('Clicked!')}> |
|||
<Icon name="addcolumn" /> |
|||
Add Column |
|||
</TextButton> |
|||
<TextButton text medium purple on:click={() => alert('Clicked!')}> |
|||
<Icon name="addrow" /> |
|||
Add Row |
|||
</TextButton> |
|||
<TextButton text medium red on:click={() => alert('Clicked!')}> |
|||
<Icon name="arrow" /> |
|||
Delete |
|||
</TextButton> |
|||
<TextButton text medium green on:click={() => alert('Clicked!')}> |
|||
<Icon name="calculate" /> |
|||
Calculate |
|||
</TextButton> |
|||
</div> |
|||
</View> |
|||
|
|||
<View name="Usage as a link"> |
|||
<div> |
|||
<TextButton green text href="https://google.com">This is a link</TextButton> |
|||
</div> |
|||
</View> |
|||
@ -0,0 +1,17 @@ |
|||
<script> |
|||
import "@spectrum-css/link/dist/index-vars.css" |
|||
|
|||
export let href = "#" |
|||
export let size = "M" |
|||
export let quiet = false; |
|||
export let primary = false; |
|||
export let secondary = false; |
|||
export let overBackground = false |
|||
</script> |
|||
|
|||
<a {href} class="spectrum-Link |
|||
spectrum-Link--size{size} |
|||
{primary && 'spectrum-Link--primary'} |
|||
{secondary && 'spectrum-Link--secondary'} |
|||
{overBackground && 'spectrum-Link--overBackground'} |
|||
{quiet && 'spectrum-Link--quiet'}"><slot /></a> |
|||
Loading…
Reference in new issue