|
|
@@ -0,0 +1,85 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ icon?: string;
|
|
|
+ disabled?: boolean;
|
|
|
+ square?: boolean;
|
|
|
+ inverse?: boolean;
|
|
|
+ danger?: boolean;
|
|
|
+ }>(),
|
|
|
+ {
|
|
|
+ icon: null,
|
|
|
+ disabled: false,
|
|
|
+ square: false,
|
|
|
+ inverse: false,
|
|
|
+ danger: false
|
|
|
+ }
|
|
|
+);
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <button
|
|
|
+ :class="{
|
|
|
+ btn: true,
|
|
|
+ 'btn--square': square,
|
|
|
+ 'btn--inverse': inverse,
|
|
|
+ 'btn--danger': danger
|
|
|
+ }"
|
|
|
+ :disabled="disabled"
|
|
|
+ >
|
|
|
+ <i v-if="icon" class="btn__icon material-icons" aria-hidden="true">
|
|
|
+ {{ icon }}
|
|
|
+ </i>
|
|
|
+ <slot />
|
|
|
+ </button>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.btn {
|
|
|
+ --secondary-color: var(--white);
|
|
|
+
|
|
|
+ display: inline-flex;
|
|
|
+ font-size: 14px !important;
|
|
|
+ align-items: center;
|
|
|
+ outline: none;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-weight: 500 !important;
|
|
|
+ gap: 5px;
|
|
|
+ border: solid 1px var(--primary-color);
|
|
|
+ background-color: var(--primary-color);
|
|
|
+ color: var(--secondary-color);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: filter ease-in-out 0.2s;
|
|
|
+
|
|
|
+ &[disabled] {
|
|
|
+ filter: grayscale(1);
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:not([disabled]):hover,
|
|
|
+ &:not([disabled]):focus {
|
|
|
+ filter: brightness(90%);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--square {
|
|
|
+ aspect-ratio: 1;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--inverse {
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ color: var(--primary-color);
|
|
|
+ border-color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--danger {
|
|
|
+ --primary-color: var(--red);
|
|
|
+ }
|
|
|
+
|
|
|
+ &__icon {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
