@openeuropa/bcl-theme-default 0.4298.202511051800 → 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 (114) 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 +167 -85
  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/_input.scss +72 -31
  26. package/src/scss/_mega-menu.scss +57 -58
  27. package/src/scss/_multiselect-2.scss +21 -11
  28. package/src/scss/_pagination.scss +1 -0
  29. package/src/scss/_search-form.scss +4 -0
  30. package/src/scss/base/_colors.scss +1 -0
  31. package/src/scss/base/_mixins.scss +12 -0
  32. package/templates/bcl-accordion/accordion.html.twig +42 -46
  33. package/templates/bcl-alert/alert.html.twig +18 -21
  34. package/templates/bcl-badge/badge.html.twig +11 -15
  35. package/templates/bcl-banner/banner.html.twig +34 -37
  36. package/templates/bcl-base-templates/content-type.html.twig +63 -67
  37. package/templates/bcl-base-templates/listing-page.html.twig +31 -31
  38. package/templates/bcl-base-templates/sidebar-search.html.twig +10 -10
  39. package/templates/bcl-blockquote/blockquote.html.twig +17 -20
  40. package/templates/bcl-breadcrumb/breadcrumb.html.twig +24 -28
  41. package/templates/bcl-button/button.html.twig +24 -27
  42. package/templates/bcl-button-group/button-group.html.twig +25 -29
  43. package/templates/bcl-card/card.html.twig +98 -101
  44. package/templates/bcl-card-layout/card-layout.html.twig +34 -37
  45. package/templates/bcl-carousel/carousel.html.twig +64 -67
  46. package/templates/bcl-contact-form/contact-form.html.twig +1 -1
  47. package/templates/bcl-content-banner/content-banner.html.twig +37 -40
  48. package/templates/bcl-date-block/date-block.html.twig +26 -29
  49. package/templates/bcl-description-list/description-list-details.html.twig +6 -9
  50. package/templates/bcl-description-list/description-list-title.html.twig +11 -14
  51. package/templates/bcl-description-list/description-list.html.twig +44 -48
  52. package/templates/bcl-dropdown/dropdown.html.twig +48 -52
  53. package/templates/bcl-event/event.html.twig +7 -7
  54. package/templates/bcl-fact-figures/fact-figures.html.twig +34 -37
  55. package/templates/bcl-featured-media/featured-media.html.twig +42 -46
  56. package/templates/bcl-file/file-translations.html.twig +29 -32
  57. package/templates/bcl-file/file.html.twig +47 -50
  58. package/templates/bcl-footer/footer.html.twig +31 -34
  59. package/templates/bcl-form/form.html.twig +70 -73
  60. package/templates/bcl-form-input/form-input.html.twig +57 -61
  61. package/templates/bcl-gallery/gallery-item.html.twig +20 -23
  62. package/templates/bcl-gallery/gallery.html.twig +62 -66
  63. package/templates/bcl-glossary/glossary-detail.html.twig +19 -19
  64. package/templates/bcl-glossary/glossary-listing.html.twig +6 -6
  65. package/templates/bcl-group/group-landing.html.twig +69 -69
  66. package/templates/bcl-group/group.html.twig +19 -19
  67. package/templates/bcl-header/header.html.twig +71 -82
  68. package/templates/bcl-heading/heading.html.twig +13 -17
  69. package/templates/bcl-icon/icon.html.twig +10 -13
  70. package/templates/bcl-inpage-navigation/inpage-navigation.html.twig +20 -23
  71. package/templates/bcl-landing-page/landing-page.html.twig +33 -33
  72. package/templates/bcl-language-list/language-list-grid.html.twig +25 -28
  73. package/templates/bcl-language-list/language-list-modal.html.twig +52 -52
  74. package/templates/bcl-language-list/language-list.html.twig +33 -37
  75. package/templates/bcl-language-switcher/language-switcher.html.twig +12 -15
  76. package/templates/bcl-link/link.html.twig +24 -27
  77. package/templates/bcl-links-block/links-block.html.twig +30 -34
  78. package/templates/bcl-list-group/list-group.html.twig +43 -47
  79. package/templates/bcl-listing/listing.html.twig +88 -91
  80. package/templates/bcl-mega-menu/mega-menu-items.html.twig +18 -21
  81. package/templates/bcl-mega-menu/mega-menu-submenu.html.twig +28 -26
  82. package/templates/bcl-mega-menu/mega-menu.html.twig +37 -38
  83. package/templates/bcl-modal/modal.html.twig +21 -23
  84. package/templates/bcl-navbar/navbar.html.twig +35 -38
  85. package/templates/bcl-navigation/navigation.html.twig +105 -110
  86. package/templates/bcl-offcanvas/offcanvas.html.twig +33 -36
  87. package/templates/bcl-page/page.html.twig +27 -27
  88. package/templates/bcl-pagination/pagination-item.html.twig +22 -26
  89. package/templates/bcl-pagination/pagination.html.twig +59 -62
  90. package/templates/bcl-pagination-v2/pagination-item.html.twig +31 -35
  91. package/templates/bcl-pagination-v2/pagination.html.twig +79 -82
  92. package/templates/bcl-person/person.html.twig +12 -12
  93. package/templates/bcl-placeholder/placeholder.html.twig +14 -18
  94. package/templates/bcl-progress/progress.html.twig +16 -20
  95. package/templates/bcl-project/project-lists.html.twig +25 -29
  96. package/templates/bcl-project/project.html.twig +35 -35
  97. package/templates/bcl-project-status/project-contributions.html.twig +25 -28
  98. package/templates/bcl-project-status/project-status.html.twig +32 -37
  99. package/templates/bcl-recent-activities/recent-activities.html.twig +13 -16
  100. package/templates/bcl-search/search.html.twig +12 -12
  101. package/templates/bcl-search-form/search-form.html.twig +21 -24
  102. package/templates/bcl-select/select.html.twig +52 -56
  103. package/templates/bcl-spinner/spinner.html.twig +10 -13
  104. package/templates/bcl-subscription/subscription-modal.html.twig +7 -7
  105. package/templates/bcl-subscription/subscription.html.twig +3 -3
  106. package/templates/bcl-subscription-block/subscription-block.html.twig +14 -17
  107. package/templates/bcl-table/table.html.twig +61 -65
  108. package/templates/bcl-textarea/textarea.html.twig +44 -47
  109. package/templates/bcl-timeline/timeline-item.html.twig +12 -15
  110. package/templates/bcl-timeline/timeline.html.twig +42 -45
  111. package/templates/bcl-toasts/toasts.html.twig +56 -60
  112. package/templates/bcl-user/user-compact.html.twig +24 -27
  113. package/templates/bcl-user/user-terms.html.twig +6 -6
  114. 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%;
