fixed issues with font color in nested lists

templates/default-layout.lucius

@@ -236,7 +236,7 @@ input[type="button"]:not([disabled]):hover,
 button:not([disabled]):hover,
 a.btn:not([disabled]):hover,
 .btn:not([disabled]):hover {
-  background-color: var(--color-lighter);
+  background-color: var(--color-light);
   text-decoration: underline;
   color: white;
 }

templates/widgets/asidenav.hamlet

@@ -25,7 +25,7 @@ $newline never
               $forall action <- pageActions
                 $case action
                   $of PageActionPrime (MenuItem{..})
-                    <li .asidenav__list-item>
+                    <li .asidenav__nested-list-item>
                       <a .asidenav__link-wrapper href=@{menuItemRoute}>#{menuItemLabel}
                   $of _
 

templates/widgets/asidenav.lucius

@@ -12,50 +12,6 @@
   transition: opacity .2s ease;
 }
 
-.main__aside--collapsed.pseudo-hover {
-  overflow: visible;
-}
-.main__aside--collapsed {
-  width: 50px;
-  flex-basis: 50px;
-  overflow: hidden;
-
-  .asidenav__box-title {
-    width: 50px;
-    padding: 1px;
-    font-size: 18px;
-    text-align: center;
-    margin-bottom: 0;
-    background-color: var(--color-fontsec);
-  }
-
-  .asidenav__link-wrapper {
-    .asidenav__link-shorthand {
-      display: flex;
-      position: static;
-      background-color: var(--color-dark);
-      color: var(--color-lightwhite);
-      height: 50px;
-      width: 50px;
-      text-align: center;
-      opacity: 1;
-      font-size: 15px;
-      line-height: 1em;
-      margin-right: 13px;
-      flex-shrink: 0;
-      padding: 1px;
-      outline: 1px solid white;
-      text-transform: uppercase;
-      word-break: break-all;
-      align-items: center;
-      justify-content: center;
-    }
-    .asidenav__link-label {
-      padding-left: 0;
-    }
-  }
-}
-
 .asidenav {
   width: 300px;
   margin-top: 20px;
@@ -86,82 +42,40 @@
   margin-top: 13px;
   background-color: transparent;
   transition: all .2s ease;
-
-  a {
-    color: white;
-  }
-}
-
-/* hover sub-menus */
-.asidenav__nested-list {
-  position: absolute;
-  top: 0;
-  right: 0;
-  color: var(--color-font);
-  transform: translateX(0);
-  opacity: 0;
-  transition: all .2s ease-out;
-  width: 0;
-  overflow: hidden;
-  z-index: -1;
-
-  .asidenav__list-item {
-    background-color: var(--color-dark);
-    color: white;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  .asidenav__link-wrapper {
-    padding-left: 13px;
-    padding-right: 13px;
-    border-left: 20px solid white;
-    transition: all .2s ease;
-
-    &:hover {
-      background-color: white;
-      color: var(--color-dark) !important;
-      border-left: 20px solid var(--color-dark);
-    }
-  }
 }
 
 .asidenav__list-item {
   position: relative;
-  background-color: white;
+  color: var(--color-lightwhite);
-  color: var(--color-dark);
   margin: 4px 0;
 
-  &:not(.asidenav__list-item--active):hover {
+  &:hover {
-    color: white;
+    color: var(--color-link);
-    background-color: var(--color-dark);
+    background-color: var(--color-lightwhite);
+
+    .asidenav__link-shorthand {
+      transform: scale(1.05, 1.0);
+      transform-origin: right;
+    }
+
+    > .asidenav__link-wrapper {
+      color: var(--color-link);
+    }
 
     .asidenav__nested-list {
       transform: translateX(100%);
       opacity: 1;
       width: 200px;
     }
-
-    .asidenav__link-wrapper,
-    .asidenav__link-label {
-      color: white;
-    }
-
-    .asidenav__link-shorthand {
-      transform: scale(1.05, 1.0);
-      transform-origin: right;
-    }
   }
 }
+
 .asidenav__list-item--active {
-  background-color: var(--color-dark);
+  background-color: var(--color-lightwhite);
-  color: white;
 
   .asidenav__link-wrapper {
     pointer-events: none;
-    color: white;
+    color: var(--color-link);
   }
 
   .asidenav__link-shorthand {
@@ -176,35 +90,80 @@
   height: 50px;
   align-items: center;
   justify-content: flex-start;
-  color: var(--color-link);
+  color: var(--color-lightwhite);
   z-index: 1;
 
   .glyphicon {
     width: 50px;
   }
 
-  .asidenav__link-shorthand {
-    display: block;
-    position: absolute;
-    color: var(--color-grey);
-    line-height: 50px;
-    opacity: 0.2;
-    right: 10px;
-    top: 0;
-    font-size: 40px;
-    text-transform: uppercase;
-    transition: transform .2s ease;
-  }
-
-  .asidenav__link-label {
-    padding-left: 13px;
-  }
 
   .glyphicon + .asidenav__link-label {
     padding-left: 0;
   }
 }
 
+.asidenav__link-shorthand {
+  display: block;
+  position: absolute;
+  color: var(--color-grey);
+  line-height: 50px;
+  opacity: 0.2;
+  right: 10px;
+  top: 0;
+  font-size: 40px;
+  text-transform: uppercase;
+  transition: transform .2s ease;
+}
+
+.asidenav__link-label {
+  padding-left: 13px;
+}
+
+/* hover sub-menus */
+.asidenav__nested-list {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--color-font);
+  transform: translateX(0);
+  opacity: 0;
+  transition: all .2s ease-out;
+  width: 0;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.asidenav__nested-list-item {
+  position: relative;
+  color: var(--color-lightwhite);
+  background-color: var(--color-dark);
+
+  &:hover {
+    color: var(--color-link);
+    background-color: var(--color-lightwhite);
+
+    .asidenav__link-wrapper {
+      background-color: white;
+      color: var(--color-link);
+    }
+
+    .asidenav__nested-list {
+      transform: translateX(100%);
+      opacity: 1;
+      width: 200px;
+    }
+  }
+
+  .asidenav__link-wrapper {
+    padding-left: 13px;
+    padding-right: 13px;
+    border-left: 20px solid white;
+    transition: all .2s ease;
+    color: var(--color-lightwhite);
+  }
+}
+
 .asidenav__toggler {
   position: absolute;
   bottom: 20px;
@@ -230,6 +189,50 @@
   }
 }
 
-.main__aside--collapsed .asidenav__toggler::before {
+.main__aside--collapsed {
-  content: '\e080';
+  width: 50px;
+  flex-basis: 50px;
+  overflow: hidden;
+
+  &.pseudo-hover {
+    overflow: visible;
+  }
+
+  .asidenav__toggler::before {
+    content: '\e080';
+  }
+
+  .asidenav__box-title {
+    width: 50px;
+    padding: 1px;
+    font-size: 18px;
+    text-align: center;
+    margin-bottom: 0;
+    background-color: var(--color-lightwhite);
+  }
+
+  .asidenav__link-shorthand {
+    display: flex;
+    position: static;
+    background-color: var(--color-dark);
+    color: var(--color-lightwhite);
+    height: 50px;
+    width: 50px;
+    text-align: center;
+    opacity: 1;
+    font-size: 15px;
+    line-height: 1em;
+    margin-right: 13px;
+    flex-shrink: 0;
+    padding: 1px;
+    outline: 1px solid white;
+    text-transform: uppercase;
+    word-break: break-all;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .asidenav__link-label {
+    padding-left: 0;
+  }
 }