updating used variable colours to use theme colours

 - updating TagManager
 - fixing for multi-line menu items
 - update based on feedback

Author: chippison

plugins/CoreHome/stylesheets/layout.less

@@ -125,7 +125,7 @@ nav {
 
 #root {
   .pageWrap {
-    width: 100%;
+    width: calc(~'100% - 18px');  // 100% - pageWrap margin
     height: fit-content;
     padding-left: 9px;
     padding-right: 9px;
@@ -142,12 +142,17 @@ nav {
     min-width: 0;
   }
 
-  .layoutWithSidebar--hasSidebar .page > .pageWrap {
-    width: calc(~'100% - 18px');  // 100% - pageWrap margin
-  }
+  .top_controls {
+    min-height: 51px;
+    position: relative;
+    background-color: @theme-color-background-base;
+    height: auto;
+    margin-bottom: 8px;
+    margin-top: 8px;
+    visibility: hidden;
+    opacity: 0;
+    padding-left: 18px;
 
-  .top_controls,
-  .layoutWithSidebar .top_controls {
     .icon-arrowup:before, .icon-arrowdown:before {
       padding: 17px 0 0 0;
       display: inline-block;
@@ -157,6 +162,51 @@ nav {
         display: none;
       }
     }
+
+    @media all and (max-width: 600px) {
+      height: auto;
+      padding-left: 0;
+
+      .piwikTopControl {
+        position: static !important;
+        float: none;
+        margin: 0 23px 10px 17px !important;
+        display: block !important;
+      }
+
+      .piwikSelector {
+        > a.title {
+            max-width: none;
+        }
+
+        display: block;
+      }
+    }
+
+    .quickAccessPlaceholder {
+      width: 0;
+      visibility: hidden;
+      display: inline-block;
+      position: relative;
+      margin-right: -1px;
+    }
+
+    .piwikTopControl {
+      display: inline-block;
+      float: none;
+      position: relative;
+      margin-right: 14px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+      vertical-align: top;
+      font-size: 11px;
+    }
+
+    @media print {
+      .quick-access {
+        display: none !important;
+      }
+    }
   }
 
   @media only screen and (min-width: 993px) {
@@ -169,7 +219,7 @@ nav {
         flex: 0 0 224px;
         background-color: @theme-color-menu-contrast-background;
         box-shadow: none !important;
-        padding: 16px 16px;
+        padding: 16px 12px;
       }
 
       .layoutWithSidebarContent {
@@ -187,18 +237,28 @@ nav {
     #secondNavBar {
       width: 0 !important;
       .quick-access {
-        display: none;
+        margin-left: 16px;
+        z-index: 1000;
+        position: fixed;
+        top: 15px;
+        width: 268px;
+
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+        transform: translateX(-24px);
+        transition: opacity 50ms ease-out;
       }
 
       &.mobileLeftMenuOpen {
         width: auto !important;
 
-        > .quick-access {
-          margin-left: 16px;
-          display: block;
-          z-index: 1000;
-          position: fixed;
-          top: 15px;
+        .quick-access {
+          opacity: 1;
+          visibility: visible;
+          pointer-events: auto;
+          transform: translateX(0);
+          transition: opacity 380ms ease, transform 380ms ease;
         }
         .sidenav > .no-padding:first-child {
           padding-top: 65px !important;
@@ -211,26 +271,6 @@ nav {
     }
   }
 
-  @media all and (max-width: 600px) {
-    .top_controls {
-      height: auto;
-
-      .piwikTopControl {
-        position: static !important;
-        float: none;
-        margin: 0 23px 10px 17px !important;
-        display: block !important;
-      }
-
-      .piwikSelector {
-        > a.title {
-            max-width: none;
-        }
-
-        display: block;
-      }
-    }
-  }
   #ajaxLoadingDiv {
     margin-bottom: 10px;
   }
@@ -244,7 +284,7 @@ nav {
         padding-right: 8px;
         display: inline;
         font-size: 16px;
-        color: @left-menu-item-icon-color;
+        color: @theme-color-text-contrast;
       }
 
       .reporting-menu-sub-icon {
@@ -261,36 +301,42 @@ nav {
 
         .item {
           width: 100%;
-          height: 42px;
+          min-height: 42px;
           padding: 8px 12px;
           word-wrap: break-word;
           word-break: break-word;
           display: flex;
           align-items: center;
           .font-default(14px, 20px);
-          color: @left-menu-item-color;
+          color: @theme-color-text-lighter;
           border-radius: 8px;
           cursor: pointer;
           text-decoration: none;
           &:hover, &:focus {
             outline: 0;
           }
           &:focus-visible {
-            color: @left-menu-item-color;
+            color: @theme-color-text-lighter;
             background-color: @theme-color-background-base;
-            outline: 1px solid @left-menu-item-hover-text-color;
+            outline: 1px solid @theme-color-link;
           }
           &:hover {
             background-color: @theme-color-background-base;
           }
+          .menu-icon {
+            align-self: flex-start;
+            flex: 0 0 auto;
+            margin-top: 5px;
+          }
         }
 
         .item-help-icon {
           display:none;
           opacity: 0.2;
           position: absolute;
-          right: 21px;
+          right: 0;
           top: 0;
+          padding: 10px;
           line-height: 13px;
           height: calc(100%);
           align-items: center;
@@ -333,36 +379,35 @@ nav {
             width: 100%;
             margin-left: auto;
             margin-right: auto;
+
             .item {
               .font-default(13px, 16px);
               padding: 10px 22px 10px 36px;
-              height: 36px;
+              min-height: 36px;
               width: 98%;
+              border-radius: 8px;
+            }
+            &:hover, &.active {
+              background-color: @theme-color-background-base;
+              border-radius: 8px;
             }
             &.active {
               > .menuDropdown,
               > .item {
-                color: @left-menu-item-hover-text-color;
+                color: @theme-color-link;
                 background-color: @theme-color-background-base;
                 text-decoration: none;
                 border-radius: 8px;
               }
             }
           }
-          li:hover{
-            background-color: @theme-color-background-base;
-            border-radius: 8px;
-            .item {
-              border-radius: 8px;
-            }
-          }
         }
       }
       li.active, li:hover {
         >.item {
-          color: @left-menu-item-hover-text-color;
+          color: @theme-color-link;
           .menu-icon {
-            color: @left-menu-item-hover-text-color;
+            color: @theme-color-link;
           }
         }
       }
@@ -392,7 +437,7 @@ nav {
         }
 
         .title {
-          color: @left-menu-item-color;
+          color: @theme-color-text-lighter;
           padding: 10px 10px 10px 36px;
           font-size: 13px;
           font-weight: normal;
@@ -403,7 +448,7 @@ nav {
           justify-content: space-between;
 
           &:hover, &:focus {
-            color: @left-menu-item-hover-text-color;
+            color: @theme-color-link;
           }
 
           &:after {
@@ -461,29 +506,6 @@ nav {
       padding: 0;
     }
   }
-  .top_controls {
-    visibility: hidden;
-    opacity: 0;
-    padding-left: 18px;
-
-    .quickAccessPlaceholder {
-      width: 0;
-      visibility: hidden;
-      display: inline-block;
-      position: relative;
-      margin: 0;
-    }
-    @media screen and (max-width: 600px){
-      visibility: hidden;
-      opacity: 0;
-      padding-left: 0;
-    }
-
-    .piwikTopControl {
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
-  }
 }
 
 .badge-menu-item-container {
@@ -516,7 +538,7 @@ nav {
   margin-left: 10px;
 }
 
-#root, #standalone {
+#standalone {
   .top_controls {
     min-height: 51px;
     position: relative;
@@ -579,12 +601,6 @@ nav {
     .layoutWithSidebar--hasSidebar .page > .pageWrap {
       width: calc(~'100% - 18px') !important; // 100% - pageWrap margin
     }
-
-    .top_controls{
-      .quick-access {
-      display: none !important;
-      }
-    }
   }
   #content.home,
   #content.admin {