@openeuropa/bcl-theme-default 0.4185.202511191330 → 0.4230.202512021730

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 (78) 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 +149 -83
  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/package.json +5 -5
  8. package/src/scss/_header.scss +1 -1
  9. package/src/scss/_input.scss +72 -31
  10. package/src/scss/_mega-menu.scss +58 -47
  11. package/src/scss/_multiselect-2.scss +21 -11
  12. package/src/scss/_search-form.scss +4 -0
  13. package/src/scss/base/_mixins.scss +12 -0
  14. package/templates/bcl-accordion/accordion.html.twig +0 -3
  15. package/templates/bcl-alert/alert.html.twig +0 -3
  16. package/templates/bcl-badge/badge.html.twig +0 -3
  17. package/templates/bcl-banner/banner.html.twig +0 -3
  18. package/templates/bcl-base-templates/content-type.html.twig +0 -3
  19. package/templates/bcl-blockquote/blockquote.html.twig +0 -3
  20. package/templates/bcl-breadcrumb/breadcrumb.html.twig +0 -3
  21. package/templates/bcl-button/button.html.twig +0 -3
  22. package/templates/bcl-button-group/button-group.html.twig +0 -3
  23. package/templates/bcl-card/card.html.twig +0 -3
  24. package/templates/bcl-card-layout/card-layout.html.twig +0 -3
  25. package/templates/bcl-carousel/carousel.html.twig +0 -3
  26. package/templates/bcl-content-banner/content-banner.html.twig +0 -3
  27. package/templates/bcl-date-block/date-block.html.twig +0 -3
  28. package/templates/bcl-description-list/description-list-details.html.twig +0 -3
  29. package/templates/bcl-description-list/description-list-title.html.twig +0 -3
  30. package/templates/bcl-description-list/description-list.html.twig +0 -3
  31. package/templates/bcl-dropdown/dropdown.html.twig +0 -3
  32. package/templates/bcl-fact-figures/fact-figures.html.twig +0 -3
  33. package/templates/bcl-featured-media/featured-media.html.twig +0 -3
  34. package/templates/bcl-file/file-translations.html.twig +0 -3
  35. package/templates/bcl-file/file.html.twig +0 -3
  36. package/templates/bcl-footer/footer.html.twig +0 -3
  37. package/templates/bcl-form/form.html.twig +0 -3
  38. package/templates/bcl-form-input/form-input.html.twig +0 -3
  39. package/templates/bcl-gallery/gallery-item.html.twig +0 -3
  40. package/templates/bcl-gallery/gallery.html.twig +0 -3
  41. package/templates/bcl-header/header.html.twig +42 -10
  42. package/templates/bcl-heading/heading.html.twig +0 -3
  43. package/templates/bcl-icon/icon.html.twig +0 -3
  44. package/templates/bcl-inpage-navigation/inpage-navigation.html.twig +0 -3
  45. package/templates/bcl-language-list/language-list-grid.html.twig +0 -3
  46. package/templates/bcl-language-list/language-list.html.twig +0 -3
  47. package/templates/bcl-language-switcher/language-switcher.html.twig +0 -3
  48. package/templates/bcl-link/link.html.twig +0 -3
  49. package/templates/bcl-links-block/links-block.html.twig +1 -4
  50. package/templates/bcl-list-group/list-group.html.twig +0 -3
  51. package/templates/bcl-listing/listing.html.twig +0 -3
  52. package/templates/bcl-mega-menu/mega-menu-items.html.twig +0 -3
  53. package/templates/bcl-mega-menu/mega-menu-submenu.html.twig +6 -12
  54. package/templates/bcl-mega-menu/mega-menu.html.twig +0 -3
  55. package/templates/bcl-modal/modal.html.twig +4 -6
  56. package/templates/bcl-navbar/navbar.html.twig +0 -3
  57. package/templates/bcl-navigation/navigation.html.twig +1 -6
  58. package/templates/bcl-offcanvas/offcanvas.html.twig +0 -3
  59. package/templates/bcl-pagination/pagination-item.html.twig +0 -3
  60. package/templates/bcl-pagination/pagination.html.twig +0 -3
  61. package/templates/bcl-pagination-v2/pagination-item.html.twig +0 -3
  62. package/templates/bcl-pagination-v2/pagination.html.twig +0 -3
  63. package/templates/bcl-placeholder/placeholder.html.twig +0 -3
  64. package/templates/bcl-progress/progress.html.twig +0 -3
  65. package/templates/bcl-project/project-lists.html.twig +0 -4
  66. package/templates/bcl-project-status/project-contributions.html.twig +0 -3
  67. package/templates/bcl-project-status/project-status.html.twig +0 -3
  68. package/templates/bcl-recent-activities/recent-activities.html.twig +0 -3
  69. package/templates/bcl-search-form/search-form.html.twig +0 -3
  70. package/templates/bcl-select/select.html.twig +0 -3
  71. package/templates/bcl-spinner/spinner.html.twig +0 -3
  72. package/templates/bcl-subscription-block/subscription-block.html.twig +0 -3
  73. package/templates/bcl-table/table.html.twig +0 -3
  74. package/templates/bcl-textarea/textarea.html.twig +0 -3
  75. package/templates/bcl-timeline/timeline-item.html.twig +0 -3
  76. package/templates/bcl-timeline/timeline.html.twig +0 -3
  77. package/templates/bcl-toasts/toasts.html.twig +0 -3
  78. package/templates/bcl-user/user-compact.html.twig +0 -3
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@openeuropa/bcl-theme-default",
3
3
  "author": "European Commission",
