From 3e787ba4d35995f731f68b2551f13b6be79c81a0 Mon Sep 17 00:00:00 2001 From: Tim Fischbach Date: Tue, 16 Jan 2024 11:02:33 +0100 Subject: [PATCH] Add theme property to customize logo height in default navigation REDMINE-20560 --- .../creating_themes/custom_colors_and_dimensions.md | 2 ++ .../defaultNavigation/DefaultNavigation.module.css | 12 ++++++++++++ 2 files changed, 14 insertions(+) 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 index 2fd8ee749..58089c286 100644 --- 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 index 99f14304e..a0f7a3172 100644 --- 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%;