From c1c838635aa9d3690b83d63497cbb6fbb2bbe316 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 4 Jun 2021 17:33:30 +0200
Subject: [PATCH] add ButtonClose component

---
 src/assets/scss/abstracts/_variables.scss |  5 ++-
 src/components/globals/ButtonClose.vue    | 48 +++++++++++++++++++++++
 src/components/text/TextCard.vue          |  2 +-
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/components/globals/ButtonClose.vue

diff --git a/src/assets/scss/abstracts/_variables.scss b/src/assets/scss/abstracts/_variables.scss
index 48e419a..93b994f 100644
--- a/src/assets/scss/abstracts/_variables.scss
+++ b/src/assets/scss/abstracts/_variables.scss
@@ -106,8 +106,9 @@ $card-border-width: 0;
 // $card-border-color: $black;
 
 
-
-$text-card-header-height: 4rem; // custom
+// CUSTOM
+$btn-size: 25px;
+$text-card-header-height: 4rem;
 
 
 
diff --git a/src/components/globals/ButtonClose.vue b/src/components/globals/ButtonClose.vue
new file mode 100644
index 0000000..f9e7453
--- /dev/null
+++ b/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>
diff --git a/src/components/text/TextCard.vue b/src/components/text/TextCard.vue
index dc593f2..f31ae5a 100644
--- a/src/components/text/TextCard.vue
+++ b/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>