aboutsummaryrefslogtreecommitdiffstats
path: root/components/base
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-03-13 17:35:05 +0000
committerLeonardo Bishop <me@leonardobishop.com>2024-03-13 17:35:05 +0000
commitba28c0148cab26fcaf523e84731ffb7c416b3338 (patch)
treea26135e7aa07f53c36292117eff84d0b22e6dd92 /components/base
parent1d2fd8e82f4d2ccfa4cf9e434a05e43250162449 (diff)
Add import page
Diffstat (limited to 'components/base')
-rw-r--r--components/base/Button.vue24
1 files changed, 23 insertions, 1 deletions
diff --git a/components/base/Button.vue b/components/base/Button.vue
index c7f7c50..827e201 100644
--- a/components/base/Button.vue
+++ b/components/base/Button.vue
@@ -5,6 +5,11 @@ const props = defineProps({
required: false,
default: 'text',
},
+ accent: {
+ type: String,
+ required: false,
+ default: 'normal',
+ },
label: String,
icon: Array<String>,
disabled: Boolean,
@@ -20,7 +25,8 @@ const onClick = (event: MouseEvent) => {
</script>
<template>
- <a id="button" :class="{ text: type === 'text', solid: type === 'solid', disabled: disabled }" @click.stop="onClick">
+ <a id="button" :class="{ text: type === 'text', solid: type === 'solid', disabled: disabled, [accent]: true }"
+ @click.stop="onClick">
<font-awesome-icon :icon="icon" />
{{ label }}
</a>
@@ -55,6 +61,22 @@ const onClick = (event: MouseEvent) => {
}
}
+.text.danger {
+ color: var(--color-false);
+
+ &:hover {
+ color: var(--color-false-hover)
+ }
+}
+
+.solid.danger {
+ background-color: var(--color-false);
+
+ &:hover {
+ background-color: var(--color-false-hover);
+ }
+}
+
.solid {
background-color: var(--color-primary);
transition: background-color 0.3s;