chore: Use tailwind instead of inline styles (#3353)

* chore: Use tailwind instead of inline styles * fix(docs): tailwind important override --------- Co-authored-by: Arvin.Atienza <[email protected]> Co-authored-by: Maksim Nedoshev <[email protected]>
epicmaxco · Jun 20, 2023 · a6795a8 · a6795a8
1 parent 7517036
commit a6795a8
Show file tree

Hide file tree

Showing 97 changed files with 155 additions and 214 deletions.
diff --git a/packages/docs/nuxt.config.ts b/packages/docs/nuxt.config.ts
@@ -107,7 +107,9 @@ export default defineNuxtConfig({
  },
 
  tailwindcss: {
+ viewer: false,
  config: {
+ important: true,
  content: [
  "./components/**/*.{js,vue,ts}",
  "./page-config/**/*.{js,vue,ts}",

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/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
@@ -9,7 +9,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>