diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2024-03-10 00:13:25 +0000 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2024-03-10 00:13:25 +0000 |
| commit | 9a11e0f4a38297006b89cc7bb2a60734111582e0 (patch) | |
| tree | 5ebddde79e67b659714b5dbdbfcea289f06a4ae5 /src/components/Control/Button.vue | |
| parent | 817478f3cf357fc09778d9dc3cf67a667e21f042 (diff) | |
Migrate to nuxt
Diffstat (limited to 'src/components/Control/Button.vue')
| -rw-r--r-- | src/components/Control/Button.vue | 82 |
1 files changed, 0 insertions, 82 deletions
diff --git a/src/components/Control/Button.vue b/src/components/Control/Button.vue deleted file mode 100644 index efd91c2..0000000 --- a/src/components/Control/Button.vue +++ /dev/null @@ -1,82 +0,0 @@ -<script setup lang="ts"> -const props = defineProps({ - type: { - type: String, - required: false, - default: 'text', - }, - label: String, - icon: Array<String>, - disabled: Boolean, -}); - -const emit = defineEmits(['click']); - -const onClick = (event: MouseEvent) => { - if (!props.disabled) { - emit('click', event); - } -}; -</script> - -<template> - <a id="button" :class="{text: type === 'text', solid: type === 'solid', disabled: disabled}" @click.stop="onClick"> - <font-awesome-icon :icon="icon" /> - {{ label }} - </a> -</template> - -<style scoped> -#button { - display: flex; - align-items: center; - gap: 0.25rem; - user-select: none; -} - -.text { - background-color: transparent; - color: var(--color-text-primary); - transition: color 0.3s; - font-weight: 700; - cursor: pointer; - - &.disabled { - color: var(--color-text-mute); - cursor: not-allowed; - } - - &:hover { - color: var(--color-primary-dark); - } - - &.disabled:hover { - color: var(--color-text-mute); - } -} - -.solid { - background-color: var(--color-primary); - transition: background-color 0.3s; - color: var(--color-text); - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-weight: 700; - cursor: pointer; - - &.disabled { - background-color: var(--color-border); - color: var(--color-text-mute); - cursor: not-allowed; - } - - &:hover { - background-color: var(--color-primary-dark); - } - - &.disabled:hover { - background-color: var(--color-border); - } -} - -</style>
\ No newline at end of file |
