@ecl/site-header 5.0.0-alpha.1 → 5.0.0-alpha.3

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/README.md CHANGED
@@ -19,7 +19,7 @@ npm install --save @ecl/site-header
19
19
  - "href" (string) (default: ''): Logo URL.
20
20
  - "src_desktop" (string) (default: ''): Desktop logo image file path
21
21
  - "src_mobile" (string) (default: ''): Mobile logo image file path for EU only
22
- - "size": (string) (default: 'm'): Three sizes in desktop (s, m, l)
22
+ - "size": (string) (default: 'l'): Three sizes in desktop (s, m, l)
23
23
  - **"login_box"** (associative array) format:
24
24
  - "id": (string) Id of the box
25
25
  - "description" (string) Label for the logged in users
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.1",
5
+ "version": "5.0.0-alpha.3",
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.1",
14
- "@ecl/dom-utils": "5.0.0-alpha.1",
15
- "@ecl/grid": "5.0.0-alpha.1",
16
- "@ecl/icon": "5.0.0-alpha.1",
17
- "@ecl/link": "5.0.0-alpha.1",
18
- "@ecl/menu": "5.0.0-alpha.1",
19
- "@ecl/notification": "5.0.0-alpha.1",
20
- "@ecl/picture": "5.0.0-alpha.1",
21
- "@ecl/search-form": "5.0.0-alpha.1",
13
+ "@ecl/button": "5.0.0-alpha.3",
14
+ "@ecl/dom-utils": "5.0.0-alpha.3",
15
+ "@ecl/grid": "5.0.0-alpha.3",
16
+ "@ecl/icon": "5.0.0-alpha.3",
17
+ "@ecl/link": "5.0.0-alpha.3",
18
+ "@ecl/menu": "5.0.0-alpha.3",
19
+ "@ecl/notification": "5.0.0-alpha.3",
20
+ "@ecl/picture": "5.0.0-alpha.3",
21
+ "@ecl/search-form": "5.0.0-alpha.3",
22
22
  "focus-trap": "7.6.4"
23
23
  },
24
24
  "devDependencies": {
25
- "@ecl/resources-ec-logo": "5.0.0-alpha.1",
26
- "@ecl/resources-eu-logo": "5.0.0-alpha.1"
25
+ "@ecl/resources-ec-logo": "5.0.0-alpha.3",
26
+ "@ecl/resources-eu-logo": "5.0.0-alpha.3"
27
27
  },
28
28
  "repository": {
29
29
  "type": "git",
@@ -39,5 +39,5 @@
39
39
  "design-system",
40
40
  "twig"
41
41
  ],
42
- "gitHead": "f800b6d2de209fcfe182aadca5f7e45ad497b23a"
42
+ "gitHead": "d81707eac4ec89a4c0858a2e31bcd07284dff272"
43
43
  }
@@ -7,12 +7,22 @@
7
7
 
8
8
  // Exposed variables
9
9
  $theme: null !default;
10
+ $site-header: null !default;
11
+
12
+ .ecl-site-header .ecl-site-header__background {
13
+ background-image: none;
14
+ }
15
+
16
+ .ecl-site-header__top {
17
+ display: flex;
18
+ justify-content: center;
19
+ }
10
20
 
11
21
  .ecl-site-header__logo-image {
12
- height: 1.9cm;
22
+ height: auto;
13
23
  margin-bottom: map.get($theme, 'spacing-print', 's');
14
24
  margin-top: map.get($theme, 'spacing-print', 'm');
15
- width: 7.2cm;
25
+ width: 6.65cm;
16
26
  }
17
27
 
18
28
  .ecl-site-header__action {
@@ -20,11 +30,11 @@ $theme: null !default;
20
30
  }
21
31
 
22
32
  .ecl-site-header__banner-top {
23
- color: var(--c-d);
24
- font: map.get($theme, 'font-prolonged-print', 'm');
33
+ color: var(--cm-on-surface-dark, var(--c-d));
34
+ font: map.get($theme, 'font-print', 'm');
25
35
 
26
36
  .ecl-link {
27
- color: var(--c-d);
37
+ color: var(--cm-on-surface-dark, var(--c-d));
28
38
  }
29
39
 
30
40
  .ecl-link::after {
@@ -33,6 +43,7 @@ $theme: null !default;
33
43
  }
34
44
 
35
45
  .ecl-site-header__banner {
46
+ color: map.get($site-header, 'banner-text-color');
36
47
  font: map.get($theme, 'font-print', '3xl');
37
48
  font-family: var(--ecl-font-family-print-alt);
38
49
  font-weight: map.get($theme, 'font-weight-print', 'bold');
@@ -46,3 +57,7 @@ $theme: null !default;
46
57
  .ecl-site-header__logo-image-mobile {
47
58
  display: none;
48
59
  }
60
+
61
+ .ecl-site-header__notification .ecl-notification {
62
+ width: 100%;
63
+ }