@ecl/spotlight 5.0.0-alpha.20 → 5.0.0-alpha.22
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/package.json +5 -5
- package/spotlight-print.scss +26 -67
- package/spotlight.html.twig +4 -0
- package/spotlight.scss +33 -14
package/package.json
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
"name": "@ecl/spotlight",
|
|
3
3
|
"author": "European Commission",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"version": "5.0.0-alpha.
|
|
5
|
+
"version": "5.0.0-alpha.22",
|
|
6
6
|
"description": "ECL Spotlight",
|
|
7
7
|
"style": "spotlight.scss",
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@ecl/grid": "5.0.0-alpha.
|
|
10
|
-
"@ecl/mixins-typography": "5.0.0-alpha.
|
|
11
|
-
"@ecl/picture": "5.0.0-alpha.
|
|
9
|
+
"@ecl/grid": "5.0.0-alpha.22",
|
|
10
|
+
"@ecl/mixins-typography": "5.0.0-alpha.22",
|
|
11
|
+
"@ecl/picture": "5.0.0-alpha.22"
|
|
12
12
|
},
|
|
13
13
|
"publishConfig": {
|
|
14
14
|
"access": "public"
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"europa-component-library",
|
|
27
27
|
"design-system"
|
|
28
28
|
],
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "61e1409a0388aa095e08280e768633e41cf57d01"
|
|
30
30
|
}
|
package/spotlight-print.scss
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
// Exposed variables
|
|
10
10
|
$theme: null !default;
|
|
11
11
|
$spotlight: null !default;
|
|
12
|
+
$content-padding-top: 9.125rem;
|
|
13
|
+
$anchor-width-l: 232px;
|
|
12
14
|
|
|
13
15
|
.ecl-spotlight {
|
|
14
16
|
container-name: ecl-spotlight;
|
|
@@ -22,7 +24,7 @@ $spotlight: null !default;
|
|
|
22
24
|
background-color: map.get($spotlight, 'header', 'background');
|
|
23
25
|
color: map.get($spotlight, 'header', 'color');
|
|
24
26
|
display: flex;
|
|
25
|
-
height: map.get($spotlight, 'header', 'height-
|
|
27
|
+
height: map.get($spotlight, 'header', 'height-desktop');
|
|
26
28
|
letter-spacing: map.get($theme, 'letter-spacing', '3xl');
|
|
27
29
|
text-transform: uppercase;
|
|
28
30
|
|
|
@@ -55,9 +57,9 @@ $spotlight: null !default;
|
|
|
55
57
|
|
|
56
58
|
.ecl-spotlight__picture-container,
|
|
57
59
|
.ecl-spotlight .ecl-spotlight__image {
|
|
58
|
-
aspect-ratio:
|
|
60
|
+
aspect-ratio: 3/1;
|
|
59
61
|
|
|
60
|
-
--css-aspect-ratio:
|
|
62
|
+
--css-aspect-ratio: 3/1;
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
.ecl-spotlight__container {
|
|
@@ -73,14 +75,15 @@ $spotlight: null !default;
|
|
|
73
75
|
.ecl-container {
|
|
74
76
|
align-items: flex-end;
|
|
75
77
|
display: flex;
|
|
76
|
-
|
|
78
|
+
padding-block-start: $content-padding-top;
|
|
77
79
|
}
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
.ecl-spotlight__title {
|
|
81
83
|
color: map.get($spotlight, 'title', 'color');
|
|
82
84
|
display: block;
|
|
83
|
-
|
|
85
|
+
max-width: 950px;
|
|
86
|
+
padding-block: map.get($spotlight, 'title', 'padding-block-desktop');
|
|
84
87
|
|
|
85
88
|
@include mixins.responsive-font(
|
|
86
89
|
map.get($spotlight, 'title', 'font-m'),
|
|
@@ -95,6 +98,10 @@ $spotlight: null !default;
|
|
|
95
98
|
$container: 'ecl-spotlight'
|
|
96
99
|
);
|
|
97
100
|
}
|
|
101
|
+
|
|
102
|
+
.ecl-spotlight--anchor & {
|
|
103
|
+
padding-inline-end: $anchor-width-l;
|
|
104
|
+
}
|
|
98
105
|
}
|
|
99
106
|
|
|
100
107
|
.ecl-spotlight__credit {
|
|
@@ -112,9 +119,22 @@ $spotlight: null !default;
|
|
|
112
119
|
}
|
|
113
120
|
|
|
114
121
|
.ecl-spotlight__anchor {
|
|
115
|
-
|
|
122
|
+
align-self: flex-end;
|
|
123
|
+
background-color: map.get($spotlight, 'anchor', 'color');
|
|
124
|
+
display: block;
|
|
125
|
+
flex-shrink: 0;
|
|
126
|
+
height: 122px;
|
|
127
|
+
mask-image: url("data:image/svg+xml;utf8,<svg width='232' height='122' viewBox='0 0 232 122' xmlns='http://www.w3.org/2000/svg'><path d='M212.327 84.3105L0.469702 104.936V113.47V122.004L232 104.936L229.761 0.200012H215.46L212.327 84.3105Z' /></svg>");
|
|
128
|
+
mask-repeat: no-repeat;
|
|
129
|
+
padding-block-end: map.get($spotlight, 'anchor', 'padding-block');
|
|
130
|
+
padding-inline-end: inherit;
|
|
131
|
+
position: absolute;
|
|
132
|
+
right: 0;
|
|
133
|
+
width: $anchor-width-l;
|
|
116
134
|
|
|
117
135
|
&:dir(rtl) {
|
|
136
|
+
left: 0;
|
|
137
|
+
right: auto;
|
|
118
138
|
transform: scale(-1, 1);
|
|
119
139
|
}
|
|
120
140
|
}
|
|
@@ -131,64 +151,3 @@ $spotlight: null !default;
|
|
|
131
151
|
right: 50%;
|
|
132
152
|
}
|
|
133
153
|
}
|
|
134
|
-
|
|
135
|
-
@container ecl-spotlight (width >= #{map.get($theme, 'breakpoint', 'm')}) {
|
|
136
|
-
.ecl-spotlight__container {
|
|
137
|
-
height: map.get($spotlight, 'gradient-height-tablet');
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.ecl-spotlight__picture-container,
|
|
141
|
-
.ecl-spotlight .ecl-spotlight__image {
|
|
142
|
-
aspect-ratio: 2/1;
|
|
143
|
-
|
|
144
|
-
--css-aspect-ratio: 2/1;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
.ecl-spotlight__title {
|
|
148
|
-
max-width: 750px;
|
|
149
|
-
padding-block: map.get($spotlight, 'title', 'padding-block-tablet');
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.ecl-spotlight__header {
|
|
153
|
-
height: map.get($spotlight, 'header', 'height-tablet');
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.ecl-spotlight__anchor {
|
|
157
|
-
align-self: flex-end;
|
|
158
|
-
background-color: map.get($spotlight, 'anchor', 'color');
|
|
159
|
-
display: block;
|
|
160
|
-
flex-shrink: 0;
|
|
161
|
-
height: 73px;
|
|
162
|
-
mask-image: url("data:image/svg+xml;utf8,<svg width='161' height='73' viewBox='0 0 161 73' xmlns='http://www.w3.org/2000/svg'><path d='M147.353 50.6247L0.389648 62.8649V67.9293V72.9936L160.999 62.8649L159.447 0.709961H149.526L147.353 50.6247Z' fill-rule='evenodd' /></svg>");
|
|
163
|
-
mask-repeat: no-repeat;
|
|
164
|
-
padding-block-end: map.get($spotlight, 'anchor', 'padding-block');
|
|
165
|
-
padding-inline-end: map.get($spotlight, 'anchor', 'padding-inline');
|
|
166
|
-
width: 161px;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
@container ecl-spotlight (width >= #{map.get($theme, 'breakpoint', 'xl')}) {
|
|
171
|
-
.ecl-spotlight__title {
|
|
172
|
-
max-width: 950px;
|
|
173
|
-
padding-block: map.get($spotlight, 'title', 'padding-block-desktop');
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.ecl-spotlight__header {
|
|
177
|
-
height: map.get($spotlight, 'header', 'height-desktop');
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.ecl-spotlight__anchor {
|
|
181
|
-
mask-image: url("data:image/svg+xml;utf8,<svg width='232' height='122' viewBox='0 0 232 122' xmlns='http://www.w3.org/2000/svg'><path d='M212.327 84.3105L0.469702 104.936V113.47V122.004L232 104.936L229.761 0.200012H215.46L212.327 84.3105Z' /></svg>");
|
|
182
|
-
height: 122px;
|
|
183
|
-
width: 232px;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
@container ecl-spotlight (width >= #{map.get($theme, 'container', 'xl')}) {
|
|
188
|
-
.ecl-spotlight__picture-container,
|
|
189
|
-
.ecl-spotlight .ecl-spotlight__image {
|
|
190
|
-
aspect-ratio: 3/1;
|
|
191
|
-
|
|
192
|
-
--css-aspect-ratio: 3/1;
|
|
193
|
-
}
|
|
194
|
-
}
|
package/spotlight.html.twig
CHANGED
|
@@ -45,6 +45,10 @@
|
|
|
45
45
|
{% set _css_class = _css_class ~ ' ecl-spotlight--full-width' %}
|
|
46
46
|
{% endif %}
|
|
47
47
|
|
|
48
|
+
{% if _has_anchor %}
|
|
49
|
+
{% set _css_class = _css_class ~ ' ecl-spotlight--anchor' %}
|
|
50
|
+
{% endif %}
|
|
51
|
+
|
|
48
52
|
{% if extra_classes is defined and extra_classes is not empty %}
|
|
49
53
|
{% set _css_class = _css_class ~ ' ' ~ extra_classes %}
|
|
50
54
|
{% endif %}
|
package/spotlight.scss
CHANGED
|
@@ -10,6 +10,9 @@
|
|
|
10
10
|
// Exposed variables
|
|
11
11
|
$theme: null !default;
|
|
12
12
|
$spotlight: null !default;
|
|
13
|
+
$content-padding-top: 9.125rem;
|
|
14
|
+
$anchor-width-m: 161px;
|
|
15
|
+
$anchor-width-l: 232px;
|
|
13
16
|
|
|
14
17
|
.ecl-spotlight {
|
|
15
18
|
container-name: ecl-spotlight;
|
|
@@ -66,7 +69,6 @@ $spotlight: null !default;
|
|
|
66
69
|
bottom: 0;
|
|
67
70
|
display: flex;
|
|
68
71
|
flex-direction: column;
|
|
69
|
-
height: map.get($spotlight, 'gradient-height-mobile');
|
|
70
72
|
justify-content: flex-end;
|
|
71
73
|
position: absolute;
|
|
72
74
|
width: 100%;
|
|
@@ -74,7 +76,7 @@ $spotlight: null !default;
|
|
|
74
76
|
.ecl-container {
|
|
75
77
|
align-items: flex-end;
|
|
76
78
|
display: flex;
|
|
77
|
-
|
|
79
|
+
padding-block-start: $content-padding-top;
|
|
78
80
|
}
|
|
79
81
|
}
|
|
80
82
|
|
|
@@ -98,10 +100,17 @@ $spotlight: null !default;
|
|
|
98
100
|
}
|
|
99
101
|
}
|
|
100
102
|
|
|
101
|
-
.ecl-spotlight__link
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
.ecl-spotlight__link {
|
|
104
|
+
&:hover .ecl-spotlight__title,
|
|
105
|
+
&:focus-visible .ecl-spotlight__title {
|
|
106
|
+
text-decoration: underline;
|
|
107
|
+
text-decoration-thickness: from-font;
|
|
108
|
+
text-underline-offset: 0.15em;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&:focus-visible {
|
|
112
|
+
outline: none;
|
|
113
|
+
}
|
|
105
114
|
}
|
|
106
115
|
|
|
107
116
|
.ecl-spotlight__credit {
|
|
@@ -140,10 +149,6 @@ $spotlight: null !default;
|
|
|
140
149
|
}
|
|
141
150
|
|
|
142
151
|
@include breakpoints.up('m') {
|
|
143
|
-
.ecl-spotlight__container {
|
|
144
|
-
height: map.get($spotlight, 'gradient-height-tablet');
|
|
145
|
-
}
|
|
146
|
-
|
|
147
152
|
.ecl-spotlight__picture-container,
|
|
148
153
|
.ecl-spotlight .ecl-spotlight__image {
|
|
149
154
|
aspect-ratio: 2/1;
|
|
@@ -154,6 +159,10 @@ $spotlight: null !default;
|
|
|
154
159
|
.ecl-spotlight__title {
|
|
155
160
|
max-width: 750px;
|
|
156
161
|
padding-block: map.get($spotlight, 'title', 'padding-block-tablet');
|
|
162
|
+
|
|
163
|
+
.ecl-spotlight--anchor & {
|
|
164
|
+
padding-inline-end: $anchor-width-m;
|
|
165
|
+
}
|
|
157
166
|
}
|
|
158
167
|
|
|
159
168
|
.ecl-spotlight__header {
|
|
@@ -161,7 +170,6 @@ $spotlight: null !default;
|
|
|
161
170
|
}
|
|
162
171
|
|
|
163
172
|
.ecl-spotlight__anchor {
|
|
164
|
-
align-self: flex-end;
|
|
165
173
|
background-color: map.get($spotlight, 'anchor', 'color');
|
|
166
174
|
display: block;
|
|
167
175
|
flex-shrink: 0;
|
|
@@ -169,8 +177,15 @@ $spotlight: null !default;
|
|
|
169
177
|
mask-image: url("data:image/svg+xml;utf8,<svg width='161' height='73' viewBox='0 0 161 73' xmlns='http://www.w3.org/2000/svg'><path d='M147.353 50.6247L0.389648 62.8649V67.9293V72.9936L160.999 62.8649L159.447 0.709961H149.526L147.353 50.6247Z' fill-rule='evenodd' /></svg>");
|
|
170
178
|
mask-repeat: no-repeat;
|
|
171
179
|
padding-block-end: map.get($spotlight, 'anchor', 'padding-block');
|
|
172
|
-
padding-inline-end:
|
|
173
|
-
|
|
180
|
+
padding-inline-end: inherit;
|
|
181
|
+
position: absolute;
|
|
182
|
+
right: 0;
|
|
183
|
+
width: $anchor-width-m;
|
|
184
|
+
|
|
185
|
+
&:dir(rtl) {
|
|
186
|
+
left: 0;
|
|
187
|
+
right: auto;
|
|
188
|
+
}
|
|
174
189
|
}
|
|
175
190
|
}
|
|
176
191
|
|
|
@@ -178,6 +193,10 @@ $spotlight: null !default;
|
|
|
178
193
|
.ecl-spotlight__title {
|
|
179
194
|
max-width: 950px;
|
|
180
195
|
padding-block: map.get($spotlight, 'title', 'padding-block-desktop');
|
|
196
|
+
|
|
197
|
+
.ecl-spotlight--anchor & {
|
|
198
|
+
padding-inline-end: $anchor-width-l;
|
|
199
|
+
}
|
|
181
200
|
}
|
|
182
201
|
|
|
183
202
|
.ecl-spotlight__header {
|
|
@@ -187,7 +206,7 @@ $spotlight: null !default;
|
|
|
187
206
|
.ecl-spotlight__anchor {
|
|
188
207
|
mask-image: url("data:image/svg+xml;utf8,<svg width='232' height='122' viewBox='0 0 232 122' xmlns='http://www.w3.org/2000/svg'><path d='M212.327 84.3105L0.469702 104.936V113.47V122.004L232 104.936L229.761 0.200012H215.46L212.327 84.3105Z' /></svg>");
|
|
189
208
|
height: 122px;
|
|
190
|
-
width:
|
|
209
|
+
width: $anchor-width-l;
|
|
191
210
|
}
|
|
192
211
|
}
|
|
193
212
|
|