Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: Use tailwind instead of inline styles #3353

Merged
merged 2 commits into from
Jun 20, 2023
Merged

chore: Use tailwind instead of inline styles #3353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bcbdb6b
chore: Use tailwind instead of inline styles
a-atienza-3140 Jun 18, 2023
aeadb89
fix(docs): tailwind important override
m0ksem Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/docs/nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,9 @@ export default defineNuxtConfig({
},

tailwindcss: {
viewer: false,
config: {
important: true,
content: [
"./components/**/*.{js,vue,ts}",
"./page-config/**/*.{js,vue,ts}",
Expand Down
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/accordion/examples/Default.vue
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions packages/docs/page-config/ui-elements/accordion/examples/Flat.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/accordion/examples/Inset.vue
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions packages/docs/page-config/ui-elements/accordion/examples/Menu.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/accordion/examples/Multiple.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/accordion/examples/Popout.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/affix/examples/Bottom.vue
View file
Open in desktop
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
7 changes: 2 additions & 5 deletions packages/docs/page-config/ui-elements/affix/examples/Default.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/affix/examples/Top.vue
View file
Open in desktop
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
5 changes: 2 additions & 3 deletions packages/docs/page-config/ui-elements/app-bar/examples/Color.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/app-bar/examples/Default.vue
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/badge/examples/WithOtherComponents.vue
View file
Open in desktop
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
3 changes: 2 additions & 1 deletion packages/docs/page-config/ui-elements/breadcrumbs/examples/Item.vue
View file
Open in desktop
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)]">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@m0ksem, double check if text-[var(--va-danger)] can be replaced with text-danger.

Slotted content</span>
</va-breadcrumbs-item>
</va-breadcrumbs>
</template>
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/button-dropdown/examples/Default.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/button/examples/Behavior.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/button/examples/WithOutline.vue
View file
Open in desktop
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
8 changes: 4 additions & 4 deletions packages/docs/page-config/ui-elements/card/examples/Horizontal.vue
View file
Open in desktop
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"
m0ksem marked this conversation as resolved.
Show resolved Hide resolved
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/card/examples/Image.vue
View file
Open in desktop
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
10 changes: 5 additions & 5 deletions packages/docs/page-config/ui-elements/collapse/examples/Color.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/collapse/examples/Default.vue
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions packages/docs/page-config/ui-elements/collapse/examples/Flat.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/collapse/examples/Icon.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/collapse/examples/Solid.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/date-input/examples/validation.vue
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
6 changes: 3 additions & 3 deletions packages/docs/page-config/ui-elements/dropdown/examples/PlacementAndOffset.vue
View file
Open in desktop
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]"
m0ksem marked this conversation as resolved.
Show resolved Hide resolved
>
<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