@openeuropa/bcl-theme-default 0.4068.202510062345 → 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 (56) 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 +128 -26
  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/_mega-menu.scss +6 -6
  28. package/src/scss/_multiselect-2.scss +12 -0
  29. package/src/scss/_pagination-v2.scss +86 -0
  30. package/src/scss/base/_mixins.scss +9 -0
  31. package/src/scss/base/_variables.scss +3 -0
  32. package/src/scss/oe-bcl-default.scss +1 -0
  33. package/templates/bcl-base-templates/listing-page.html.twig +17 -19
  34. package/templates/bcl-contact-form/contact-form.html.twig +3 -3
  35. package/templates/bcl-content-banner/content-banner.html.twig +3 -0
  36. package/templates/bcl-dropdown/dropdown.html.twig +12 -7
  37. package/templates/bcl-event/event.html.twig +5 -5
  38. package/templates/bcl-glossary/glossary-detail.html.twig +4 -5
  39. package/templates/bcl-glossary/glossary-listing.html.twig +5 -5
  40. package/templates/bcl-group/group-landing.html.twig +5 -5
  41. package/templates/bcl-group/group.html.twig +3 -3
  42. package/templates/bcl-landing-page/landing-page.html.twig +5 -8
  43. package/templates/bcl-language-list/language-list-modal.html.twig +58 -5
  44. package/templates/bcl-modal/modal.html.twig +16 -4
  45. package/templates/bcl-navigation/navigation.html.twig +8 -0
  46. package/templates/bcl-page/page.html.twig +5 -5
  47. package/templates/bcl-pagination-v2/pagination-item.html.twig +90 -0
  48. package/templates/bcl-pagination-v2/pagination.html.twig +213 -0
  49. package/templates/bcl-person/person.html.twig +5 -5
  50. package/templates/bcl-project/project.html.twig +7 -7
  51. package/templates/bcl-project-status/project-contributions.html.twig +1 -1
  52. package/templates/bcl-search/search.html.twig +3 -3
  53. package/templates/bcl-subscription/subscription.html.twig +5 -5
  54. package/templates/{bcl-toast → bcl-toasts}/toasts.html.twig +17 -8
  55. package/templates/bcl-user/user-terms.html.twig +3 -3
  56. 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
  }
@@ -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
  }
@@ -18617,8 +18626,9 @@ a.badge:focus-within.text-bg-danger, a.badge:active.text-bg-danger, a.badge:hove
18617
18626
  background-color: rgb(140.25, 26.35, 37.4) !important;
18618
18627
  }
18619
18628
 
18620
- .badge.bg-light a,
18621
- .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 {
18622
18632
  color: #000;
18623
18633
  }
18624
18634
 
@@ -19912,6 +19922,19 @@ select.multi-select {
19912
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");
19913
19923
  }
19914
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
+
19915
19938
  /* stylelint-disable no-descending-specificity, declaration-no-important */
19916
19939
  /* -------------------------------------
19917
19940
  Design tokens & helpers
@@ -19959,16 +19982,6 @@ select.multi-select {
19959
19982
  }
19960
19983
  .bcl-mega-menu__container[class] {
19961
19984
  display: none;
19962
- z-index: var(--bcl-mega-menu-zindex);
19963
- position: absolute;
19964
- inset-block-start: 0;
19965
- inset-inline-start: 0;
19966
- inline-size: 100%;
19967
- -webkit-margin-before: 0;
19968
- margin-block-start: 0;
19969
- padding: 0;
19970
- border: 0;
19971
- border-radius: 0;
19972
19985
  }
19973
19986
  .bcl-mega-menu > [aria-expanded=true] + .bcl-mega-menu__container[class] {
19974
19987
  display: block;
@@ -19979,6 +19992,9 @@ select.multi-select {
19979
19992
  display: flex;
19980
19993
  }
19981
19994
  }
19995
+ .bcl-mega-menu__container[class] {
19996
+ z-index: var(--bcl-mega-menu-zindex);
19997
+ }
19982
19998
  @media (prefers-reduced-motion: no-preference) {
19983
19999
  .bcl-mega-menu__container[class] {
19984
20000
  transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
@@ -19997,6 +20013,17 @@ select.multi-select {
19997
20013
  pointer-events: none;
19998
20014
  }
19999
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
+ }
20000
20027
  @media (min-width: 992px) {
20001
20028
  .bcl-mega-menu__container[class] {
20002
20029
  inset-block-start: 100%;
@@ -20202,11 +20229,6 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20202
20229
 
20203
20230
  .bcl-mega-menu__submenu {
20204
20231
  position: absolute;
20205
- background: white;
20206
- display: -ms-flexbox;
20207
- display: flex;
20208
- -ms-flex-direction: column;
20209
- flex-direction: column;
20210
20232
  }
20211
20233
  @media (max-width: 991.98px) {
20212
20234
  .bcl-mega-menu__submenu {
@@ -20234,11 +20256,20 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20234
20256
  z-index: -1;
20235
20257
  }
20236
20258
  }
20259
+ .bcl-mega-menu__submenu {
20260
+ background: white;
20261
+ }
20237
20262
  @media (min-width: 992px) {
20238
20263
  .bcl-mega-menu__submenu {
20239
20264
  background: rgb(233.2, 235.7, 248.5);
20240
20265
  }
20241
20266
  }
20267
+ .bcl-mega-menu__submenu {
20268
+ display: -ms-flexbox;
20269
+ display: flex;
20270
+ -ms-flex-direction: column;
20271
+ flex-direction: column;
20272
+ }
20242
20273
  .bcl-mega-menu__submenu > .__header > .__label {
20243
20274
  padding: 1rem 1rem;
20244
20275
  margin: 0;
@@ -20849,9 +20880,6 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
20849
20880
  padding-bottom: 0;
20850
20881
  }
20851
20882
  }
20852
- .bcl-gallery {
20853
- /* lazyload */
20854
- }
20855
20883
  .bcl-gallery .bcl-gallery__thumbnails {
20856
20884
  border-radius: 0.375rem;
20857
20885
  overflow: hidden;
@@ -21003,6 +21031,9 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
21003
21031
  -o-object-fit: contain;
21004
21032
  object-fit: contain;
21005
21033
  }
21034
+ .bcl-gallery {
21035
+ /* lazyload */
21036
+ }
21006
21037
  .bcl-gallery img:not([src]):not([srcset]) {
21007
21038
  visibility: hidden;
21008
21039
  }
@@ -21164,4 +21195,75 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
21164
21195
  height: 0;
21165
21196
  }
21166
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
+ }
21167
21269
  /*# sourceMappingURL=oe-bcl-default.css.map */