feat(): Adjust menu active state indicators (#664)

jedrzejchalubek · sanscontext · web-flow · commit 51037af28634 · 2020-02-27T10:50:15.000-08:00
Co-authored-by: LRubin &lt;sanscontext@users.noreply.github.com&gt;
diff --git a/src/_includes/menu/menu-item.html b/src/_includes/menu/menu-item.html
@@ -29,8 +29,8 @@
         {% assign currentSectionPage = page.path | downcase | split: "/" %}
         {% assign currentSectionPath = item.slug | downcase %}
         {% capture currentSectionSlug %}{{ currentSectionPage[0] | downcase }}/{{ currentSectionPage[1] | downcase }}{% endcapture %}
-
-        <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">
+        
+        <li class="menu-item {% if item.section_title %}menu-item--gray{% else %}menu-item--green{% endif %} {% if currentPage == currentPath or currentSectionSlug == currentSectionPath %}menu-item--active{% endif %}" data-accordion data-class-active="menu-item--active">
           {% if item.path %}
             {% assign menuLink = site.baseurl | append: item.path  | append: "/" %}
             {% if item.path contains "http://" or  item.path contains "https://"%}
diff --git a/src/_sass/components/_menu-item.scss b/src/_sass/components/_menu-item.scss
@@ -101,9 +101,9 @@
         content: "";
         display: block;
         position: absolute;
-        top: 0;
-        left: -18px;
-        height: 100%;
+        top: -8px;
+        left: -19px;
+        height: calc(100% + 16px);
         width: 2px;
         background-color: color(primary);
       }
@@ -116,9 +116,9 @@
         content: "";
         display: block;
         position: absolute;
-        top: 0;
-        left: -26px;
-        height: 100%;
+        top: -8px;
+        left: -25px;
+        height: calc(100% + 16px);
         width: 2px;
         background-color: color(primary);
       }
@@ -149,7 +149,14 @@
 
     &#{$this}--gray {
       & > #{$this}__link {
-        color: rgba(color(gray-dark), 0.8);
+        color: #435A6F;
+        font-weight: 500;
+      }
+    }
+
+    &#{$this}--green {
+      & > #{$this}__link {
+        color: color(primary);
         font-weight: 500;
       }
     }
