@openeuropa/bcl-theme-ucpkn 1.10.7 → 1.10.8

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 (45) hide show
  1. package/css/oe-bcl-ucpkn.css +161 -96
  2. package/css/oe-bcl-ucpkn.css.map +1 -1
  3. package/css/oe-bcl-ucpkn.min.css +1 -1
  4. package/css/oe-bcl-ucpkn.min.css.map +1 -1
  5. package/icons/bcl-default-icons.svg +1 -1
  6. package/icons/bootstrap-icons.svg +1 -1
  7. package/js/oe-bcl-ucpkn.bundle.js +18 -13
  8. package/js/oe-bcl-ucpkn.bundle.js.map +1 -1
  9. package/js/oe-bcl-ucpkn.bundle.min.js +1 -1
  10. package/js/oe-bcl-ucpkn.bundle.min.js.map +1 -1
  11. package/js/oe-bcl-ucpkn.esm.js +18 -13
  12. package/js/oe-bcl-ucpkn.esm.js.map +1 -1
  13. package/js/oe-bcl-ucpkn.esm.min.js +1 -1
  14. package/js/oe-bcl-ucpkn.esm.min.js.map +1 -1
  15. package/js/oe-bcl-ucpkn.umd.js +18 -13
  16. package/js/oe-bcl-ucpkn.umd.js.map +1 -1
  17. package/js/oe-bcl-ucpkn.umd.min.js +1 -1
  18. package/js/oe-bcl-ucpkn.umd.min.js.map +1 -1
  19. package/package.json +8 -8
  20. package/src/scss/_header.scss +0 -6
  21. package/src/scss/oe-bcl-ucpkn.scss +1 -0
  22. package/templates/bcl-base-templates/listing-page.html.twig +17 -19
  23. package/templates/bcl-contact-form/contact-form.html.twig +3 -3
  24. package/templates/bcl-content-banner/content-banner.html.twig +3 -0
  25. package/templates/bcl-dropdown/dropdown.html.twig +12 -7
  26. package/templates/bcl-event/event.html.twig +5 -5
  27. package/templates/bcl-glossary/glossary-detail.html.twig +4 -5
  28. package/templates/bcl-glossary/glossary-listing.html.twig +5 -5
  29. package/templates/bcl-group/group-landing.html.twig +5 -5
  30. package/templates/bcl-group/group.html.twig +3 -3
  31. package/templates/bcl-landing-page/landing-page.html.twig +5 -8
  32. package/templates/bcl-language-list/language-list-modal.html.twig +58 -5
  33. package/templates/bcl-modal/modal.html.twig +16 -4
  34. package/templates/bcl-navigation/navigation.html.twig +8 -0
  35. package/templates/bcl-page/page.html.twig +5 -5
  36. package/templates/bcl-pagination-v2/pagination-item.html.twig +90 -0
  37. package/templates/bcl-pagination-v2/pagination.html.twig +213 -0
  38. package/templates/bcl-person/person.html.twig +5 -5
  39. package/templates/bcl-project/project.html.twig +7 -7
  40. package/templates/bcl-project-status/project-contributions.html.twig +1 -1
  41. package/templates/bcl-search/search.html.twig +3 -3
  42. package/templates/bcl-subscription/subscription.html.twig +5 -5
  43. package/templates/bcl-toast/toasts.html.twig +17 -8
  44. package/templates/bcl-user/user-terms.html.twig +3 -3
  45. 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);
@@ -8044,6 +8051,14 @@ svg {
8044
8051
  border-color: #dee2e6;
8045
8052
  }
8046
8053
 
