| 
					
				 | 
			
			
				@@ -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> 
			 |