From 635d3af58406e861d2e4257cecdced15cecd17b2 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 7 Jul 2021 21:26:11 +0200
Subject: [PATCH] add ButtonImage component

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

diff --git a/src/components/globals/ButtonImage.vue b/src/components/globals/ButtonImage.vue
new file mode 100644
index 0000000..1e9922f
--- /dev/null
+++ b/src/components/globals/ButtonImage.vue
@@ -0,0 +1,58 @@
+<template>
+  <b-button
+    v-on="$listeners"
+    v-bind="$attrs"
+    variant="link"
+    class="btn-image"
+  >
+    <span
+      class="btn-image-wrapper"
+      :style="`--url: url(${image.url.replace('api', 'api/sites/default/files')});`"
+    >
+      <slot name="default" />
+    </span>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'ButtonImage',
+
+  props: {
+    image: { type: Object, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-image {
+  padding: 0;
+  width: 135px;
+  height: 135px;
+  border: 0;
+  transition: 100ms;
+
+  @include media-breakpoint-up($size-bp) {
+    width: 250px;
+    height: 250px;
+
+    &:hover,
+    &.hover,
+    &:focus,
+    &.focus {
+      width: 400px;
+      height: 400px;
+    }
+  }
+
+  &-wrapper {
+    border: $line;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    background-image: var(--url);
+    background-size: cover;
+  }
+}
+</style>