Merge branch 'NXSTAGE-1208-Sidebar_style_improvements' into 'development'

NXSTAGE-1208: Minor sidenav style and hover changes

See merge request julkiset-sivut/design-system-lib!156

src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss

-.hy-menu-sidebar--container.sidebar-open {
-  .hy-menu-item-sidebar:not(.is-parent) {
+.hy-menu-sidebar--container.sidebar-open,
+.hy-menu-sidepanel--container.sidepanel-open {
+  .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) {
     .hy-menu-item-sidebar__label,
     .hy-menu-item__label__icon {
       background: linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%);
@@ -7,7 +8,63 @@
   }
   .hy-menu-item-sidebar.is-parent {
     .hy-menu-item-sidebar__label {
-      background: none;
+      background-color: none !important;
+    }
+  }
+
+  .hy-menu-item-sidebar:not(.is-parent) {
+    .hy-menu-item-sidebar__label {
+      &:hover {
+        background: var(--hover-gray) !important;
+        text-decoration: underline;
+      }
+    }
+
+    .hy-menu-item__label__icon {
+      &:not([aria-expanded='true']):hover {
+        background: var(--hover-gray) !important;
+        cursor: pointer;
+
+        svg {
+          width: 22px;
+          height: 22px;
+        }
+      }
+
+      &[aria-expanded='true']:hover {
+        background: var(--brand-main);
+        cursor: pointer;
+        transition: all 0.25s ease;
+
+        .hy-menu-item__label__icon__svg {
+          transform: rotate(180deg) translateX(2px);
+        }
+        svg {
+          width: 22px;
+          height: 22px;
+        }
+      }
+    }
+  }
+}
+
+.hy-menu-sidebar--container:not(.sidebar-open) {
+  .hy-menu-item-sidebar:not(.is-parent) {
+    .hy-menu-item-sidebar__label {
+      &:hover {
+        border: 1px solid var(--brand-main);
+        margin: -1px;
+        text-decoration: underline;
+      }
+    }
+
+    .hy-menu-item__label__icon {
+      &:hover {
+        border: 1px solid var(--brand-main);
+        margin: -1px;
+        text-decoration: underline;
+        cursor: pointer;
+      }
     }
   }
 }
@@ -18,9 +75,7 @@
 
   &--label-container {
     @include font-size(14px, 20px);
-    @include font-weight($bold);
-    background-color: var(--grayscale-white);
-    border: 0.5px solid rgba(16, 126, 171, 0.1);
+    @include font-weight($semibold);
     box-sizing: border-box;
     color: var(--brand-main-light);
     display: flex;
@@ -40,9 +95,9 @@
     outline-offset: 4px;
   }
 
-  &:hover {
+  /*   &:hover {
     color: var(--brand-main-nearly-black);
-  }
+  } */
   > .hy-menu-level-container.hy-menu-level-container--sidepanel {
     display: none;
   }
@@ -90,6 +145,7 @@
 
   &__label {
     align-items: center;
+    background-color: var(--grayscale-white);
     color: var(--brand-main-light);
     display: flex;
     hyphens: auto;
@@ -98,11 +154,6 @@
     width: 100%;
     word-break: break-word;
 
-    &:hover {
-      background: var(--hover-gray) !important;
-      text-decoration: underline;
-    }
-
     &:focus {
       outline: none;
       box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
@@ -114,12 +165,13 @@
     border-top: 0;
     border-right: 0;
     border-bottom: 0;
-    background: none;
-    border-left: 1px dotted var(--brand-main-light);
+    background: var(--grayscale-white);
+    border-left: 1px solid var(--brand-main-light);
     color: var(--brand-main-light);
     display: inline-block;
     position: relative;
     width: 61.5px;
+    margin-left: 6px;
     min-height: 48px;
 
     svg {
@@ -129,30 +181,6 @@
       transform: translate(-50%, -50%);
     }
 
-    &:not([aria-expanded='true']):hover {
-      background: var(--hover-gray) !important;
-      cursor: pointer;
-
-      svg {
-        width: 22px;
-        height: 22px;
-      }
-    }
-
-    &[aria-expanded='true']:hover {
-      background: var(--brand-main);
-      cursor: pointer;
-      transition: all 0.25s ease;
-
-      .hy-menu-item__label__icon__svg {
-        transform: rotate(180deg) translateX(2px);
-      }
-      svg {
-        width: 22px;
-        height: 22px;
-      }
-    }
-
     &:focus {
       outline: none;
       box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
@@ -162,7 +190,6 @@
 
   &.is-parent {
     align-items: flex-start;
-    background: none;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -180,10 +207,10 @@
 
       .hy-menu-item-sidebar__label {
         @include font-size(26px, 26px);
+        background-color: transparent !important;
         font-family: var(--main-font-family);
         font-weight: bold;
         letter-spacing: -0.81px;
-        margin: 0 0 0 0.5rem;
         padding: 0;
         text-decoration: none;
         text-transform: uppercase;
@@ -191,9 +218,17 @@
     }
 
     &:hover {
+      span {
+        background: none;
+        border: none;
+        margin: 0;
+      }
+
       a {
+        border: none;
         color: var(--brand-main) !important;
         text-decoration: underline;
+        margin: 0;
       }
       .hy-menu-item__parent__icon__svg {
         fill: var(--brand-main-nearly-black);
@@ -242,7 +277,7 @@
 
       > .hy-menu-item-sidebar--label-container {
         align-items: flex-end;
-        margin: 0;
+        margin: 0 0 0 0.5rem;
         padding: 0;
       }
     }