@openeuropa/bcl-theme-default 0.4068.202509021515 → 0.4298.202511051800

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 (59) hide show
  1. package/bcl-builder.config.js +3 -0
  2. package/css/color-scheme.min.css +1 -1
  3. package/css/color-scheme.min.css.map +1 -1
  4. package/css/oe-bcl-ckeditor5.min.css +1 -1
  5. package/css/oe-bcl-ckeditor5.min.css.map +1 -1
  6. package/css/oe-bcl-default.css +136 -45
  7. package/css/oe-bcl-default.css.map +1 -1
  8. package/css/oe-bcl-default.min.css +1 -1
  9. package/css/oe-bcl-default.min.css.map +1 -1
  10. package/icons/bcl-default-icons.svg +1 -1
  11. package/icons/bootstrap-icons.svg +1 -1
  12. package/js/oe-bcl-default.bundle.js +18 -13
  13. package/js/oe-bcl-default.bundle.js.map +1 -1
  14. package/js/oe-bcl-default.bundle.min.js +1 -1
  15. package/js/oe-bcl-default.bundle.min.js.map +1 -1
  16. package/js/oe-bcl-default.esm.js +18 -13
  17. package/js/oe-bcl-default.esm.js.map +1 -1
  18. package/js/oe-bcl-default.esm.min.js +1 -1
  19. package/js/oe-bcl-default.esm.min.js.map +1 -1
  20. package/js/oe-bcl-default.umd.js +18 -13
  21. package/js/oe-bcl-default.umd.js.map +1 -1
  22. package/js/oe-bcl-default.umd.min.js +1 -1
  23. package/js/oe-bcl-default.umd.min.js.map +1 -1
  24. package/js/slim-select-2/slimselect.min.js +1 -1
  25. package/package.json +8 -8
  26. package/src/js/accordion-toggle/accordion-toggle.js +24 -9
  27. package/src/scss/_header.scss +8 -10
  28. package/src/scss/_icon.scss +0 -10
  29. package/src/scss/_mega-menu.scss +6 -6
  30. package/src/scss/_multiselect-2.scss +12 -0
  31. package/src/scss/_pagination-v2.scss +86 -0
  32. package/src/scss/base/_mixins.scss +9 -0
  33. package/src/scss/base/_variables.scss +3 -0
  34. package/src/scss/oe-bcl-default.scss +1 -0
  35. package/templates/bcl-base-templates/listing-page.html.twig +17 -19
  36. package/templates/bcl-contact-form/contact-form.html.twig +3 -3
  37. package/templates/bcl-content-banner/content-banner.html.twig +3 -0
  38. package/templates/bcl-dropdown/dropdown.html.twig +12 -7
  39. package/templates/bcl-event/event.html.twig +5 -5
  40. package/templates/bcl-glossary/glossary-detail.html.twig +4 -5
  41. package/templates/bcl-glossary/glossary-listing.html.twig +5 -5
  42. package/templates/bcl-group/group-landing.html.twig +5 -5
  43. package/templates/bcl-group/group.html.twig +3 -3
  44. package/templates/bcl-icon/icon.html.twig +1 -1
  45. package/templates/bcl-landing-page/landing-page.html.twig +5 -8
  46. package/templates/bcl-language-list/language-list-modal.html.twig +58 -5
  47. package/templates/bcl-modal/modal.html.twig +16 -4
  48. package/templates/bcl-navigation/navigation.html.twig +8 -0
  49. package/templates/bcl-page/page.html.twig +5 -5
  50. package/templates/bcl-pagination-v2/pagination-item.html.twig +90 -0
  51. package/templates/bcl-pagination-v2/pagination.html.twig +213 -0
  52. package/templates/bcl-person/person.html.twig +5 -5
  53. package/templates/bcl-project/project.html.twig +7 -7
  54. package/templates/bcl-project-status/project-contributions.html.twig +1 -1
  55. package/templates/bcl-search/search.html.twig +3 -3
  56. package/templates/bcl-subscription/subscription.html.twig +5 -5
  57. package/templates/{bcl-toast → bcl-toasts}/toasts.html.twig +17 -8
  58. package/templates/bcl-user/user-terms.html.twig +3 -3
  59. package/templates/bcl-user/user.html.twig +3 -3
