add DotButton component

src/assets/scss/abstracts/_mixins.scss

@@ -48,3 +48,54 @@
   }
 }
 
+@mixin dot-button-variant(
+  $background,
+  $border,
+  $hover-background: darken($background, 7.5%),
+  $hover-border: lighten($border, 5%),
+  $active-background: $background,
+  $active-border: $border
+) {
+  color: color-yiq($background);
+  background-color: lighten($background, 15%);
+  @if $background == $white {
+    border-color: $black;
+    border-width: 3px;
+  } @else {
+    border-color: lighten($border, 15%);
+  }
+
+  &:focus,
+  &.focus {
+    color: color-yiq($hover-background);
+    @if $background == $white {
+      border-color: $black;
+    } @else {
+      border-color: $hover-border;
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  // &.disabled,
+  // &:disabled {
+  //   color: color-yiq($background);
+  //   background-color: $background;
+  //   border-color: $border;
+  // }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    @if $background == $white {
+      border-color: $black;
+    } @else {
+      border-color: $active-border;
+
+      &:focus {
+        border-color: $hover-border;
+      }
+    }
+  }
+}

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>