beautify show-hide js util toggles

static/css/utils/asidenav.scss

@@ -57,7 +57,7 @@
       padding-left: 10px;
 
       &.js-show-hide__toggle::before {
-        top: 25px;
+        z-index: 1;
       }
     }
   }
@@ -103,7 +103,6 @@
     &::before {
       left: auto;
       right: 20px;
-      top: 30px;
       color: var(--color-font);
     }
   }
@@ -314,6 +313,10 @@
       word-break: break-all;
       background-color: var(--color-dark);
       color: var(--color-lightwhite);
+
+      &:hover {
+        background-color: var(--color-dark);
+      }
     }
 
     .asidenav__link-shorthand {

static/css/utils/showHide.scss

@@ -1,22 +1,30 @@
+$show-hide-toggle-size: 6px;
+
 .js-show-hide__toggle {
+
   position: relative;
   cursor: pointer;
+  padding: 3px 7px;
+
+  &:hover {
+    background-color: var(--color-grey-lighter);
+    cursor: pointer;
+  }
 }
 
 .js-show-hide__toggle::before {
   content: '';
   position: absolute;
-  width: 0;
-  height: 0;
-  left: -28px;
-  top: 6px;
+  width: $show-hide-toggle-size;
+  height: $show-hide-toggle-size;
+  left: -15px;
+  top: 12px - $show-hide-toggle-size / 2;
   color: var(--color-primary);
-  border-right: 8px solid transparent;
-  border-top: 8px solid transparent;
-  border-left: 8px solid transparent;
-  border-bottom: 8px solid currentColor;
+  border-right: 2px solid currentColor;
+  border-top: 2px solid currentColor;
   transition: transform .2s ease;
-  transform-origin: 8px 12px;
+  transform-origin: ($show-hide-toggle-size / 2);
+  transform: translateY($show-hide-toggle-size) rotate(-45deg);
 }
 
 .js-show-hide__target {
@@ -26,7 +34,7 @@
 .js-show-hide--collapsed {
 
   .js-show-hide__toggle::before {
-    transform: rotate(180deg);
+    transform: translateY($show-hide-toggle-size / 3) rotate(135deg);
   }
 
   .js-show-hide__target {

templates/default-layout.lucius

@@ -8,6 +8,7 @@
   --color-lightwhite: #fcfffa;
   --color-grey: #B1B5C0;
   --color-grey-light: #efefef;
+  --color-grey-lighter: #f5f5f5;
   --color-grey-medium: #9A989E;
   --color-font: #34303a;
   --color-fontsec: #5b5861;