@openeuropa/bcl-theme-default 0.4230.202512021730 → 0.4360.202601141610

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/css/oe-bcl-ckeditor5.min.css +1 -1
  2. package/css/oe-bcl-ckeditor5.min.css.map +1 -1
  3. package/css/oe-bcl-default.css +61 -48
  4. package/css/oe-bcl-default.css.map +1 -1
  5. package/css/oe-bcl-default.min.css +1 -1
  6. package/css/oe-bcl-default.min.css.map +1 -1
  7. package/js/oe-bcl-default.bundle.js +112 -1
  8. package/js/oe-bcl-default.bundle.js.map +1 -1
  9. package/js/oe-bcl-default.bundle.min.js +1 -1
  10. package/js/oe-bcl-default.bundle.min.js.map +1 -1
  11. package/js/oe-bcl-default.esm.js +111 -1
  12. package/js/oe-bcl-default.esm.js.map +1 -1
  13. package/js/oe-bcl-default.esm.min.js +1 -1
  14. package/js/oe-bcl-default.esm.min.js.map +1 -1
  15. package/js/oe-bcl-default.umd.js +112 -1
  16. package/js/oe-bcl-default.umd.js.map +1 -1
  17. package/js/oe-bcl-default.umd.min.js +1 -1
  18. package/js/oe-bcl-default.umd.min.js.map +1 -1
  19. package/package.json +5 -5
  20. package/src/js/header/header.js +91 -0
  21. package/src/js/index.esm.js +2 -0
  22. package/src/js/index.umd.js +2 -0
  23. package/src/js/mega-menu/mega-menu.js +57 -0
  24. package/src/scss/_header.scss +6 -2
  25. package/src/scss/_mega-menu.scss +57 -58
  26. package/src/scss/base/_colors.scss +1 -0
  27. package/templates/bcl-accordion/accordion.html.twig +42 -43
  28. package/templates/bcl-alert/alert.html.twig +18 -18
  29. package/templates/bcl-badge/badge.html.twig +11 -12
  30. package/templates/bcl-banner/banner.html.twig +34 -34
  31. package/templates/bcl-base-templates/content-type.html.twig +63 -64
  32. package/templates/bcl-base-templates/listing-page.html.twig +31 -31
  33. package/templates/bcl-base-templates/sidebar-search.html.twig +10 -10
  34. package/templates/bcl-blockquote/blockquote.html.twig +17 -17
  35. package/templates/bcl-breadcrumb/breadcrumb.html.twig +24 -25
  36. package/templates/bcl-button/button.html.twig +24 -24
  37. package/templates/bcl-button-group/button-group.html.twig +25 -26
  38. package/templates/bcl-card/card.html.twig +98 -98
  39. package/templates/bcl-card-layout/card-layout.html.twig +34 -34
  40. package/templates/bcl-carousel/carousel.html.twig +64 -64
  41. package/templates/bcl-contact-form/contact-form.html.twig +1 -1
  42. package/templates/bcl-content-banner/content-banner.html.twig +37 -37
  43. package/templates/bcl-date-block/date-block.html.twig +26 -26
  44. package/templates/bcl-description-list/description-list-details.html.twig +6 -6
  45. package/templates/bcl-description-list/description-list-title.html.twig +11 -11
  46. package/templates/bcl-description-list/description-list.html.twig +44 -45
  47. package/templates/bcl-dropdown/dropdown.html.twig +48 -49
  48. package/templates/bcl-event/event.html.twig +7 -7
  49. package/templates/bcl-fact-figures/fact-figures.html.twig +34 -34
  50. package/templates/bcl-featured-media/featured-media.html.twig +42 -43
  51. package/templates/bcl-file/file-translations.html.twig +29 -29
  52. package/templates/bcl-file/file.html.twig +46 -46
  53. package/templates/bcl-footer/footer.html.twig +31 -31
  54. package/templates/bcl-form/form.html.twig +70 -70
  55. package/templates/bcl-form-input/form-input.html.twig +57 -58
  56. package/templates/bcl-gallery/gallery-item.html.twig +20 -20
  57. package/templates/bcl-gallery/gallery.html.twig +62 -63
  58. package/templates/bcl-glossary/glossary-detail.html.twig +19 -19
  59. package/templates/bcl-glossary/glossary-listing.html.twig +6 -6
  60. package/templates/bcl-group/group-landing.html.twig +69 -69
  61. package/templates/bcl-group/group.html.twig +19 -19
  62. package/templates/bcl-header/header.html.twig +71 -79
  63. package/templates/bcl-heading/heading.html.twig +13 -14
  64. package/templates/bcl-icon/icon.html.twig +10 -10
  65. package/templates/bcl-inpage-navigation/inpage-navigation.html.twig +20 -20
  66. package/templates/bcl-landing-page/landing-page.html.twig +33 -33
  67. package/templates/bcl-language-list/language-list-grid.html.twig +25 -25
  68. package/templates/bcl-language-list/language-list-modal.html.twig +52 -52
  69. package/templates/bcl-language-list/language-list.html.twig +33 -34
  70. package/templates/bcl-language-switcher/language-switcher.html.twig +12 -12
  71. package/templates/bcl-link/link.html.twig +24 -24
  72. package/templates/bcl-links-block/links-block.html.twig +29 -30
  73. package/templates/bcl-list-group/list-group.html.twig +43 -44
  74. package/templates/bcl-listing/listing.html.twig +88 -88
  75. package/templates/bcl-mega-menu/mega-menu-items.html.twig +18 -18
  76. package/templates/bcl-mega-menu/mega-menu-submenu.html.twig +27 -22
  77. package/templates/bcl-mega-menu/mega-menu.html.twig +37 -35
  78. package/templates/bcl-modal/modal.html.twig +17 -17
  79. package/templates/bcl-navbar/navbar.html.twig +35 -35
  80. package/templates/bcl-navigation/navigation.html.twig +106 -106
  81. package/templates/bcl-offcanvas/offcanvas.html.twig +33 -33
  82. package/templates/bcl-page/page.html.twig +27 -27
  83. package/templates/bcl-pagination/pagination-item.html.twig +22 -23
  84. package/templates/bcl-pagination/pagination.html.twig +59 -59
  85. package/templates/bcl-pagination-v2/pagination-item.html.twig +31 -32
  86. package/templates/bcl-pagination-v2/pagination.html.twig +79 -79
  87. package/templates/bcl-person/person.html.twig +12 -12
  88. package/templates/bcl-placeholder/placeholder.html.twig +14 -15
  89. package/templates/bcl-progress/progress.html.twig +16 -17
  90. package/templates/bcl-project/project-lists.html.twig +25 -25
  91. package/templates/bcl-project/project.html.twig +35 -35
  92. package/templates/bcl-project-status/project-contributions.html.twig +25 -25
  93. package/templates/bcl-project-status/project-status.html.twig +32 -34
  94. package/templates/bcl-recent-activities/recent-activities.html.twig +13 -13
  95. package/templates/bcl-search/search.html.twig +12 -12
  96. package/templates/bcl-search-form/search-form.html.twig +21 -21
  97. package/templates/bcl-select/select.html.twig +52 -53
  98. package/templates/bcl-spinner/spinner.html.twig +10 -10
  99. package/templates/bcl-subscription/subscription-modal.html.twig +7 -7
  100. package/templates/bcl-subscription/subscription.html.twig +3 -3
  101. package/templates/bcl-subscription-block/subscription-block.html.twig +14 -14
  102. package/templates/bcl-table/table.html.twig +61 -62
  103. package/templates/bcl-textarea/textarea.html.twig +44 -44
  104. package/templates/bcl-timeline/timeline-item.html.twig +12 -12
  105. package/templates/bcl-timeline/timeline.html.twig +42 -42
  106. package/templates/bcl-toasts/toasts.html.twig +56 -57
  107. package/templates/bcl-user/user-compact.html.twig +24 -24
  108. package/templates/bcl-user/user-terms.html.twig +6 -6
  109. package/templates/bcl-user/user.html.twig +117 -117
