[HxSidebar] - Update CSS variables for item content gap and border ra…

…dius for sidebar brand
havit · Nov 26, 2024 · 1b21936 · 1b21936
1 parent 4975b8a
commit 1b21936
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/...omponents.Web.Bootstrap/Navigation/Internal/HxSidebarItemNavLinkContentInternal.razor.css b/...omponents.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
@@ -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
@@ -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.