4
4
  "license": "EUPL-1.2",
5
- "version": "0.4185.202511191330",
5
+ "version": "0.4230.202512021730",
6
6
  "description": "OE - BCL theme default",
7
7
  "scripts": {
8
8
  "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,9 +22,9 @@
22
22
  "@ecl/resources-ec-logo": "3.7.1",
23
23
  "@ecl/resources-eu-logo": "3.7.1",
24
24
  "@ecl/resources-flag-icons": "3.7.1",
25
- "@openeuropa/bcl-bootstrap": "^0.4185.202511191330",
26
- "@openeuropa/bcl-builder": "^0.4185.202511191330",
27
- "@openeuropa/bcl-twig-templates": "^0.4185.202511191330",
25
+ "@openeuropa/bcl-bootstrap": "^0.4230.202512021730",
26
+ "@openeuropa/bcl-builder": "^0.4230.202512021730",
27
+ "@openeuropa/bcl-twig-templates": "^0.4230.202512021730",
28
28
  "@rollup/plugin-replace": "6.0.2",
29
29
  "copyfiles": "2.4.1",
30
30
  "cross-env": "10.1.0",
@@ -51,5 +51,5 @@
51
51
  "design-system",
52
52
  "twig"
53
53
  ],
54
- "gitHead": "de7fc20600e88ea3b38e74c2ec1c6ffbb0b2a1b0"
54
+ "gitHead": "19735e328b2b53ccefbcc6829e2aaf149a2c438c"
55
55
  }
@@ -99,6 +99,7 @@ $header-link-active-background: #003776 !default;
99
99
  height: 100vh;
100
100
  display: flex;
101
101
  flex-flow: column;
102
+ overflow: auto;
102
103
 
