From 1b21936cf19a55131e33094f4ad9c8fe68d40723 Mon Sep 17 00:00:00 2001
From: dominikcrha <crha@havit.cz>
Date: Tue, 26 Nov 2024 09:57:58 +0100
Subject: [PATCH] [HxSidebar] - Update CSS variables for item content gap and
 border radius for sidebar brand

---
 .../Internal/HxSidebarItemNavLinkContentInternal.razor.css | 2 +-
 .../wwwroot/defaults.lib.css                               | 3 ++-
 .../Components/HxSidebarDoc/HxSidebar_Documentation.razor  | 7 +++++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.css
index 8cb44511..50fdd184 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.css
+++ b/Havit.Blazor.Components.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.css
@@ -3,7 +3,7 @@
 	flex-direction: row;
 	align-items: center;
 	align-self: stretch;
-	gap: .75rem;
+	gap: var(--hx-sidebar-item-content-gap);
 }
 
 .hx-sidebar-subitems.show .hx-sidebar-item-navlink-content-inner {
diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css
index 2e4199b1..8c571f46 100644
--- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css
+++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.lib.css
@@ -18,6 +18,7 @@
 	--hx-sidebar-max-height: 										100vh;
 	--hx-sidebar-toggler-background: 								var(--bs-gray-500);
 	--hx-sidebar-item-font-size: 									1rem;
+	--hx-sidebar-item-content-gap:									.75rem;
 	--hx-sidebar-item-padding: 										.75rem;
 	--hx-sidebar-item-color: 										var(--bs-body-color);
 	--hx-sidebar-item-icon-color: 									var(--bs-primary);
@@ -48,7 +49,7 @@
 	--hx-sidebar-brand-shortname-width: 							2.5rem;
 	--hx-sidebar-brand-shortname-height: 							2.5rem;
 	--hx-sidebar-brand-shortname-background-color: 					var(--bs-primary);
-	--hx-sidebar-brand-shortname-border-radius: 					.625rem;
+	--hx-sidebar-brand-shortname-border-radius: 					var(--bs-border-radius);
 	--hx-sidebar-brand-shortname-color: 							var(--bs-white);
 	--hx-sidebar-brand-shortname-font-weight: 						600;
 	--hx-sidebar-brand-name-color: 									var(--bs-body-color);
diff --git a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
index 865c282e..717fb472 100644
--- a/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
+++ b/Havit.Blazor.Documentation/Pages/Components/HxSidebarDoc/HxSidebar_Documentation.razor
@@ -70,6 +70,9 @@
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-font-size" Default="1rem">
 			Font size of the items.
 		</ComponentApiDocCssVariable>
+		<ComponentApiDocCssVariable Name="--hx-sidebar-item-content-gap" Default=".75rem">
+			Gap between the content of the items.
+		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-item-padding" Default=".75rem">
 			Padding of the items.
 		</ComponentApiDocCssVariable>
@@ -148,7 +151,7 @@
 		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-shortname-background-color" Default="var(--bs-primary)">
 			Background color of the brand short name.
 		</ComponentApiDocCssVariable>
-		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-shortname-border-radius" Default=".625rem">
+		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-shortname-border-radius" Default="var(--bs-border-radius)">
 			Border radius of the brand short name.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-brand-shortname-color" Default="var(--bs-white)">
@@ -200,7 +203,7 @@
 			Radius of the items in the footer.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-footer-item-content-gap" Default=".75rem">
-			TODO
+			Gap between the content of the items in the footer.
 		</ComponentApiDocCssVariable>
 		<ComponentApiDocCssVariable Name="--hx-sidebar-footer-item-hover-background-color" Default="unset">
 			Background color on hover of the items in the footer.