Adds item size switching functionality and styles

src/components/LinkItems/ItemOpenMethodIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`opening-method-icon  ${isSmall? 'short': ''}`">
+  <div :class="makeClass(position, isSmall, isTransparent)">
     <NewTabOpenIcon v-if="openingMethod === 'newtab'" />
     <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
     <IframeOpenIcon v-else-if="openingMethod === 'iframe'" />
@@ -14,8 +14,19 @@ import IframeOpenIcon from '@/assets/icons/open-iframe.svg';
 export default {
   name: 'ItemOpenMethodIcon',
   props: {
-    openingMethod: String,
-    isSmall: Boolean,
+    openingMethod: String, // newtab | sametab | iframe
+    isSmall: Boolean, // If true, will apply small class
+    position: String, // Position classes: top, bottom, left, right
+    isTransparent: Boolean, // If true, will apply opacity
+  },
+  methods: {
+    /* Returns custom class string, from optional props */
+    makeClass(position = 'top right', isSmall = false, transparent = false) {
+      return `opening-method-icon
+      ${position || 'top right'}
+      ${isSmall ? 'short' : ''}
+      ${transparent ? 'transparent' : ''}`;
+    },
   },
   components: {
     NewTabOpenIcon,
@@ -31,16 +42,23 @@ export default {
     position: absolute;
     width: 1rem;
     margin: 2px;
-    right: 0;
-    top: 0;
     path {
       fill: var(--primary-transparent);
     }
   }
+  &.top svg { top: 0; }
+  &.bottom svg { bottom: 0; }
+  &.left svg { left: 0; }
+  &.right svg { right: 0; }
+
   &.short svg {
-    width: 0.5rem;
+    width: 0.8rem;
     margin: 0;
   }
+
+  &.transparent svg {
+    opacity: 0.5;
+  }
 }
 
 </style>