add ButtonExpand

2021-07-06 20:13:23 +02:00
parent 4a1b0ae12d
commit 26adaf0be1
1 changed files with 56 additions and 0 deletions
@@ -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>