From 8a9fc9aef19437944a3bba9a4cea8c5b092f6fde Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 4 Jun 2021 20:56:34 +0200
Subject: [PATCH] add ButtonZoom component

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

diff --git a/src/components/globals/ButtonZoom.vue b/src/components/globals/ButtonZoom.vue
new file mode 100644
index 0000000..32f4572
--- /dev/null
+++ b/src/components/globals/ButtonZoom.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="btn-zoom">
+    <b-button
+      variant="dark"
+      class="btn-zoom-item"
+      @click="$emit('zoom', 1)"
+      :disabled="value >= maxZoom"
+    >
+      <span>+</span>
+    </b-button>
+
+    <b-button
+      variant="dark"
+      class="btn-zoom-item"
+      @click="$emit('zoom', -1)"
+      :disabled="value <= minZoom"
+    >
+      <span>–</span>
+    </b-button>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'ButtonZoom',
+
+  props: {
+    value: { type: Number, required: true },
+    minZoom: { type: Number, required: true },
+    maxZoom: { type: Number, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-zoom {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+}
+
+.btn-zoom-item {
+  display: block;
+  width: $btn-size;
+  height: $btn-size;
+  padding: 0;
+  border: 0;
+  font-size: 1.7rem;
+  line-height: 1;
+
+  margin: 6px;
+
+  span {
+    position: relative;
+    top: -3px;
+  }
+
+  &:hover:not(.disabled),
+  &:focus:not(.disabled) {
+    color: $black;
+    background-color: $white;
+    border: 3px solid $black;
+
+    span {
+      top: -6px;
+    }
+  }
+}
+</style>