@ecl/mega-menu 5.0.0-alpha.14 → 5.0.0-alpha.16

package/mega-menu.html.twig

@@ -134,6 +134,7 @@
     {% include '@ecl/button/button.html.twig' with _toggle|merge({
       type: 'button',
       variant: 'tertiary',
+      style: 'neutral',
       icon_position: 'before',
       icon: _toggle_icon,
       hide_label: true,

package/mega-menu.js

@@ -136,7 +136,7 @@ export class MegaMenu {
     this.menuOverlay = null;
     this.currentItem = null;
     this.totalItemsWidth = 0;
-    this.breakpointL = 996;
+    this.breakpointL = 1140;
     this.openPanel = { num: 0, item: {} };
     this.infoLinks = null;
     this.seeAllLinks = null;
@@ -610,10 +610,10 @@ export class MegaMenu {
 
     if (viewport === 'desktop' && this.header) {
       if (this.headerBanner) {
-        this.headerBanner.style.display = 'flex';
+        this.headerBanner.style.display = '';
       }
       if (this.headerNotification) {
-        this.headerNotification.style.display = 'flex';
+        this.headerNotification.style.display = '';
       }
     }
   }
@@ -639,12 +639,12 @@ export class MegaMenu {
             screenWidth > this.breakpointL ? 'desktop' : 'mobile',
           );
         }
-        if (this.prevScreenWidth >= 1140 && screenWidth >= 996) {
+        if (this.prevScreenWidth >= 1368 && screenWidth >= 1140) {
           this.resetStyles('desktop', true);
         }
       }
       this.isDesktop = this.useDesktopDisplay();
-      this.isLarge = window.innerWidth >= 1140;
+      this.isLarge = window.innerWidth >= 1368;
       // Update previous screen width
       this.prevScreenWidth = screenWidth;
       this.element.classList.remove('ecl-mega-menu--forced-mobile');
@@ -895,7 +895,6 @@ export class MegaMenu {
             } else {
               const subList = queryOne('.ecl-mega-menu__sublist', item);
               if (subList && this.openPanel.num === 1) {
-                console.log('dovrei...');
                 const subListRect = subList.getBoundingClientRect();
                 const subListRectTop = subListRect.top;
                 subList.classList.add('ecl-mega-menu__sublist--scrollable');
@@ -1333,10 +1332,10 @@ export class MegaMenu {
     } else {
       if (this.header) {
         if (this.headerBanner) {
-          this.headerBanner.style.display = 'flex';
+          this.headerBanner.style.display = '';
         }
         if (this.headerNotification) {
-          this.headerNotification.style.display = 'flex';
+          this.headerNotification.style.display = '';
         }
       }
       // Remove expanded class from inner menu
@@ -1361,9 +1360,9 @@ export class MegaMenu {
       if (this.header) {
         this.header.classList.add('ecl-site-header--open-menu-start');
       }
-      this.positionMenuOverlay();
     }
 
+    this.positionMenuOverlay();
     this.trigger('onBack', { level: level2 ? 2 : 1 });
   }
 
@@ -1642,10 +1641,10 @@ export class MegaMenu {
         'ecl-site-header--open-menu-start',
       );
       if (this.headerBanner) {
-        this.headerBanner.style.display = 'flex';
+        this.headerBanner.style.display = '';
       }
       if (this.headerNotification) {
-        this.headerNotification.style.display = 'flex';
+        this.headerNotification.style.display = '';
       }
     }
     this.enableScroll();

package/mega-menu.scss

@@ -93,7 +93,7 @@ $mega-menu: null !default;
   display: flex;
   flex-direction: column;
   font: var(--f-xs);
-  margin-inline-start: var(--s-xs);
+  margin-inline-start: map.get($mega-menu, 'mobile', 'open-button-margin');
   order: 2;
   padding: map.get($mega-menu, 'mobile', 'open-padding');
   text-decoration: none;
@@ -112,7 +112,7 @@ $mega-menu: null !default;
   }
 
   &:focus-visible {
-    outline-offset: -2px;
+    outline-offset: map.get($mega-menu, 'mobile', 'open-button-offset');
   }
 
   .ecl-icon:last-of-type {
@@ -151,7 +151,7 @@ $mega-menu: null !default;
 }
 
 /* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
     background: map.get($mega-menu, 'desktop', 'menu-background');
     padding-bottom: 0;
@@ -334,7 +334,7 @@ $mega-menu: null !default;
 }
 
 /* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
     .ecl-mega-menu__overlay {
       background-color: map.get($mega-menu, 'desktop', 'overlay-background');
@@ -345,7 +345,6 @@ $mega-menu: null !default;
       background-color: transparent;
       box-shadow: none;
       display: block;
-      margin-inline-start: calc(-1 * var(--s-m));
       overflow-y: visible;
       position: static;
       transition: none;
@@ -495,9 +494,14 @@ $mega-menu: null !default;
   }
 
   .ecl-mega-menu__featured-list__item-description {
-    font: map.get($mega-menu, 'global', 'featured-description-font');
     margin-inline-start: var(--s-l);
   }
+
+  .ecl-mega-menu__featured-list__item-description,
+  .ecl-mega-menu__featured-list__item-description p {
+    font: map.get($mega-menu, 'global', 'featured-description-font');
+    margin-block: 0;
+  }
 }
 
 .ecl-mega-menu--rtl .ecl-icon--flip-horizontal {
@@ -572,12 +576,13 @@ $mega-menu: null !default;
 }
 
 /* stylelint-disable-next-line order/order */
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(.ecl-menu--forced-mobile) {
     border-top: map.get($mega-menu, 'desktop', 'menu-border');
 
     .ecl-mega-menu__inner {
       border-top: none;
+      margin-inline-start: calc(-1 * var(--s-xs));
     }
 
     .ecl-mega-menu__list {
@@ -722,9 +727,9 @@ $mega-menu: null !default;
   }
 
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
     .ecl-mega-menu__item {
       &.ecl-mega-menu__item--expanded > .ecl-button .ecl-icon {
         transform: rotate(0);
@@ -779,7 +784,7 @@ $mega-menu: null !default;
   display: none;
 }
 
-@include breakpoints.down('m') {
+@include breakpoints.down('l') {
   .ecl-mega-menu--one-panel {
     .ecl-mega-menu__item--expanded > .ecl-mega-menu__link {
       font: var(--f-l);
@@ -981,6 +986,10 @@ $mega-menu: null !default;
   @include with-scrollbar;
 }
 
+.ecl-mega-menu__sublist--scrollable {
+  @include with-scrollbar;
+}
+
 .ecl-mega-menu__mega--level-2 {
   margin-top: map.get($mega-menu, 'mobile', 'spacing-top-level-2');
 
@@ -1100,11 +1109,11 @@ $mega-menu: null !default;
   }
 }
 
-@include breakpoints.up('l') {
+@include breakpoints.up('xl') {
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
     .ecl-mega-menu__wrapper {
       padding-top: var(--s-m);
       min-height: 200px !important;
@@ -1510,11 +1519,11 @@ $mega-menu: null !default;
   }
 }
 
-@include breakpoints.up('xl') {
+@media (width >= 1368px) {
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
     .ecl-container {
       padding-inline: map.get(
         $mega-menu,
@@ -1523,12 +1532,17 @@ $mega-menu: null !default;
       );
     }
 
+    .ecl-mega-menu__inner {
+      margin-inline-start: calc(-1 * var(--s-m));
+    }
+
     .ecl-mega-menu__item.ecl-mega-menu__item--expanded
       > .ecl-mega-menu__wrapper
       > .ecl-container {
       > .ecl-mega-menu__info {
         box-shadow: none;
-        border-radius: 0px 4px 4px 0px;
+        border-radius: 0px map.get($theme, 'border-radius', 's')
+          map.get($theme, 'border-radius', 's') 0px;
         left: map.get(
           $mega-menu,
           'desktop',
@@ -1599,9 +1613,9 @@ $mega-menu: null !default;
 
 @include breakpoints.up('xl') {
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
     .ecl-container {
       padding-inline: map.get(
         $mega-menu,
@@ -1622,11 +1636,11 @@ $mega-menu: null !default;
   }
 }
 
-@include breakpoints.up('xxl') {
+@media (width >= 1368px) {
   .ecl-mega-menu:not(
-      .ecl-mega-menu--forced-mobile,
-      .ecl-mega-menu--forced-close
-    ) {
+    .ecl-mega-menu--forced-mobile,
+    .ecl-mega-menu--forced-close
+  ) {
     .ecl-mega-menu__mega:not(.ecl-mega-menu__mega--level-2)
       > .ecl-mega-menu__featured {
       margin-inline-start: 20.68rem !important;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/mega-menu",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.16",
   "description": "ECL Mega Menu",
   "publishConfig": {
     "access": "public"
@@ -11,13 +11,13 @@
   "module": "mega-menu.js",
   "style": "mega-menu.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.14",
-    "@ecl/dom-utils": "5.0.0-alpha.14",
-    "@ecl/event-manager": "5.0.0-alpha.14",
-    "@ecl/link": "5.0.0-alpha.14",
-    "@ecl/picture": "5.0.0-alpha.14",
-    "bowser": "2.11.0",
-    "focus-trap": "7.6.4"
+    "@ecl/button": "5.0.0-alpha.16",
+    "@ecl/dom-utils": "5.0.0-alpha.16",
+    "@ecl/event-manager": "5.0.0-alpha.16",
+    "@ecl/link": "5.0.0-alpha.16",
+    "@ecl/picture": "5.0.0-alpha.16",
+    "bowser": "2.12.1",
+    "focus-trap": "7.6.5"
   },
   "repository": {
     "type": "git",
@@ -33,5 +33,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "5f790fa1e567483d23464f81405996c9e1c4f4f5"
+  "gitHead": "0842ff3b72ce9099c13e5407ad2b5eda9d06ba69"
 }