@@ -17799,6 +17799,9 @@ em.placeholder {
17799
17799
  align-items: flex-end;
17800
17800
  }
17801
17801
 
17802
+ .bcl-header {
17803
+ --oel-mega-menu-offset-top: 0px;
17804
+ }
17802
17805
  .bcl-header .notification {
17803
17806
  position: relative;
17804
17807
  padding-right: 0;
@@ -17844,12 +17847,11 @@ em.placeholder {
17844
17847
  header:has(.bcl-header__navbar #main-navbar.show),
17845
17848
  header:has(.bcl-header__navbar.collapsing),
17846
17849
  header:has(.bcl-header__navbar.show) {
17847
- height: 100vh;
17850
+ height: calc(100vh - var(--oel-mega-menu-offset-top, 0px));
17848
17851
  display: -ms-flexbox;
17849
17852
  display: flex;
17850
17853
  -ms-flex-flow: column;
17851
17854
  flex-flow: column;
17852
- overflow: auto;
17853
17855
  }
17854
17856
  header:has(.bcl-header__navbar #main-navbar.collapsing) > div:has(.breadcrumb),
17855
17857
  header:has(.bcl-header__navbar #main-navbar.show) > div:has(.breadcrumb),
@@ -17876,6 +17878,10 @@ em.placeholder {
17876
17878
  width: 100%;
17877
17879
  -ms-flex-align: start;
17878
17880
  align-items: flex-start;
17881
+ height: 100%;
17882
+ }
17883
+ .bcl-header__navbar.navbar:not(:has(.bcl-mega-menu__container.show)) {
17884
+ overflow: auto;
17879
17885
  }
17880
17886
  .bcl-header__navbar.navbar .navbar-nav {
17881
17887
  width: 100%;
@@ -20176,6 +20182,8 @@ ul.bcl-mega-menu__items {
20176
20182
  ul.bcl-mega-menu__items {
20177
20183
  block-size: 288px;
20178
20184
  overflow-y: auto;
20185
+ scrollbar-color: rgb(189.6, 197.1, 235.5) transparent;
20186
+ scrollbar-width: thin;
20179
20187
  }
20180
20188
  }
20181
20189
  @media (max-width: 991.98px) {
@@ -20258,32 +20266,6 @@ ul.bcl-mega-menu__items > li > button[aria-expanded=true] {
20258
20266
  background-color: #253ebe;
20259
20267
  }
20260
20268
  }
20261
- ul.bcl-mega-menu__items > li:has(> a.see-all-button) {
20262
- position: -webkit-sticky;
20263
- position: sticky;
20264
- inset-block-start: 100%;
20265
- }
20266
- ul.bcl-mega-menu__items > li > a.see-all-button {
20267
- border-top: none;
20268
- }
20269
- ul.bcl-mega-menu__items > li > a.see-all-button:after {
20270
- background: #b9c5e9;
20271
- content: "";
20272
- block-size: 1px;
20273
- inset-inline-start: 0;
20274
- position: absolute;
20275
- inset-block-start: 0;
20276
- inset-inline: 1rem;
20277
- }
20278
- ul.bcl-mega-menu__items > li > a.see-all-button > svg {
20279
- inline-size: 0.8rem;
20280
- }
20281
- ul.bcl-mega-menu__items > li > a.see-all-button > span {
20282
- text-overflow: ellipsis;
20283
- overflow: hidden;
20284
- display: block;
20285
- white-space: nowrap;
20286
- }
20287
20269
 
20288
20270
  @media (min-width: 992px) {
20289
20271
  .bcl-mega-menu__menu {
@@ -20291,6 +20273,15 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20291
20273
  padding-right: 0;
20292
20274
  }
20293
20275
  }
20276
+ @media (max-width: 991.98px) {
20277
+ .bcl-mega-menu__menu > .bcl-mega-menu__items:has(.bcl-mega-menu__submenu:not([hidden])) > .__leaf,
20278
+ .bcl-mega-menu__menu > .bcl-mega-menu__items:has(.bcl-mega-menu__submenu:not([hidden])) > .__parent {
20279
+ display: none;
20280
+ }
20281
+ .bcl-mega-menu__menu > .bcl-mega-menu__items > .__parent:has(.bcl-mega-menu__submenu:not([hidden])) {
20282
+ display: block;
20283
+ }
20284
+ }
20294
20285
 
20295
20286
  .bcl-mega-menu__submenu {
20296
20287
  position: absolute;
@@ -20348,36 +20339,52 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20348
20339
  display: none;
20349
20340
  }
20350
20341
  }
20351
-
20352
20342
  @media (min-width: 992px) {
20353
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane {
20354
- background: rgb(233.2, 235.7, 248.5);
20343
+ .bcl-mega-menu__submenu > .bcl-mega-menu__items {
20344
+ -ms-flex: 1 1 0px;
20345
+ flex: 1 1 0;
20346
+ overflow-y: auto;
20355
20347
  }
20356
- }
20357
- @media (max-width: 991.98px) {
20358
- .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__info,
20359
- .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__first-submenu {
20360
- display: none;
20348
+ .bcl-mega-menu__submenu > .bcl-mega-menu__items > li > :is(span, a, button) {
20349
+ padding: 0.75rem 1.75rem;
20361
20350
  }
20362
20351
  }
20363
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
20364
- padding: 1rem 1rem;
20365
- margin: 0;
20366
- color: #212529;
20367
- background: rgb(233.2, 235.7, 248.5);
20368
- display: block;
20369
- font-size: 20px;
20352
+ .bcl-mega-menu__submenu .__see_all {
20353
+ border-top: 1px solid #b9c5e9;
20370
20354
  }
20371
20355
  @media (min-width: 992px) {
20372
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
20373
- display: none;
20356
+ .bcl-mega-menu__submenu .__see_all {
20357
+ border-top: 1px solid rgb(211.4, 216.4, 242);
20358
+ margin: 0 1.75rem;
20374
20359
  }
20375
20360
  }
20376
- @media (min-width: 1200px) {
20377
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > ul > li > * {
20378
- margin: 0 0.75rem;
20361
+ .bcl-mega-menu__submenu .__see_all > .see-all-button {
20362
+ padding: 0.75rem 1rem;
20363
+ display: -ms-flexbox;
20364
+ display: flex;
20365
+ -ms-flex-align: center;
20366
+ align-items: center;
20367
+ color: #253ebe;
20368
+ }
20369
+ @media (min-width: 992px) {
20370
+ .bcl-mega-menu__submenu .__see_all > .see-all-button {
20371
+ padding: 0.75rem 1.75rem;
20372
+ margin: 0 -1.75rem;
20379
20373
  }
20380
20374
  }
20375
+ .bcl-mega-menu__submenu .__see_all > .see-all-button:hover {
20376
+ background: rgb(233.2, 235.7, 248.5);
20377
+ }
20378
+ .bcl-mega-menu__submenu .__see_all > .see-all-button > svg {
20379
+ -ms-flex-negative: 0;
20380
+ flex-shrink: 0;
20381
+ }
20382
+ .bcl-mega-menu__submenu .__see_all > .see-all-button > span {
20383
+ text-overflow: ellipsis;
20384
+ overflow: hidden;
20385
+ display: block;
20386
+ white-space: nowrap;
20387
+ }
20381
20388
 
20382
20389
  @media (max-width: 991.98px) {
20383
20390
  .bcl-mega-menu__submenu > .__header,
@@ -20399,6 +20406,12 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20399
20406
  -webkit-transform: translateX(-50%);
20400
20407
  transform: translateX(-50%);
20401
20408
  }
20409
+ .bcl-mega-menu .__submenu_body {
20410
+ max-height: var(--oel-mega-menu-submenu-height);
20411
+ overflow: auto;
20412
+ scrollbar-color: rgb(189.6, 197.1, 235.5) transparent;
20413
+ scrollbar-width: thin;
20414
+ }
20402
20415
  }
20403
20416
  @media (max-width: 767.98px) {
20404
20417
  .breadcrumb-item + .breadcrumb-item {