improved badge component

components/Badges.vue

@@ -1,15 +1,18 @@
 <template>
   <div
     :class="[
-      `hc-bades-size-${size}`,
-      (badges.length > 1 )? `hc-bades-multiple` : ''
+      (badges.length === 2) && 'hc-badges-dual'
     ]"
     class="hc-badges">
-    <img
+    <div
       v-for="badge in badges"
       :key="badge.key"
-      :src="badge.icon"
-      class="hc-badge" >
+      class="hc-badge-container">
+      <img
+        :title="badge.key"
+        :src="badge.icon"
+        class="hc-badge" >
+    </div>
   </div>
 </template>
 
@@ -19,13 +22,6 @@ export default {
     badges: {
       type: Array,
       default: () => []
-    },
-    size: {
-      type: String,
-      default: 'small',
-      validator: value => {
-        return value.match(/(small|large)/)
-      }
     }
   }
 }
@@ -34,47 +30,48 @@ export default {
 <style lang="scss">
 .hc-badges {
   text-align: center;
+  position: relative;
+
+  .hc-badge-container {
+    display: inline-block;
+    position: unset;
+    overflow: hidden;
+    vertical-align: middle;
+  }
 
   .hc-badge {
-    display: inline-block;
+    display: block;
+    width: 100%;
   }
 
-  &.hc-bades-size-small {
-    $size: 28px;
-    $offset: $size * -0.2;
-    padding-bottom: $size / 2;
+  $size: 30px;
+  $offset: $size * -0.2;
 
-    &.hc-bades-multiple {
-      margin-top: -$size / 2;
-    }
-    .hc-badge {
-      height: $size;
-      &:nth-child(2),
-      &:nth-child(4),
-      &:nth-child(6) {
-        margin-top: $size;
-        margin-left: $offset;
-        margin-right: $offset;
-      }
-    }
+  &.hc-badges-dual {
+    padding-top: $size / 2 - 2;
   }
-  &.hc-bades-size-large {
-    $size: 36px;
-    $offset: $size * -0.2;
-    padding-bottom: $size / 2;
 
-    &.hc-bades-multiple {
-      margin-top: -$size / 2;
+  .hc-badge-container {
+    width: $size;
+    height: 26px;
+    margin-left: -1px;
+
+    &:nth-child(3n - 1) {
+      margin-top: -$size - $offset - 3;
+      margin-left: -$size * 0.33 - $offset - 2;
     }
-    .hc-badge {
-      height: $size;
-      &:nth-child(2),
-      &:nth-child(4),
-      &:nth-child(6) {
-        margin-top: $size;
-        margin-left: $offset;
-        margin-right: $offset;
-      }
+    &:nth-child(3n + 0) {
+      margin-top: $size + $offset + 3;
+      margin-left: -$size;
+    }
+    &:nth-child(3n + 1) {
+      margin-left: -6px;
+    }
+    &:first-child {
+      margin-left: -$size / 3;
+    }
+    &:last-child {
+      margin-right: -$size / 3;
     }
   }
 }