From 4c3cdec4e34bb12dd02cfeb1d1e92440a236f2b2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 5 Sep 2023 18:24:49 +0000 Subject: [PATCH] Override OuiCollapsibleNav background color in `next` theme (#1016) * Override OuiCollapsibleNav backgroud color in `next` theme In current theme, background should still come from OuiFlyout default styling Signed-off-by: Josh Romero * update changelog Signed-off-by: Josh Romero --------- Signed-off-by: Josh Romero (cherry picked from commit 1230223eac868a7a139ee36bb42d156256ecdabb) Signed-off-by: github-actions[bot] # Conflicts: # CHANGELOG.md --- src/components/collapsible_nav/_collapsible_nav.scss | 4 ++++ src/global_styling/variables/_collapsible_nav.scss | 4 ++++ .../oui-next/global_styling/variables/_collapsible_nav.scss | 6 +++++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss index dc2cbaf05a..bc808d997e 100644 --- a/src/components/collapsible_nav/_collapsible_nav.scss +++ b/src/components/collapsible_nav/_collapsible_nav.scss @@ -14,3 +14,7 @@ .ouiCollapsibleNav:not([class*='push']) { z-index: $ouiZNavigation !important; // sass-lint:disable-line no-important } + +.ouiCollapsibleNav.ouiFlyout { + background-color: $ouiCollapsibleNavBackgroundColor; +} diff --git a/src/global_styling/variables/_collapsible_nav.scss b/src/global_styling/variables/_collapsible_nav.scss index 4b4fab10d0..2af9050dc8 100644 --- a/src/global_styling/variables/_collapsible_nav.scss +++ b/src/global_styling/variables/_collapsible_nav.scss @@ -10,6 +10,8 @@ */ // Should be same as OuiFlyout background color +$ouiCollapsibleNavBackgroundColor: null !default; + $ouiCollapsibleNavGroupNoneBackgroundColor: inherit !default; $ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default; @@ -26,6 +28,8 @@ $ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor( /* OUI -> EUI Aliases */ +$euiCollapsibleNavBackgroundColor: $ouiCollapsibleNavBackgroundColor; +$euiCollapsibleNavGroupNoneBackgroundColor: $ouiCollapsibleNavGroupNoneBackgroundColor; $euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor; $euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor; $euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor; diff --git a/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss index b4cd021228..81fe4f3f10 100644 --- a/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss +++ b/src/themes/oui-next/global_styling/variables/_collapsible_nav.scss @@ -9,9 +9,11 @@ * GitHub history for details. */ +// Override OuiFlyout background +$ouiCollapsibleNavBackgroundColor: $ouiPageBackgroundColor !default; + // No distinction between none and light backgrounds in this theme $ouiCollapsibleNavGroupNoneBackgroundColor: $ouiPageBackgroundColor !default; - $ouiCollapsibleNavGroupLightBackgroundColor: $ouiPageBackgroundColor !default; $ouiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme( @@ -26,6 +28,8 @@ $ouiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor( /* OUI -> EUI Aliases */ +$euiCollapsibleNavBackgroundColor: $ouiCollapsibleNavBackgroundColor; +$euiCollapsibleNavGroupNoneBackgroundColor: $ouiCollapsibleNavGroupNoneBackgroundColor; $euiCollapsibleNavGroupLightBackgroundColor: $ouiCollapsibleNavGroupLightBackgroundColor; $euiCollapsibleNavGroupDarkBackgroundColor: $ouiCollapsibleNavGroupDarkBackgroundColor; $euiCollapsibleNavGroupDarkHighContrastColor: $ouiCollapsibleNavGroupDarkHighContrastColor;