fix(menu-item): Introduce a new active color for nested menu items (#131)

imklau · jedrzejchalubek · commit 843077d9c80f · 2019-10-17T12:06:33.000+02:00
diff --git a/src/_includes/menu/menu-item.html b/src/_includes/menu/menu-item.html
@@ -30,7 +30,7 @@
         {% assign currentSectionPath = item.slug | downcase %}
         {% capture currentSectionSlug %}{{ currentSectionPage[0] | downcase }}/{{ currentSectionPage[1] | downcase }}{% endcapture %}
 
-        <li class="menu-item {% if currentPage == currentPath or currentSectionSlug == currentSectionPath %}menu-item--active{% endif %}" data-accordion data-class-active="menu-item--active">
+        <li class="menu-item menu-item--gray {% if currentPage == currentPath or currentSectionSlug == currentSectionPath %}menu-item--active{% endif %}" data-accordion data-class-active="menu-item--active">
           {% if item.path %}
             <a class="menu-item__link {% if currentPage == currentPath or currentSectionSlug == currentSectionPath %}menu-item__link--indicator-large{% endif %} flex" href="{{ site.baseurl }}{{ item.path }}">{{ item.title }}</a>
           {% endif %}
diff --git a/src/_sass/components/_menu-item.scss b/src/_sass/components/_menu-item.scss
@@ -125,6 +125,13 @@
         transform: rotate(180deg);
       }
     }
+
+    &#{$this}--gray {
+      & > #{$this}__link {
+        color: rgba(color(gray-dark), 0.8);
+        font-weight: 500;
+      }
+    }
   }
 
   &--separated {