@@ -542,6 +542,11 @@ legend + * {
542
542
  -webkit-appearance: textfield;
543
543
  outline-offset: -2px;
544
544
  }
545
+ [type=search]::-webkit-search-cancel-button {
546
+ cursor: pointer;
547
+ -webkit-filter: grayscale(1);
548
+ filter: grayscale(1);
549
+ }
545
550
 
546
551
  /* rtl:raw:
547
552
  [type="tel"],
@@ -5310,7 +5315,7 @@ textarea.form-control-lg {
5310
5315
  --bs-pagination-color: var(--bs-link-color);
5311
5316
  --bs-pagination-bg: var(--bs-body-bg);
5312
5317
  --bs-pagination-border-width: var(--bs-border-width);
5313
- --bs-pagination-border-color: var(--bs-border-color);
5318
+ --bs-pagination-border-color: #ced4da;
5314
5319
  --bs-pagination-border-radius: var(--bs-border-radius);
5315
5320
  --bs-pagination-hover-color: var(--bs-link-hover-color);
5316
5321
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
@@ -6922,6 +6927,8 @@ textarea.form-control-lg {
6922
6927
  .spinner-grow,
6923
6928
  .spinner-border {
6924
6929
  display: inline-block;
6930
+ -ms-flex-negative: 0;
6931
+ flex-shrink: 0;
6925
6932
  width: var(--bs-spinner-width);
6926
6933
  height: var(--bs-spinner-height);
6927
6934
  vertical-align: var(--bs-spinner-vertical-align);
@@ -9742,7 +9749,7 @@ svg {
9742
9749
  padding-top: 1rem !important;
9743
9750
  }
9744
9751
 
9745
- .pt-4 {
9752
+ .pt-4, .pagination-v2 .pagination {
9746
9753
  padding-top: 1.5rem !important;
9747
9754
  }
9748
9755
 
@@ -10130,7 +10137,7 @@ svg {
10130
10137
  font-weight: 300 !important;
10131
10138
  }
10132
10139
 
10133
- .fw-normal {
10140
+ .fw-normal, .pagination-v2 .pagination.pagination--glossary .page-item .page-link {
10134
10141
  font-weight: 400 !important;
10135
10142
  }
10136
10143
 
@@ -10178,7 +10185,7 @@ svg {
10178
10185
  text-align: center !important;
10179
10186
  }
10180
10187
 
10181
- .text-decoration-none {
10188
+ .text-decoration-none, .pagination-v2 .pagination.pagination--glossary .page-item .page-link:hover {
10182
10189
  text-decoration: none !important;
10183
10190
  }
10184
10191
 
@@ -10551,7 +10558,7 @@ svg {
10551
10558
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
10552
10559
  }
10553
10560
 
10554
- .bg-light {
10561
+ .bg-light, .pagination-v2 .pagination.pagination--glossary .page-item .page-link:hover {
10555
10562
  --bs-bg-opacity: 1;
10556
10563
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
10557
10564
  }
@@ -10692,7 +10699,7 @@ svg {
10692
10699
  border-radius: var(--bs-border-radius-sm) !important;
10693
10700
  }
10694
10701
 
10695
- .rounded-2 {
10702
+ .rounded-2, .bcl-navbar-toggler {
10696
10703
  border-radius: var(--bs-border-radius) !important;
10697
10704
  }
10698
10705
 
@@ -17759,13 +17766,17 @@ em.placeholder {
17759
17766
  .bcl-navbar-toggler {
17760
17767
  background: transparent;
17761
17768
  border: none;
17762
- padding: 0.5rem;
17769
+ border-radius: var(--bs-border-radius-sm);
17770
+ padding: 0.375rem 0.75rem;
17771
+ color: #253ebe;
17772
+ line-height: 1;
17763
17773
  }
17764
17774
  .bcl-navbar-toggler .active-icon {
17765
17775
  display: none;
17766
17776
  }
17767
17777
  .bcl-navbar-toggler[aria-expanded=true] {
17768
- background-color: rgb(233.2, 235.7, 248.5);
17778
+ background-color: #253ebe;
17779
+ color: #fff;
17769
17780
  }
17770
17781
  .bcl-navbar-toggler[aria-expanded=true] .active-icon {
17771
17782
  display: block;
@@ -17846,7 +17857,7 @@ em.placeholder {
17846
17857
  header:has(.bcl-header__navbar.show) > div:has(.breadcrumb) {
17847
17858
  display: none;
17848
17859
  }
17849
- .bcl-header > .navbar:first-child {
17860
+ .bcl-header {
17850
17861
  box-shadow: var(--bs-box-shadow);
17851
17862
  }
17852
17863
  .bcl-header nav + nav {
@@ -17938,10 +17949,6 @@ em.placeholder {
17938
17949
  .bcl-header--neutral .bcl-header__navbar {
17939
17950
  background: #495057;
17940
17951
  }
17941
- .bcl-header__site-name {
17942
- margin-left: 1.5rem;
17943
- font-weight: 500;
17944
- }
17945
17952
  .bcl-header .navbar-toggler {
17946
17953
  position: relative;
17947
17954
  right: 0;
@@ -18187,12 +18194,14 @@ em.placeholder {
18187
18194
  white-space: nowrap;
18188
18195
  scrollbar-width: none;
18189
18196
  -ms-overflow-style: none;
18190
- border: none;
18191
18197
  }
18192
18198
  .nav-tabs::-webkit-scrollbar {
18193
18199
  width: 0;
18194
18200
  height: 0;
18195
18201
  }
18202
+ .nav-tabs {
18203
+ border: none;
18204
+ }
18196
18205
  .nav-tabs .nav-item {
18197
18206
  z-index: 1;
18198
18207
  }
@@ -18277,17 +18286,6 @@ em.placeholder {
18277
18286
  color: #6c757d;
18278
18287
  }
18279
18288
 
18280
- .icon--mobile-m-desktop-xs {
18281
- width: 1.5rem;
18282
- height: 1.5rem;
18283
- }
18284
- @media (min-width: 1200px) {
18285
- .icon--mobile-m-desktop-xs {
18286
- width: 1rem;
18287
- height: 1rem;
18288
- }
18289
- }
18290
-
18291
18289
  .bcl-search-form .bcl-search-form__input[type=search]::-webkit-search-cancel-button {
18292
18290
  width: 1rem;
18293
18291
  height: 1rem;
@@ -18628,8 +18626,9 @@ a.badge:focus-within.text-bg-danger, a.badge:active.text-bg-danger, a.badge:hove
18628
18626
  background-color: rgb(140.25, 26.35, 37.4) !important;
18629
18627
  }
18630
18628
 
18631
- .badge.bg-light a,
18632
- .badge.bg-light {
18629
+ .badge.bg-light a, .pagination-v2 .pagination.pagination--glossary .page-item .badge.page-link:hover a,
18630
+ .badge.bg-light,
18631
+ .pagination-v2 .pagination.pagination--glossary .page-item .badge.page-link:hover {
18633
18632
  color: #000;
18634
18633
  }
18635
18634
 
@@ -19923,6 +19922,19 @@ select.multi-select {
19923
19922
  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");
19924
19923
  }
19925
19924
 
19925
+ .ss-sr-only {
19926
+ position: absolute;
19927
+ width: 1px;
19928
+ height: 1px;
19929
+ margin: -1px;
19930
+ padding: 0;
19931
+ border: 0;
19932
+ clip: rect(0, 0, 0, 0);
19933
+ -webkit-clip-path: inset(50%);
19934
+ clip-path: inset(50%);
19935
+ overflow: hidden;
19936
+ }
19937
+
19926
19938
  /* stylelint-disable no-descending-specificity, declaration-no-important */
