add DotButton component

src/components/globals/DotButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <b-button
+    class="dot-btn"
+    :class="['dot-btn-' + variant, { 'active': active, 'show': show }]"
+    v-bind="$attrs" v-on="$listeners"
+    :active="active"
+    :variant="variant"
+    @mouseover="show = true"
+    @mouseleave="show = false"
+    @focus="show = true"
+    @blur="show = false"
+    @click="onClick"
+  >
+    <span>
+      <slot name="default" />
+    </span>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'DotButton',
+
+  props: {
+    variant: { type: String, required: true },
+    active: { type: Boolean, default: false }
+  },
+
+  data () {
+    return {
+      show: false
+    }
+  },
+
+  methods: {
+    onClick (e) {
+      this.$el.blur()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@each $color, $value in $theme-colors {
+  .dot-btn-#{$color} {
+    @include dot-button-variant($value, $value);
+  }
+}
+
+.dot-btn {
+  word-break: keep-all;
+  white-space: pre;
+
+  &:not(.show) {
+    min-height: 1.1875rem;
+    min-width: 1.1875rem;
+    padding: 0;
+
+    &.dot-btn-depart {
+      min-height: 1.875rem;
+      min-width: 1.875rem;
+    }
+
+    span {
+      display: none;
+    }
+  }
+}
+</style>