diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f97101cd2..2b823641d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Cornerstone - Text hover color does not change when Dropdown menu display mode is set to 'Alternative'. [#1918](https://github.com/bigcommerce/cornerstone/pull/1918) - “Sort by” dropdown selection not reflected on search results page for News and Information tab. [#1910](https://github.com/bigcommerce/cornerstone/pull/1910) - Header content placed out of the header block on mobile. [#1908](https://github.com/bigcommerce/cornerstone/pull/1908) - Fixed an issue with dispaying options that are out of stock for product on Cart. [#1911](https://github.com/bigcommerce/cornerstone/pull/1911) diff --git a/assets/scss/components/stencil/navPages/_navPages.scss b/assets/scss/components/stencil/navPages/_navPages.scss index 6608d3a40e..421376e9b2 100644 --- a/assets/scss/components/stencil/navPages/_navPages.scss +++ b/assets/scss/components/stencil/navPages/_navPages.scss @@ -202,28 +202,31 @@ } } + &.is-open, + .collapsible-icon-wrapper.is-open { + // scss-lint:disable NestingDepth + svg { + fill: $navPage-subMenu-item--is-highlighted-color; + stroke: $navPage-subMenu-item--is-highlighted-color; + } + } + @include breakpoint("medium") { display: inline-block; padding: spacing("half") (spacing("half") + spacing("quarter")) (spacing("half") + spacing("quarter")); &.is-open { - background-color: stencilColor("navPages-subMenu-backgroundColor"); - - // scss-lint:disable NestingDepth - svg { - fill: stencilColor("navPages-color-hover"); - stroke: stencilColor("navPages-color-hover"); - } + background-color: $navPage-subMenu-item--is-highlighted-background; } } &:hover, &.activePage { - color: stencilColor("navPages-color-hover"); + color: $navPage-subMenu-item--is-highlighted-color; // scss-lint:disable NestingDepth svg { - fill: stencilColor("navPages-color-hover"); - stroke: stencilColor("navPages-color-hover"); + fill: $navPage-subMenu-item--is-highlighted-color; + stroke: $navPage-subMenu-item--is-highlighted-color; } } @@ -403,14 +406,6 @@ padding-right: spacing("single"); width: 100%; } - - .navPage-subMenu-action.is-open, - .navPage-subMenu-action:hover { - background: $navPage-subMenu-item--is-highlighted-background; - color: $navPage-subMenu-item--is-highlighted-color; - font-weight: 500; - opacity: 0.3; - } } } diff --git a/assets/scss/settings/stencil/navPages/_settings.scss b/assets/scss/settings/stencil/navPages/_settings.scss index d2d8facc1f..25e9b8b179 100644 --- a/assets/scss/settings/stencil/navPages/_settings.scss +++ b/assets/scss/settings/stencil/navPages/_settings.scss @@ -6,8 +6,8 @@ $navPage-childList-borderColor: $navPage-borderColor; $navPage-subMenu-horizontal-backgroundColor: stencilColor("navPages-subMenu-backgroundColor"); $navPage-subMenu-horizontal-height: auto; $navPage-subMenu-horizontal-width: rem-calc(215px); -$navPage-subMenu-item--is-highlighted-background: #c8bdb2; -$navPage-subMenu-item--is-highlighted-color: #000; +$navPage-subMenu-item--is-highlighted-background: stencilColor("navPages-subMenu-backgroundColor"); +$navPage-subMenu-item--is-highlighted-color: stencilColor("navPages-color-hover"); $navPages-action-moreIcon-borderColor: #d6cdc0; $navPages-backgroundColor: stencilColor("navPages-subMenu-backgroundColor"); $navPages-list--user-borderColor: $navPage-borderColor;