docs: style fixes

Akryum · Jun 20, 2023 · 5e106c4 · 5e106c4
1 parent 47b3834
commit 5e106c4
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 5 deletions.
diff --git a/docs/.vitepress/components/ArrowPadding.vue b/docs/.vitepress/components/ArrowPadding.vue
@@ -9,6 +9,7 @@
       :prevent-overflow="false"
       :arrow-padding="tempPadding"
       :auto-hide="false"
+      class="w-max"
     >
       <button class="px-4 py-12 md:p-16 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference

diff --git a/docs/.vitepress/components/DropdownSimpleExample.vue b/docs/.vitepress/components/DropdownSimpleExample.vue
@@ -7,7 +7,7 @@
       @apply-hide="log('apply-hide')"
       @update:shown="log('update:shown', $event)"
     >
-      <button class="border border-gray-300 rounded px-4 py-2">
+      <button class="border border-gray-500 rounded px-4 py-2">
         Click me
       </button>
 

diff --git a/docs/.vitepress/components/MenuSimpleExample.vue b/docs/.vitepress/components/MenuSimpleExample.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="example flex justify-center">
     <VMenu>
-      <button class="border border-gray-300 rounded px-4 py-2">
+      <button class="border border-gray-500 rounded px-4 py-2">
         Hover me
       </button>
 
       <template #popper>
         <button
-          class="border border-gray-300 rounded px-4 py-2 m-4"
+          class="border border-gray-500 rounded px-4 py-2 m-4"
           @click="count++"
         >
           +{{ count }}

diff --git a/docs/.vitepress/components/OffsetExample.vue b/docs/.vitepress/components/OffsetExample.vue
@@ -9,6 +9,7 @@
       :skidding="tempOffset[0]"
       :prevent-overflow="false"
       :arrow-padding="6"
+      class="w-max"
     >
       <button class="px-4 py-12 md:p-16 bg-gray-500 text-white rounded-lg !md:text-sm">
         Reference

diff --git a/docs/.vitepress/components/SubMenuExample.vue b/docs/.vitepress/components/SubMenuExample.vue
@@ -27,7 +27,7 @@
               placement="right-start"
               instant-move
             >
-              <button class="rounded hover:bg-green-100 px-4 py-2">
+              <button class="rounded hover:bg-green-100 px-4 py-2 w-full">
                 Option {{ m }} >
               </button>
 

diff --git a/docs/.vitepress/theme/style.postcss b/docs/.vitepress/theme/style.postcss
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --vp-z-index-nav: 10500;
+}
+
 .example {
   @apply border-gray-500/25 border rounded-lg p-6 text-center;
   background-color: var(--vp-c-mute);
@@ -18,3 +22,19 @@
 .v-popper--theme-_editor-dropdown .v-popper__inner {
   @apply p-2;
 }
+
+
+/* Fix base styles for Tailwind (vitepress) */
+
+button, input, optgroup, select, textarea {
+  border-style: solid;
+}
+
+.example select {
+  appearance: auto;
+}
+
+.example option {
+  color: black;
+  background: white;
+}
diff --git a/docs/guide/component.md b/docs/guide/component.md
@@ -1,4 +1,4 @@
-# Component
+# Components
 
 For more advanced use cases such as dropdowns, you can use the components instead of the `v-tooltip` directive.