@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.
- package/css/oe-bcl-ckeditor5.min.css +1 -1
- package/css/oe-bcl-ckeditor5.min.css.map +1 -1
- package/css/oe-bcl-default.css +149 -83
- package/css/oe-bcl-default.css.map +1 -1
- package/css/oe-bcl-default.min.css +1 -1
- package/css/oe-bcl-default.min.css.map +1 -1
- package/package.json +5 -5
- package/src/scss/_header.scss +1 -1
- package/src/scss/_input.scss +72 -31
- package/src/scss/_mega-menu.scss +58 -47
- package/src/scss/_multiselect-2.scss +21 -11
- package/src/scss/_search-form.scss +4 -0
- package/src/scss/base/_mixins.scss +12 -0
- package/templates/bcl-accordion/accordion.html.twig +0 -3
- package/templates/bcl-alert/alert.html.twig +0 -3
- package/templates/bcl-badge/badge.html.twig +0 -3
- package/templates/bcl-banner/banner.html.twig +0 -3
- package/templates/bcl-base-templates/content-type.html.twig +0 -3
- package/templates/bcl-blockquote/blockquote.html.twig +0 -3
- package/templates/bcl-breadcrumb/breadcrumb.html.twig +0 -3
- package/templates/bcl-button/button.html.twig +0 -3
- package/templates/bcl-button-group/button-group.html.twig +0 -3
- package/templates/bcl-card/card.html.twig +0 -3
- package/templates/bcl-card-layout/card-layout.html.twig +0 -3
- package/templates/bcl-carousel/carousel.html.twig +0 -3
- package/templates/bcl-content-banner/content-banner.html.twig +0 -3
- package/templates/bcl-date-block/date-block.html.twig +0 -3
- package/templates/bcl-description-list/description-list-details.html.twig +0 -3
- package/templates/bcl-description-list/description-list-title.html.twig +0 -3
- package/templates/bcl-description-list/description-list.html.twig +0 -3
- package/templates/bcl-dropdown/dropdown.html.twig +0 -3
- package/templates/bcl-fact-figures/fact-figures.html.twig +0 -3
- package/templates/bcl-featured-media/featured-media.html.twig +0 -3
- package/templates/bcl-file/file-translations.html.twig +0 -3
- package/templates/bcl-file/file.html.twig +0 -3
- package/templates/bcl-footer/footer.html.twig +0 -3
- package/templates/bcl-form/form.html.twig +0 -3
- package/templates/bcl-form-input/form-input.html.twig +0 -3
- package/templates/bcl-gallery/gallery-item.html.twig +0 -3
- package/templates/bcl-gallery/gallery.html.twig +0 -3
- package/templates/bcl-header/header.html.twig +42 -10
- package/templates/bcl-heading/heading.html.twig +0 -3
- package/templates/bcl-icon/icon.html.twig +0 -3
- package/templates/bcl-inpage-navigation/inpage-navigation.html.twig +0 -3
- package/templates/bcl-language-list/language-list-grid.html.twig +0 -3
- package/templates/bcl-language-list/language-list.html.twig +0 -3
- package/templates/bcl-language-switcher/language-switcher.html.twig +0 -3
- package/templates/bcl-link/link.html.twig +0 -3
- package/templates/bcl-links-block/links-block.html.twig +1 -4
- package/templates/bcl-list-group/list-group.html.twig +0 -3
- package/templates/bcl-listing/listing.html.twig +0 -3
- package/templates/bcl-mega-menu/mega-menu-items.html.twig +0 -3
- package/templates/bcl-mega-menu/mega-menu-submenu.html.twig +6 -12
- package/templates/bcl-mega-menu/mega-menu.html.twig +0 -3
- package/templates/bcl-modal/modal.html.twig +4 -6
- package/templates/bcl-navbar/navbar.html.twig +0 -3
- package/templates/bcl-navigation/navigation.html.twig +1 -6
- package/templates/bcl-offcanvas/offcanvas.html.twig +0 -3
- package/templates/bcl-pagination/pagination-item.html.twig +0 -3
- package/templates/bcl-pagination/pagination.html.twig +0 -3
- package/templates/bcl-pagination-v2/pagination-item.html.twig +0 -3
- package/templates/bcl-pagination-v2/pagination.html.twig +0 -3
- package/templates/bcl-placeholder/placeholder.html.twig +0 -3
- package/templates/bcl-progress/progress.html.twig +0 -3
- package/templates/bcl-project/project-lists.html.twig +0 -4
- package/templates/bcl-project-status/project-contributions.html.twig +0 -3
- package/templates/bcl-project-status/project-status.html.twig +0 -3
- package/templates/bcl-recent-activities/recent-activities.html.twig +0 -3
- package/templates/bcl-search-form/search-form.html.twig +0 -3
- package/templates/bcl-select/select.html.twig +0 -3
- package/templates/bcl-spinner/spinner.html.twig +0 -3
- package/templates/bcl-subscription-block/subscription-block.html.twig +0 -3
- package/templates/bcl-table/table.html.twig +0 -3
- package/templates/bcl-textarea/textarea.html.twig +0 -3
- package/templates/bcl-timeline/timeline-item.html.twig +0 -3
- package/templates/bcl-timeline/timeline.html.twig +0 -3
- package/templates/bcl-toasts/toasts.html.twig +0 -3
- 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.
|
|
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.
|
|
26
|
-
"@openeuropa/bcl-builder": "^0.
|
|
27
|
-
"@openeuropa/bcl-twig-templates": "^0.
|
|
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": "
|
|
54
|
+
"gitHead": "19735e328b2b53ccefbcc6829e2aaf149a2c438c"
|
|
55
55
|
}
|
package/src/scss/_header.scss
CHANGED
|
@@ -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;
|
package/src/scss/_input.scss
CHANGED
|
@@ -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
|
-
|
|
45
|
+
&[type="radio"] {
|
|
46
|
+
border-radius: 50%;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
&:focus {
|
|
50
|
+
border-color: $primary;
|
|
10
51
|
box-shadow: none;
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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='%
|
|
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='%
|
|
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:
|
package/src/scss/_mega-menu.scss
CHANGED
|
@@ -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
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
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
|
-
|
|
375
|
-
margin: 0 map-get($spacers, "4-25");
|
|
382
|
+
background: $primary-bg-subtle;
|
|
376
383
|
}
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
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
|
-
|
|
391
|
-
|
|
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
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
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: #
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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='
|
|
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
|
|
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 {
|