@@ -18310,6 +18316,10 @@ em.placeholder {
18310
18316
  border-top-left-radius: 0;
18311
18317
  border-bottom-left-radius: 0;
18312
18318
  }
18319
+ .bcl-search-form.submittable .bcl-search-form__submit:focus-visible {
18320
+ outline-offset: 2px;
18321
+ outline-color: #253ebe;
18322
+ }
18313
18323
  .bcl-search-form.submittable .bcl-search-form__group {
18314
18324
  display: -ms-flexbox;
18315
18325
  display: flex;
@@ -18343,12 +18353,53 @@ em.placeholder {
18343
18353
  padding-bottom: 0.5rem;
18344
18354
  padding-left: 1rem;
18345
18355
  font-size: 1.25rem;
18356
+ border-color: #6c757d;
18346
18357
  }
18347
18358
  .form-select:focus-visible {
18359
+ border-color: #6c757d;
18360
+ box-shadow: none;
18348
18361
  outline: 2px solid #253ebe;
18349
18362
  box-shadow: none;
18350
18363
  border-radius: 4px;
18351
- outline-offset: -1px;
18364
+ outline-offset: 2px;
18365
+ }
18366
+ .form-select:focus-visible.is-valid {
18367
+ outline-color: #09854c;
18368
+ }
18369
+ .form-select:focus-visible.is-valid:focus {
18370
+ box-shadow: none;
18371
+ border-color: #6c757d;
18372
+ }
18373
+ .form-select:focus-visible.is-invalid {
18374
+ outline-color: #a51f2c;
18375
+ }
18376
+ .form-select:focus-visible.is-invalid:focus {
18377
+ box-shadow: none;
18378
+ border-color: #6c757d;
18379
+ }
18380
+ .form-select:focus {
18381
+ box-shadow: none;
18382
+ border-color: #6c757d;
18383
+ }
18384
+ .form-select.is-valid:focus, .form-select.is-invalid:focus {
18385
+ box-shadow: none;
18386
+ }
18387
+
18388
+ .form-check-input {
18389
+ border-color: #253ebe;
18390
+ }
18391
+ .form-check-input:focus-visible[type=radio] {
18392
+ border-radius: 50%;
18393
+ }
18394
+ .form-check-input:focus {
18395
+ border-color: #253ebe;
18396
+ box-shadow: none;
18397
+ }
18398
+ .form-check-input:focus-visible {
18399
+ outline: 2px solid #253ebe;
18400
+ box-shadow: none;
18401
+ border-radius: 4px;
18402
+ outline-offset: 1px;
18352
18403
  }
18353
18404
 
18354
18405
  .form-control {
@@ -18356,6 +18407,7 @@ em.placeholder {
18356
18407
  padding: 0.5rem 1rem;
18357
18408
  font-size: 1.25rem;
18358
18409
  border-radius: 0.3rem;
18410
+ border-color: #6c757d;
18359
18411
  }
18360
18412
  .form-control::-webkit-file-upload-button {
18361
18413
  padding: 0.5rem 1rem;
@@ -18365,11 +18417,31 @@ em.placeholder {
18365
18417
  padding: 0.5rem 1rem;
18366
18418
  margin: -0.5rem 1rem -0.5rem -1rem;
18367
18419
  }
18368
- .form-control:focus-visible {
18420
+ .form-control:focus:focus-visible {
18421
+ border-color: #6c757d;
18369
18422
  outline: 2px solid #253ebe;
18370
18423
  box-shadow: none;
18371
18424
  border-radius: 4px;
18372
- outline-offset: -1px;
18425
+ outline-offset: 2px;
18426
+ }
18427
+ .form-control.is-valid:focus, .form-control.is-invalid:focus {
18428
+ box-shadow: none;
18429
+ }
18430
+ .form-control.is-valid:focus:focus-visible {
18431
+ transition: none;
18432
+ border-color: #6c757d;
18433
+ outline: 2px solid #09854c;
18434
+ box-shadow: none;
18435
+ border-radius: 4px;
18436
+ outline-offset: 2px;
18437
+ }
18438
+ .form-control.is-invalid:focus:focus-visible {
18439
+ transition: none;
18440
+ border-color: #6c757d;
18441
+ outline: 2px solid #a51f2c;
18442
+ box-shadow: none;
18443
+ border-radius: 4px;
18444
+ outline-offset: 2px;
18373
18445
  }
18374
18446
 
18375
18447
  .form-check:not(.form-switch) {
@@ -18384,19 +18456,6 @@ em.placeholder {
18384
18456
  margin-top: 0.15rem;
18385
18457
  }
18386
18458
 
18387
- .form-check-input:focus-visible {
18388
- outline: 4px solid #253ebe;
18389
- box-shadow: none;
18390
- border-radius: 4px;
18391
- outline-offset: 0;
18392
- }
18393
- .form-check-input:focus-visible[type=radio] {
18394
- border-radius: 50%;
18395
- }
18396
- .form-check-input:checked:focus-visible {
18397
- border-color: #fff;
18398
- }
18399
-
18400
18459
  @media (min-width: 768px) {
18401
18460
  .form-check:not(.form-switch) {
18402
18461
  padding-left: 1.5rem;
@@ -18430,23 +18489,17 @@ em.placeholder {
18430
18489
  }
18431
18490
  textarea.form-control.is-invalid,
18432
18491
  .form-control.is-invalid {
18433
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
18492
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23A51F2C'/%3E%3C/svg%3E%0A");
18434
18493
  }
18435
18494
  textarea.form-control.is-valid,
18436
18495
  .form-control.is-valid {
18437
18496
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
18438
18497
  }
18439
18498
 
18440
- .form-select:not([multiple]):not([size]):focus-visible {
18441
- outline: 2px solid #253ebe;
18442
- box-shadow: none;
18443
- border-radius: 4px;
18444
- outline-offset: -1px;
18499
+ select.form-select:not([multiple]):not([size]).is-invalid {
18500
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23A51F2C'/%3E%3C/svg%3E%0A");
18445
18501
  }
18446
- .form-select:not([multiple]):not([size]).is-invalid {
18447
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
18448
- }
18449
- .form-select:not([multiple]):not([size]).is-valid {
18502
+ select.form-select:not([multiple]):not([size]).is-valid {
18450
18503
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
18451
18504
  }
18452
18505
 
@@ -19338,7 +19391,7 @@ select.multi-select {
19338
19391
  --ss-font-color: #4d4d4d;
19339
19392
  --ss-font-placeholder-color: #212529;
19340
19393
  --ss-disabled-color: #dcdee2;
19341
- --ss-border-color: #dcdee2;
19394
+ --ss-border-color: #6c757d;
19342
19395
  --ss-highlight-color: #fffb8c;
19343
19396
  --ss-success-color: #00b755;
19344
19397
  --ss-error-color: #dc3545;
@@ -19428,8 +19481,11 @@ select.multi-select {
19428
19481
  overflow: hidden;
19429
19482
  min-height: 38px;
19430
19483
  }
19431
- .ss-main.ss-2:focus {
19432
- box-shadow: 0 0 5px var(--ss-focus-color);
19484
+ .ss-main.ss-2:focus-visible {
19485
+ outline: 2px solid #253ebe;
19486
+ box-shadow: none;
19487
+ border-radius: 4px;
19488
+ outline-offset: 2px;
19433
19489
  }
19434
19490
  .ss-main.ss-2.form-select {
19435
19491
  background: none;
@@ -19712,7 +19768,10 @@ select.multi-select {
19712
19768
  vertical-align: middle;
19713
19769
  }
19714
19770
  .ss-content.ss-content-2 .ss-search input:focus {
19715
- box-shadow: 0 0 5px var(--ss-focus-color);
19771
+ outline: 2px solid #253ebe;
19772
+ box-shadow: none;
19773
+ border-radius: 4px;
19774
+ outline-offset: 2px;
19716
19775
  }
19717
19776
  .ss-content.ss-content-2 .ss-search .ss-addable {
19718
19777
  display: -ms-inline-flexbox;
@@ -19904,23 +19963,35 @@ select.multi-select {
19904
19963
  background-color: var(--ss-highlight-color);
19905
19964
  }
19906
19965
 
19907
- .ss-main.multi-select.is-invalid,
19908
- .was-validated .multi-select:invalid + .ss-main.multi-select {
19966
+ .form-select.ss-main.multi-select.is-invalid,
19967
+ .was-validated .multi-select:invalid + .form-select.ss-main.multi-select {
19909
19968
  border-color: #a51f2c;
19910
- background-position: right 1.5rem center;
19969
+ background-position: right 2.5rem center;
19911
19970
  background-repeat: no-repeat;
19971
+ padding-right: 0.5rem;
19912
19972
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
19913
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 4C7.46459 4 7.04623 4.46229 7.0995 4.99504L7.45025 8.50248C7.47849 8.78492 7.71616 9 8 9C8.28384 9 8.52151 8.78492 8.54975 8.50248L8.9005 4.99504C8.95377 4.46228 8.53541 4 8 4ZM8.00154 10C7.44926 10 7.00154 10.4477 7.00154 11C7.00154 11.5523 7.44926 12 8.00154 12C8.55383 12 9.00154 11.5523 9.00154 11C9.00154 10.4477 8.55383 10 8.00154 10Z' fill='%23D72E3D'/%3E%3C/svg%3E%0A");
19973
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23a51f2c' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
19974
+ }
19975
+ .form-select.ss-main.multi-select.is-invalid:focus-visible,
19976
+ .was-validated .multi-select:invalid + .form-select.ss-main.multi-select:focus-visible {
19977
+ border-color: #6c757d;
19978
+ outline-color: #a51f2c;
19914
19979
  }
19915
19980
 
19916
- .ss-main.multi-select.is-valid,
19917
- .was-validated .multi-select:valid + .ss-main.multi-select {
19981
+ .form-select.ss-main.multi-select.is-valid,
19982
+ .was-validated .multi-select:valid + .form-select.ss-main.multi-select {
19918
19983
  border-color: #09854c;
19919
- background-position: right 1.5rem center;
19984
+ background-position: right 2.5rem center;
19920
19985
  background-repeat: no-repeat;
19986
+ padding-right: 0.5rem;
19921
19987
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
19922
19988
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0303 4.96967C11.7374 4.67678 11.2626 4.67678 10.9697 4.96967C10.9626 4.97674 10.9559 4.98424 10.9498 4.9921L7.4774 9.41674L5.38388 7.32322C5.09098 7.03033 4.61611 7.03033 4.32322 7.32322C4.03032 7.61612 4.03032 8.09099 4.32322 8.38388L6.96966 11.0303C7.26256 11.3232 7.73743 11.3232 8.03032 11.0303C8.03685 11.0238 8.043 11.0169 8.04876 11.0097L12.041 6.01947C12.3232 5.72582 12.3196 5.25897 12.0303 4.96967Z' fill='%2328A745'/%3E%3C/svg%3E%0A");
19923
19989
  }
19990
+ .form-select.ss-main.multi-select.is-valid:focus-visible,
19991
+ .was-validated .multi-select:valid + .form-select.ss-main.multi-select:focus-visible {
19992
+ border-color: #6c757d;
19993
+ outline-color: #09854c;
19994
+ }
19924
19995
 
19925
19996
  .ss-sr-only {
19926
19997
  position: absolute;
@@ -20111,6 +20182,8 @@ ul.bcl-mega-menu__items {
20111
20182
  ul.bcl-mega-menu__items {
20112
20183
  block-size: 288px;
20113
20184
  overflow-y: auto;
20185
+ scrollbar-color: rgb(189.6, 197.1, 235.5) transparent;
20186
+ scrollbar-width: thin;
20114
20187
  }
20115
20188
  }
20116
20189
  @media (max-width: 991.98px) {
@@ -20193,32 +20266,6 @@ ul.bcl-mega-menu__items > li > button[aria-expanded=true] {
20193
20266
  background-color: #253ebe;
20194
20267
  }
20195
20268
  }
20196
- ul.bcl-mega-menu__items > li:has(> a.see-all-button) {
20197
- position: -webkit-sticky;
20198
- position: sticky;
20199
- inset-block-start: 100%;
20200
- }
20201
- ul.bcl-mega-menu__items > li > a.see-all-button {
20202
- border-top: none;
20203
- }
20204
- ul.bcl-mega-menu__items > li > a.see-all-button:after {
20205
- background: #b9c5e9;
20206
- content: "";
20207
- block-size: 1px;
20208
- inset-inline-start: 0;
20209
- position: absolute;
20210
- inset-block-start: 0;
20211
- inset-inline: 1rem;
20212
- }
20213
- ul.bcl-mega-menu__items > li > a.see-all-button > svg {
20214
- inline-size: 0.8rem;
20215
- }
20216
- ul.bcl-mega-menu__items > li > a.see-all-button > span {
20217
- text-overflow: ellipsis;
20218
- overflow: hidden;
20219
- display: block;
20220
- white-space: nowrap;
20221
- }
20222
20269
 
20223
20270
  @media (min-width: 992px) {
20224
20271
  .bcl-mega-menu__menu {
@@ -20226,6 +20273,15 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20226
20273
  padding-right: 0;
20227
20274
  }
20228
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
+ }
20229
20285
 
20230
20286
  .bcl-mega-menu__submenu {
20231
20287
  position: absolute;
@@ -20283,36 +20339,52 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20283
20339
  display: none;
20284
20340
  }
20285
20341
  }
20286
-
20287
20342
  @media (min-width: 992px) {
20288
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane {
20289
- 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;
20290
20347
  }
20291
- }
20292
- @media (max-width: 991.98px) {
20293
- .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__info,
20294
- .bcl-mega-menu__container:has(.bcl-mega-menu__second-submenu > .tab-content > .tab-pane.active) .bcl-mega-menu__first-submenu {
20295
- display: none;
20348
+ .bcl-mega-menu__submenu > .bcl-mega-menu__items > li > :is(span, a, button) {
20349
+ padding: 0.75rem 1.75rem;
20296
20350
  }
20297
20351
  }
20298
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
20299
- padding: 1rem 1rem;
20300
- margin: 0;
20301
- color: #212529;
20302
- background: rgb(233.2, 235.7, 248.5);
20303
- display: block;
20304
- font-size: 20px;
20352
+ .bcl-mega-menu__submenu .__see_all {
20353
+ border-top: 1px solid #b9c5e9;
20305
20354
  }
20306
20355
  @media (min-width: 992px) {
20307
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > .panel-title {
20308
- 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;
20309
20359
  }
20310
20360
  }
20311
- @media (min-width: 1200px) {
20312
- .bcl-mega-menu__second-submenu > .tab-content > .tab-pane > ul > li > * {
20313
- 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;
20314
20373
  }
20315
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
+ }
20316
20388
 
20317
20389
  @media (max-width: 991.98px) {
20318
20390
  .bcl-mega-menu__submenu > .__header,
@@ -20334,6 +20406,12 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20334
20406
  -webkit-transform: translateX(-50%);
20335
20407
  transform: translateX(-50%);
20336
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
+ }
20337
20415
  }
20338
20416
  @media (max-width: 767.98px) {
20339
20417
  .breadcrumb-item + .breadcrumb-item {
@@ -21135,6 +21213,10 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
21135
21213
  }
21136
21214
 
21137
21215
  /* stylelint-disable no-descending-specificity */
21216
+ .pagination {
21217
+ -ms-flex-wrap: wrap;
21218
+ flex-wrap: wrap;
21219
+ }
21138
21220
  .pagination .page-item .page-link {
21139
21221
  display: -ms-flexbox;
21140
21222
  display: flex;