Add theme property to customize logo height in default navigation

REDMINE-20560
codevise · Jan 16, 2024 · 3e787ba · 3e787ba
1 parent b7b8d3d
commit 3e787ba
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md b/entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md
@@ -229,6 +229,8 @@ System](https://material.io/design/color/the-color-system.html#color-theme-creat
 | `default_navigation_progress_bar_background_color` | Background color of the progress bar. |
 | `default_navigation_progress_bar_indicator_color` | Color of the progress bar indicator. Defaults to `accent_color`. |
 | `default_navigation_separator_color` | Color of separator lines between chapters. |
+| `default_navigation_desktop_logo_height` | Height of the logo in the desktop layout. |
+| `default_navigation_mobile_logo_height` | Height of the logo in the mobile layout. |
 
 ## Palette Colors
 

diff --git a/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css b/entry_types/scrolled/package/src/widgets/defaultNavigation/DefaultNavigation.module.css
@@ -86,12 +86,24 @@ div:focus-within > .contextIcon,
 }
 
 .logo {
+  display: flex;
+  align-items: center;
   top: 0;
   left: 15px;
   height: 100%;
   max-width: 15%;
 }
 
+.logo picture {
+  height: var(--theme-default-navigation-mobile-logo-height, 100%);
+}
+
+@media (min-width: 781px) {
+  .logo picture {
+    height: var(--theme-default-navigation-desktop-logo-height, 100%);
+  }
+}
+
 .logo img {
   height: 100%;
   max-width: 100%;