137 lines
3.2 KiB
Svelte
137 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
export let gray = undefined, red = undefined, yellow = undefined, green = undefined, blue = undefined, indigo = undefined, purple = undefined, pink = undefined
|
|
export let rounded = undefined
|
|
export let smaller = undefined, small = undefined, base = undefined, large = undefined, larger = undefined
|
|
const button = true
|
|
</script>
|
|
<button type="button"
|
|
class:button
|
|
class:gray class:red class:yellow class:green class:blue class:indigo class:purple class:pink
|
|
class:no-color={!gray && !red && !yellow && !green && !blue && !indigo && !purple && !pink}
|
|
class:rounded
|
|
class:smaller class:small class:base class:large class:larger
|
|
class:no-size={!smaller && !small && !base && !large && !larger}
|
|
on:click
|
|
{...$$restProps}
|
|
>
|
|
{#if $$slots.leading}
|
|
<span class="leading"><slot name="leading" /></span>
|
|
{/if}
|
|
<slot />
|
|
{#if $$slots.trailing}
|
|
<span class="trailing"><slot name="trailing" /></span>
|
|
{/if}
|
|
</button>
|
|
|
|
<style>
|
|
.smaller .leading, .small .leading
|
|
{
|
|
@apply -ml-0.5 mr-2 -mt-0.5 h-3.5 w-4;
|
|
}
|
|
.base .leading, .no-size .leading
|
|
{
|
|
@apply -ml-1 mr-2 -mt-0.5 h-4 w-5;
|
|
}
|
|
.large .leading, .larger .leading
|
|
{
|
|
@apply -ml-1 mr-3 -mt-0.5 h-4 w-5;
|
|
}
|
|
|
|
.smaller .trailing, .small .trailing
|
|
{
|
|
@apply ml-2 -mr-0.5 -mt-0.5 h-3.5 w-4;
|
|
}
|
|
.base .trailing, .no-size .trailing
|
|
{
|
|
@apply ml-2 -mr-1 -mt-0.5 h-4 w-5;
|
|
}
|
|
.large .trailing, .larger .trailing
|
|
{
|
|
@apply ml-3 -mr-1 -mt-0.5 h-4 w-5;
|
|
}
|
|
|
|
.button
|
|
{
|
|
@apply inline-flex items-center border border-transparent font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2;
|
|
}
|
|
:global(.dark) .button /* Weirdo mode fix */
|
|
{
|
|
@apply ring-offset-black;
|
|
}
|
|
.gray
|
|
{
|
|
@apply bg-gray-600 hover:bg-gray-700 focus:ring-gray-500;
|
|
}
|
|
.red
|
|
{
|
|
@apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
|
|
}
|
|
.yellow
|
|
{
|
|
@apply bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500;
|
|
}
|
|
.green
|
|
{
|
|
@apply bg-green-600 hover:bg-green-700 focus:ring-green-500;
|
|
}
|
|
.blue
|
|
{
|
|
@apply bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
|
|
}
|
|
.indigo
|
|
{
|
|
@apply bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500;
|
|
}
|
|
.purple
|
|
{
|
|
@apply bg-purple-600 hover:bg-purple-700 focus:ring-purple-500;
|
|
}
|
|
.pink
|
|
{
|
|
@apply bg-pink-600 hover:bg-pink-700 focus:ring-pink-500;
|
|
}
|
|
.rounded
|
|
{
|
|
@apply rounded-full;
|
|
}
|
|
.no-color
|
|
{
|
|
@apply gray;
|
|
}
|
|
.smaller
|
|
{
|
|
@apply px-2.5 py-1.5 text-xs;
|
|
}
|
|
.rounded.smaller
|
|
{
|
|
@apply px-3;
|
|
}
|
|
.small
|
|
{
|
|
@apply px-3 py-2 text-sm leading-4;
|
|
}
|
|
.rounded.small
|
|
{
|
|
@apply px-3.5;
|
|
}
|
|
.base, .rounded.base
|
|
{
|
|
@apply px-4 py-2 text-sm;
|
|
}
|
|
.large
|
|
{
|
|
@apply px-4 py-2 text-base;
|
|
}
|
|
.rounded.large
|
|
{
|
|
@apply px-5;
|
|
}
|
|
.larger, .rounded.larger
|
|
{
|
|
@apply px-6 py-3 text-base;
|
|
}
|
|
.no-size
|
|
{
|
|
@apply base;
|
|
}
|
|
</style> |