add ButtonImage component

2021-07-07 21:26:11 +02:00
parent 5defd3ce03
commit 635d3af584
1 changed files with 58 additions and 0 deletions
@@ -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>