style: tweak active docs nav item border color

razonyang · Oct 12, 2024 · 2be8fef · 2be8fef
1 parent ec46859
commit 2be8fef
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/assets/main/scss/docs/index.scss b/assets/main/scss/docs/index.scss
@@ -36,7 +36,7 @@
 }
 
 .docs-nav-title-icon {
-  margin-left: -1.5rem;
+  margin-left: -.5rem;
 }
 
 .docs-sidebar {
@@ -50,3 +50,7 @@
     }
   }
 }
+
+.docs-nav-active-item {
+  margin-left: -.58rem;
+}
diff --git a/layouts/partials/docs/nav.html b/layouts/partials/docs/nav.html
@@ -27,21 +27,21 @@
           {{- $active = true -}}
         {{- end -}}
         <li class="mb-2" tabindex="-1">
-          <div class="py-1 d-flex justify-content-between align-items-center ms-3{{ if $active }} text-primary{{ end }}">
+          <div class="py-1 d-flex justify-content-between align-items-center{{ if $active }} text-primary{{ end }}">
             <a class="docs-nav-link d-flex align-items-center" href="{{ .RelPermalink }}">{{- template "nav-title" . -}}</a>
             <a class="btn-toggle ms-1{{ if and (not $active) (not $expand) }} collapsed{{ end }}" role="button" data-bs-toggle="collapse"
               data-bs-target="#{{ $sectionId }}" aria-expanded="{{ if or $active $expand }}true{{ else }}false{{ end }}" aria-controls="{{ $sectionId }}">
               <i class="btn-toggle-icon fas fa-chevron-down ms-auto" data-fa-transform="rotate-270"></i>
             </a>
           </div>
-          <div class="docs-nav-subnavs border-start mt-2 collapse {{ if or $active $expand}} show{{ end }}{{ if $active }} border-primary{{ end }}" id="{{ $sectionId }}">
+          <div class="docs-nav-subnavs border-start mt-2 collapse {{ if or $active $expand }} show{{ end }}" id="{{ $sectionId }}">
             <div class="btn-toggle-nav fw-normal ms-2{{ cond (default true site.Params.docs.nav.reduceFontSize) ` small` `` }}">
               {{ template "walk-nav" (dict "section" . "page" $page) }}
             </div>
           </div>
         </li>
         {{- else -}}
-        <li class="mb-2 py-1 ms-3{{ if eq .RelPermalink $page.RelPermalink }} text-primary{{ end }}" tabindex="-1">
+        <li class="mb-2 py-1{{ if eq .RelPermalink $page.RelPermalink }} text-primary border-2 border-start border-primary ps-2 docs-nav-active-item{{ end }}" tabindex="-1">
           <a class="docs-nav-link d-flex align-items-center" href="{{ .RelPermalink }}"{{ if .Params.redirect }} target="_blank"{{ end }}>
             {{- template "nav-title" . -}}
             {{- if .Params.redirect -}}