From 26adaf0be1d07fb9c3d86ff4e9a8197cbe8ed330 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 6 Jul 2021 16:41:05 +0200
Subject: [PATCH] add ButtonExpand

---
 src/components/globals/ButtonExpand.vue | 56 +++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/globals/ButtonExpand.vue

diff --git a/src/components/globals/ButtonExpand.vue b/src/components/globals/ButtonExpand.vue
new file mode 100644
index 0000000..008a575
--- /dev/null
+++ b/src/components/globals/ButtonExpand.vue
@@ -0,0 +1,56 @@
+<template>
+  <b-button
+    v-on="$listeners"
+    v-bind="$attrs"
+    variant="depart"
+    class="btn-expand"
+    :aria-label="expanded ? 'Réduire' : 'Agrandir'"
+  >
+    <svg aria-hidden="true" viewBox="0 0 75 70">
+      <path v-if="expanded" d="M20,30 h10 v-10 M45,20 v10 h10 M55,40 h-10 v10 M30,50 v-10 h-10" />
+      <path v-else d="M20,30 v-10 h10 M45,20 h10 v10 M55,40 v10 h-10 M30,50 h-10 v-10" />
+    </svg>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'ButtonExpand',
+
+  props: {
+    expanded: { type: Boolean, default: false }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-expand {
+  padding: 0;
+  width: 75px;
+  height: 70px;
+  border: 0;
+  border-radius: 0 !important;
+  line-height: 0;
+
+  &:hover,
+  &:focus {
+    path {
+      stroke: $black;
+    }
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  path {
+    fill: none;
+    stroke: lighten($black, 20%);
+    stroke-width: 4px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+}
+</style>