#9903 moved the css to stable -> petitem.vue for better encapsulation.

website/client/components/inventory/item.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
 div(v-if="emptyItem")
   .item-wrapper
-    .item.item-empty.pet-slot
+    .item.item-empty
       .item-content
     span.item-label(v-if="label") {{ label }}
 div(v-else)
   .item-wrapper(@click="click", :id="itemId")
-    .item(:class="{'item-active': active, 'highlight-border':highlightBorder }").pet-slot
+    .item(:class="{'item-active': active, 'highlight-border':highlightBorder }")
       slot(name="itemBadge", :item="item")
       span.item-content(
         :class="itemContentClass"
@@ -22,10 +22,7 @@ div(v-else)
     slot(name="popoverContent", :item="item")
 </template>
 
-<style scoped>
-  .pet-slot {
-    margin: 0 2px;
-  }
+<style>
 </style>
 
 <script>

website/client/components/inventory/stable/petItem.vue

@@ -3,7 +3,7 @@ div
   .item-wrapper(@click="click()", :id="itemId")
     .item(
       :class="{'item-empty': emptyItem, 'highlight': highlightBorder}",
-    )
+    ).pet-slot
       slot(name="itemBadge", :item="item")
       span.item-content(:class="itemContentClass")
       span.pet-progress-background(v-if="item.isAllowedToFeed() && progress > 0")
@@ -28,6 +28,10 @@ div
     left: calc((100% - 62px) / 2);
   }
 
+  .pet-slot {
+    margin: 0 2px;
+  }
+
   .pet-progress-bar {
     height: 4px;
     background-color: #24cc8f;