initial commit

src/styles/docs/nav/nav-tree.css

@@ -0,0 +1,171 @@
+[data-scope="accordion"][data-part="root"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15em;
+
+  & [data-part="item"] {
+    padding: 6px;
+
+    & [data-part="item"] {
+      padding-right: 0;
+
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-trigger"] {
+  background-color: hsl(var(--bg-900));
+  position: relative;
+  border: unset;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  width: 100%;
+  height: 36px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.15em;
+
+  & p:has(a) {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding-inline: 4px;
+    border-radius: 20px;
+
+    &:hover {
+      position: relative;
+      width: max-content;
+      padding: 4px;
+      overflow: scroll;
+      z-index: 101;
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    border-radius: 6px;
+    z-index: -1;
+    inset: -1px;
+    background-color: hsla(var(--green) 80 70 / 0.3);
+    transition: background-color 0.3s;
+  }
+
+  &:hover {
+    &::before {
+      background-color: hsla(var(--green) 80 70 / 0.6);
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-indicator"] {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-left: 3px;
+
+  &:hover {
+    background-color: hsl(var(--blue) 30 30);
+  }
+
+}
+
+[data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
+  animation: rotateIn 250ms ease-in-out forwards;
+}
+
+[data-scope="accordion"][data-part="item-indicator"][data-state="closed"] {
+  animation: rotateOut 250ms ease-in-out;
+}
+
+[data-scope="accordion"][data-part="item-content"] {
+  --height: 709;
+  margin-block: 0.175rem;
+
+  &>.arktree-item,
+  [data-part="item"] {
+    margin-left: 21px;
+    margin-block: 0.117rem;
+  }
+
+  & .arktree-item,
+  [data-part="item-content"]>div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15em;
+    margin-left: 24px;
+    margin-top: 0.224em;
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(to right,
+          hsla(var(--accent-400) / 0.5) var(--percent),
+          hsla(var(--accent-400) / 0) 75%);
+      animation: percentToZero 250ms ease-in-out forwards;
+      width: 0;
+      transition: width 0.25s;
+    }
+
+    &:hover::before {
+      width: 100%;
+      animation: percentToFifty 250ms ease-in-out forwards;
+    }
+
+
+    &>a {
+      padding-top: 1em;
+      width: 100%;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="open"] {
+  animation: slideDown 250ms ease-in-out;
+}
+
+[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
+  animation: slideUp 200ms ease-in-out;
+}
+
+.__current-type-doc {
+  color: hsl(var(--blue) 100 70);
+
+  & [data-part="item-trigger"] a {
+    color: hsl(var(--blue) 100 70) !important;
+
+  }
+
+  &>a {
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      height: 1px;
+      background: linear-gradient(to right,
+          hsla(var(--accent-400) / 0.5) var(--percent),
+          hsla(var(--accent-400) / 0) 100%);
+      animation: percentToZero 250ms ease-in-out forwards;
+      width: 100%;
+
+    }
+
+    &:hover::before {
+      animation: percentToFifty 250ms ease-in-out forwards;
+    }
+
+  }
+}