fix(storefront): BCTHEME-86 Cornerstone - Text hover color does not c…

…hange when Dropdown menu display mode is set to Alternative (bigcommerce#1918) (bigcommerce#1918) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
sacr3dc0w · Jan 5, 2021 · b9a6cb2 · b9a6cb2
1 parent 6574da3
commit b9a6cb2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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;