add ButtonClose component

src/assets/scss/abstracts/_variables.scss

@@ -106,8 +106,9 @@ $card-border-width: 0;
 // $card-border-color: $black;
 
 
-
+// CUSTOM
-$text-card-header-height: 4rem; // custom
+$btn-size: 25px;
+$text-card-header-height: 4rem;
 
 
 

src/components/globals/ButtonClose.vue

@@ -0,0 +1,48 @@
+<template>
+  <b-button
+    v-on="$listeners"
+    v-bind="$attrs"
+    variant="link"
+    class="btn-close"
+  >
+    <svg viewBox="0 0 19 19">
+      <path d="m 2,2 15,15" />
+      <path d="m 17,2 -15,15" />
+    </svg>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'ButtonClose'
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-close {
+  padding: 3px;
+  width: $btn-size;
+  height: $btn-size;
+  border: 0;
+  line-height: 0;
+
+  &:hover,
+  &:focus {
+    path {
+      stroke: $black;
+    }
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  path {
+    fill: none;
+    stroke: lighten($black, 30%);
+    stroke-width: 4px;
+    stroke-linecap: round;
+  }
+}
+</style>

src/components/text/TextCard.vue

@@ -15,7 +15,7 @@
           </template>
 
           <li>
-            <b-button-close size="sm" @click="onSelfClose($event, text.id)" />
+            <button-close @click="onSelfClose($event, text.id)" />
           </li>
         </ul>
       </nav>