fix: dropdown color

This commit is contained in:
Anthony Fu 2022-11-24 21:34:35 +08:00
parent 071e11b8f4
commit c01acb7aa3
4 changed files with 21 additions and 2 deletions

View file

@ -9,7 +9,7 @@ provide(dropdownContextKey, {
</script>
<template>
<VDropdown v-bind="$attrs" ref="dropdown">
<VDropdown v-bind="$attrs" ref="dropdown" :class="{ dark: isDark }">
<slot />
<template #popper="scope">
<slot name="popper" v-bind="scope" />

View file

@ -12,8 +12,10 @@ export default defineNuxtConfig({
},
css: [
'@unocss/reset/tailwind.css',
'floating-vue/dist/style.css',
'~/styles/vars.css',
'~/styles/global.css',
'~/styles/dropdown.css',
],
alias: {
querystring: 'rollup-plugin-node-polyfills/polyfills/qs',

View file

@ -1,6 +1,5 @@
import FloatingVue from 'floating-vue'
import { defineNuxtPlugin } from '#app'
import 'floating-vue/dist/style.css'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(FloatingVue)

18
styles/dropdown.css Normal file
View file

@ -0,0 +1,18 @@
.v-popper--theme-dropdown .v-popper__inner {
--at-apply: bg-base text-base rounded border border-base shadow;
box-shadow: 0 6px 30px #0000001a;
}
.v-popper--theme-dropdown .v-popper__arrow-inner {
visibility: visible;
--at-apply: border-base;
}
.v-popper--theme-dropdown .v-popper__arrow-outer {
--at-apply: border-base;
}
.v-popper--theme-tooltip .v-popper__inner {
--at-apply: bg-base text-base rounded border border-base shadow;
padding: 7px 12px 6px;
}
.v-popper--theme-tooltip .v-popper__arrow-outer {
--at-apply: border-base;
}