Sidebar docs - colors example cleanup

havit · Nov 20, 2024 · b5a848b · b5a848b
1 parent 97d1bb8
commit b5a848b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Demo_Colors.razor
@@ -1,14 +1,14 @@
 <style>
 	/* Demonstration purposes only. Put this CSS into your application's CSS file or into the component's CSS file. */
 	.my-sidebar {
-		--hx-sidebar-item-hover-color: var(--bs-dark);
-		--hx-sidebar-item-active-background-color: var(--bs-dark-rgb);
-		--hx-sidebar-item-hover-background-color: var(--bs-dark-rgb);
-		--hx-sidebar-item-icon-color: var(--bs-secondary);
+		--hx-sidebar-item-hover-background-color: var(--bs-emphasis-color-rgb);
+		--hx-sidebar-item-active-background-color: var(--bs-emphasis-color-rgb);
+		--hx-sidebar-item-active-color: var(--bs-emphasis-color);
+		--hx-sidebar-item-hover-color: var(--bs-emphasis-color);
 	}
 </style>
 <div class="my-sidebar d-flex border rounded-3 overflow-hidden">
-	<HxSidebar CssClass="text-bg-light">
+	<HxSidebar CssClass="bg-body-secondary">
 		<HeaderTemplate>
 			<HxSidebarBrand BrandName="Brand name" BrandNameShort="BN" />
 		</HeaderTemplate>

diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -13,7 +13,7 @@
         <Demo Type="typeof(HxSidebar_Demo_Dark)" />
 
         <DocHeading Title="Colors" />
-        <p>Similarly to Bootstrap Navbar, you can use utility classes to create any color variation eg. <code>text-bg-light</code>. Colors of the active/hover states need to be fine-tuned via CSS vars.</p>
+        <p>Similarly to Bootstrap Navbar, you can use utility classes to create any color variation eg. <code>bg-body-secondary</code>. Colors of the items and active/hover states need to be fine-tuned via CSS vars.</p>
         <Demo Type="typeof(HxSidebar_Demo_Colors)" />
 
         <DocHeading Title="Logo" />