style

Author: reakaleek

src/Elastic.Markdown/Assets/styles.css

@@ -37,3 +37,17 @@
 
 	scrollbar-gutter: stable;
 }
+
+
+#pages-nav li.current {
+	position: relative;
+	&::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: -1px;
+		width: calc(var(--spacing) * 6);
+		height: 1px;
+		background-color: var(--color-gray-300);
+	}
+}

src/Elastic.Markdown/Slices/Layout/_TocTreeNav.cshtml

@@ -9,12 +9,12 @@
 		{
 			var f = file.File;
 			var isCurrent = f == Model.CurrentDocument;
-			<li class="block ml-2 pl-2 w-full border-l-1 @(isCurrent ? "current border-l-gray-400" : "border-l-gray")">
+			<li class="block ml-2 pl-2 w-full border-l-1 group @(isCurrent ? "current border-l-gray-300" : "border-l-gray-300")">
 				<div class="flex">
 					<div class="w-5">
 					</div>
 					<a
-						class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] hover:text-ink-dark @(isCurrent ? "text-blue-elastic!" : string.Empty)"
+						class="block py-1 text-sm leading-[1.2em] tracking-[-0.02em] group-[.current]:text-blue-elastic! hover:text-ink-dark"
 						href="@f.Url">
 						@f.NavigationTitle
 					</a>
@@ -29,7 +29,7 @@
 			const int initialExpandLevel = 1;
 			var containsCurrent = g.HoldsCurrent(Model.CurrentDocument) || g.ContainsCurrentPage(Model.CurrentDocument);
 			var shouldInitiallyExpand = containsCurrent || g.Depth <= initialExpandLevel;
-			<li class="flex flex-wrap ml-2 pl-2 @(g.Depth > 1 ? "border-l-1 border-l-gray" : string.Empty)">
+			<li class="flex flex-wrap ml-2 pl-2 @(g.Depth > 1 ? "border-l-1 border-l-gray-300" : string.Empty)">
 				<label for="@slug" class="peer group flex items-center mr-1">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"