Browse Source

refactor(gui-v2): replace `pink-500` with `accent` color

pull/3249/head
braks 2 years ago
parent
commit
0444a20bd4
  1. 8
      packages/nc-gui-v2/assets/style.scss
  2. 4
      packages/nc-gui-v2/components/cell/attachment/Carousel.vue
  3. 12
      packages/nc-gui-v2/components/cell/attachment/Modal.vue
  4. 8
      packages/nc-gui-v2/components/cell/attachment/index.vue
  5. 12
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  6. 10
      packages/nc-gui-v2/components/general/MiniSidebar.vue
  7. 4
      packages/nc-gui-v2/components/general/PreviewAs.vue
  8. 6
      packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
  9. 2
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  10. 8
      packages/nc-gui-v2/components/template/Editor.vue
  11. 14
      packages/nc-gui-v2/layouts/base.vue
  12. 30
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  13. 2
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue
  14. 12
      packages/nc-gui-v2/pages/index/index.vue

8
packages/nc-gui-v2/assets/style.scss

@ -49,7 +49,7 @@ a {
&:hover {
.nc-icon {
@apply text-pink-500;
@apply text-accent;
}
}
}
@ -191,11 +191,11 @@ a {
}
&:hover::after {
@apply transform scale-110 ring ring-pink-500;
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-pink-500;
@apply ring ring-accent;
}
}
@ -232,7 +232,7 @@ a {
}
.ant-dropdown-menu-item, .ant-menu-item {
@apply !py-0 active:(ring ring-pink-500);
@apply !py-0 active:(ring ring-accent);
}
.ant-dropdown-menu-title-content,

4
packages/nc-gui-v2/components/cell/attachment/Carousel.vue

