Adjustments to the fatnav and sidenav, and other CSS updates

chrome/common/extensions/docs/static/sass/_navbar.scss

 $nav-item-shaded-bg: $gray-light url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAyCAMAAABI+VrBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALFQTFRF/////f39/v7+/Pz8+/v7+fn56+vr+vr69PT09vb28/Pz9fX1xcXF9/f3+Pj45+fn8PDwycnJ7+/v6enpzc3N19fX8fHx8vLy7u7u6Ojo7Ozs3Nzc5OTk7e3t4uLi2dnZ39/fxsbG29vb0dHR3d3d4ODg4+Pj6urqyMjI09PT5eXl0NDQ1dXV2NjYysrKx8fH5ubmzs7O3t7exMTE4eHh2tray8vLz8/PzMzM1NTU1tbWhgtdWwAAAOFJREFUeNok0NWSxCAURdFDhCQkMx3tuLe7jP//h829NC+rqIKNAK8hhGEQjmUyrm+ziVTs50O6jkA6b+J3gSCqpWfiGZxL1yKyhbIQEDQLxj7xTYy7SXoCY1RXbwLXy6OgfdevIbYFdulHaBuI7t3SIY5Nbhm4zAdF/Ow5gvTEEaR/W49Ov2eSIvjuW+Y4tdTCXHML+1XI/A7cwmmdM1nHLZwbl+kPPj9lunELq5LuRWy5hUFyC+uKI+hazabgCJpYcws5gsXS5F8qc02i9C9Jn9ejelHoMkJdhrJ5xb8AAwBmihB0TS21nQAAAABJRU5ErkJggg==) no-repeat right 0;
 $nav-border-color: rgb(232, 232, 232);
 $nav-font-size: 0.9em;
 $z-index-nav-hover: 1001;
+$nav-hover-gradient: linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%);
+$nav-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12);
 
 #topnav {
   @include display-flex();
   @include align-items(center);
   height: $top-nav-height;
   position: relative;
   //margin-bottom: $main-content-top-margin;
 }
 
 #logo {
@@ skipping 94 matching lines @@
     cursor: initial;
     margin: 0;
 
     a {
       font-weight: 600;
       padding: 0.5em 0;
       display: block;
       color: $gray-dark;
 
       &:hover {
-        @include background-image(linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%));
+        background-image: $nav-hover-gradient;
       }
     }
 
     li {
       white-space: nowrap;
 
       &.submenu {
         color: #333;;
         font-size: 1.1em;
         font-weight: bold;
-        cursor: pointer;
         @include flex(1);
 
         &.active {
-          @include background-image(linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%));
+          background-image: $nav-hover-gradient;
         }
 
         > ul {
           font-size: $nav-font-size - 0.1;
           padding: $default-padding - 5 0 0 0;
           margin: 0;
         }
 
         .category {
           border-bottom: 1px solid $nav-border-color;
@@ skipping 75 matching lines @@
         .expandee {
           @include display-flex();
           @include flex-direction(row);
 
 // pointer-events: all;
 // opacity: 1;
 // //visibility: visible;
 
           &::after {
             position: absolute;
-            @include background-image(linear-gradient(bottom,rgba(255, 255, 255, 0) 0,rgba(211, 211, 211, 0.5) 25%,rgb(211, 211, 211) 50%,rgba(211, 211, 211, 0.5) 75%,rgba(255, 255, 255, 0) 100%));
+            background-image: linear-gradient(bottom,rgba(255, 255, 255, 0) 0,rgba(211, 211, 211, 0.5) 25%,rgb(211, 211, 211) 50%,rgba(211, 211, 211, 0.5) 75%,rgba(255, 255, 255, 0) 100%);
             right: 0;
             top: 0;
             content: '';
             width: 1px !important;
             height: 100%;
           }
         }
       }
 
       .expandee {
         min-height: 400px;
         font-size: $nav-font-size;
-        box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12);
+        box-shadow: $nav-box-shadow;
         top: $top-nav-height;
 
         .submenu {
           padding: 0 $default-padding;
           border-right: 1px solid $nav-border-color;
           &:last-child {
             border: none;
           }
         }
       }
@@ skipping 105 matching lines @@
     img {
       display: none;
     }
 
     .expandee {
       display: block;
     }
   }
 }