Merge pull request #349 from vordgi/rd-348

rd-348 improve transitions
vordgi · Oct 17, 2024 · 868fbb6 · 868fbb6
2 parents e9b182f + 95fc7d7
commit 868fbb6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/robindoc/package.json b/packages/robindoc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "robindoc",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "",
   "main": "./lib/index.js",
   "scripts": {

diff --git a/packages/robindoc/src/components/blocks/contents/contents.scss b/packages/robindoc/src/components/blocks/contents/contents.scss
@@ -124,9 +124,11 @@
   margin-bottom: 8px;
   font-size: 14px;
   line-height: 1.5;
+  transition: color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 
   &.r-contents-link:hover {
     color: var(--primary800);
+    transition-delay: initial;
   }
 
   &::before,

diff --git a/packages/robindoc/src/components/elements/sidebar/sidebar.scss b/packages/robindoc/src/components/elements/sidebar/sidebar.scss
@@ -46,6 +46,7 @@
 
   &:hover::before {
     background-color: var(--primary800);
+    transition-delay: initial;
   }
 }
 
@@ -59,7 +60,7 @@
   border-bottom-left-radius: 2px;
   background-color: var(--neutral200);
   z-index: 1;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 }
 
 .r-sidebar-nav {
@@ -153,7 +154,7 @@
     width: 2px;
     height: calc(100% + 4px);
     background-color: var(--neutral200);
-    transition: 0.2s;
+    transition: background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
   }
 }
 
@@ -194,7 +195,9 @@
   border-bottom: 2px solid transparent;
   border-radius: 2px;
   text-decoration: none;
-  transition: 0.2s;
+  transition:
+    background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s,
+    color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 }
 
 .r-sidebar-link._target {
@@ -204,10 +207,12 @@
 
 .r-sidebar-link:hover {
   color: var(--primary800);
-  background-color: var(--neutral50);
+  background-color: var(--neutral100);
+  transition-delay: initial;
 
   &::before {
     background-color: currentColor;
+    transition-delay: initial;
   }
 }
 
@@ -229,11 +234,14 @@
   background-color: var(--neutral200);
   list-style: none;
   cursor: pointer;
-  transition: 0.2s;
+  transition:
+    background-color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s,
+    color 0.2s cubic-bezier(0, 0.66, 0.58, 1) 0.05s;
 
   &:hover {
     background-color: var(--neutral300);
     color: var(--primary500);
+    transition-delay: initial;
   }
 
   &::before {