103
104
  > div:has(.breadcrumb) {
104
105
  display: none;
@@ -126,7 +127,6 @@ $header-link-active-background: #003776 !default;
126
127
  z-index: 1030;
127
128
  width: 100%;
128
129
  align-items: flex-start;
129
- overflow: auto;
130
130
  .navbar-nav {
131
131
  width: 100%;
132
132
  margin-top: 1rem;
@@ -1,15 +1,57 @@
1
1
  /* stylelint-disable no-duplicate-selectors, selector-no-qualifying-type, no-descending-specificity */
2
2
 
3
+ $default-border-color: $gray-600;
4
+
3
5
  .form-select {
4
6
  padding-top: $input-padding-y-lg;
5
7
  padding-bottom: $input-padding-y-lg;
6
8
  padding-left: $input-padding-x-lg;
7
9
  font-size: $form-font-size-lg;
10
+ border-color: $default-border-color;
11
+ &:focus-visible {
12
+ border-color: $default-border-color;
13
+ box-shadow: none;
14
+ @include form-focus-ring();
15
+ &.is-valid {
16
+ outline-color: $success;
17
+ &:focus {
18
+ box-shadow: none;
19
+ border-color: $default-border-color;
20
+ }
21
+ }
22
+ &.is-invalid {
23
+ outline-color: $danger;
24
+ &:focus {
25
+ box-shadow: none;
26
+ border-color: $default-border-color;
27
+ }
28
+ }
29
+ }
30
+ &:focus {
31
+ box-shadow: none;
32
+ border-color: $default-border-color;
33
+ }
34
+ &.is-valid,
35
+ &.is-invalid {
36
+ &:focus {
37
+ box-shadow: none;
38
+ }
39
+ }
40
+ }
41
+
42
+ .form-check-input {
43
+ border-color: $primary;
8
44
  &:focus-visible {
9
- outline: 2px solid $primary;
45
+ &[type="radio"] {
46
+ border-radius: 50%;
47
+ }
48
+ }
49
+ &:focus {
50
+ border-color: $primary;
10
51
  box-shadow: none;
11
- border-radius: 4px;
12
- outline-offset: -1px;
52
+ }
53
+ &:focus-visible {
54
+ @include form-focus-ring(1px);
13
55
  }
14
56
  }
15
57
 
@@ -18,16 +60,35 @@
18
60
  padding: $input-padding-y-lg $input-padding-x-lg;
19
61
  font-size: $form-font-size-lg;
20
62
  border-radius: 0.3rem;
63
+ border-color: $default-border-color;
21
64
  &::file-selector-button {
22
65
  padding: $input-padding-y-lg $input-padding-x-lg;
23
66
  margin: (-$input-padding-y-lg) $input-padding-x-lg (-$input-padding-y-lg)
24
67
  (-$input-padding-x-lg);
25
68
  }
26
- &:focus-visible {
27
- outline: 2px solid $primary;
28
- box-shadow: none;
29
- border-radius: 4px;
30
- outline-offset: -1px;
69
+ &:focus:focus-visible {
70
+ border-color: $default-border-color;
71
+ @include form-focus-ring();
72
+ }
73
+ &.is-valid,
74
+ &.is-invalid {
75
+ &:focus {
76
+ box-shadow: none;
77
+ }
78
+ }
79
+ &.is-valid {
80
+ &:focus:focus-visible {
81
+ transition: none;
82
+ border-color: $default-border-color;
83
+ @include form-focus-ring($outline-color: $success);
84
+ }
85
+ }
86
+ &.is-invalid {
87
+ &:focus:focus-visible {
88
+ transition: none;
89
+ border-color: $default-border-color;
90
+ @include form-focus-ring($outline-color: $danger);
91
+ }
31
92
  }
32
93
  }
33
94
  .form-check:not(.form-switch) {
@@ -41,20 +102,6 @@
41
102
  margin-top: 0.15rem;
42
103
  }
43
104
  }
44
- .form-check-input {
45
- &:focus-visible {
46
- outline: 4px solid $primary;
47
- box-shadow: none;
48
- border-radius: 4px;
49
- outline-offset: 0;
50
- &[type="radio"] {
51
- border-radius: 50%;
52
- }
53
- }
54
- &:checked:focus-visible {
55
- border-color: $white;
56
- }
57
- }
58
105
 
59
106
  @include media-breakpoint-up(md) {
60
107
  .form-check:not(.form-switch) {
@@ -90,24 +137,18 @@
90
137
  textarea.form-control,
91
138
  .form-control {
92
139
  &.is-invalid {
93
- 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");
140
+ 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");
94
141
  }
95
142
  &.is-valid {
96
143
  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");
97
144
  }
98
145
  }
99
146
 
100
- .form-select:not([multiple]):not([size]) {
101
- &:focus-visible {
102
- outline: 2px solid $primary;
103
- box-shadow: none;
104
- border-radius: 4px;
105
- outline-offset: -1px;
106
- }
147
+ select.form-select:not([multiple]):not([size]) {
107
148
  &.is-invalid {
108
149
  background-image:
109
150
  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"),
110
- 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");
151
+ 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");
111
152
  }
112
153
  &.is-valid {
113
154
  background-image:
@@ -275,6 +275,34 @@ ul.bcl-mega-menu__items {
275
275
  }
276
276
  }
277
277
  }
278
+
279
+ // The see-all link is at the bottom of the list.
280
+ &:has(> a.see-all-button) {
281
+ position: sticky;
282
+ inset-block-start: 100%;
283
+ }
284
+ > a.see-all-button {
285
+ border-top: none;
286
+ &:after {
287
+ background: $neutral-border-color;
288
+ content: "";
289
+ block-size: 1px;
290
+ inset-inline-start: 0;
291
+ position: absolute;
292
+ inset-block-start: 0;
293
+ // Replicate horizontal padding of parent element.
294
+ inset-inline: $mm-gutter-x;
295
+ }
296
+ > svg {
297
+ inline-size: 0.8rem;
298
+ }
299
+ > span {
300
+ text-overflow: ellipsis;
301
+ overflow: hidden;
302
+ display: block;
303
+ white-space: nowrap;
304
+ }
305
+ }
278
306
  }
279
307
  }
280
308
 
@@ -286,21 +314,6 @@ ul.bcl-mega-menu__items {
286
314
  // Avoid a space between the parent menu and the submenu.
287
315
  @include padding-right(0);
288
316
  }
289
- @include media-breakpoint-down(lg) {
290
- > .bcl-mega-menu__items {
291
- &:has(.bcl-mega-menu__submenu:not([hidden])) {
292
- > .__leaf,
293
- > .__parent {
294
- display: none;
295
- }
296
- }
297
- > .__parent {
298
- &:has(.bcl-mega-menu__submenu:not([hidden])) {
299
- display: block;
300
- }
301
- }
302
- }
303
- }
304
317
  }
305
318
 
306
319
  // Nested submenu.
@@ -359,42 +372,40 @@ ul.bcl-mega-menu__items {
359
372
  }
360
373
  }
