diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2024-03-13 17:35:05 +0000 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2024-03-13 17:35:05 +0000 |
| commit | ba28c0148cab26fcaf523e84731ffb7c416b3338 (patch) | |
| tree | a26135e7aa07f53c36292117eff84d0b22e6dd92 /components/base | |
| parent | 1d2fd8e82f4d2ccfa4cf9e434a05e43250162449 (diff) | |
Add import page
Diffstat (limited to 'components/base')
| -rw-r--r-- | components/base/Button.vue | 24 |
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; |
