@ecl/site-header 5.0.0-alpha.13 → 5.0.0-alpha.15
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 +2 -2
- package/package.json +14 -14
- package/site-header-ec.scss +55 -28
- package/site-header-eu.scss +5 -6
- package/site-header-print.scss +4 -13
- package/site-header.html.twig +16 -15
|
@@ -283,8 +283,8 @@ $language-list: null !default;
|
|
|
283
283
|
|
|
284
284
|
// Horizontal sections
|
|
285
285
|
.ecl-site-header__language-content:not(
|
|
286
|
-
|
|
287
|
-
|
|
286
|
+
.ecl-site-header__language-content--stack
|
|
287
|
+
) {
|
|
288
288
|
flex-direction: row;
|
|
289
289
|
margin-top: map.get($language-list, 'content-margin-desktop');
|
|
290
290
|
|
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.15",
|
|
6
6
|
"description": "ECL Site Header",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
@@ -10,20 +10,20 @@
|
|
|
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/notification": "5.0.0-alpha.
|
|
20
|
-
"@ecl/picture": "5.0.0-alpha.
|
|
21
|
-
"@ecl/search-form": "5.0.0-alpha.
|
|
22
|
-
"focus-trap": "7.6.
|
|
13
|
+
"@ecl/button": "5.0.0-alpha.15",
|
|
14
|
+
"@ecl/dom-utils": "5.0.0-alpha.15",
|
|
15
|
+
"@ecl/grid": "5.0.0-alpha.15",
|
|
16
|
+
"@ecl/icon": "5.0.0-alpha.15",
|
|
17
|
+
"@ecl/link": "5.0.0-alpha.15",
|
|
18
|
+
"@ecl/menu": "5.0.0-alpha.15",
|
|
19
|
+
"@ecl/notification": "5.0.0-alpha.15",
|
|
20
|
+
"@ecl/picture": "5.0.0-alpha.15",
|
|
21
|
+
"@ecl/search-form": "5.0.0-alpha.15",
|
|
22
|
+
"focus-trap": "7.6.5"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@ecl/resources-ec-logo": "5.0.0-alpha.
|
|
26
|
-
"@ecl/resources-eu-logo": "5.0.0-alpha.
|
|
25
|
+
"@ecl/resources-ec-logo": "5.0.0-alpha.15",
|
|
26
|
+
"@ecl/resources-eu-logo": "5.0.0-alpha.15"
|
|
27
27
|
},
|
|
28
28
|
"repository": {
|
|
29
29
|
"type": "git",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"design-system",
|
|
40
40
|
"twig"
|
|
41
41
|
],
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "6004e147f949c0fbb2278650d59a1b8c249653c5"
|
|
43
43
|
}
|
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,10 @@ $language-list: null !default;
|
|
|
19
20
|
|
|
20
21
|
.ecl-site-header {
|
|
21
22
|
background-color: map.get($site-header, 'background-color');
|
|
22
|
-
box-shadow: var(--sh-2);
|
|
23
23
|
margin: 0;
|
|
24
24
|
position: relative;
|
|
25
25
|
z-index: map.get($theme, 'z-index', 'modal');
|
|
26
26
|
|
|
27
|
-
.ecl-site-header__inner {
|
|
28
|
-
box-shadow: var(--sh-2);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
27
|
.ecl-menu,
|
|
32
28
|
.ecl-mega-menu {
|
|
33
29
|
bottom: 0;
|
|
@@ -68,8 +64,8 @@ $language-list: null !default;
|
|
|
68
64
|
.ecl-site-header__container {
|
|
69
65
|
display: flex;
|
|
70
66
|
flex-direction: column;
|
|
71
|
-
padding-
|
|
72
|
-
padding-
|
|
67
|
+
padding-block-end: var(--s-m);
|
|
68
|
+
padding-block-start: var(--s-s);
|
|
73
69
|
position: static;
|
|
74
70
|
}
|
|
75
71
|
|
|
@@ -113,7 +109,7 @@ $language-list: null !default;
|
|
|
113
109
|
|
|
114
110
|
.ecl-button {
|
|
115
111
|
box-sizing: border-box;
|
|
116
|
-
margin-inline-start: var(--s-
|
|
112
|
+
margin-inline-start: var(--s-3xs);
|
|
117
113
|
}
|
|
118
114
|
|
|
119
115
|
> :first-child .ecl-button,
|
|
@@ -123,7 +119,7 @@ $language-list: null !default;
|
|
|
123
119
|
|
|
124
120
|
.ecl-site-header--has-menu &,
|
|
125
121
|
.ecl-site-header--has-mega-menu & {
|
|
126
|
-
margin-inline-end: calc(44px + var(--s-
|
|
122
|
+
margin-inline-end: calc(44px + var(--s-3xs));
|
|
127
123
|
}
|
|
128
124
|
}
|
|
129
125
|
|
|
@@ -249,7 +245,7 @@ $language-list: null !default;
|
|
|
249
245
|
|
|
250
246
|
.ecl-notification {
|
|
251
247
|
background: var(--cm-surface-inverted);
|
|
252
|
-
margin: 0 0 var(--s-
|
|
248
|
+
margin: 0 0 var(--s-m);
|
|
253
249
|
}
|
|
254
250
|
|
|
255
251
|
.ecl-notification__description,
|
|
@@ -260,17 +256,21 @@ $language-list: null !default;
|
|
|
260
256
|
|
|
261
257
|
.ecl-site-header__banner-top {
|
|
262
258
|
border-top: 1px solid var(--cm-border-neutral);
|
|
263
|
-
|
|
259
|
+
display: none;
|
|
264
260
|
padding: var(--s-xs) 0;
|
|
261
|
+
|
|
262
|
+
@include mixins.responsive-font(map.get($site-header, 'class-name-font'));
|
|
265
263
|
}
|
|
266
264
|
|
|
267
265
|
.ecl-site-header__banner {
|
|
268
|
-
|
|
266
|
+
align-items: center;
|
|
267
|
+
background: var(--cm-surface-brand);
|
|
269
268
|
color: map.get($site-header, 'banner-text-color');
|
|
270
|
-
display:
|
|
271
|
-
font: var(--f-2xl);
|
|
269
|
+
display: flex;
|
|
272
270
|
min-height: 1.75rem;
|
|
273
|
-
padding: var(--s-
|
|
271
|
+
padding: var(--s-2xs) 0;
|
|
272
|
+
|
|
273
|
+
@include mixins.responsive-font(map.get($site-header, 'banner-text-font'));
|
|
274
274
|
|
|
275
275
|
.ecl-container {
|
|
276
276
|
display: flex;
|
|
@@ -293,11 +293,11 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
293
293
|
position: absolute;
|
|
294
294
|
right: 0;
|
|
295
295
|
top: 2.5rem;
|
|
296
|
-
width: calc(44px + var(--s-
|
|
296
|
+
width: calc(44px + var(--s-l) * 2);
|
|
297
297
|
}
|
|
298
298
|
|
|
299
299
|
.ecl-site-header .ecl-mega-menu {
|
|
300
|
-
right: calc(-1 * var(--s-
|
|
300
|
+
right: calc(-1 * var(--s-l));
|
|
301
301
|
}
|
|
302
302
|
|
|
303
303
|
.ecl-site-header .ecl-mega-menu--rtl,
|
|
@@ -313,7 +313,11 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
313
313
|
top: $menu-top;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
-
@
|
|
316
|
+
@media (width >= 415px) {
|
|
317
|
+
.ecl-site-header__banner {
|
|
318
|
+
padding: var(--s-xs) 0;
|
|
319
|
+
}
|
|
320
|
+
|
|
317
321
|
.ecl-site-header__logo-image {
|
|
318
322
|
height: map.get($site-header, 'logo-height-lg-m');
|
|
319
323
|
}
|
|
@@ -322,9 +326,21 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
322
326
|
.ecl-site-header .ecl-menu__open {
|
|
323
327
|
top: calc(-1 * var(--s-s));
|
|
324
328
|
}
|
|
329
|
+
|
|
330
|
+
.ecl-site-header__notification .ecl-notification {
|
|
331
|
+
margin-block-end: var(--s-l);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.ecl-site-header__site-name--mobile-only {
|
|
335
|
+
display: none;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.ecl-site-header__banner-top {
|
|
339
|
+
display: block;
|
|
340
|
+
}
|
|
325
341
|
}
|
|
326
342
|
|
|
327
|
-
@include breakpoints.down('
|
|
343
|
+
@include breakpoints.down('l') {
|
|
328
344
|
.ecl-site-header__custom-action-toggle,
|
|
329
345
|
.ecl-site-header__login-toggle,
|
|
330
346
|
.ecl-site-header__search-toggle,
|
|
@@ -348,11 +364,20 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
348
364
|
}
|
|
349
365
|
|
|
350
366
|
@include breakpoints.up('m') {
|
|
367
|
+
.ecl-site-header__banner {
|
|
368
|
+
padding: var(--s-xs) 0;
|
|
369
|
+
}
|
|
370
|
+
|
|
351
371
|
.ecl-site-header__logo-link {
|
|
352
372
|
margin-top: 0;
|
|
353
373
|
}
|
|
354
374
|
/* stylelint-disable-next-line plugin/selector-bem-pattern */
|
|
355
375
|
.ecl-site-header {
|
|
376
|
+
.ecl-mega-menu,
|
|
377
|
+
.ecl-menu {
|
|
378
|
+
width: calc(44px + var(--s-xl) * 2);
|
|
379
|
+
}
|
|
380
|
+
|
|
356
381
|
.ecl-search-form__text-input {
|
|
357
382
|
width: map.get($site-header, 'search-width');
|
|
358
383
|
}
|
|
@@ -363,7 +388,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
363
388
|
}
|
|
364
389
|
}
|
|
365
390
|
|
|
366
|
-
@include breakpoints.up('
|
|
391
|
+
@include breakpoints.up('xl') {
|
|
367
392
|
.ecl-site-header {
|
|
368
393
|
.ecl-site-header__cta {
|
|
369
394
|
align-self: center;
|
|
@@ -396,13 +421,17 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
396
421
|
.ecl-mega-menu__inner {
|
|
397
422
|
top: 0;
|
|
398
423
|
}
|
|
424
|
+
|
|
425
|
+
.ecl-site-header__notification .ecl-notification {
|
|
426
|
+
margin-block-end: var(--s-2xl);
|
|
427
|
+
}
|
|
399
428
|
}
|
|
400
429
|
|
|
401
430
|
.ecl-site-header__container {
|
|
402
431
|
align-items: flex-end;
|
|
403
432
|
flex-direction: row;
|
|
404
433
|
padding-bottom: var(--s-xl);
|
|
405
|
-
padding-top: var(--s-
|
|
434
|
+
padding-top: var(--s-3xl);
|
|
406
435
|
}
|
|
407
436
|
|
|
408
437
|
.ecl-site-header__header {
|
|
@@ -413,11 +442,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
413
442
|
align-self: center;
|
|
414
443
|
flex-grow: 1;
|
|
415
444
|
margin-inline-end: 0;
|
|
416
|
-
padding: var(--s-
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
.ecl-site-header__site-name--mobile-only {
|
|
420
|
-
display: none;
|
|
445
|
+
padding: var(--s-xs) 0;
|
|
421
446
|
}
|
|
422
447
|
|
|
423
448
|
.ecl-site-header__top {
|
|
@@ -426,6 +451,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
426
451
|
|
|
427
452
|
.ecl-site-header__action {
|
|
428
453
|
align-items: center;
|
|
454
|
+
padding-bottom: var(--s-3xs);
|
|
429
455
|
|
|
430
456
|
.ecl-button--icon-only .ecl-button__icon {
|
|
431
457
|
height: map.get($theme, 'icon', 'xs');
|
|
@@ -530,8 +556,9 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
530
556
|
}
|
|
531
557
|
|
|
532
558
|
.ecl-site-header__banner {
|
|
559
|
+
background: map.get($site-header, 'banner-background-desktop');
|
|
560
|
+
color: map.get($site-header, 'banner-text-color-desktop');
|
|
533
561
|
box-shadow: none;
|
|
534
|
-
font: var(--f-3xl);
|
|
535
562
|
min-height: 0;
|
|
536
563
|
padding: 0;
|
|
537
564
|
|
|
@@ -541,7 +568,7 @@ $menu-top: calc(44px + 2 * var(--s-xs));
|
|
|
541
568
|
}
|
|
542
569
|
}
|
|
543
570
|
|
|
544
|
-
@include breakpoints.up('
|
|
571
|
+
@include breakpoints.up('xxl') {
|
|
545
572
|
.ecl-site-header__action .ecl-search-form__text-input {
|
|
546
573
|
width: map.get($site-header, 'search-width-xl');
|
|
547
574
|
}
|
package/site-header-eu.scss
CHANGED
|
@@ -178,7 +178,6 @@ $language-list: null !default;
|
|
|
178
178
|
.ecl-search-form__text-input {
|
|
179
179
|
box-sizing: border-box;
|
|
180
180
|
flex-grow: 0;
|
|
181
|
-
height: 2.75rem;
|
|
182
181
|
width: 100%;
|
|
183
182
|
}
|
|
184
183
|
}
|
|
@@ -266,7 +265,7 @@ $language-list: null !default;
|
|
|
266
265
|
display: flex;
|
|
267
266
|
margin-top: var(--s-m);
|
|
268
267
|
|
|
269
|
-
@include breakpoints.down('
|
|
268
|
+
@include breakpoints.down('l') {
|
|
270
269
|
&::before {
|
|
271
270
|
@include site-header-dropdown.arrow-up;
|
|
272
271
|
|
|
@@ -332,7 +331,7 @@ $language-list: null !default;
|
|
|
332
331
|
}
|
|
333
332
|
// stylelint-enable plugin/selector-bem-pattern
|
|
334
333
|
|
|
335
|
-
@include breakpoints.down('
|
|
334
|
+
@include breakpoints.down('l') {
|
|
336
335
|
.ecl-site-header__custom-action-toggle,
|
|
337
336
|
.ecl-site-header__login-toggle,
|
|
338
337
|
.ecl-site-header__search-toggle,
|
|
@@ -374,7 +373,7 @@ $language-list: null !default;
|
|
|
374
373
|
}
|
|
375
374
|
}
|
|
376
375
|
|
|
377
|
-
@include breakpoints.up('
|
|
376
|
+
@include breakpoints.up('l') {
|
|
378
377
|
.ecl-site-header__logo-link {
|
|
379
378
|
margin-top: 0;
|
|
380
379
|
}
|
|
@@ -384,7 +383,7 @@ $language-list: null !default;
|
|
|
384
383
|
}
|
|
385
384
|
}
|
|
386
385
|
|
|
387
|
-
@include breakpoints.up('
|
|
386
|
+
@include breakpoints.up('xl') {
|
|
388
387
|
.ecl-site-header {
|
|
389
388
|
.ecl-site-header__cta {
|
|
390
389
|
align-self: center;
|
|
@@ -550,7 +549,7 @@ $language-list: null !default;
|
|
|
550
549
|
// stylelint-enable plugin/selector-bem-pattern
|
|
551
550
|
}
|
|
552
551
|
|
|
553
|
-
@include breakpoints.up('
|
|
552
|
+
@include breakpoints.up('xxl') {
|
|
554
553
|
.ecl-site-header__action .ecl-form-group {
|
|
555
554
|
width: map.get($site-header, 'search-width-xl');
|
|
556
555
|
}
|
package/site-header-print.scss
CHANGED
|
@@ -29,23 +29,14 @@ $site-header: null !default;
|
|
|
29
29
|
display: none;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
.ecl-site-header__banner-top {
|
|
33
|
-
color: var(--cm-on-surface-brand, var(--c-d));
|
|
34
|
-
font: map.get($theme, 'font-print', 'm');
|
|
35
|
-
|
|
36
|
-
.ecl-link {
|
|
37
|
-
color: var(--cm-on-surface-brand, var(--c-d));
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.ecl-link::after {
|
|
41
|
-
display: none;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
32
|
.ecl-site-header__banner {
|
|
46
33
|
display: none !important;
|
|
47
34
|
}
|
|
48
35
|
|
|
36
|
+
.ecl-site-header__banner-top {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
49
40
|
.ecl-site-header__logo-link::after {
|
|
50
41
|
display: none;
|
|
51
42
|
}
|
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: {
|
|
@@ -468,28 +468,29 @@
|
|
|
468
468
|
|
|
469
469
|
{# Banner top #}
|
|
470
470
|
{% 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
|
-
|
|
471
|
+
<div class="ecl-container">
|
|
472
|
+
<div class="ecl-site-header__banner-top">
|
|
473
|
+
{%- if banner_top.link is defined and banner_top.link is not empty %}
|
|
474
|
+
{% include '@ecl/link/link.html.twig' with banner_top|merge({
|
|
475
|
+
link: banner_top.link|merge({ type: 'standalone', no_visited: true}),
|
|
476
|
+
}) only %}
|
|
477
|
+
{% else %}
|
|
478
|
+
{{ banner_top }}
|
|
479
|
+
{% endif -%}
|
|
480
480
|
</div>
|
|
481
481
|
</div>
|
|
482
482
|
{% endif %}
|
|
483
483
|
|
|
484
484
|
{# Site name and call to action (banner) #}
|
|
485
485
|
{% if _site_name is not empty or _cta_link is not empty %}
|
|
486
|
-
|
|
486
|
+
{% set _banner_class = 'ecl-site-header__banner' %}
|
|
487
|
+
{% if _site_name_mobile_only %}
|
|
488
|
+
{% set _banner_class = _banner_class ~ ' ecl-site-header__site-name--mobile-only' %}
|
|
489
|
+
{% endif %}
|
|
490
|
+
<div class="{{ _banner_class }}">
|
|
487
491
|
<div class="ecl-container">
|
|
488
492
|
{% if _site_name is not empty %}
|
|
489
493
|
{% 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
494
|
<div class="{{ _site_name_class }}">
|
|
494
495
|
{{- _site_name -}}
|
|
495
496
|
</div>
|