From 83e28989bd1d84f43cd19fcf8ba9ab31612cfaf3 Mon Sep 17 00:00:00 2001
From: "Arvin.Atienza" <a.atienza@prostrive.io>
Date: Wed, 19 Apr 2023 22:45:46 +0800
Subject: [PATCH] chore: Use tailwind instead of inline styles ( WIP )

---
 .../ui-elements/accordion/examples/Default.vue      |  2 +-
 .../ui-elements/accordion/examples/Flat.vue         |  4 ++--
 .../ui-elements/accordion/examples/Inset.vue        |  2 +-
 .../ui-elements/accordion/examples/Menu.vue         |  4 ++--
 .../ui-elements/accordion/examples/Multiple.vue     |  2 +-
 .../ui-elements/accordion/examples/Popout.vue       |  2 +-
 .../ui-elements/affix/examples/Bottom.vue           |  2 +-
 .../ui-elements/affix/examples/Default.vue          |  7 ++-----
 .../page-config/ui-elements/affix/examples/Top.vue  |  2 +-
 .../ui-elements/app-bar/examples/Color.vue          |  5 ++---
 .../ui-elements/app-bar/examples/Default.vue        |  2 +-
 .../ui-elements/app-bar/examples/Hide.vue           | 13 +++----------
 .../ui-elements/app-bar/examples/Shadow.vue         | 13 +++----------
 .../badge/examples/WithOtherComponents.vue          |  2 +-
 .../ui-elements/breadcrumbs/examples/Item.vue       |  3 ++-
 .../button-dropdown/examples/Default.vue            |  2 +-
 .../ui-elements/card/examples/Horizontal.vue        |  4 ++--
 17 files changed, 27 insertions(+), 44 deletions(-)

diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Default.vue b/packages/docs/page-config/ui-elements/accordion/examples/Default.vue
index 0ae4efdcf3b..7705e45c483 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
   >
     <va-collapse
       v-for="(collapse, index) in collapses"
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue b/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
index 747cd5973b8..c3ad191b368 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
   >
     <va-collapse
       v-for="(item, idx) in items"
@@ -11,7 +11,7 @@
       color="textInverted"
       flat
     >
-      <div style="padding: 0 1rem 0.75rem;">
+      <div class="pt-0 px-4 pb-3">
         {{ item.description }}
       </div>
     </va-collapse>
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue b/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue
index d6dd61253db..1d294814e4f 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Inset.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
     inset
   >
     <va-collapse
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue b/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
index 9c7cc9b59ee..7c3f7be5dfa 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
   >
     <va-collapse
       v-for="(group, idx) in items"
@@ -11,7 +11,7 @@
       color="textInverted"
       flat
     >
-      <div style="padding: 0 1rem 0.75rem;">
+      <div class="pt-0 px-4 pb-3">
         <router-link
           v-for="(navItem, idx) in group.items"
           :key="idx"
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue b/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
index 14fc4159a11..247e6a9e942 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
     multiple
   >
     <va-collapse
diff --git a/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue b/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue
index 819b6ff5177..38ebca416dd 100644
--- a/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue
+++ b/packages/docs/page-config/ui-elements/accordion/examples/Popout.vue
@@ -1,7 +1,7 @@
 <template>
   <va-accordion
     v-model="value"
-    style="max-width: 400px;"
+    class="max-w-sm"
     popout
   >
     <va-collapse
diff --git a/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue b/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue
index f56f17906f5..e34e3742c2a 100644
--- a/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue
+++ b/packages/docs/page-config/ui-elements/affix/examples/Bottom.vue
@@ -1,7 +1,7 @@
 <template>
   <va-affix :offset-bottom="50">
     <div
-      style="padding: 10px 30px; background-color: var(--va-background-element);"
+      class="py-2.5 px-8 bg-[var(--va-background-element)]"
     >
       Fixed at the bottom: 50
     </div>
diff --git a/packages/docs/page-config/ui-elements/affix/examples/Default.vue b/packages/docs/page-config/ui-elements/affix/examples/Default.vue
index a586d100ee0..572600f8954 100644
--- a/packages/docs/page-config/ui-elements/affix/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/affix/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="target"
-    style="height: 300px; overflow-y: scroll;"
+    class="h-72 overflow-y-scroll"
   >
     <p>
       {{ text }}