8054
+ .border-top-subtle {
8055
+ border-top: 1px solid tint-color(#253ebe, 80%);
8056
+ }
8057
+
8058
+ .border-bottom-subtle {
8059
+ border-bottom: 1px solid tint-color(#253ebe, 80%);
8060
+ }
8061
+
8047
8062
  .grid-3-9 {
8048
8063
  -ms-grid-columns: 25% 75%;
8049
8064
  grid-template-columns: 25% 75%;
@@ -9734,7 +9749,7 @@ svg {
9734
9749
  padding-top: 1rem !important;
9735
9750
  }
9736
9751
 
9737
- .pt-4 {
9752
+ .pt-4, .pagination-v2 .pagination {
9738
9753
  padding-top: 1.5rem !important;
9739
9754
  }
9740
9755
 
@@ -10122,7 +10137,7 @@ svg {
10122
10137
  font-weight: 300 !important;
10123
10138
  }
10124
10139
 
10125
- .fw-normal {
10140
+ .fw-normal, .pagination-v2 .pagination.pagination--glossary .page-item .page-link {
10126
10141
  font-weight: 400 !important;
10127
10142
  }
10128
10143
 
@@ -10170,7 +10185,7 @@ svg {
10170
10185
  text-align: center !important;
10171
10186
  }
10172
10187
 
10173
- .text-decoration-none {
10188
+ .text-decoration-none, .pagination-v2 .pagination.pagination--glossary .page-item .page-link:hover {
10174
10189
  text-decoration: none !important;
10175
10190
  }
10176
10191
 
@@ -10543,7 +10558,7 @@ svg {
10543
10558
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
10544
10559
  }
10545
10560
 
10546
- .bg-light {
10561
+ .bg-light, .pagination-v2 .pagination.pagination--glossary .page-item .page-link:hover {
10547
10562
  --bs-bg-opacity: 1;
10548
10563
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
10549
10564
  }
@@ -10684,7 +10699,7 @@ svg {
10684
10699
  border-radius: var(--bs-border-radius-sm) !important;
10685
10700
  }
10686
10701
 
10687
- .rounded-2 {
10702
+ .rounded-2, .bcl-navbar-toggler {
10688
10703
  border-radius: var(--bs-border-radius) !important;
10689
10704
  }
10690
10705
 
@@ -17224,10 +17239,6 @@ em.placeholder {
17224
17239
  display: inline;
17225
17240
  }
17226
17241
 
17227
- .bcl-header__project {
17228
- background: linear-gradient(90deg, #039 0%, #1b4ac3 100%);
17229
- }
17230
-
17231
17242
  .bcl-header .nav-link {
17232
17243
  color: #1b4ac3;
17233
17244
  display: -ms-flexbox;
@@ -17236,14 +17247,32 @@ em.placeholder {
17236
17247
  align-items: center;
17237
17248
  }
17238
17249
 
17250
+ .bcl-navbar-toggler {
17251
+ background: transparent;
17252
+ border: none;
17253
+ border-radius: var(--bs-border-radius-sm);
17254
+ padding: 0.375rem 0.75rem;
17255
+ color: #221684;
17256
+ line-height: 1;
17257
+ }
17258
+ .bcl-navbar-toggler .active-icon {
17259
+ display: none;
17260
+ }
17261
+ .bcl-navbar-toggler[aria-expanded=true] {
17262
+ background-color: #221684;
17263
+ color: #fff;
17264
+ }
17265
+ .bcl-navbar-toggler[aria-expanded=true] .active-icon {
17266
+ display: block;
17267
+ }
17268
+ .bcl-navbar-toggler[aria-expanded=true] .default-icon {
17269
+ display: none;
17270
+ }
17271
+
17239
17272
  .bcl-header--ec,
17240
17273
  .ec__header {
17241
17274
  /* stylelint-disable-next-line no-descending-specificity */
17242
17275
  }
17243
- .bcl-header--ec .bcl-header__project,
17244
- .ec__header .bcl-header__project {
17245
- background: #004494;
17246
- }
17247
17276
  .bcl-header--ec .nav-link,
17248
17277
  .ec__header .nav-link {
17249
17278
  color: #17458f;
@@ -17254,17 +17283,6 @@ em.placeholder {
17254
17283
  align-items: flex-end;
17255
17284
  }
17256
17285
 
17257
- .bcl-header--neutral .bcl-header__project {
17258
- background: #495057;
17259
- }
17260
-
17261
- .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
17262
- padding-top: 1rem;
17263
- }
17264
-
17265
- .bcl-header .navbar-brand img {
17266
- width: 100px;
17267
- }
17268
17286
  .bcl-header .notification {
17269
17287
  position: relative;
17270
17288
  padding-right: 0;
@@ -17280,16 +17298,6 @@ em.placeholder {
17280
17298
  transform: translate(-11px, 5px);
17281
17299
  }
17282
17300
 
17283
- .bcl-header__project .bcl-header__site-name {
17284
- display: inline-block;
17285
- margin-bottom: 0;
17286
- font-size: 1.3rem;
17287
- font-weight: 300;
17288
- color: #fff;
17289
- vertical-align: middle;
17290
- max-width: 80%;
17291
- }
17292
-
17293
17301
  .bcl-header__navbar.navbar {
17294
17302
  padding: 0;
17295
17303
  }
@@ -17303,11 +17311,6 @@ em.placeholder {
17303
17311
  transition: none;
17304
17312
  }
17305
17313
 
17306
- @media only screen and (max-width: 400px) {
17307
- .bcl-header--neutral .bcl-header__project-logo {
17308
- display: none;
17309
- }
17310
- }
17311
17314
  @media (min-width: 768px) {
17312
17315
  .bcl-header--ec .navbar-brand img,
17313
17316
  .ec__header .navbar-brand img {
@@ -17338,17 +17341,7 @@ em.placeholder {
17338
17341
  header:has(.bcl-header__navbar.show) > div:has(.breadcrumb) {
17339
17342
  display: none;
17340
17343
  }
17341
- .bcl-header__project {
17342
- padding: 1rem 0;
17343
- }
17344
- .bcl-header .bcl-header__project {
17345
- z-index: 1040;
17346
- position: relative;
17347
- box-shadow: var(--bs-box-shadow);
17348
- -ms-flex-negative: 0;
17349
- flex-shrink: 0;
17350
- }
17351
- .bcl-header:not(:has(.bcl-header__project)) > .navbar:first-child {
17344
+ .bcl-header {
17352
17345
  box-shadow: var(--bs-box-shadow);
17353
17346
  }
17354
17347
  .bcl-header nav + nav {
@@ -17426,11 +17419,6 @@ em.placeholder {
17426
17419
  }
17427
17420
  }
17428
17421
  @media (min-width: 992px) {
17429
- .bcl-header__project.light,
17430
- .bcl-header--ec .bcl-header__project.light,
17431
- .ec__header .bcl-header__project.light {
17432
- background: #fff;
17433
- }
17434
17422
  .bcl-header__navbar {
17435
17423
  background: linear-gradient(90deg, #039 0%, #1b4ac3 100%);
17436
17424
  }
@@ -17445,27 +17433,14 @@ em.placeholder {
17445
17433
  .bcl-header--neutral .bcl-header__navbar {
17446
17434
  background: #495057;
17447
17435
  }
17448
- .bcl-header__site-name {
17449
- margin-left: 1.5rem;
17450
- font-weight: 500;
17451
- }
17452
- .bcl-header__project.light .bcl-header__site-name {
17453
- color: #000;
17454
- }
17455
17436
  .bcl-header .navbar-toggler {
17456
17437
  position: relative;
17457
17438
  right: 0;
17458
17439
  bottom: 0;
17459
17440
  }
17460
- .bcl-header .navbar-brand img {
17461
- width: auto;
17462
- }
17463
17441
  .bcl-header__navbar .bcl-mega-menu {
17464
17442
  --bcl-mega-menu-zindex: 1050;
17465
17443
  }
17466
- .bcl-header:not(.bcl-header--neutral) .bcl-header__project {
17467
- padding-bottom: 1rem;
17468
- }
17469
17444
  .bcl-header__navbar.collapse {
17470
17445
  display: block;
17471
17446
  }
@@ -17861,12 +17836,14 @@ dd + dd {
17861
17836
  white-space: nowrap;
17862
17837
  scrollbar-width: none;
17863
17838
  -ms-overflow-style: none;
17864
- border: none;
17865
17839
  }
17866
17840
  .nav-tabs::-webkit-scrollbar {
17867
17841
  width: 0;
17868
17842
  height: 0;
17869
17843
  }
17844
+ .nav-tabs {
17845
+ border: none;
17846
+ }
17870
17847
  .nav-tabs .nav-item {
17871
17848
  z-index: 1;
17872
17849
  }
@@ -18171,8 +18148,9 @@ a.badge:focus-within.text-bg-danger, a.badge:active.text-bg-danger, a.badge:hove
18171
18148
  background-color: rgb(156.4, 34, 35.7) !important;
18172
18149
  }
18173
18150
 
18174
- .badge.bg-light a,
18175
- .badge.bg-light {
18151
+ .badge.bg-light a, .pagination-v2 .pagination.pagination--glossary .page-item .badge.page-link:hover a,
18152
+ .badge.bg-light,
18153
+ .pagination-v2 .pagination.pagination--glossary .page-item .badge.page-link:hover {
18176
18154
  color: #000;
18177
18155
  }
18178
18156
 
@@ -19466,6 +19444,19 @@ select.multi-select {
19466
19444
  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");
19467
19445
  }
19468
19446
 
19447
+ .ss-sr-only {
19448
+ position: absolute;
19449
+ width: 1px;
19450
+ height: 1px;
19451
+ margin: -1px;
19452
+ padding: 0;
19453
+ border: 0;
19454
+ clip: rect(0, 0, 0, 0);
19455
+ -webkit-clip-path: inset(50%);
19456
+ clip-path: inset(50%);
19457
+ overflow: hidden;
19458
+ }
19459
+
19469
19460
  /* stylelint-disable no-descending-specificity, declaration-no-important */
19470
19461
  /* -------------------------------------
19471
19462
  Design tokens & helpers
@@ -19513,16 +19504,6 @@ select.multi-select {
19513
19504
  }
19514
19505
  .bcl-mega-menu__container[class] {
19515
19506
  display: none;
19516
- z-index: var(--bcl-mega-menu-zindex);
19517
- position: absolute;
19518
- inset-block-start: 0;
19519
- inset-inline-start: 0;
19520
- inline-size: 100%;
19521
- -webkit-margin-before: 0;
19522
- margin-block-start: 0;
19523
- padding: 0;
19524
- border: 0;
19525
- border-radius: 0;
19526
19507
  }
19527
19508
  .bcl-mega-menu > [aria-expanded=true] + .bcl-mega-menu__container[class] {
19528
19509
  display: block;
@@ -19533,6 +19514,9 @@ select.multi-select {
19533
19514
  display: flex;
19534
19515
  }
19535
19516
  }
19517
+ .bcl-mega-menu__container[class] {
19518
+ z-index: var(--bcl-mega-menu-zindex);
19519
+ }
19536
19520
  @media (prefers-reduced-motion: no-preference) {
19537
19521
  .bcl-mega-menu__container[class] {
19538
19522
  transition: opacity 0.15s ease, -webkit-transform 0.15s ease;
@@ -19551,6 +19535,17 @@ select.multi-select {
19551
19535
  pointer-events: none;
19552
19536
  }
19553
19537
  }
19538
+ .bcl-mega-menu__container[class] {
19539
+ position: absolute;
19540
+ inset-block-start: 0;
19541
+ inset-inline-start: 0;
19542
+ inline-size: 100%;
19543
+ -webkit-margin-before: 0;
19544
+ margin-block-start: 0;
19545
+ padding: 0;
19546
+ border: 0;
19547
+ border-radius: 0;
19548
+ }
19554
19549
  @media (min-width: 992px) {
19555
19550
  .bcl-mega-menu__container[class] {
19556
19551
  inset-block-start: 100%;
@@ -19756,11 +19751,6 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
19756
19751
 
19757
19752
  .bcl-mega-menu__submenu {
19758
19753
  position: absolute;
19759
- background: white;
19760
- display: -ms-flexbox;
19761
- display: flex;
19762
- -ms-flex-direction: column;
19763
- flex-direction: column;
19764
19754
  }
19765
19755
  @media (max-width: 991.98px) {
19766
19756
  .bcl-mega-menu__submenu {
@@ -19788,11 +19778,20 @@ ul.bcl-mega-menu__items > li > a.see-all-button > span {
19788
19778
  z-index: -1;
19789
19779
  }
19790
19780
  }
19781
+ .bcl-mega-menu__submenu {
19782
+ background: white;
19783
+ }
19791
19784
  @media (min-width: 992px) {
19792
19785
  .bcl-mega-menu__submenu {
19793
19786
  background: tint-color(#253ebe, 90%);
19794
19787
  }
19795
19788
  }
19789
+ .bcl-mega-menu__submenu {
19790
+ display: -ms-flexbox;
19791
+ display: flex;
19792
+ -ms-flex-direction: column;
19793
+ flex-direction: column;
19794
+ }
19796
19795
  .bcl-mega-menu__submenu > .__header > .__label {
19797
19796
  padding: 1rem 1rem;
19798
19797
  margin: 0;
@@ -20849,9 +20848,6 @@ Due to the split circle of progress-left and progress right, we must use the ani
20849
20848
  padding-bottom: 0;
20850
20849
  }
20851
20850
  }
20852
- .bcl-gallery {
20853
- /* lazyload */
20854
- }
20855
20851
  .bcl-gallery .bcl-gallery__thumbnails {
20856
20852
  border-radius: 0.375rem;
20857
20853
  overflow: hidden;
@@ -21003,6 +20999,9 @@ Due to the split circle of progress-left and progress right, we must use the ani
21003
20999
  -o-object-fit: contain;
21004
21000
  object-fit: contain;
21005
21001
  }
21002
+ .bcl-gallery {
21003
+ /* lazyload */
21004
+ }
21006
21005
  .bcl-gallery img:not([src]):not([srcset]) {
21007
21006
  visibility: hidden;
21008
21007
  }
@@ -21164,14 +21163,80 @@ Due to the split circle of progress-left and progress right, we must use the ani
21164
21163
  height: 0;
21165
21164
  }
21166
21165
  }
21166
+ .pagination-v2.pager .pagination {
21167
+ --bs-border-color: transparent;
21168
+ }
21169
+ .pagination-v2 .pagination {
21170
+ --bs-pagination-border-color: transparent;
21171
+ --bs-pagination-disabled-border-color: transparent;
21172
+ --bs-pagination-item-size: 2.75rem;
21173
+ --bs-pagination-hover-bg: #221684;
21174
+ --bs-pagination-hover-color: #fff;
21175
+ border-top: 1px solid #ced4da;
21176
+ }
21177
+ .pagination-v2 .pagination .page-item .page-link {
21178
+ display: -ms-inline-flexbox;
21179
+ display: inline-flex;
21180
+ -ms-flex-align: center;
21181
+ align-items: center;
21182
+ -ms-flex-pack: center;
21183
+ justify-content: center;
21184
+ min-width: var(--bs-pagination-item-size);
21185
+ min-height: var(--bs-pagination-item-size);
21186
+ text-decoration: none;
21187
+ }
21188
+ .pagination-v2 .pagination .page-item .page-link:is(div):hover {
21189
+ background-color: transparent;
21190
+ border-color: transparent;
21191
+ color: #221684;
21192
+ }
21193
+ .pagination-v2 .pagination .page-item.active .page-link {
21194
+ cursor: default;
21195
+ --bs-pagination-active-bg: #221684;
21196
+ --bs-pagination-active-color: #fff;
21197
+ }
21198
+ .pagination-v2 .pagination .page-item.active .page-link:active, .pagination-v2 .pagination .page-item.active .page-link:hover {
21199
+ --bs-pagination-active-bg: #221684;
21200
+ color: var(--bs-pagination-active-color);
21201
+ background-color: var(--bs-pagination-active-bg);
21202
+ }
21203
+ @media (max-width: 767.98px) {
21204
+ .pagination-v2 .pagination .page-item.active .page-link:active, .pagination-v2 .pagination .page-item.active .page-link:hover {
21205
+ --bs-pagination-active-bg: $white;
21206
+ --bs-pagination-active-color: $dark;
21207
+ --bs-pagination-active-border-color: transparent;
21208
+ }
21209
+ }
21210
+ @media (max-width: 767.98px) {
21211
+ .pagination-v2 .pagination .page-item.active .page-link {
21212
+ --bs-pagination-active-bg: $white;
21213
+ --bs-pagination-active-color: $dark;
21214
+ --bs-pagination-active-border-color: transparent;
21215
+ }
21216
+ }
21217
+ .pagination-v2 .pagination.pagination--glossary .page-item {
21218
+ margin-right: inherit;
21219
+ }
21220
+ .pagination-v2 .pagination.pagination--glossary .page-item .page-link {
21221
+ border: 1px solid #ced4da;
21222
+ padding: 0.375rem 0.75rem;
21223
+ }
21224
+ .pagination-v2 .pagination.pagination--glossary .page-item .page-link:focus, .pagination-v2 .pagination.pagination--glossary .page-item .page-link:focus-visible {
21225
+ box-shadow: none;
21226
+ outline: 2px solid #221684;
21227
+ outline-offset: 2px;
21228
+ }
21229
+ .pagination-v2 {
21230
+ /* Outline the group when any pager control is focused for keyboard users. */
21231
+ }
21232
+ .pagination-v2 .pager__items:focus-within {
21233
+ outline: 2px solid currentColor;
21234
+ outline-offset: 2px;
21235
+ border-radius: 6px;
21236
+ }
21237
+
21167
21238
  .bcl-header .navbar-toggler {
21168
21239
  left: auto;
21169
21240
  right: 14px;
21170
21241
  }
21171
-
21172
- @media (max-width: 991.98px) {
21173
- .bcl-header__site-name {
21174
- margin-left: 0;
21175
- }
21176
- }
21177
21242
  /*# sourceMappingURL=oe-bcl-ucpkn.css.map */