You've already forked AstralRinth
forked from didirus/AstralRinth
324 lines
8.1 KiB
Svelte
324 lines
8.1 KiB
Svelte
<script lang="ts">
|
|
export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
|
|
export let href: string
|
|
if (href) as = 'a'
|
|
|
|
// Use `value` if the button is an `<input`>
|
|
export let value: string;
|
|
|
|
export let size: 'sm' | 'md' | 'lg' = 'md'
|
|
export let color: 'raised' | 'primary' | 'danger';
|
|
|
|
let className = `btn btn--${size}`;
|
|
className += color && (` btn--${color}`)
|
|
</script>
|
|
|
|
{#if as === 'button'}
|
|
<button class={className}>
|
|
<slot />
|
|
</button>
|
|
{:else if as === 'a'}
|
|
<a class={className} {href}>
|
|
<slot />
|
|
</a>
|
|
{:else if as === 'summary'}
|
|
<summary class={className}>
|
|
<slot />
|
|
</summary>
|
|
{:else if as === 'input'}
|
|
<input class={className} {value} />
|
|
{/if}
|
|
|
|
<style lang="postcss">
|
|
/* Base button styles */
|
|
.btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5px var(--spacer-3);
|
|
font-size: var(--body-font-size);
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: 20px; /* Specifically not inherit our `<body>` default */
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border: var(--border-width) var(--border-style);
|
|
border-radius: var(--radii-2);
|
|
appearance: none; /* Corrects inability to style clickable `input` types in iOS. */
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&:disabled,
|
|
&.disabled,
|
|
&[aria-disabled='true'] {
|
|
cursor: default;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
font-weight: var(--font-weight-semibold);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.icon {
|
|
margin-right: var(--spacer-1);
|
|
color: var(--color-fg-muted);
|
|
|
|
&:only-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.Counter {
|
|
margin-left: 2px;
|
|
color: inherit;
|
|
text-shadow: none;
|
|
vertical-align: top;
|
|
background-color: var(--color-btn-counter-bg);
|
|
}
|
|
|
|
.dropdown-caret {
|
|
margin-left: var(--spacer-1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
/* Default button */
|
|
.btn {
|
|
color: var(--color-btn-text);
|
|
background-color: var(--color-btn-bg);
|
|
border-color: var(--color-btn-border);
|
|
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
|
|
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
|
transition-property: color, background-color, border-color;
|
|
|
|
&:hover,
|
|
&.hover,
|
|
[open] > & {
|
|
background-color: var(--color-btn-hover-bg);
|
|
border-color: var(--color-btn-hover-border);
|
|
transition-duration: 0.1s;
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--color-btn-active-bg);
|
|
border-color: var(--color-btn-active-border);
|
|
transition: none;
|
|
}
|
|
|
|
&.selected,
|
|
&[aria-selected='true'] {
|
|
background-color: var(--color-btn-selected-bg);
|
|
box-shadow: var(--color-primer-shadow-inset);
|
|
}
|
|
|
|
&:disabled,
|
|
&.disabled,
|
|
&[aria-disabled='true'] {
|
|
color: var(--color-primer-fg-disabled);
|
|
background-color: var(--color-btn-bg);
|
|
border-color: var(--color-btn-border);
|
|
|
|
:global(.icon) {
|
|
color: var(--color-primer-fg-disabled);
|
|
}
|
|
}
|
|
|
|
/* Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons */
|
|
&:focus,
|
|
&.focus {
|
|
border-color: var(--color-btn-focus-border);
|
|
outline: none;
|
|
box-shadow: var(--color-btn-focus-shadow);
|
|
}
|
|
}
|
|
|
|
/* Primary button */
|
|
.btn--primary {
|
|
color: var(--color-btn-primary-text);
|
|
background-color: var(--color-btn-primary-bg);
|
|
border-color: var(--color-btn-primary-border);
|
|
box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
|
|
|
|
&:hover,
|
|
&.hover,
|
|
[open] > & {
|
|
background-color: var(--color-btn-primary-hover-bg);
|
|
border-color: var(--color-btn-primary-hover-border);
|
|
}
|
|
|
|
&:active,
|
|
&.selected,
|
|
&[aria-selected='true'] {
|
|
background-color: var(--color-btn-primary-selected-bg);
|
|
box-shadow: var(--color-btn-primary-selected-shadow);
|
|
}
|
|
|
|
&:disabled,
|
|
&.disabled,
|
|
&[aria-disabled='true'] {
|
|
color: var(--color-btn-primary-disabled-text);
|
|
background-color: var(--color-btn-primary-disabled-bg);
|
|
border-color: var(--color-btn-primary-disabled-border);
|
|
|
|
:global(.icon) {
|
|
color: var(--color-btn-primary-disabled-text);
|
|
}
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
background-color: var(--color-btn-primary-focus-bg);
|
|
border-color: var(--color-btn-primary-focus-border);
|
|
box-shadow: var(--color-btn-primary-focus-shadow);
|
|
}
|
|
|
|
.Counter {
|
|
color: inherit;
|
|
background-color: var(--color-btn-primary-counter-bg);
|
|
}
|
|
|
|
:global(.icon) {
|
|
color: var(--color-btn-primary-icon);
|
|
}
|
|
}
|
|
|
|
/* Outline button */
|
|
.btn--outline {
|
|
color: var(--color-btn-outline-text);
|
|
|
|
&:hover,
|
|
[open] > & {
|
|
color: var(--color-btn-outline-hover-text);
|
|
background-color: var(--color-btn-outline-hover-bg);
|
|
border-color: var(--color-btn-outline-hover-border);
|
|
box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
|
|
|
|
.Counter {
|
|
background-color: var(--color-btn-outline-hover-counter-bg);
|
|
}
|
|
|
|
:global(.icon) {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&.selected,
|
|
&[aria-selected='true'] {
|
|
color: var(--color-btn-outline-selected-text);
|
|
background-color: var(--color-btn-outline-selected-bg);
|
|
border-color: var(--color-btn-outline-selected-border);
|
|
box-shadow: var(--color-btn-outline-selected-shadow);
|
|
}
|
|
|
|
&:disabled,
|
|
&.disabled,
|
|
&[aria-disabled='true'] {
|
|
color: var(--color-btn-outline-disabled-text);
|
|
background-color: var(--color-btn-outline-disabled-bg);
|
|
border-color: var(--color-btn-border);
|
|
box-shadow: none;
|
|
|
|
.Counter {
|
|
background-color: var(--color-btn-outline-disabled-counter-bg);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var(--color-btn-outline-focus-border);
|
|
box-shadow: var(--color-btn-outline-focus-shadow);
|
|
}
|
|
|
|
.Counter {
|
|
color: inherit;
|
|
background-color: var(--color-btn-outline-counter-bg);
|
|
}
|
|
}
|
|
|
|
/* Danger button */
|
|
.btn--danger {
|
|
color: var(--color-btn-danger-text);
|
|
|
|
:global(.icon) {
|
|
color: var(--color-btn-danger-icon);
|
|
}
|
|
|
|
&:hover,
|
|
[open] > & {
|
|
color: var(--color-btn-danger-hover-text);
|
|
background-color: var(--color-btn-danger-hover-bg);
|
|
border-color: var(--color-btn-danger-hover-border);
|
|
box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
|
|
|
|
.Counter {
|
|
background-color: var(--color-btn-danger-hover-counter-bg);
|
|
}
|
|
|
|
:global(.icon) {
|
|
color: var(--color-btn-danger-hover-icon);
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&.selected,
|
|
&[aria-selected='true'] {
|
|
color: var(--color-btn-danger-selected-text);
|
|
background-color: var(--color-btn-danger-selected-bg);
|
|
border-color: var(--color-btn-danger-selected-border);
|
|
box-shadow: var(--color-btn-danger-selected-shadow);
|
|
}
|
|
|
|
&:disabled,
|
|
&.disabled,
|
|
&[aria-disabled='true'] {
|
|
color: var(--color-btn-danger-disabled-text);
|
|
background-color: var(--color-btn-danger-disabled-bg);
|
|
border-color: var(--color-btn-border);
|
|
box-shadow: none;
|
|
|
|
.Counter {
|
|
background-color: var(--color-btn-danger-disabled-counter-bg);
|
|
}
|
|
|
|
:global(.icon) {
|
|
color: var(--color-btn-danger-disabled-text);
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
border-color: var(--color-btn-danger-focus-border);
|
|
box-shadow: var(--color-btn-danger-focus-shadow);
|
|
}
|
|
|
|
.Counter {
|
|
color: inherit;
|
|
background-color: var(--color-btn-danger-counter-bg);
|
|
}
|
|
}
|
|
|
|
/* Sizes */
|
|
.btn--sm {
|
|
padding: 3px 12px;
|
|
font-size: var(--font-0);
|
|
}
|
|
|
|
.btn--lg {
|
|
font-size: var(--font-size-large);
|
|
padding: 8px 16px;
|
|
border-radius: var(--radii-3);
|
|
}
|
|
|
|
/* Full-width button */
|
|
/* These buttons expand to the full width of their parent container */
|
|
.btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
</style>
|