19927
19939
  /* -------------------------------------
19928
19940
  Design tokens & helpers
@@ -19970,16 +19982,6 @@ select.multi-select {
19970
19982
  }
19971
19983
  .bcl-mega-menu__container[class] {
19972
19984
  display: none;
19973
- z-index: var(--bcl-mega-menu-zindex);
19974
- position: absolute;
19975
- inset-block-start: 0;
19976
- inset-inline-start: 0;
19977
- inline-size: 100%;
19978
- -webkit-margin-before: 0;
19979
- margin-block-start: 0;
19980
- padding: 0;
19981
- border: 0;
19982
- border-radius: 0;
19983
19985
  }
19984
19986
  .bcl-mega-menu > [aria-expanded=true] + .bcl-mega-menu__container[class] {
19985
19987
  display: block;
@@ -19990,6 +19992,9 @@ select.multi-select {
19990
19992
  display: flex;
19991
19993
  }
19992
19994
  }
19995
+ .bcl-mega-menu__container[class] {
19996
+ z-index: var(--bcl-mega-menu-zindex);
19997
+ }
19993
19998
  @media (prefers-reduced-motion: no-preference) {
19994
19999
  .bcl-mega-menu__container[class] {
19995
20000
  transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
@@ -20008,6 +20013,17 @@ select.multi-select {
20008
20013
  pointer-events: none;
20009
20014
  }
20010
20015
  }
20016
+ .bcl-mega-menu__container[class] {
20017
+ position: absolute;
20018
+ inset-block-start: 0;
20019
+ inset-inline-start: 0;
20020
+ inline-size: 100%;
20021
+ -webkit-margin-before: 0;
20022
+ margin-block-start: 0;
20023
+ padding: 0;
20024
+ border: 0;
20025
+ border-radius: 0;
20026
+ }
20011
20027
  @media (min-width: 992px) {
20012
20028
  .bcl-mega-menu__container[class] {
20013
20029
  inset-block-start: 100%;
@@ -20213,11 +20229,6 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20213
20229
 
20214
20230
  .bcl-mega-menu__submenu {
20215
20231
  position: absolute;
20216
- background: white;
20217
- display: -ms-flexbox;
20218
- display: flex;
20219
- -ms-flex-direction: column;
20220
- flex-direction: column;
20221
20232
  }
20222
20233
  @media (max-width: 991.98px) {
20223
20234
  .bcl-mega-menu__submenu {
@@ -20245,11 +20256,20 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20245
20256
  z-index: -1;
20246
20257
  }
20247
20258
  }
20259
+ .bcl-mega-menu__submenu {
20260
+ background: white;
20261
+ }
20248
20262
  @media (min-width: 992px) {
20249
20263
  .bcl-mega-menu__submenu {
20250
20264
  background: rgb(233.2, 235.7, 248.5);
20251
20265
  }
20252
20266
  }
20267
+ .bcl-mega-menu__submenu {
20268
+ display: -ms-flexbox;
20269
+ display: flex;
20270
+ -ms-flex-direction: column;
20271
+ flex-direction: column;
20272
+ }
20253
20273
  .bcl-mega-menu__submenu > .__header > .__label {
20254
20274
  padding: 1rem 1rem;
20255
20275
  margin: 0;
@@ -20860,9 +20880,6 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20860
20880
  padding-bottom: 0;
20861
20881
  }
20862
20882
  }
20863
- .bcl-gallery {
20864
- /* lazyload */
20865
- }
20866
20883
  .bcl-gallery .bcl-gallery__thumbnails {
20867
20884
  border-radius: 0.375rem;
20868
20885
  overflow: hidden;
@@ -21014,6 +21031,9 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
21014
21031
  -o-object-fit: contain;
21015
21032
  object-fit: contain;
21016
21033
  }