@@ -12,10 +12,7 @@
       :target="() => $refs.target"
     >
       <div
-        style="
-padding: 10px 30px;
-background-color: var(--va-background-element);
-"
+        class="py-2.5 px-8 bg-[var(--va-background-element)]"
       >
         Custom target: top 30, bottom 0.
       </div>
diff --git a/packages/docs/page-config/ui-elements/affix/examples/Top.vue b/packages/docs/page-config/ui-elements/affix/examples/Top.vue
index e96b961ee2a..b6b112b92b0 100644
--- a/packages/docs/page-config/ui-elements/affix/examples/Top.vue
+++ b/packages/docs/page-config/ui-elements/affix/examples/Top.vue
@@ -1,7 +1,7 @@
 <template>
   <va-affix :offset-top="100">
     <div
-      style="padding: 10px 30px; background-color: var(--va-background-element);"
+      class="py-2.5 px-8 bg-[var(--va-background-element)]"
     >
       Fixed at the top: 100
     </div>
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue
index a40b1ddbee1..9b22f5169d0 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Color.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative;">
+  <div class="relative">
     <va-app-bar color="danger">
       <va-button
         icon="home"
@@ -35,8 +35,7 @@
   </div>
 
   <div
-    class="mt-2"
-    style="position: relative;"
+    class="mt-2 relative"
   >
     <va-app-bar
       color="info"
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue
index 3f2fd769c5b..25db5e7e832 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative;">
+  <div class="relative">
     <va-app-bar>
       <va-button
         icon="home"
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue
index 72f6a1b0ac2..ac6d51c67fd 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="wrapper">
+  <div
+    class="relative max-h-32 border border-solid border-black overflow-hidden flex flex-col"
+  >
     <va-app-bar
       absolute
       hide-on-scroll
@@ -42,15 +44,6 @@
 </template>
 
 <style scope>
-.wrapper {
-  position: relative;
-  max-height: 120px;
-  border: 1px solid black;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 #va-app-bar-hide {
   background: var(--va-background-primary);
   padding-bottom: 500px;
diff --git a/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue b/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue
index 3d7c5782f02..7f6c0023aa2 100644
--- a/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue
+++ b/packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="wrapper">
+  <div
+    class="relative max-h-32 border border-solid border-black overflow-hidden flex flex-col"
+  >
     <va-app-bar
       shadow-on-scroll
       color="background-tertiary"
@@ -45,15 +47,6 @@
 </template>
 
 <style scope>
-.wrapper {
-  position: relative;
-  max-height: 120px;
-  border: 1px solid black;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
 #va-app-bar-shadow {
   padding-bottom: 500px;
   overflow: auto;
diff --git a/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue b/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue
index 9f4810426b1..94f5becf43b 100644
--- a/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue
+++ b/packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-badge
       class="mr-6"
       text="New"
diff --git a/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue b/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue
index 30c694fd73b..d272211d23d 100644
--- a/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue
+++ b/packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue
@@ -12,7 +12,8 @@
     />
     <va-breadcrumbs-item label="Four" />
     <va-breadcrumbs-item label="Five">
-      <span style="font-style: italic; color: var(--va-danger);">Slotted content</span>
+      <span class="italic text-[var(--va-danger)]">
+        Slotted content</span>
     </va-breadcrumbs-item>
   </va-breadcrumbs>
 </template>
diff --git a/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue b/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue
index f0ade930692..2aad84cb30a 100644
--- a/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-button-dropdown
       label="label"
       class="mr-2 mb-2"
diff --git a/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue b/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
index 39165745978..0d2738ed695 100644
--- a/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
+++ b/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
@@ -5,14 +5,14 @@
         class="flex-nowrap"
         horizontal
       >
-        <div style="flex: auto;">
+        <div class="flex-auto">
           <va-card-title>Title</va-card-title>
           <va-card-content>
             {{ lorem }}
           </va-card-content>
         </div>
         <va-image
-          style="flex: 0 0 200px;"
+          class="flex-grow-0 flex-shrink-0 basis-52"
           src="https://picsum.photos/200"
         />
       </va-card-block>