codecheck

1
<script setup lang="ts">
2
interface Props {
3
  background?: string;
4
  color?: string;
5
  loading?: boolean;
6
}
7

8
const props = withDefaults(defineProps<Props>(), {
9
  background: "var(--color-primary)",
10
  color: "var(--color-text-secondary)",
11
  loading: true,
12
});
13
</script>
14

15
<template>
16
  <button
17
    :style="`background: ${props.background}; color: ${props.color}`"
18
    class="button"
19
  >
20
    <slot v-if="props.loading" />
21
    <span v-else class="loader"></span>
22
  </button>
23
</template>
24

25
<style scoped lang="scss">
26
// button {
27
//   background: none;
28
//   border: none;
29
//   cursor: pointer;
30
//   font-family: inherit; /* 1 */
31
//   font-size: 100%; /* 1 */
32
//   line-height: 1.15; /* 1 */
33
//   margin: 0; /* 2 */
34
// }
35
.button {
36
  padding: 0.5rem 0.75rem;
37
  border-radius: var(--border-radius);
38
  display: flex;
39
  justify-content: center;
40
  width: 100%;
41
  // background: var(--color-primary);
42
  color: var(--color-text-secondary);
43
  // position: relative;
44
  height: 2rem;
45
  &:disabled {
46
    opacity: 0.5;
47
    cursor: not-allowed;
48
  }
49
}
50

51
.loader {
52
  width: 1rem;
53
  height: 1rem;
54
  border-width: 2px;
55
  border-style: solid;
56
  // position: absolute;
57
  // border: 5px solid black;
58
  border-bottom-color: transparent;
59
  border-radius: 50%;
60
  display: inline-block;
61
  box-sizing: border-box;
62
  animation: rotation 1s linear infinite;
63
}
64

65
@keyframes rotation {
66
  0% {
67
    transform: rotate(0deg);
68
  }
69
  100% {
70
    transform: rotate(360deg);
71
  }
72
}
73
</style>
74