21034
+ .bcl-gallery {
21035
+ /* lazyload */
21036
+ }
21017
21037
  .bcl-gallery img:not([src]):not([srcset]) {
21018
21038
  visibility: hidden;
21019
21039
  }
@@ -21175,4 +21195,75 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
21175
21195
  height: 0;
21176
21196
  }
21177
21197
  }
21198
+ .pagination-v2.pager .pagination {
21199
+ --bs-border-color: transparent;
21200
+ }
21201
+ .pagination-v2 .pagination {
21202
+ --bs-pagination-border-color: transparent;
21203
+ --bs-pagination-disabled-border-color: transparent;
21204
+ --bs-pagination-item-size: 2.75rem;
21205
+ --bs-pagination-hover-bg: #253ebe;
21206
+ --bs-pagination-hover-color: #fff;
21207
+ border-top: 1px solid #ced4da;
21208
+ }
21209
+ .pagination-v2 .pagination .page-item .page-link {
21210
+ display: -ms-inline-flexbox;
21211
+ display: inline-flex;
21212
+ -ms-flex-align: center;
21213
+ align-items: center;
21214
+ -ms-flex-pack: center;
21215
+ justify-content: center;
21216
+ min-width: var(--bs-pagination-item-size);
21217
+ min-height: var(--bs-pagination-item-size);
21218
+ text-decoration: none;
21219
+ }
21220
+ .pagination-v2 .pagination .page-item .page-link:is(div):hover {
21221
+ background-color: transparent;
21222
+ border-color: transparent;
21223
+ color: #253ebe;
21224
+ }
21225
+ .pagination-v2 .pagination .page-item.active .page-link {
21226
+ cursor: default;
21227
+ --bs-pagination-active-bg: #253ebe;
21228
+ --bs-pagination-active-color: #fff;
21229
+ }
21230
+ .pagination-v2 .pagination .page-item.active .page-link:active, .pagination-v2 .pagination .page-item.active .page-link:hover {
21231
+ --bs-pagination-active-bg: #253ebe;
21232
+ color: var(--bs-pagination-active-color);
21233
+ background-color: var(--bs-pagination-active-bg);
21234
+ }
21235
+ @media (max-width: 767.98px) {
21236
+ .pagination-v2 .pagination .page-item.active .page-link:active, .pagination-v2 .pagination .page-item.active .page-link:hover {
21237
+ --bs-pagination-active-bg: $white;
21238
+ --bs-pagination-active-color: $dark;
21239
+ --bs-pagination-active-border-color: transparent;
21240
+ }
21241
+ }
21242
+ @media (max-width: 767.98px) {
21243
+ .pagination-v2 .pagination .page-item.active .page-link {
21244
+ --bs-pagination-active-bg: $white;
21245
+ --bs-pagination-active-color: $dark;
21246
+ --bs-pagination-active-border-color: transparent;
21247
+ }
21248
+ }
21249
+ .pagination-v2 .pagination.pagination--glossary .page-item {
21250
+ margin-right: inherit;
21251
+ }
21252
+ .pagination-v2 .pagination.pagination--glossary .page-item .page-link {
21253
+ border: 1px solid #ced4da;
21254
+ padding: 0.375rem 0.75rem;
21255
+ }
21256
+ .pagination-v2 .pagination.pagination--glossary .page-item .page-link:focus, .pagination-v2 .pagination.pagination--glossary .page-item .page-link:focus-visible {
21257
+ box-shadow: none;
21258
+ outline: 2px solid #253ebe;
21259
+ outline-offset: 2px;
21260
+ }
21261
+ .pagination-v2 {
21262
+ /* Outline the group when any pager control is focused for keyboard users. */
21263
+ }
21264
+ .pagination-v2 .pager__items:focus-within {
21265
+ outline: 2px solid currentColor;
21266
+ outline-offset: 2px;
21267
+ border-radius: 6px;
21268
+ }
21178
21269
  /*# sourceMappingURL=oe-bcl-default.css.map */