💄 Add transition to doc breadcrumbs and version badge

nonebot · Sep 26, 2023 · 72e5413 · 72e5413
1 parent 52de9c3
commit 72e5413
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/packages/theme-nonepress/src/theme/DocBreadcrumbs/Items/Home/index.tsx b/packages/theme-nonepress/src/theme/DocBreadcrumbs/Items/Home/index.tsx
@@ -17,7 +17,7 @@ export default function HomeBreadcrumbItem(): JSX.Element {
           message: "Home page",
           description: "The ARIA label for the home page in the breadcrumbs",
         })}
-        className="breadcrumbs-btn"
+        className="btn btn-ghost btn-xs no-animation breadcrumbs-btn"
         href={homeHref}
       >
         <IconHome />

diff --git a/packages/theme-nonepress/src/theme/DocBreadcrumbs/index.tsx b/packages/theme-nonepress/src/theme/DocBreadcrumbs/index.tsx
@@ -2,7 +2,6 @@ import React, { type ReactNode } from "react";
 
 import clsx from "clsx";
 
-import "./styles.css";
 import Link from "@docusaurus/Link";
 import { translate } from "@docusaurus/Translate";
 import { ThemeClassNames } from "@docusaurus/theme-common";
@@ -11,6 +10,7 @@ import {
   useHomePageRoute,
 } from "@docusaurus/theme-common/internal";
 
+import "./styles.css";
 import HomeBreadcrumbItem from "@theme/DocBreadcrumbs/Items/Home";
 
 function BreadcrumbsItemLink({
@@ -22,11 +22,11 @@ function BreadcrumbsItemLink({
   href: string | undefined;
   isLast: boolean;
 }): JSX.Element {
-  const className = "breadcrumbs-btn";
+  const className = "btn btn-ghost btn-xs no-animation breadcrumbs-btn";
   if (isLast) {
     return (
       <span
-        className={clsx(className, "breadcrumbs-btn-active")}
+        className={clsx(className, "btn-active breadcrumbs-btn-active")}
         itemProp="name"
       >
         {children}

diff --git a/packages/theme-nonepress/src/theme/DocBreadcrumbs/styles.css b/packages/theme-nonepress/src/theme/DocBreadcrumbs/styles.css
@@ -2,10 +2,11 @@
   @apply mb-2;
 
   &-btn {
-    @apply btn btn-ghost btn-xs no-animation rounded-2xl !no-underline;
+    @apply rounded-2xl !no-underline;
 
     &-active {
-      @apply btn-active text-primary;
+      @apply !bg-base-300 text-primary cursor-default;
+      @apply transition-[background-color] duration-500;
     }
   }
 }
diff --git a/packages/theme-nonepress/src/theme/DocVersionBadge/index.tsx b/packages/theme-nonepress/src/theme/DocVersionBadge/index.tsx
@@ -20,7 +20,7 @@ export default function DocVersionBadge({
           className={clsx(
             className,
             ThemeClassNames.docs.docVersionBadge,
-            "doc-version-badge",
+            "badge badge-ghost doc-version-badge",
           )}
         >
           <Translate

diff --git a/packages/theme-nonepress/src/theme/DocVersionBadge/styles.css b/packages/theme-nonepress/src/theme/DocVersionBadge/styles.css
@@ -1,5 +1,6 @@
 .doc-version-badge {
-  @apply badge badge-ghost font-semibold;
+  @apply font-semibold;
+  @apply transition-[color,background-color,border-color] duration-500;
 
   &-container {
     @apply mb-2;