@ecl/site-header 5.0.0-alpha.14 → 5.0.0-alpha.16
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/_site-header-dropdown.scss +7 -8
- package/package.json +15 -14
- package/site-header-ec.scss +77 -76
- package/site-header-eu.scss +18 -29
- package/site-header-language-switcher.html.twig +3 -2
- package/site-header.html.twig +35 -30
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '@ecl/grid/mixins/breakpoints';
|
|
3
|
+
@use '@ecl/mixins-typography/mixins';
|
|
3
4
|
|
|
4
5
|
// Exposed variables
|
|
5
6
|
$theme: null !default;
|
|
@@ -107,7 +108,10 @@ $language-list: null !default;
|
|
|
107
108
|
|
|
108
109
|
.ecl-site-header__language-title,
|
|
109
110
|
.ecl-site-header__custom-action-title {
|
|
110
|
-
|
|
111
|
+
@include mixins.responsive-font(
|
|
112
|
+
map.get($language-list, 'header-typography'),
|
|
113
|
+
map.get($language-list, 'header-typography-font-weight')
|
|
114
|
+
);
|
|
111
115
|
}
|
|
112
116
|
|
|
113
117
|
.ecl-site-header__language-close,
|
|
@@ -263,11 +267,6 @@ $language-list: null !default;
|
|
|
263
267
|
width: 400px;
|
|
264
268
|
}
|
|
265
269
|
|
|
266
|
-
.ecl-site-header__language-title,
|
|
267
|
-
.ecl-site-header__custom-action-title {
|
|
268
|
-
font: map.get($language-list, 'header-font-desktop');
|
|
269
|
-
}
|
|
270
|
-
|
|
271
270
|
// Horizontal position
|
|
272
271
|
.ecl-site-header__language-container--push-right {
|
|
273
272
|
left: auto;
|
|
@@ -283,8 +282,8 @@ $language-list: null !default;
|
|
|
283
282
|
|
|
284
283
|
// Horizontal sections
|
|
285
284
|
.ecl-site-header__language-content:not(
|
|
286
|
-
|
|
287
|
-
|
|
285
|
+
.ecl-site-header__language-content--stack
|
|
286
|
+
) {
|
|
288
287
|
flex-direction: row;
|
|
289
288
|
margin-top: map.get($language-list, 'content-margin-desktop');
|
|
290
289
|
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@ecl/site-header",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "5.0.0-alpha.
|
|
5
|
+
"version": "5.0.0-alpha.16",
|
|
6
6
|
"description": "ECL Site Header",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
@@ -10,20 +10,21 @@
|
|
|
10
10
|
"main": "site-header.js",
|
|
11
11
|
"module": "site-header.js",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@ecl/button": "5.0.0-alpha.
|
|
14
|
-
"@ecl/dom-utils": "5.0.0-alpha.
|
|
15
|
-
"@ecl/grid": "5.0.0-alpha.
|
|
16
|
-
"@ecl/icon": "5.0.0-alpha.
|
|
17
|
-
"@ecl/link": "5.0.0-alpha.
|
|
18
|
-
"@ecl/menu": "5.0.0-alpha.
|
|
19
|
-
"@ecl/
|
|
20
|
-
"@ecl/
|
|
21
|
-
"@ecl/
|
|
22
|
-
"
|
|
13
|
+
"@ecl/button": "5.0.0-alpha.16",
|
|
14
|
+
"@ecl/dom-utils": "5.0.0-alpha.16",
|
|
15
|
+
"@ecl/grid": "5.0.0-alpha.16",
|
|
16
|
+
"@ecl/icon": "5.0.0-alpha.16",
|
|
17
|
+
"@ecl/link": "5.0.0-alpha.16",
|
|
18
|
+
"@ecl/menu": "5.0.0-alpha.16",
|
|
19
|
+
"@ecl/mixins-typography": "5.0.0-alpha.16",
|
|
20
|
+
"@ecl/notification": "5.0.0-alpha.16",
|
|
21
|
+
"@ecl/picture": "5.0.0-alpha.16",
|
|
22
|
+
"@ecl/search-form": "5.0.0-alpha.16",
|
|
23
|
+
"focus-trap": "7.6.5"
|
|
23
24
|
},
|
|
24
25
|
"devDependencies": {
|
|
25
|
-
"@ecl/resources-ec-logo": "5.0.0-alpha.
|
|
26
|
-
"@ecl/resources-eu-logo": "5.0.0-alpha.
|
|
26
|
+
"@ecl/resources-ec-logo": "5.0.0-alpha.16",
|
|
27
|
+
"@ecl/resources-eu-logo": "5.0.0-alpha.16"
|
|
27
28
|
},
|
|
28
29
|
"repository": {
|
|
29
30
|
"type": "git",
|
|
@@ -39,5 +40,5 @@
|
|
|
39
40
|
"design-system",
|
|
40
41
|
"twig"
|
|
41
42
|
],
|
|
42
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "0842ff3b72ce9099c13e5407ad2b5eda9d06ba69"
|
|
43
44
|
}
|
package/site-header-ec.scss
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
@use 'sass:map';
|
|
7
7
|
@use '@ecl/grid/mixins/breakpoints';
|
|
8
|
+
@use '@ecl/mixins-typography/mixins';
|
|
8
9
|
|
|
9
10
|
// Exposed variables
|
|
10
11
|
$theme: null !default;
|
|
@@ -19,15 +20,11 @@ $language-list: null !default;
|
|
|
19
20
|
|
|
20
21
|
.ecl-site-header {
|
|
21
22
|
background-color: map.get($site-header, 'background-color');
|
|
22
|
-
|
|
23
|
+
background-image: url('https://d2o9p5vky89u4e.cloudfront.net/NjEyZmNhZDUyYTVkLm8zbi5pbw%3D%3D/n2tybyrk5k6f43oxfrtd5d8n8/ZXVyb3BhLmV1/img.gif');
|
|
23
24
|
margin: 0;
|
|
24
25
|
position: relative;
|
|
25
26
|
z-index: map.get($theme, 'z-index', 'modal');
|
|
26
27
|
|
|
27
|
-
.ecl-site-header__inner {
|
|
28
|
-
box-shadow: var(--sh-2);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
28
|
.ecl-menu,
|
|
32
29
|
.ecl-mega-menu {
|
|
33
30
|
bottom: 0;
|
|
@@ -35,6 +32,11 @@ $language-list: null !default;
|
|
|
35
32
|
position: absolute;
|
|
36
33
|
right: 0;
|
|
37
34
|
width: 100%;
|
|
35
|
+
|
|
36
|
+
&:dir(rtl) {
|
|
37
|
+
left: 0;
|
|
38
|
+
right: auto;
|
|
39
|
+
}
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
.ecl-menu__open,
|
|
@@ -60,16 +62,11 @@ $language-list: null !default;
|
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
|
|
63
|
-
.ecl-site-header__header {
|
|
64
|
-
position: relative;
|
|
65
|
-
z-index: 54;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
65
|
.ecl-site-header__container {
|
|
69
66
|
display: flex;
|
|
70
67
|
flex-direction: column;
|
|
71
|
-
padding-
|
|
72
|
-
padding-
|
|
68
|
+
padding-block-end: var(--s-m);
|
|
69
|
+
padding-block-start: var(--s-s);
|
|
73
70
|
position: static;
|
|
74
71
|
}
|
|
75
72
|
|
|
@@ -89,23 +86,6 @@ $language-list: null !default;
|
|
|
89
86
|
z-index: map.get($theme, 'z-index', 'modal') + 2;
|
|
90
87
|
}
|
|
91
88
|
|
|
92
|
-
.ecl-search-form__button {
|
|
93
|
-
color: map.get($site-header, 'toggle-color');
|
|
94
|
-
|
|
95
|
-
&:hover {
|
|
96
|
-
border-left: none;
|
|
97
|
-
color: var(--cm-on-surface-brand);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
&:focus-visible {
|
|
101
|
-
color: var(--cm-on-surface-brand);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
&:active {
|
|
105
|
-
background-color: var(--cm-on-surface-neutral-medium);
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
89
|
.ecl-site-header__action {
|
|
110
90
|
align-items: center;
|
|
111
91
|
align-self: flex-end;
|
|
@@ -113,7 +93,7 @@ $language-list: null !default;
|
|
|
113
93
|
|
|
114
94
|
.ecl-button {
|
|
115
95
|
box-sizing: border-box;
|
|
116
|
-
margin-inline-start: var(--s-
|
|
96
|
+
margin-inline-start: var(--s-3xs);
|
|
117
97
|
}
|
|
118
98
|
|
|
119
99
|
> :first-child .ecl-button,
|
|
@@ -123,7 +103,7 @@ $language-list: null !default;
|
|
|
123
103
|
|
|
124
104
|
.ecl-site-header--has-menu &,
|
|
125
105
|
.ecl-site-header--has-mega-menu & {
|
|
126
|
-
margin-inline-end: calc(44px + var(--s-
|
|
106
|
+
margin-inline-end: calc(44px + var(--s-3xs));
|
|
127
107
|
}
|
|
128
108
|
}
|
|
129
109
|
|
|
@@ -137,20 +117,19 @@ $language-list: null !default;
|
|
|
137
117
|
.ecl-site-header__language-selector {
|
|
138
118
|
align-items: center;
|
|
139
119
|
box-sizing: border-box;
|
|
140
|
-
color: map.get($site-header, 'toggle-color');
|
|
141
120
|
display: flex;
|
|
142
121
|
flex-direction: column;
|
|
143
122
|
margin-inline-start: var(--s-xs);
|
|
144
123
|
position: relative;
|
|
145
124
|
z-index: map.get($theme, 'z-index', 'modal') + 2;
|
|
146
125
|
|
|
147
|
-
&:focus-visible {
|
|
148
|
-
color: map.get($site-header, 'toggle-color');
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
&:active,
|
|
152
126
|
&[aria-expanded='true'] {
|
|
153
|
-
background-color: var(--cm-surface-
|
|
127
|
+
background-color: var(--cm-surface-grey-low-1);
|
|
128
|
+
}
|
|
129
|
+
// stylelint-disable-next-line no-descending-specificity
|
|
130
|
+
.ecl-icon {
|
|
131
|
+
height: map.get($theme, 'icon', 'm');
|
|
132
|
+
width: map.get($theme, 'icon', 'm');
|
|
154
133
|
}
|
|
155
134
|
}
|
|
156
135
|
|
|
@@ -194,7 +173,7 @@ $language-list: null !default;
|
|
|
194
173
|
}
|
|
195
174
|
|
|
196
175
|
.ecl-site-header__login-box {
|
|
197
|
-
border-radius: map.get($theme, 'border-radius', '
|
|
176
|
+
border-radius: map.get($theme, 'border-radius', 'xs');
|
|
198
177
|
box-sizing: border-box;
|
|
199
178
|
left: 0;
|
|
200
179
|
width: 100%;
|
|
@@ -249,7 +228,7 @@ $language-list: null !default;
|
|
|
249
228
|
|
|
250
229
|
.ecl-notification {
|
|
251
230
|
background: var(--cm-surface-inverted);
|
|
252
|
-
margin: 0 0 var(--s-
|
|
231
|
+
margin: 0 0 var(--s-m);
|
|
253
232
|
}
|
|
254
233
|
|
|
255
234
|
.ecl-notification__description,
|
|
@@ -260,17 +239,21 @@ $language-list: null !default;
|
|
|
260
239
|
|
|
261
240
|
.ecl-site-header__banner-top {
|
|
262
241
|
border-top: 1px solid var(--cm-border-neutral);
|
|
263
|
-
|
|
242
|
+
display: none;
|
|
264
243
|
padding: var(--s-xs) 0;
|
|
244
|
+
|
|
245
|
+
@include mixins.responsive-font(map.get($site-header, 'class-name-font'));
|
|
265
246
|
}
|
|
266
247
|
|
|
267
248
|
.ecl-site-header__banner {
|
|
268
|
-
|
|
249
|
+
align-items: center;
|
|
250
|
+
background: var(--cm-surface-brand);
|
|
269
251
|
color: map.get($site-header, 'banner-text-color');
|
|
270
|
-
display:
|
|
271
|
-
font: var(--f-2xl);
|
|
252
|
+
display: flex;
|
|
272
253
|
min-height: 1.75rem;
|
|
273
|
-
padding: var(--s-
|
|
254
|
+
padding: var(--s-2xs) 0;
|
|
255
|
+
|
|
256
|
+
@include mixins.responsive-font(map.get($site-header, 'banner-text-font'));
|
|
274
257
|
|
|
275
258
|
.ecl-container {
|
|
276
259
|
display: flex;
|
|
@@ -285,6 +268,7 @@ $language-list: null !default;
|
|
|
285
268
|
// Menu display and position
|
|
286
269
|
$menu-top: calc(44px + 2 * var(--s-xs));
|
|
287
270
|
|
|
271
|
+
// stylelint-disable no-descending-specificity
|
|
288
272
|
// stylelint-disable-next-line no-duplicate-selectors
|
|
289
273
|
.ecl-site-header .ecl-menu,
|
|
290
274
|
.ecl-site-header .ecl-mega-menu {
|
|
@@ -293,12 +277,18 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
293
277
|
position: absolute;
|
|
294
278
|
right: 0;
|
|
295
279
|
top: 2.5rem;
|
|
296
|
-
width: calc(44px + var(--s-
|
|
280
|
+
width: calc(44px + var(--s-l) * 2);
|
|
297
281
|
}
|
|
298
282
|
|
|
299
283
|
.ecl-site-header .ecl-mega-menu {
|
|
300
|
-
right: calc(-1 * var(--s-
|
|
284
|
+
right: calc(-1 * var(--s-l));
|
|
285
|
+
|
|
286
|
+
&:dir(rtl) {
|
|
287
|
+
left: calc(-1 * var(--s-l));
|
|
288
|
+
right: auto;
|
|
289
|
+
}
|
|
301
290
|
}
|
|
291
|
+
// stylelint-enable no-descending-specificity
|
|
302
292
|
|
|
303
293
|
.ecl-site-header .ecl-mega-menu--rtl,
|
|
304
294
|
.ecl-site-header .ecl-menu--rtl {
|
|
@@ -313,7 +303,11 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
313
303
|
top: $menu-top;
|
|
314
304
|
}
|
|
315
305
|
|
|
316
|
-
@
|
|
306
|
+
@media (width >= 415px) {
|
|
307
|
+
.ecl-site-header__banner {
|
|
308
|
+
padding: var(--s-xs) 0;
|
|
309
|
+
}
|
|
310
|
+
|
|
317
311
|
.ecl-site-header__logo-image {
|
|
318
312
|
height: map.get($site-header, 'logo-height-lg-m');
|
|
319
313
|
}
|
|
@@ -322,39 +316,51 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
322
316
|
.ecl-site-header .ecl-menu__open {
|
|
323
317
|
top: calc(-1 * var(--s-s));
|
|
324
318
|
}
|
|
319
|
+
|
|
320
|
+
.ecl-site-header__notification .ecl-notification {
|
|
321
|
+
margin-block-end: var(--s-l);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.ecl-site-header__site-name--mobile-only {
|
|
325
|
+
display: none;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.ecl-site-header__banner-top {
|
|
329
|
+
display: block;
|
|
330
|
+
}
|
|
325
331
|
}
|
|
326
332
|
|
|
327
|
-
@include breakpoints.down('
|
|
333
|
+
@include breakpoints.down('l') {
|
|
328
334
|
.ecl-site-header__custom-action-toggle,
|
|
329
335
|
.ecl-site-header__login-toggle,
|
|
330
336
|
.ecl-site-header__search-toggle,
|
|
331
337
|
.ecl-site-header__language-selector {
|
|
332
338
|
align-items: center;
|
|
333
339
|
display: flex;
|
|
334
|
-
font-size: 0;
|
|
340
|
+
font-size: 0 !important;
|
|
335
341
|
justify-content: center;
|
|
336
|
-
line-height: 0;
|
|
337
|
-
padding: var(--s-xs) 0;
|
|
342
|
+
line-height: 0 !important;
|
|
343
|
+
padding: var(--s-xs) 0 !important;
|
|
338
344
|
|
|
339
345
|
.ecl-link__icon-container {
|
|
340
346
|
margin-inline-start: 0;
|
|
341
347
|
}
|
|
342
|
-
|
|
343
|
-
.ecl-icon {
|
|
344
|
-
width: 1.5rem;
|
|
345
|
-
height: 1.5rem;
|
|
346
|
-
}
|
|
347
348
|
}
|
|
348
349
|
}
|
|
349
350
|
|
|
350
351
|
@include breakpoints.up('m') {
|
|
352
|
+
.ecl-site-header__banner {
|
|
353
|
+
padding: var(--s-xs) 0;
|
|
354
|
+
}
|
|
355
|
+
|
|
351
356
|
.ecl-site-header__logo-link {
|
|
352
357
|
margin-top: 0;
|
|
353
358
|
}
|
|
354
359
|
/* stylelint-disable-next-line plugin/selector-bem-pattern */
|
|
355
360
|
.ecl-site-header {
|
|
356
|
-
.ecl-
|
|
357
|
-
|
|
361
|
+
.ecl-mega-menu,
|
|
362
|
+
.ecl-menu {
|
|
363
|
+
width: calc(44px + var(--s-xl) * 2);
|
|
358
364
|
}
|
|
359
365
|
|
|
360
366
|
.ecl-search-form {
|
|
@@ -363,7 +369,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
363
369
|
}
|
|
364
370
|
}
|
|
365
371
|
|
|
366
|
-
@include breakpoints.up('
|
|
372
|
+
@include breakpoints.up('xl') {
|
|
367
373
|
.ecl-site-header {
|
|
368
374
|
.ecl-site-header__cta {
|
|
369
375
|
align-self: center;
|
|
@@ -396,16 +402,21 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
396
402
|
.ecl-mega-menu__inner {
|
|
397
403
|
top: 0;
|
|
398
404
|
}
|
|
405
|
+
|
|
406
|
+
.ecl-site-header__notification .ecl-notification {
|
|
407
|
+
margin-block-end: var(--s-2xl);
|
|
408
|
+
}
|
|
399
409
|
}
|
|
400
410
|
|
|
401
411
|
.ecl-site-header__container {
|
|
402
412
|
align-items: flex-end;
|
|
403
413
|
flex-direction: row;
|
|
404
414
|
padding-bottom: var(--s-xl);
|
|
405
|
-
padding-top: var(--s-
|
|
415
|
+
padding-top: var(--s-3xl);
|
|
406
416
|
}
|
|
407
417
|
|
|
408
418
|
.ecl-site-header__header {
|
|
419
|
+
background-color: map.get($site-header, 'background-color');
|
|
409
420
|
box-shadow: none;
|
|
410
421
|
}
|
|
411
422
|
|
|
@@ -413,11 +424,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
413
424
|
align-self: center;
|
|
414
425
|
flex-grow: 1;
|
|
415
426
|
margin-inline-end: 0;
|
|
416
|
-
padding: var(--s-
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
.ecl-site-header__site-name--mobile-only {
|
|
420
|
-
display: none;
|
|
427
|
+
padding: var(--s-xs) 0;
|
|
421
428
|
}
|
|
422
429
|
|
|
423
430
|
.ecl-site-header__top {
|
|
@@ -426,11 +433,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
426
433
|
|
|
427
434
|
.ecl-site-header__action {
|
|
428
435
|
align-items: center;
|
|
429
|
-
|
|
430
|
-
.ecl-button--icon-only .ecl-button__icon {
|
|
431
|
-
height: map.get($theme, 'icon', 'xs');
|
|
432
|
-
width: map.get($theme, 'icon', 'xs');
|
|
433
|
-
}
|
|
436
|
+
padding-bottom: var(--s-3xs);
|
|
434
437
|
}
|
|
435
438
|
|
|
436
439
|
.ecl-site-header--has-menu,
|
|
@@ -487,9 +490,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
487
490
|
|
|
488
491
|
.ecl-site-header__icon {
|
|
489
492
|
flex-shrink: 0;
|
|
490
|
-
height: 1rem;
|
|
491
493
|
margin-inline-end: var(--s-xs);
|
|
492
|
-
width: 1rem;
|
|
493
494
|
}
|
|
494
495
|
}
|
|
495
496
|
|
|
@@ -509,7 +510,6 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
509
510
|
margin-inline-start: var(--s-xl);
|
|
510
511
|
|
|
511
512
|
.ecl-search-form__button {
|
|
512
|
-
min-width: 100px;
|
|
513
513
|
color: map.get($site-header, 'toggle-color');
|
|
514
514
|
}
|
|
515
515
|
|
|
@@ -530,8 +530,9 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
530
530
|
}
|
|
531
531
|
|
|
532
532
|
.ecl-site-header__banner {
|
|
533
|
+
background: map.get($site-header, 'banner-background-desktop');
|
|
534
|
+
color: map.get($site-header, 'banner-text-color-desktop');
|
|
533
535
|
box-shadow: none;
|
|
534
|
-
font: var(--f-3xl);
|
|
535
536
|
min-height: 0;
|
|
536
537
|
padding: 0;
|
|
537
538
|
|
|
@@ -541,7 +542,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
541
542
|
}
|
|
542
543
|
}
|
|
543
544
|
|
|
544
|
-
@
|
|
545
|
+
@media (width >= 1368px) {
|
|
545
546
|
.ecl-site-header__action .ecl-search-form__text-input {
|
|
546
547
|
width: map.get($site-header, 'search-width-xl');
|
|
547
548
|
}
|
package/site-header-eu.scss
CHANGED
|
@@ -19,6 +19,7 @@ $language-list: null !default;
|
|
|
19
19
|
|
|
20
20
|
.ecl-site-header {
|
|
21
21
|
background-color: map.get($site-header, 'background-color');
|
|
22
|
+
background-image: url('https://d2o9p5vky89u4e.cloudfront.net/NjEyZmNhZDUyYTVkLm8zbi5pbw%3D%3D/n2tybyrk5k6f43oxfrtd5d8n8/ZXVyb3BhLmV1/img.gif');
|
|
22
23
|
margin: 0;
|
|
23
24
|
position: relative;
|
|
24
25
|
z-index: map.get($theme, 'z-index', 'modal');
|
|
@@ -44,8 +45,7 @@ $language-list: null !default;
|
|
|
44
45
|
right: 0;
|
|
45
46
|
width: calc(44px + var(--s-m) * 2);
|
|
46
47
|
|
|
47
|
-
|
|
48
|
-
&.ecl-menu--rtl {
|
|
48
|
+
&:dir(rtl) {
|
|
49
49
|
left: 0;
|
|
50
50
|
right: auto;
|
|
51
51
|
}
|
|
@@ -123,6 +123,7 @@ $language-list: null !default;
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
.ecl-site-header__header {
|
|
126
|
+
background-color: map.get($site-header, 'background-color');
|
|
126
127
|
position: relative;
|
|
127
128
|
z-index: 54;
|
|
128
129
|
|
|
@@ -178,7 +179,6 @@ $language-list: null !default;
|
|
|
178
179
|
.ecl-search-form__text-input {
|
|
179
180
|
box-sizing: border-box;
|
|
180
181
|
flex-grow: 0;
|
|
181
|
-
height: 2.75rem;
|
|
182
182
|
width: 100%;
|
|
183
183
|
}
|
|
184
184
|
}
|
|
@@ -201,7 +201,7 @@ $language-list: null !default;
|
|
|
201
201
|
}
|
|
202
202
|
|
|
203
203
|
.ecl-site-header__login-box {
|
|
204
|
-
border-radius: map.get($theme, 'border-radius', '
|
|
204
|
+
border-radius: map.get($theme, 'border-radius', 'xs');
|
|
205
205
|
box-sizing: border-box;
|
|
206
206
|
left: 0;
|
|
207
207
|
margin-top: var(--s-m);
|
|
@@ -231,7 +231,7 @@ $language-list: null !default;
|
|
|
231
231
|
|
|
232
232
|
&.ecl-link {
|
|
233
233
|
color: var(--c-d);
|
|
234
|
-
border-radius:
|
|
234
|
+
border-radius: map.get($theme, 'border-radius', 's');
|
|
235
235
|
text-decoration: none;
|
|
236
236
|
|
|
237
237
|
&:focus-visible {
|
|
@@ -242,6 +242,11 @@ $language-list: null !default;
|
|
|
242
242
|
margin: 0;
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
|
+
// stylelint-disable-next-line no-descending-specificity
|
|
246
|
+
.ecl-icon {
|
|
247
|
+
height: map.get($theme, 'icon', 'm');
|
|
248
|
+
width: map.get($theme, 'icon', 'm');
|
|
249
|
+
}
|
|
245
250
|
|
|
246
251
|
&:active,
|
|
247
252
|
&[aria-expanded='true'] {
|
|
@@ -266,7 +271,7 @@ $language-list: null !default;
|
|
|
266
271
|
display: flex;
|
|
267
272
|
margin-top: var(--s-m);
|
|
268
273
|
|
|
269
|
-
@include breakpoints.down('
|
|
274
|
+
@include breakpoints.down('l') {
|
|
270
275
|
&::before {
|
|
271
276
|
@include site-header-dropdown.arrow-up;
|
|
272
277
|
|
|
@@ -332,14 +337,14 @@ $language-list: null !default;
|
|
|
332
337
|
}
|
|
333
338
|
// stylelint-enable plugin/selector-bem-pattern
|
|
334
339
|
|
|
335
|
-
@include breakpoints.down('
|
|
340
|
+
@include breakpoints.down('l') {
|
|
336
341
|
.ecl-site-header__custom-action-toggle,
|
|
337
342
|
.ecl-site-header__login-toggle,
|
|
338
343
|
.ecl-site-header__search-toggle,
|
|
339
344
|
.ecl-site-header__language-selector {
|
|
340
|
-
font-size: 0;
|
|
341
|
-
line-height: 0;
|
|
342
|
-
padding: calc(var(--s-xs) - 1px) 0;
|
|
345
|
+
font-size: 0 !important;
|
|
346
|
+
line-height: 0 !important;
|
|
347
|
+
padding: calc(var(--s-xs) - 1px) 0 !important;
|
|
343
348
|
|
|
344
349
|
&.ecl-link {
|
|
345
350
|
.ecl-link__label {
|
|
@@ -350,11 +355,6 @@ $language-list: null !default;
|
|
|
350
355
|
.ecl-link__icon-container {
|
|
351
356
|
margin-inline-start: 0;
|
|
352
357
|
}
|
|
353
|
-
|
|
354
|
-
.ecl-icon {
|
|
355
|
-
height: 1.5rem;
|
|
356
|
-
width: 1.5rem;
|
|
357
|
-
}
|
|
358
358
|
}
|
|
359
359
|
}
|
|
360
360
|
|
|
@@ -374,7 +374,7 @@ $language-list: null !default;
|
|
|
374
374
|
}
|
|
375
375
|
}
|
|
376
376
|
|
|
377
|
-
@include breakpoints.up('
|
|
377
|
+
@include breakpoints.up('l') {
|
|
378
378
|
.ecl-site-header__logo-link {
|
|
379
379
|
margin-top: 0;
|
|
380
380
|
}
|
|
@@ -384,7 +384,7 @@ $language-list: null !default;
|
|
|
384
384
|
}
|
|
385
385
|
}
|
|
386
386
|
|
|
387
|
-
@include breakpoints.up('
|
|
387
|
+
@include breakpoints.up('xl') {
|
|
388
388
|
.ecl-site-header {
|
|
389
389
|
.ecl-site-header__cta {
|
|
390
390
|
align-self: center;
|
|
@@ -478,11 +478,6 @@ $language-list: null !default;
|
|
|
478
478
|
}
|
|
479
479
|
|
|
480
480
|
.ecl-site-header__action {
|
|
481
|
-
.ecl-button--icon-only .ecl-button__icon {
|
|
482
|
-
height: map.get($theme, 'icon', 'xs');
|
|
483
|
-
width: map.get($theme, 'icon', 'xs');
|
|
484
|
-
}
|
|
485
|
-
|
|
486
481
|
.ecl-form-group {
|
|
487
482
|
width: map.get($site-header, 'search-width-l');
|
|
488
483
|
}
|
|
@@ -512,16 +507,10 @@ $language-list: null !default;
|
|
|
512
507
|
.ecl-site-header__login-toggle,
|
|
513
508
|
.ecl-site-header__language-selector {
|
|
514
509
|
.ecl-site-header__icon {
|
|
515
|
-
height: map.get($theme, 'icon', 'xs');
|
|
516
510
|
margin-inline-end: var(--s-xs);
|
|
517
|
-
width: map.get($theme, 'icon', 'xs');
|
|
518
511
|
}
|
|
519
512
|
}
|
|
520
513
|
|
|
521
|
-
.ecl-site-header__login-toggle {
|
|
522
|
-
margin-inline-end: var(--s-xs) !important;
|
|
523
|
-
}
|
|
524
|
-
|
|
525
514
|
.ecl-site-header__search-toggle {
|
|
526
515
|
display: none;
|
|
527
516
|
}
|
|
@@ -550,7 +539,7 @@ $language-list: null !default;
|
|
|
550
539
|
// stylelint-enable plugin/selector-bem-pattern
|
|
551
540
|
}
|
|
552
541
|
|
|
553
|
-
@
|
|
542
|
+
@media (width >= 1368px) {
|
|
554
543
|
.ecl-site-header__action .ecl-form-group {
|
|
555
544
|
width: map.get($site-header, 'search-width-xl');
|
|
556
545
|
}
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
|
|
49
49
|
<div class="ecl-site-header__language">
|
|
50
50
|
<a
|
|
51
|
-
class="ecl-button ecl-button--tertiary ecl-site-header__language-selector"
|
|
51
|
+
class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__language-selector"
|
|
52
52
|
href="{{ _language_selector.href|default('') }}"
|
|
53
53
|
data-ecl-language-selector
|
|
54
54
|
role="button"
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
{% include '@ecl/icon/icon.html.twig' with {
|
|
62
62
|
icon: {
|
|
63
63
|
name: 'global',
|
|
64
|
-
size: '
|
|
64
|
+
size: 'm'
|
|
65
65
|
},
|
|
66
66
|
as_image: true,
|
|
67
67
|
extra_classes: 'ecl-site-header__icon',
|
|
@@ -86,6 +86,7 @@
|
|
|
86
86
|
{% if _language_selector.overlay.close is not empty %}
|
|
87
87
|
{% include '@ecl/button/button.html.twig' with _language_selector.overlay.close|merge({
|
|
88
88
|
variant: 'tertiary',
|
|
89
|
+
style: 'neutral',
|
|
89
90
|
extra_classes: 'ecl-site-header__language-close',
|
|
90
91
|
extra_attributes: [{
|
|
91
92
|
name: 'data-ecl-language-list-close',
|
package/site-header.html.twig
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
{
|
|
14
14
|
"title": (string) (default: ''): Logo title attribute.
|
|
15
15
|
"alt": (string) (default: ''): Logo alt attribute.
|
|
16
|
-
"breakpoint": (string) (default: '
|
|
16
|
+
"breakpoint": (string) (default: 'xs', 415px) Breakpoint where to switch the logo displayed. Expected value in EU is "l"
|
|
17
17
|
"href": (string) (default: ''): Logo URL.
|
|
18
18
|
"src_desktop": (string) (default: ''): Desktop logo image file path
|
|
19
19
|
"src_mobile": (string) (default: ''): Mobile logo image file path for EU only
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
{# Logo #}
|
|
237
237
|
{% if _logo is not empty and _logo.src_desktop is not empty %}
|
|
238
238
|
{% set _label %}
|
|
239
|
-
{% set _picture = { sources: [{ src: _logo.src_desktop, media: _logo.breakpoint|default('
|
|
239
|
+
{% set _picture = { sources: [{ src: _logo.src_desktop, media: _logo.breakpoint|default('xs') }] } %}
|
|
240
240
|
{% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
|
|
241
241
|
{% set _picture = _picture|merge({
|
|
242
242
|
img: {
|
|
@@ -279,6 +279,7 @@
|
|
|
279
279
|
<div class="ecl-site-header__custom-action" aria-live="polite">
|
|
280
280
|
{% set is_overlay = _custom_action.overlay is defined and _custom_action.overlay is not empty %}
|
|
281
281
|
{% set has_icon = _custom_action.icon is defined and _custom_action.icon is not empty %}
|
|
282
|
+
{% set has_hidden_label = _custom_action.link.hide_label is defined and _custom_action.link.hide_label is not empty %}
|
|
282
283
|
|
|
283
284
|
{% set link_extra_attributes = _custom_action.link.extra_attributes|default([]) %}
|
|
284
285
|
{% set link_extra_attributes = link_extra_attributes|merge([
|
|
@@ -293,25 +294,27 @@
|
|
|
293
294
|
{% endif %}
|
|
294
295
|
|
|
295
296
|
{% if has_icon %}
|
|
296
|
-
{% set icon_extra_classes = _custom_action.icon.extra_classes|default('') %}
|
|
297
|
-
{% set icon_extra_classes = icon_extra_classes ~ ' ecl-site-header__icon' %}
|
|
298
297
|
{% set icon = _custom_action.icon|merge({
|
|
299
|
-
extra_classes:
|
|
298
|
+
extra_classes: (_custom_action.icon.extra_classes|default('')) ~ ' ecl-site-header__icon'
|
|
300
299
|
}) %}
|
|
301
300
|
{% else %}
|
|
302
301
|
{% set icon = null %}
|
|
303
302
|
{% endif %}
|
|
304
303
|
|
|
304
|
+
{% set base_classes = 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary ecl-button--neutral' %}
|
|
305
|
+
{% if has_icon and has_hidden_label %}
|
|
306
|
+
{% set base_classes = base_classes ~ ' ecl-button--icon-only' %}
|
|
307
|
+
{% endif %}
|
|
308
|
+
{% set user_classes = _custom_action.link.extra_classes|default('') %}
|
|
309
|
+
{% set full_classes = (user_classes ? user_classes ~ ' ' : '') ~ base_classes %}
|
|
310
|
+
|
|
305
311
|
{% set custom_action_link = {
|
|
306
|
-
link: _custom_action.link|merge({ type:
|
|
312
|
+
link: _custom_action.link|merge({ type: 'standalone' }),
|
|
307
313
|
icon: icon,
|
|
308
314
|
extra_attributes: link_extra_attributes,
|
|
309
|
-
extra_classes:
|
|
310
|
-
_custom_action.link.extra_classes is defined and _custom_action.link.extra_classes is not empty
|
|
311
|
-
? _custom_action.link.extra_classes ~ ' ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'
|
|
312
|
-
: 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'
|
|
313
|
-
)
|
|
315
|
+
extra_classes: full_classes
|
|
314
316
|
} %}
|
|
317
|
+
|
|
315
318
|
{% include '@ecl/link/link.html.twig' with custom_action_link only %}
|
|
316
319
|
|
|
317
320
|
{% if _custom_action.overlay is defined and _custom_action.overlay is not empty %}
|
|
@@ -331,6 +334,7 @@
|
|
|
331
334
|
{% if _custom_action.overlay.close is defined and _custom_action.overlay.close is not empty %}
|
|
332
335
|
{% include '@ecl/button/button.html.twig' with _custom_action.overlay.close|merge({
|
|
333
336
|
variant: 'tertiary',
|
|
337
|
+
style: 'neutral',
|
|
334
338
|
extra_classes: 'ecl-site-header__custom-action-close',
|
|
335
339
|
extra_attributes: [{
|
|
336
340
|
name: 'data-ecl-custom-action-close',
|
|
@@ -351,7 +355,7 @@
|
|
|
351
355
|
<div class="ecl-site-header__login-container">
|
|
352
356
|
{% if _logged %}
|
|
353
357
|
<a
|
|
354
|
-
class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
|
|
358
|
+
class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle"
|
|
355
359
|
href="{{ _login_toggle.href_logged }}"
|
|
356
360
|
aria-controls="{{ _login_box.id }}"
|
|
357
361
|
data-ecl-login-toggle
|
|
@@ -360,7 +364,7 @@
|
|
|
360
364
|
{% include '@ecl/icon/icon.html.twig' with {
|
|
361
365
|
icon: {
|
|
362
366
|
name: 'logged-in',
|
|
363
|
-
size: '
|
|
367
|
+
size: 'm'
|
|
364
368
|
},
|
|
365
369
|
as_image: true,
|
|
366
370
|
extra_classes: 'ecl-site-header__icon',
|
|
@@ -389,7 +393,7 @@
|
|
|
389
393
|
</div>
|
|
390
394
|
{% else %}
|
|
391
395
|
<a
|
|
392
|
-
class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
|
|
396
|
+
class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__login-toggle"
|
|
393
397
|
href="{{ _login_toggle.href_not_logged }}"
|
|
394
398
|
data-ecl-login-toggle
|
|
395
399
|
>
|
|
@@ -397,7 +401,7 @@
|
|
|
397
401
|
icon: {
|
|
398
402
|
path: _icon_path,
|
|
399
403
|
name: 'log-in',
|
|
400
|
-
size: '
|
|
404
|
+
size: 'm'
|
|
401
405
|
},
|
|
402
406
|
as_image: true,
|
|
403
407
|
extra_classes: 'ecl-site-header__icon',
|
|
@@ -424,7 +428,7 @@
|
|
|
424
428
|
<div class="ecl-site-header__search-container" role="search">
|
|
425
429
|
{% if _search_toggle is not empty %}
|
|
426
430
|
<a
|
|
427
|
-
class="ecl-button ecl-button--tertiary ecl-site-header__search-toggle"
|
|
431
|
+
class="ecl-button ecl-button--tertiary ecl-button--neutral ecl-site-header__search-toggle"
|
|
428
432
|
href="{{ _search_toggle.href }}"
|
|
429
433
|
data-ecl-search-toggle="true"
|
|
430
434
|
aria-controls="search-form-id"
|
|
@@ -434,7 +438,7 @@
|
|
|
434
438
|
icon: {
|
|
435
439
|
name: 'search',
|
|
436
440
|
path: _icon_path,
|
|
437
|
-
size: '
|
|
441
|
+
size: 'm',
|
|
438
442
|
},
|
|
439
443
|
as_image: true,
|
|
440
444
|
extra_classes: 'ecl-site-header__icon',
|
|
@@ -468,28 +472,29 @@
|
|
|
468
472
|
|
|
469
473
|
{# Banner top #}
|
|
470
474
|
{% if banner_top is defined and banner_top is not empty %}
|
|
471
|
-
<div class="ecl-
|
|
472
|
-
<div class="ecl-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
475
|
+
<div class="ecl-container">
|
|
476
|
+
<div class="ecl-site-header__banner-top">
|
|
477
|
+
{%- if banner_top.link is defined and banner_top.link is not empty %}
|
|
478
|
+
{% include '@ecl/link/link.html.twig' with banner_top|merge({
|
|
479
|
+
link: banner_top.link|merge({ type: 'standalone', no_visited: true}),
|
|
480
|
+
}) only %}
|
|
481
|
+
{% else %}
|
|
482
|
+
{{ banner_top }}
|
|
483
|
+
{% endif -%}
|
|
480
484
|
</div>
|
|
481
485
|
</div>
|
|
482
486
|
{% endif %}
|
|
483
487
|
|
|
484
488
|
{# Site name and call to action (banner) #}
|
|
485
489
|
{% if _site_name is not empty or _cta_link is not empty %}
|
|
486
|
-
|
|
490
|
+
{% set _banner_class = 'ecl-site-header__banner' %}
|
|
491
|
+
{% if _site_name_mobile_only %}
|
|
492
|
+
{% set _banner_class = _banner_class ~ ' ecl-site-header__site-name--mobile-only' %}
|
|
493
|
+
{% endif %}
|
|
494
|
+
<div class="{{ _banner_class }}">
|
|
487
495
|
<div class="ecl-container">
|
|
488
496
|
{% if _site_name is not empty %}
|
|
489
497
|
{% set _site_name_class = 'ecl-site-header__site-name' %}
|
|
490
|
-
{% if _site_name_mobile_only %}
|
|
491
|
-
{% set _site_name_class = _site_name_class ~ ' ecl-site-header__site-name--mobile-only' %}
|
|
492
|
-
{% endif %}
|
|
493
498
|
<div class="{{ _site_name_class }}">
|
|
494
499
|
{{- _site_name -}}
|
|
495
500
|
</div>
|