diff options
Diffstat (limited to 'components/base/Button.vue')
| -rw-r--r-- | components/base/Button.vue | 21 |
1 files changed, 10 insertions, 11 deletions
diff --git a/components/base/Button.vue b/components/base/Button.vue index efd91c2..c7f7c50 100644 --- a/components/base/Button.vue +++ b/components/base/Button.vue @@ -2,7 +2,7 @@ const props = defineProps({ type: { type: String, - required: false, + required: false, default: 'text', }, label: String, @@ -20,7 +20,7 @@ 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 }" @click.stop="onClick"> <font-awesome-icon :icon="icon" /> {{ label }} </a> @@ -33,23 +33,23 @@ const onClick = (event: MouseEvent) => { 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); } @@ -58,25 +58,24 @@ const onClick = (event: MouseEvent) => { .solid { background-color: var(--color-primary); transition: background-color 0.3s; - color: var(--color-text); + color: var(--color-text-on-primary); 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 |
