chore: Use tailwind instead of inline styles ( WIP )

epicmaxco · May 1, 2023 · 8385c20 · 8385c20
1 parent 6d1420c
commit 8385c20
Show file tree

Hide file tree

Showing 71 changed files with 107 additions and 155 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/button/examples/Behavior.vue b/packages/docs/page-config/ui-elements/button/examples/Behavior.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-button
       class="mr-6 mb-2"
       preset="secondary"

diff --git a/packages/docs/page-config/ui-elements/button/examples/WithOutline.vue b/packages/docs/page-config/ui-elements/button/examples/WithOutline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: center;">
+  <div class="flex items-center">
     <va-button
       preset="secondary"
       border-color="primary"

diff --git a/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue b/packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
@@ -5,26 +5,26 @@
         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>
     </va-card>
 
     <va-card>
       <va-card-block horizontal>
-        <va-card-block style="flex: auto;">
+        <va-card-block class="flex-auto">
           <va-card-content>{{ lorem }}</va-card-content>
         </va-card-block>
         <va-divider vertical />
-        <va-card-block style="flex: auto;">
+        <va-card-block class="flex-auto">
           <va-card-content>{{ lorem }}</va-card-content>
         </va-card-block>
       </va-card-block>

diff --git a/packages/docs/page-config/ui-elements/card/examples/Image.vue b/packages/docs/page-config/ui-elements/card/examples/Image.vue
@@ -2,7 +2,7 @@
   <va-card>
     <va-image
       src="https://picsum.photos/400/200"
-      style="height: 200px;"
+      class="h-52"
     />
     <va-card-title>Title</va-card-title>
     <va-card-content>

diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Color.vue b/packages/docs/page-config/ui-elements/collapse/examples/Color.vue
@@ -1,13 +1,13 @@
 <template>
-  <div style="width: 400px;">
+  <div class="w-96">
     <va-collapse
       v-model="value[0]"
       header="Collapse header"
       solid
       color="success"
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>
@@ -18,7 +18,7 @@
       color="secondary"
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>
@@ -30,7 +30,7 @@
       color-all
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>
@@ -44,7 +44,7 @@
       icon="info"
       class="mb-6"
     >
-      <div style="padding: 8px;">
+      <div class="p-2">
         Collapse content
       </div>
     </va-collapse>

diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Default.vue b/packages/docs/page-config/ui-elements/collapse/examples/Default.vue
@@ -1,7 +1,7 @@
 <template>
   <va-collapse
     v-model="value"
-    style="width: 400px;"
+    class="w-96"
     header="Collapse header"
   >
     <div>Collapse content</div>

diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Flat.vue b/packages/docs/page-config/ui-elements/collapse/examples/Flat.vue
@@ -4,9 +4,9 @@
     text-color="textPrimary"
     color="textInverted"
     flat
-    style="width: 400px;"
+    class="w-96"
   >
-    <div style="padding: 0 1rem 0.75rem;">
+    <div class="pt-0 px-4 pb-3">
       Collapse content
     </div>
   </va-collapse>

diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Icon.vue b/packages/docs/page-config/ui-elements/collapse/examples/Icon.vue
@@ -1,7 +1,7 @@
 <template>
   <va-collapse
     v-model="value"
-    style="width: 400px;"
+    class="w-96"
     header="Collapse header"
     icon="home"
   >

diff --git a/packages/docs/page-config/ui-elements/collapse/examples/Solid.vue b/packages/docs/page-config/ui-elements/collapse/examples/Solid.vue
@@ -1,7 +1,7 @@
 <template>
   <va-collapse
     v-model="value"
-    style="width: 400px;"
+    class="w-96"
     header="Collapse header"
     solid
   >

diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue b/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue
@@ -73,7 +73,7 @@
           <td colspan="6">
             <va-inner-loading
               :loading="isLoading"
-              style="height: 2rem;"
+              class="h-8"
             />
           </td>
         </tr>

diff --git a/packages/docs/page-config/ui-elements/date-input/examples/validation.vue b/packages/docs/page-config/ui-elements/date-input/examples/validation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex; align-items: flex-start;">
+  <div class="flex items-start">
     <va-date-input
       v-model="value"
       class="mr-6"

diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue b/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
@@ -10,7 +10,7 @@
 
     <template #anchor>
       <va-image
-        style="height: 300px; width: 300px;"
+        class="h-[300px] w-[300px]"
         src="https://picsum.photos/1500"
       >
         <va-badge text="Right click this image" />

diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue b/packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue
@@ -10,7 +10,7 @@
     <tr>
       <td
         colspan="2"
-        style="padding: 4rem;"
+        class="p-[4rem]"
       >
         <div class="flex flex-col items-center">
           <va-dropdown
@@ -40,7 +40,7 @@
       </td>
     </tr>
     <tr>
-      <td style="color: var(--va-primary);">
+      <td class="text-[var(--va-primary)]">
         Main:
       </td>
       <td>
@@ -51,7 +51,7 @@
       </td>
     </tr>
     <tr>
-      <td style="color: var(--va-secondary);">
+      <td class="text-[var(--va-secondary)]">
         Cross:
       </td>
       <td>