verschoben von innohub/k3s repo

src/lib/components/ui/Button.svelte

@@ -0,0 +1,202 @@
+<style>
+	.button {
+		@apply inline-flex;
+		@apply items-center;
+		@apply border;
+		@apply font-bold;
+		@apply transition-all;
+	}
+
+	.button:focus {
+		@apply outline-none;
+		@apply ring-2;
+		@apply ring-offset-2;
+		@apply ring-blue-500;
+	}
+
+	.button:disabled {
+		@apply opacity-50;
+		@apply cursor-default;
+
+		filter: grayscale(100%);
+	}
+
+	.primary {
+		@apply border-transparent;
+		@apply shadow-sm;
+		@apply text-white;
+		@apply bg-blue-500;
+	}
+
+	.primary:hover:not(.disabled) {
+		@apply bg-blue-400;
+	}
+
+	.primary:active {
+		@apply bg-blue-800;
+	}
+
+	.secondary {
+		@apply border-transparent;
+		@apply text-blue-500;
+		@apply bg-blue-100;
+	}
+
+	.secondary:hover:not(.disabled) {
+		@apply bg-blue-300;
+	}
+
+	.secondary:active {
+		@apply bg-blue-300;
+	}
+
+	.danger {
+		@apply border-transparent;
+		@apply shadow-sm;
+		@apply text-white;
+		@apply bg-red-600;
+	}
+
+	.danger:hover:not(.disabled) {
+		@apply bg-red-700;
+	}
+
+	.danger:active {
+		@apply bg-red-800;
+	}
+
+	.success {
+		@apply border-transparent;
+		@apply shadow-sm;
+		@apply text-white;
+		@apply bg-green-600;
+	}
+
+	.success:hover:not(.disabled) {
+		@apply bg-green-700;
+	}
+
+	.success:active {
+		@apply bg-green-800;
+	}
+
+	.white {
+		@apply border-gray-300;
+		@apply shadow-sm;
+		@apply text-gray-700;
+		@apply bg-white;
+	}
+
+	.white:hover:not(.disabled) {
+		@apply bg-gray-100;
+	}
+
+	.white:active {
+		@apply bg-gray-200;
+	}
+
+	.black {
+		@apply shadow-sm;
+		@apply border-none;
+		@apply text-gray-300;
+		@apply bg-black;
+	}
+
+	.black:hover:not(.disabled) {
+		@apply bg-gray-900;
+	}
+
+	.black:active {
+		@apply bg-gray-700;
+	}
+
+	.transparent {
+		@apply border-transparent;
+		@apply text-blue-500;
+		@apply bg-transparent;
+	}
+
+	.transparent:hover:not(.disabled) {
+		@apply bg-blue-300;
+	}
+
+	.transparent:active {
+		@apply bg-blue-300;
+	}
+
+	.xs {
+		@apply px-2.5;
+		@apply py-1.5;
+		@apply text-xs;
+		@apply rounded;
+	}
+
+	.sm {
+		@apply px-3;
+		@apply py-2;
+		@apply text-sm;
+		@apply leading-4;
+		@apply rounded-md;
+	}
+
+	.md {
+		@apply px-4;
+		@apply py-2;
+		@apply text-sm;
+		@apply rounded-md;
+	}
+
+	.lg {
+		@apply px-4;
+		@apply py-2;
+		@apply text-base;
+		@apply rounded-md;
+	}
+
+	.xl {
+		@apply px-6;
+		@apply py-3;
+		@apply text-base;
+		@apply rounded-md;
+	}
+
+	.center {
+		@apply justify-center;
+	}
+
+	.left {
+		@apply justify-start;
+	}
+
+	.right {
+		@apply justify-end;
+	}
+</style>
+
+<script>
+	export let href = null;
+	export let type = 'button';
+	export let size = 'md';
+	export let variant = 'primary';
+	export let fullWidth = false;
+	export let align = 'center';
+	export let disabled = false;
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+{#if href}
+	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
+		><slot />
+	</a>
+{:else}
+	<button
+		on:click
+		{type}
+		{disabled}
+		class:w-full={fullWidth}
+		class="button {variant} {size} {classNames} {align}"
+	>
+		<slot />
+	</button>
+{/if}