From 3ba5e0aa2bdfb6c628494861b02ccce5cf082319 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 20 Jan 2023 00:34:03 +0100
Subject: [PATCH] refactor: migrate AttackItem component

---
 src/components/AttackItem.vue | 59 ++++++++++-------------------------
 1 file changed, 17 insertions(+), 42 deletions(-)

diff --git a/src/components/AttackItem.vue b/src/components/AttackItem.vue
index 3bd3621..125b659 100644
--- a/src/components/AttackItem.vue
+++ b/src/components/AttackItem.vue
@@ -17,76 +17,51 @@
 </template>
 
 <style lang="scss">
-@import "@/scss/_mixins.scss";
-
 .attack {
-  flex: 0 1 100%;
+  flex: var(--attack-item-flex);
 
   display: flex;
-  flex-flow: row wrap;
+  flex-flow: var(--attack-item-flex-flow);
   align-items: center;
 
   margin: 0;
   padding: 0.375em 0;
 
-  @include mq-desktop {
-    flex-flow: row nowrap;
-
-    &:nth-child(even) {
-      text-align: right;
-
-      .attack__illustration,
-      .attack__text {
-        &:first-child {
-          order: 1;
-        }
-      }
-    }
+  &:nth-child(even) {
+    text-align: var(--attack-item-nth-child-even-text-align);
   }
 
-  @media (min-width: 70em) {
-    text-align: left;
-    flex: 0 1 50%;
-
-    &:nth-child(even) {
-      text-align: left;
-
-      .attack__illustration,
-      .attack__text {
-        &:first-child {
-          order: 0;
-        }
-      }
+  &:nth-child(even) &__illustration,
+  &:nth-child(even) &__text {
+    &:first-child {
+      order: var(--attack-item-first-child-order);
     }
   }
 
   &__illustration {
-    flex: 1 1 auto;
+    flex: var(--attack-item-illustration-flex);
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+
     text-align: center;
 
     img {
       max-width: 100%;
       max-height: 100%;
     }
-
-    @include mq-desktop {
-      flex: 0 0 15em;
-      height: 15em;
-    }
   }
 
   &__text {
     flex: 1 1 auto;
-
-    @include mq-desktop {
-      padding: 0 1rem;
-    }
+    padding: var(--attack-item-text-padding);
   }
 
   &__name {
-    margin: 0 0 1em 0;
-
     font-weight: bold;
+    margin: 0 0 1em 0;
   }
 }
 </style>