@ -55,7 +55,7 @@ onClickOutside(carouselRef, () => {
</div>
<div
class="select-none group hover:ring active:ring-pink-500 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
class="select-none group hover:ring active:ring-accent cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
@click.stop="downloadFile(selectedImage)"
>
<h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
@ -133,7 +133,7 @@ onClickOutside(carouselRef, () => {
}
.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
@apply text-4xl text-white hover:text-primary active:text-pink-500 opacity-100 cursor-pointer z-1;
@apply text-4xl text-white hover:text-primary active:text-accent opacity-100 cursor-pointer z-1;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
display: none;

12
packages/nc-gui-v2/components/cell/attachment/Modal.vue

@ -66,7 +66,7 @@ function onClick(item: Record<string, any>) {
class="nc-attach-file group"
@click="open"
>
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120)" />
<MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120)" />
Attach File
</div>
@ -83,9 +83,9 @@ function onClick(item: Record<string, any>) {
<general-overlay
v-model="isOverDropZone"
inline
class="text-white ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
class="text-white ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" height="35" width="35" />
<MaterialSymbolsFileCopyOutline class="text-accent" height="35" width="35" />
<div class="text-white text-3xl">Drop here</div>
</general-overlay>
</template>
@ -155,7 +155,7 @@ function onClick(item: Record<string, any>) {
.nc-attach-file {
@apply select-none cursor-pointer color-transition flex items-center gap-1 border-1 p-2 rounded
@apply hover:(bg-primary bg-opacity-10 text-primary ring);
@apply active:(ring-pink-500 bg-primary bg-opacity-20);
@apply active:(ring-accent bg-primary bg-opacity-20);
}
.nc-attachment-item {
@ -176,7 +176,7 @@ function onClick(item: Record<string, any>) {
}
&:active::after {
@apply ring ring-pink-500 shadow transform scale-103;
@apply ring ring-accent shadow transform scale-103;
}
}
}
@ -185,7 +185,7 @@ function onClick(item: Record<string, any>) {
@apply bg-white absolute bottom-2 right-2;
@apply transition-opacity duration-150 ease-in opacity-0 hover:ring;
@apply cursor-pointer rounded shadow flex items-center p-1 border-1;
@apply active:(ring border-0 ring-pink-500);
@apply active:(ring border-0 ring-accent);
}
.nc-attachment-remove {

8
packages/nc-gui-v2/components/cell/attachment/index.vue

@ -100,9 +100,9 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
v-model="isOverDropZone"
inline
:target="currentCellRef"
class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
class="text-white text-lg ring ring-accent bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
>
<MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
<MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here
</general-overlay>
</template>
@ -118,7 +118,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
<template #title> Click or drop a file into cell </template>
<div class="flex items-center gap-2">
<MaterialSymbolsAttachFile class="transform group-hover:(text-pink-500 scale-120) text-gray-500 text-[10px]" />
<MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120) text-gray-500 text-[10px]" />
<div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div>
</div>
@ -167,7 +167,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
<template #title> View attachments </template>
<MdiArrowExpand
class="select-none transform group-hover:(text-pink-500 scale-120) text-[10px] text-gray-500"
class="select-none transform group-hover:(text-accent scale-120) text-[10px] text-gray-500"
@click.stop="modalVisible = true"
/>
</a-tooltip>

12
packages/nc-gui-v2/components/dashboard/TreeView.vue

@ -250,7 +250,7 @@ function openTableCreateDialog() {
@click="openAirtableImportDialog"
>
<div class="color-transition nc-project-menu-item group">
<MdiTableLarge class="group-hover:text-pink-500" />
<MdiTableLarge class="group-hover:text-accent" />
<!-- TODO: i18n -->
Airtable
</div>
@ -258,7 +258,7 @@ function openTableCreateDialog() {
<a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
<div class="color-transition nc-project-menu-item group">
<MdiFileDocumentOutline class="group-hover:text-pink-500" />
<MdiFileDocumentOutline class="group-hover:text-accent" />
<!-- TODO: i18n -->
CSV file
</div>
@ -266,7 +266,7 @@ function openTableCreateDialog() {
<a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
<div class="color-transition nc-project-menu-item group">
<MdiCodeJson class="group-hover:text-pink-500" />
<MdiCodeJson class="group-hover:text-accent" />
<!-- TODO: i18n -->
JSON file
</div>
@ -278,7 +278,7 @@ function openTableCreateDialog() {
@click="openQuickImportDialog('excel')"
>
<div class="color-transition nc-project-menu-item group">
<MdiFileExcel class="group-hover:text-pink-500" />
<MdiFileExcel class="group-hover:text-accent" />
<!-- TODO: i18n -->
Microsoft Excel
</div>
@ -294,7 +294,7 @@ function openTableCreateDialog() {
target="_blank"
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
>
<MdiOpenInNew class="group-hover:text-pink-500" />
<MdiOpenInNew class="group-hover:text-accent" />
<!-- TODO: i18n -->
Request a data source you need?
</a>
@ -505,7 +505,7 @@ function openTableCreateDialog() {
}
:deep(.ant-dropdown-menu-item) {
@apply !py-0 active:(ring ring-pink-500);
@apply !py-0 active:(ring ring-accent);
}
:deep(.ant-dropdown-menu-title-content) {

10
packages/nc-gui-v2/components/general/MiniSidebar.vue

@ -74,24 +74,24 @@ const logout = () => {
</span>
</template>
<a-menu-item class="active:(ring ring-pink-500)">
<a-menu-item class="active:(ring ring-accent)">
<div
v-t="['c:project:create:xcdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create')"
>
<MdiPlus class="text-lg group-hover:text-pink-500" />
<MdiPlus class="text-lg group-hover:text-accent" />
{{ $t('activity.createProject') }}
</div>
</a-menu-item>
<a-menu-item class="rounded-b active:(ring ring-pink-500)">
<a-menu-item class="rounded-b active:(ring ring-accent)">
<div
v-t="['c:project:create:extdb']"
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
<MdiDatabaseOutline class="text-lg group-hover:text-accent" />
<div v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</a-menu-item>
@ -125,7 +125,7 @@ const logout = () => {
@apply flex w-full justify-center items-center h-12 group p-2;
&.active {
@apply bg-pink-500 border-t-1 border-b-1;
@apply bg-accent border-t-1 border-b-1;
}
}
}

4
packages/nc-gui-v2/components/general/PreviewAs.vue

@ -80,7 +80,7 @@ watch(previewAs, () => window.location.reload())
<template v-for="role of roleList" :key="role.title">
<a-menu-item @click="previewAs = role.title">
<div class="nc-project-menu-item group">
<component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
<component :is="roleIcon[role.title]" class="group-hover:text-accent" />
<span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">
{{ role.title }}
@ -92,7 +92,7 @@ watch(previewAs, () => window.location.reload())
<template v-if="previewAs">
<a-menu-item @click="previewAs = null">
<div class="nc-project-menu-item group">
<MdiClose class="group-hover:text-pink-500" />
<MdiClose class="group-hover:text-accent" />
<!-- Reset Preview -->
<span class="text-capitalize text-xs whitespace-nowrap">
{{ $t('activity.resetReview') }}

6
packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue

@ -38,7 +38,7 @@ const icon = computed(() => {
case UITypes.LinkToAnotherRecord:
switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY:
return { icon: MMIcon, color: 'text-pink-500' }
return { icon: MMIcon, color: 'text-accent' }
case RelationTypes.HAS_MANY:
return { icon: HMIcon, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO:
@ -52,7 +52,7 @@ const icon = computed(() => {
case UITypes.Lookup:
switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY:
return { icon: TableColumnPlusBefore, color: 'text-pink-500' }
return { icon: TableColumnPlusBefore, color: 'text-accent' }
case RelationTypes.HAS_MANY:
return { icon: TableColumnPlusBefore, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO:
@ -62,7 +62,7 @@ const icon = computed(() => {
case UITypes.Rollup:
switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY:
return { icon: RollupIcon, color: 'text-pink-500' }
return { icon: RollupIcon, color: 'text-accent' }
case RelationTypes.HAS_MANY:
return { icon: RollupIcon, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO:

2
packages/nc-gui-v2/components/smartsheet/Grid.vue

@ -412,7 +412,7 @@ const onNavigate = (dir: NavigateDir) => {
class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
>
<MdiArrowExpand
class="select-none transform hover:(text-pink-500 scale-120) nc-row-expand"
class="select-none transform hover:(text-accent scale-120) nc-row-expand"
@click="expandForm(row, state)"
/>
</div>

8
packages/nc-gui-v2/components/template/Editor.vue

@ -700,7 +700,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'Number')">
<div class="flex items-center">
<mdi-numeric class="group-hover:!text-pink-500 flex text-lg" />
<mdi-numeric class="group-hover:!text-accent flex text-lg" />
</div>
</a-button>
</a-tooltip>
@ -713,7 +713,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
<div class="flex items-center">
<mdi-alpha-a class="group-hover:!text-pink-500 text-lg" />
<mdi-alpha-a class="group-hover:!text-accent text-lg" />
</div>
</a-button>
</a-tooltip>
@ -726,7 +726,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'LongText')">
<div class="flex items-center">
<mdi-text class="group-hover:!text-pink-500 text-lg" />
<mdi-text class="group-hover:!text-accent text-lg" />
</div>
</a-button>
</a-tooltip>
@ -739,7 +739,7 @@ onMounted(() => {
<a-button class="group" @click="addNewColumnRow(table, 'SingleLineText')">
<div class="flex items-center gap-1">
<mdi-plus class="group-hover:!text-pink-500 text-lg" />
<mdi-plus class="group-hover:!text-accent text-lg" />
</div>
</a-button>
</a-tooltip>

14
packages/nc-gui-v2/layouts/base.vue

@ -54,19 +54,19 @@ const logout = () => {
<template #title> Switch language</template>
<div class="flex pr-4 items-center">
<GeneralLanguage class="cursor-pointer text-2xl hover:text-pink-500" />
<GeneralLanguage class="cursor-pointer text-2xl hover:text-accent" />
</div>
</a-tooltip>
<template v-if="signedIn && !isSharedBase">
<a-dropdown :trigger="['click']">
<MdiDotsVertical class="md:text-xl cursor-pointer hover:text-pink-500 nc-menu-accounts" @click.prevent />
<MdiDotsVertical class="md:text-xl cursor-pointer hover:text-accent nc-menu-accounts" @click.prevent />
<template #overlay>
<a-menu class="!py-0 leading-8 !rounded">
<a-menu-item key="0" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
<MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
<MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
<span class="prose group-hover:text-primary"> {{ email }}</span>
</nuxt-link>
@ -76,7 +76,7 @@ const logout = () => {
<a-menu-item key="1" class="!rounded-b group">
<div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<MdiLogout class="group-hover:text-pink-500" />&nbsp;
<MdiLogout class="group-hover:text-accent" />&nbsp;
<span class="prose group-hover:text-primary">
{{ $t('general.signOut') }}
@ -109,7 +109,7 @@ const logout = () => {
<style lang="scss" scoped>
.nc-lang-btn {
@apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-pink-500) hover:(ring ring-pink-500);
@apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent);
&::after {
@apply rounded-full absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
@ -118,11 +118,11 @@ const logout = () => {
}
&:hover::after {
@apply transform scale-110 ring ring-pink-500;
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-pink-500;
@apply ring ring-accent;
}
}
</style>

30
packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@ -186,7 +186,7 @@ const copyAuthToken = async () => {
</a-tooltip>
<div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
<MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
<MdiChevronDown class="min-w-[28.5px] group-hover:text-accent text-2xl" />
</template>
<template v-else>
@ -199,7 +199,7 @@ const copyAuthToken = async () => {
<a-menu-item-group>
<template #title>
<div class="group select-none flex items-center gap-4 py-1">
<MdiFolder class="group-hover:text-pink-500 text-xl" />
<MdiFolder class="group-hover:text-accent text-xl" />
<div class="flex flex-col">
<div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div>
@ -207,7 +207,7 @@ const copyAuthToken = async () => {
<div class="flex items-center gap-1">
<div class="group-hover:(!text-primary)">ID:</div>
<div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div>
<div class="text-xs group-hover:text-accent truncate font-italic">{{ project.id }}</div>
</div>
</div>
</div>
@ -215,7 +215,7 @@ const copyAuthToken = async () => {
<a-menu-item key="copy">
<div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
<MdiContentCopy class="group-hover:text-pink-500" />
<MdiContentCopy class="group-hover:text-accent" />
Copy Project Info
</div>
</a-menu-item>
@ -229,14 +229,14 @@ const copyAuthToken = async () => {
class="nc-project-menu-item group"
@click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
>
<MdiApi class="group-hover:text-pink-500" />
<MdiApi class="group-hover:text-accent" />
Swagger: Rest APIs
</div>
</a-menu-item>
<a-menu-item key="copy">
<div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
<MdiScriptTextKeyOutline class="group-hover:text-pink-500" />
<MdiScriptTextKeyOutline class="group-hover:text-accent" />
Copy Auth Token
</div>
</a-menu-item>
@ -250,7 +250,7 @@ const copyAuthToken = async () => {
class="nc-project-menu-item group"
@click="toggleDialog(true, 'teamAndAuth')"
>
<MdiCog class="group-hover:text-pink-500" />
<MdiCog class="group-hover:text-accent" />
Team & Settings
</div>
</a-menu-item>
@ -260,13 +260,13 @@ const copyAuthToken = async () => {
<a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
<template #title>
<div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
<MdiFileEyeOutline class="group-hover:text-pink-500" />
<MdiFileEyeOutline class="group-hover:text-accent" />
Preview Project As
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
@ -279,12 +279,12 @@ const copyAuthToken = async () => {
<a-sub-menu key="language" class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0">
<template #title>
<div class="nc-project-menu-item group">
<MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
<MaterialSymbolsTranslate class="group-hover:text-accent nc-language" />
Language
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
@ -297,12 +297,12 @@ const copyAuthToken = async () => {
<a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
<template #title>
<div class="nc-project-menu-item group">
<MdiAccount class="group-hover:text-pink-500" />
<MdiAccount class="group-hover:text-accent" />
Account
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
/>
</div>
</template>
@ -311,7 +311,7 @@ const copyAuthToken = async () => {
<a-menu-item key="0" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
<MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
<MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
<span class="prose-sm">{{ email }}</span>
</nuxt-link>
@ -319,7 +319,7 @@ const copyAuthToken = async () => {
<a-menu-item key="1" class="!rounded-b">
<div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
<MdiLogout class="group-hover:(!text-accent)" />&nbsp;
<span class="prose-sm">
{{ $t('general.signOut') }}

2
packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue

@ -121,7 +121,7 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
class="text-3xl flex items-center justify-center gap-2 border-1 border-dashed rounded hover:border-primary"
@click="open"
>
<template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here </template>
<template v-if="isOverDropZone"> <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here </template>
</general-overlay>
<div class="flex flex-col gap-6 items-center justify-center md:w-1/2 mx-auto text-center">

12
packages/nc-gui-v2/pages/index/index.vue

@ -81,12 +81,12 @@ onMounted(() => {
<a-tooltip title="Reload projects">
<span
class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-pink-500) rounded-full mt-1"
class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
:class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
>
<MdiRefresh
v-t="['a:project:refresh']"
class="text-xl text-gray-500 group-hover:text-pink-500 cursor-pointer"
class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
:class="isLoading ? '!text-primary' : ''"
@click="loadProjects"
/>
@ -165,7 +165,7 @@ onMounted(() => {
<a-table-column key="title" :title="$t('general.title')" data-index="title">
<template #default="{ text }">
<div
class="capitalize color-transition group-hover:text-pink-500 !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
class="capitalize color-transition group-hover:text-accent !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
>
{{ text }}
</div>
@ -204,7 +204,7 @@ onMounted(() => {
<style scoped>
.nc-action-btn {
@apply text-gray-500 hover:(text-pink-500 ring) active:(ring ring-pink-500) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
@apply text-gray-500 hover:(text-accent ring) active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
}
.nc-new-project-menu {
@ -217,11 +217,11 @@ onMounted(() => {
}
&:hover::after {
@apply transform scale-110 ring ring-pink-500;
@apply transform scale-110 ring ring-accent;
}
&:active::after {
@apply ring ring-pink-500;
@apply ring ring-accent;
}
}

Loading…
Cancel
Save