361
374
  }
362
- @include media-breakpoint-up(lg) {
363
- > .bcl-mega-menu__items {
364
- flex: 1 1 0;
365
- overflow-y: auto;
366
- > li > :is(span, a, button) {
367
- @include mm-item-padding($px: map-get($spacers, "4-25"));
368
- }
369
- }
370
- }
371
- > .__see_all {
372
- border-top: 1px solid $neutral-border-color;
375
+ }
376
+
377
+ // Second level items column.
378
+ .bcl-mega-menu__second-submenu {
379
+ > .tab-content > .tab-pane {
380
+ // In desktop, the entire second-level list has a light blue background.
373
381
  @include media-breakpoint-up(lg) {
374
- border-top: 1px solid $primary-border-subtle;
375
- margin: 0 map-get($spacers, "4-25");
382
+ background: $primary-bg-subtle;
376
383
  }
377
- > .see-all-button {
378
- @include mm-item-padding();
379
- // Use flex for icon spacing.
380
- display: flex;
381
- align-items: center;
382
- color: $link-color;
383
- @include media-breakpoint-up(lg) {
384
- padding: $mm-gutter-y map-get($spacers, "4-25");
385
- margin: 0 -1.75rem;
386
- }
387
- &:hover {
388
- background: $primary-bg-subtle;
384
+ // Hide other parts of the mega menu in mobile, when a sub-submenu is open.
385
+ @include media-breakpoint-down(lg) {
386
+ .bcl-mega-menu__container:has(&.active) {
387
+ .bcl-mega-menu__info,
388
+ .bcl-mega-menu__first-submenu {
389
+ display: none;
390
+ }
389
391
  }
390
- > svg {
391
- flex-shrink: 0;
392
+ }
393
+ // The panel title only shows in mobile.
394
+ > .panel-title {
395
+ @include mm-item-padding(map-get($spacers, 3));
396
+ margin: 0;
397
+ color: $dark;
398
+ background: $primary-bg-subtle;
399
+ display: block;
400
+ font-size: 20px;
401
+ @include media-breakpoint-up(lg) {
402
+ display: none;
392
403
  }
393
- > span {
394
- text-overflow: ellipsis;
395
- overflow: hidden;
396
- display: block;
397
- white-space: nowrap;
404
+ }
405
+ // Items get a bit more space to the sides in xl viewport.
406
+ @include media-breakpoint-up(xl) {
407
+ > ul > li > * {
408
+ margin: 0 map-get($spacers, "2-5");
398
409
  }
399
410
  }
400
411
  }
@@ -11,7 +11,7 @@
11
11
  --ss-font-color: #4d4d4d;
12
12
  --ss-font-placeholder-color: #212529;
13
13
  --ss-disabled-color: #dcdee2;
14
- --ss-border-color: #dcdee2;
14
+ --ss-border-color: #6c757d;
15
15
  --ss-highlight-color: #fffb8c;
16
16
  --ss-success-color: #00b755;
17
17
  --ss-error-color: #dc3545;
@@ -77,8 +77,8 @@
77
77
  overflow: hidden;
78
78
  min-height: 38px;
79
79
 
80
- &:focus {
81
- box-shadow: 0 0 5px var(--ss-focus-color);
80
+ &:focus-visible {
81
+ @include form-focus-ring();
82
82
  }
83
83
 
84
84
  &.form-select {
@@ -330,7 +330,7 @@
330
330
  }
331
331
 
332
332
  &:focus {
333
- box-shadow: 0 0 5px var(--ss-focus-color);
333
+ @include form-focus-ring();
334
334
  }
335
335
  }
336
336
 
@@ -534,21 +534,31 @@
534
534
  }
535
535
  }
536
536
 
537
- .ss-main.multi-select.is-invalid,
538
- .was-validated .multi-select:invalid + .ss-main.multi-select {
537
+ .form-select.ss-main.multi-select.is-invalid,
538
+ .was-validated .multi-select:invalid + .form-select.ss-main.multi-select {
539
539
  border-color: $danger;
540
- background-position: right 1.5rem center;
540
+ background-position: right 2.5rem center;
541
541
  background-repeat: no-repeat;
542
+ padding-right: 0.5rem;
542
543
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
543
- 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");
544
+ 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");
545
+ &:focus-visible {
546
+ border-color: $gray-600;
547
+ outline-color: $danger;
548
+ }
544
549
  }
545
- .ss-main.multi-select.is-valid,
546
- .was-validated .multi-select:valid + .ss-main.multi-select {
550
+ .form-select.ss-main.multi-select.is-valid,
551
+ .was-validated .multi-select:valid + .form-select.ss-main.multi-select {
547
552
  border-color: $success;
548
- background-position: right 1.5rem center;
553
+ background-position: right 2.5rem center;
549
554
  background-repeat: no-repeat;
555
+ padding-right: 0.5rem;
550
556
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
551
557
  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");
558
+ &:focus-visible {
559
+ border-color: $gray-600;
560
+ outline-color: $success;
561
+ }
552
562
  }
553
563
 
554
564
  .ss-sr-only {
@@ -39,6 +39,10 @@ $search-spacers: (
39
39
  padding-right: map-get($search-spacers, "submit-spacer-right");
40
40
  border-top-left-radius: 0;
41
41
  border-bottom-left-radius: 0;
42
+ &:focus-visible {
43
+ outline-offset: 2px;
44
+ outline-color: $primary;
45
+ }
42
46
  }
43
47
  .bcl-search-form__group {
44
48
  display: flex;
@@ -12,6 +12,18 @@
12
12
  }
13
13
  }
14
14
 
15
+ @mixin form-focus-ring(
16
+ $outline-offset: 2px,
17
+ $outline-width: 2px,
18
+ $radius: 4px,
19
+ $outline-color: $primary
20
+ ) {
21
+ outline: $outline-width solid $outline-color;
22
+ box-shadow: none;
23
+ border-radius: $radius;
24
+ outline-offset: $outline-offset;
25
+ }
26
+
15
27
  @mixin focused-item($width: 2px, $offset: 2px, $color: $primary) {
16
28
  &:focus,
17
29
  &:focus-visible {
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - title (string) (default: '')
@@ -141,4 +139,3 @@
141
139
  </div>
142
140
  {% endif %}
143
141
 
144
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - message (string) (default: '')
5
3
  - heading (string) (default: '')
@@ -80,4 +78,3 @@
80
78
  {%- endif -%}
81
79
  </div>
82
80
 
83
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - label (string) (default: '')
5
3
  - background: (string) (default: 'primary')
@@ -76,4 +74,3 @@
76
74
  </span>
77
75
  {%- endif -%}
78
76
 
79
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - title: (string) (default: '')
5
3
  - title_tag: (string) (default: 'div')
@@ -93,4 +91,3 @@
93
91
  </div>
94
92
  </div>
95
93
 
96
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - with_header (boolean) (default: false)
@@ -136,4 +134,3 @@
136
134
  {% include '@oe-bcl/bcl-footer/footer.html.twig' with footer only %}
137
135
  {% endif %}
138
136
 
139
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - title (string) (default: '')
5
3
  - title_tag (string) (default: 'h2')
@@ -70,4 +68,3 @@
70
68
  {% endif %}
71
69
  </figure>
72
70
 
73
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - links (link[]) (default: [])
5
3
  - icon_path (string) (default: '')
@@ -59,4 +57,3 @@
59
57
  </nav>
60
58
  {% endif %}
61
59
 
62
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - label (string) (default: '')
@@ -111,4 +109,3 @@
111
109
  {%- endif -%}
112
110
  </button>
113
111
 
114
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - vertical (boolean) (default: false)
5
3
  - size (string) (default: 'md')
@@ -64,4 +62,3 @@
64
62
  </div>
65
63
  {% endif %}
66
64
 
67
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - title: (string) (default: '')
5
3
  - title_tag: (string) (default: 'h1')
@@ -272,4 +270,3 @@
272
270
  {% endif %}
273
271
  </article>
274
272
 
275
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - type (string) (default: 'group')
5
3
  options: ['group', 'grid', 'masonry']
@@ -84,4 +82,3 @@
84
82
  {% endif %}
85
83
  </div>
86
84
 
87
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - title (string) (default: '')
5
3
  - title_tag (string) (default: 'h2')
@@ -177,4 +175,3 @@
177
175
  {% endif %}
178
176
  </div>
179
177
 
180
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - title: (string) (default: '')
@@ -136,4 +134,3 @@
136
134
  </div>
137
135
  </div>
138
136
 
139
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - day (integer) (default: '')
@@ -77,4 +75,3 @@
77
75
  </div>
78
76
  </time>
79
77
 
80
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - button: (button object) (default: {})
@@ -41,4 +39,3 @@
41
39
  {% endblock %}
42
40
  </dd>
43
41
 
44
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - icon: (icon object) (default: {})
@@ -30,4 +28,3 @@
30
28
  </div>
31
29
  </dt>
32
30
 
33
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - title: (string) (default: '')
@@ -118,4 +116,3 @@
118
116
  </div>
119
117
  {% endif %}
120
118
 
121
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - id (string) (default: dropdown-random(10000))
5
3
  - trigger (link or button)
@@ -132,4 +130,3 @@
132
130
  </div>
133
131
  {% endif %}
134
132
 
135
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {#
4
2
  Parameters:
5
3
  - title (string) (default: '')
@@ -125,4 +123,3 @@
125
123
  </div>
126
124
  </div>
127
125
 
128
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - title (string) (default: '')
5
3
  - title_tag (string) (default: 'h2')
@@ -169,4 +167,3 @@
169
167
  </div>
170
168
  {% endif %}
171
169
 
172
- {% endapply %}
@@ -1,5 +1,3 @@
1
- {% apply spaceless %}
2
-
3
1
  {# Parameters:
4
2
  - id (string) (default: language-dropdown-random(10000))
5
3
  - label (string) (default: '')
@@ -93,4 +91,3 @@
93
91
  {% endif %}
94
92
  </div>
95
93
 
96
- {% endapply %}