merged with dev; resolving conflicts

package.json

 {
   "name": "@itcenteratunihelsinki/huds-lib",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "Helsinki University Design System library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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

@@ -9,14 +9,15 @@
 
 // Mobile.
 :host(.hy-menu-item--mobile) {
-  background-color: var(--grayscale-white);
-  border-top: 1px dashed var(--grayscale-medium-dark);
-  display: flex;
   --menu-item-display: flex;
-}
+  display: flex;
+  margin-left: 12px;
+  margin-right: 12px;
+  margin: 0 12px 5px;
 
-:host(.hy-menu-item--mobile:first-of-type) {
-  border-top: 3px solid var(--brand-main-nearly-black);
+  @include breakpoint($narrow) {
+    margin: 0 28px 6px;
+  }
 }
 
 :host(.hy-menu-item--mobile.hy-menu-item--alternative) {
@@ -147,18 +148,50 @@ a {
     outline-offset: -2px;
   }
 
-  &.is-active,
-  &.in-active-trail {
-    .hy-menu-item__label {
-      border-bottom: 2px solid var(--additional-orange);
-      padding-bottom: 5px;
+  &.hy-menu-item--mobile {
+    background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
+    color: var(--brand-main-light);
+    padding: 12px 12px 12px 20px;
+
+    &.is-active,
+    &.in-active-trail {
+      @include font-weight($bold);
+      color: var(--grayscale-black);
+      position: relative;
+
+      &:before {
+        border-left: 3px solid var(--grayscale-black);
+        content: '';
+        height: 75%;
+        left: 10px;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
     }
-  }
 
-  &.is-active,
-  &.is-heading {
-    .hy-menu-item__label {
+    &.is-heading {
+      @include font-size(24px, 24px);
       @include font-weight($bold);
+      background: transparent;
+      border-bottom: 3px solid var(--brand-main-light);
+      color: var(--brand-main-light);
+      margin-top: -24px;
+      padding-bottom: 24px;
+      padding-top: 24px;
+      text-transform: uppercase;
+
+      &.is-active,
+      &.in-active-trail {
+        @include font-weight($bold);
+        color: var(--grayscale-black);
+        position: relative;
+
+        &:before {
+          border-left-width: 4px;
+          height: 55%;
+        }
+      }
     }
   }
 
@@ -304,24 +337,18 @@ a {
 
 .hy-menu-item__button {
   align-items: center;
-  background: transparent;
-  border: 0 none;
+  background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
+  border-bottom: 0;
+  border-left: 1px dashed var(--brand-main-light);
+  border-right: 0;
+  border-top: 0;
   cursor: pointer;
   display: var(--menu-item-display);
   justify-content: center;
-  width: 70px;
-
-  &:focus {
-    outline: solid 2px var(--additional-yellow);
-    outline-offset: 2px;
-  }
+  padding: 0;
+  width: 50px;
 
-  &::before {
-    border-left: 1px dashed var(--brand-main-nearly-black);
-    content: '';
-    display: block;
-    height: 16px;
-    margin-right: 16px;
-    width: 1px;
+  svg {
+    fill: var(--brand-main-light);
   }
 }

src/components/navigation/menu-language/menu-language.scss

@@ -3,8 +3,12 @@
   display: flex;
   flex-flow: row;
   position: absolute;
-  right: 0;
+  right: 16px;
   top: 0;
+
+  @include breakpoint($narrow) {
+    right: 28px;
+  }
 }
 
 :host(.menu--language:not([is-mobile])) {

src/components/navigation/menu-level-container/menu-level-container.tsx

@@ -98,6 +98,10 @@ export class MenuLevelContainer {
           ...this.headingItem,
           label: parentMenuItem.getAttribute('label'),
         };
+        this.headingItem = {
+          ...this.headingItem,
+          isActive: window.location.pathname === this.headingItem.url,
+        };
       } else {
         this.triggerItem = 'home';
       }
@@ -150,6 +154,7 @@ export class MenuLevelContainer {
                 label={this.headingItem.label}
                 url={this.headingItem.url}
                 isHeading={true}
+                isActive={this.headingItem.isActive}
                 menu-type={'mobile'}
               />
               <slot />

src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss

@@ -4,18 +4,27 @@
   border: 0 none;
   cursor: pointer;
   display: flex;
-  margin: 0 0 15px;
+  margin: 0 0 24px 16px;
   padding: 0;
 
+  @include breakpoint($narrow) {
+    margin: 0 0 24px 28px;
+  }
+
   &:focus {
     outline: solid 2px var(--additional-yellow);
     outline-offset: 2px;
   }
 
+  svg {
+    fill: var(--brand-main-light);
+  }
+
   &__label {
     @include font-size(14px, 20px);
     @include font-weight($regular);
     align-items: center;
+    color: var(--brand-main-light);
     display: flex;
     margin-left: 6px;
     text-align: left;

src/components/navigation/menu/menu.scss

@@ -11,7 +11,6 @@
     flex-flow: column;
     justify-items: stretch;
     left: 0;
-    padding: 20px 32px 0;
     position: absolute;
     right: 0;
     top: 0;
@@ -36,11 +35,13 @@
 
 .hy-menu {
   &--mobile {
+    -webkit-overflow-scrolling: touch;
     flex-flow: column;
     min-height: calc(100vh - 60px);
-    -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     overflow-y: visible;
+    padding-left: 12px;
+    padding-right: 12px;
     transform: translateX(100%);
     transition: 0.45s;
     width: 100%;
@@ -73,7 +74,11 @@
 
   &__logo-container {
     display: inline-block;
-    margin: 5px 0 20px;
+    padding: 16px;
+
+    @include breakpoint($narrow) {
+      padding: 16px 28px;
+    }
   }
 
   &--sidenav {
@@ -87,24 +92,28 @@
 }
 
 .hy-link__donate {
-  align-items: center;
-  background-color: var(--brand-main);
+  background-color: var(--grayscale-white);
   bottom: -20px;
-  display: flex;
-  justify-content: center;
-  letter-spacing: -0.5px;
-  margin: auto -20px 0;
-  padding: 20px;
   position: sticky;
   z-index: 102;
 
   a {
-    @include font-size(15px, 20px);
+    @include font-size(16px, 16px);
     @include font-weight($semibold);
+    background-color: var(--brand-main-light);
     color: var(--grayscale-white);
+    display: block;
     font-family: var(--main-font-family);
+    letter-spacing: -0.4px;
+    margin: 12px;
+    padding: 20px;
+    text-align: center;
     text-decoration: none;
 
+    @include breakpoint($narrow) {
+      margin: 12px 28px;
+    }
+
     &:focus {
       outline: solid 2px var(--additional-yellow);
       outline-offset: 4px;

src/components/site-header/site-header.scss

@@ -32,7 +32,7 @@
     margin: 16px 8px;
 
     @include breakpoint($narrow) {
-      margin: 16px 16px 16px 24px;
+      margin: 16px 16px 16px 28px;
     }
 
     @include breakpoint($wide) {
@@ -70,8 +70,8 @@
       width: 90%;
       z-index: 100;
 
-      @include breakpoint($medium) {
-        width: 356px;
+      @include breakpoint($narrow) {
+        width: 400px;
       }
     }
   }
@@ -82,16 +82,19 @@
     padding: 15px 16px 15px 12px;
 
     @include breakpoint($narrow) {
-      padding: 15px 32px 15px 10px;
+      padding: 15px 28px 15px 10px;
     }
 
     &.is-open {
-      margin: 10px;
-      padding: 10px;
       position: absolute;
       right: 0;
-      top: 17px;
+      top: 32px;
+      transform: translateY(-50%);
       z-index: 101;
+
+      @include breakpoint($narrow) {
+        top: 40px;
+      }
     }
 
     &__label {
@@ -111,13 +114,8 @@
 
       svg {
         height: 24px;
-        margin-left: 4px;
         width: 24px;
 
-        @include breakpoint($narrow) {
-          margin-left: 8px;
-        }
-
         @include breakpoint($medium) {
           width: 20px;
         }

src/components/site-header/site-logo/site-logo.scss

@@ -27,6 +27,13 @@ a {
     margin-left: 8px;
     max-width: 100%;
     text-transform: uppercase;
+    max-width: 90px;
+
+    .hy-site-header__logo-container & {
+      @include breakpoint($narrow) {
+        max-width: none;
+      }
+    }
 
     @include breakpoint($narrow) {
       @include font-size(15px, 16px);

src/components/site-header/site-logo/site-logo.tsx

@@ -4,7 +4,7 @@ import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
 @Component({
   tag: 'hy-site-logo',
   styleUrl: 'site-logo.scss',
-  shadow: true,
+  shadow: false,
 })
 export class SiteLogo {
   @Prop() color: ColorVariant = ColorVariant.black;

src/components/site-header/site-search/site-search.scss

@@ -33,16 +33,16 @@
   &__label {
     @include font-size(14px, 14px);
     @include font-weight($bold);
-
     color: var(--site-logo-color);
     display: none;
+    display: none;
     font-family: var(--main-font-family);
     letter-spacing: -0.9px;
     margin-left: 4px;
+    visibility: hidden;
 
     @include breakpoint($narrow) {
       @include font-size(15px, 16px);
-      display: block;
       margin-left: 4px;
       margin-right: 8px;
       text-transform: uppercase;
@@ -50,8 +50,10 @@
 
     @include breakpoint($wide) {
       @include font-size(14px);
+      display: block;
       font-weight: 600;
       text-transform: none;
+      visibility: visible;
     }
 
     @include breakpoint($extrawide) {