Skip to content

Commit

Permalink
chore: Use tailwind instead of inline styles ( WIP )
Browse files Browse the repository at this point in the history
  • Loading branch information
a-atienza-3140 committed May 1, 2023
1 parent 6d1420c commit 8385c20
Show file tree
Hide file tree
Showing 71 changed files with 107 additions and 155 deletions.
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<va-accordion
v-model="value"
style="max-width: 400px;"
class="max-w-sm"
inset
>
<va-collapse
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<va-accordion
v-model="value"
style="max-width: 400px;"
class="max-w-sm"
multiple
>
<va-collapse
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<va-accordion
v-model="value"
style="max-width: 400px;"
class="max-w-sm"
popout
>
<va-collapse
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div
ref="target"
style="height: 300px; overflow-y: scroll;"
class="h-72 overflow-y-scroll"
>
<p>
{{ text }}
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div style="position: relative;">
<div class="relative">
<va-app-bar color="danger">
<va-button
icon="home"
Expand Down Expand Up @@ -35,8 +35,7 @@
</div>

<div
class="mt-2"
style="position: relative;"
class="mt-2 relative"
>
<va-app-bar
color="info"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div style="position: relative;">
<div class="relative">
<va-app-bar>
<va-button
icon="home"
Expand Down
13 changes: 3 additions & 10 deletions packages/docs/page-config/ui-elements/app-bar/examples/Hide.vue
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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;
Expand Down
13 changes: 3 additions & 10 deletions packages/docs/page-config/ui-elements/app-bar/examples/Shadow.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div style="display: flex; align-items: center;">
<div class="flex items-center">
<va-badge
class="mr-6"
text="New"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div style="display: flex; align-items: center;">
<div class="flex items-center">
<va-button
preset="secondary"
border-color="primary"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -18,7 +18,7 @@
color="secondary"
class="mb-6"
>
<div style="padding: 8px;">
<div class="p-2">
Collapse content
</div>
</va-collapse>
Expand All @@ -30,7 +30,7 @@
color-all
class="mb-6"
>
<div style="padding: 8px;">
<div class="p-2">
Collapse content
</div>
</va-collapse>
Expand All @@ -44,7 +44,7 @@
icon="info"
class="mb-6"
>
<div style="padding: 8px;">
<div class="p-2">
Collapse content
</div>
</va-collapse>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<va-collapse
v-model="value"
style="width: 400px;"
class="w-96"
header="Collapse header"
>
<div>Collapse content</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<va-collapse
v-model="value"
style="width: 400px;"
class="w-96"
header="Collapse header"
icon="home"
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<va-collapse
v-model="value"
style="width: 400px;"
class="w-96"
header="Collapse header"
solid
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
<td colspan="6">
<va-inner-loading
:loading="isLoading"
style="height: 2rem;"
class="h-8"
/>
</td>
</tr>
Expand Down
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<tr>
<td
colspan="2"
style="padding: 4rem;"
class="p-[4rem]"
>
<div class="flex flex-col items-center">
<va-dropdown
Expand Down Expand Up @@ -40,7 +40,7 @@
</td>
</tr>
<tr>
<td style="color: var(--va-primary);">
<td class="text-[var(--va-primary)]">
Main:
</td>
<td>
Expand All @@ -51,7 +51,7 @@
</td>
</tr>
<tr>
<td style="color: var(--va-secondary);">
<td class="text-[var(--va-secondary)]">
Cross:
</td>
<td>
Expand Down
Loading

0 comments on commit 8385c20

Please sign in to comment.