@entur/layout 3.1.9-beta.12 → 3.1.9-beta.13
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/dist/styles.css +135 -135
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -133,25 +133,97 @@
|
|
|
133
133
|
--white-alpha-90: rgba(255,255,255,0.89804);
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
.eds-
|
|
136
|
+
.eds-navigation-card {
|
|
137
137
|
display: flex;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
border-radius: 0.25rem;
|
|
143
|
-
align-items: flex-start;
|
|
144
|
-
-webkit-appearance: none;
|
|
145
|
-
-moz-appearance: none;
|
|
146
|
-
appearance: none;
|
|
147
|
-
-webkit-text-decoration: none;
|
|
148
|
-
text-decoration: none;
|
|
138
|
+
flex-direction: column;
|
|
139
|
+
padding: 2rem;
|
|
140
|
+
position: relative;
|
|
141
|
+
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
|
|
149
142
|
}
|
|
150
|
-
.eds-
|
|
151
|
-
|
|
152
|
-
|
|
143
|
+
.eds-navigation-card-header {
|
|
144
|
+
display: flex;
|
|
145
|
+
flex-direction: column;
|
|
146
|
+
margin-bottom: 1rem;
|
|
147
|
+
}
|
|
148
|
+
.eds-navigation-card-header__content {
|
|
149
|
+
display: flex;
|
|
150
|
+
align-items: center;
|
|
151
|
+
}
|
|
152
|
+
.eds-navigation-card-header__title {
|
|
153
|
+
font-size: 1.5rem;
|
|
154
|
+
line-height: 1.875rem;
|
|
155
|
+
font-weight: 600;
|
|
156
|
+
}
|
|
157
|
+
.eds-navigation-card-header__title-icon {
|
|
158
|
+
font-size: 1.53125rem;
|
|
159
|
+
margin-right: 0.75rem;
|
|
160
|
+
}
|
|
161
|
+
.eds-navigation-card-header__highlight {
|
|
162
|
+
width: 2rem;
|
|
163
|
+
height: 0.1875rem;
|
|
164
|
+
background: var(--components-layout-card-standard-divide);
|
|
165
|
+
opacity: var(--show-active-line);
|
|
166
|
+
transition: width 0.2s ease-in-out;
|
|
167
|
+
}
|
|
168
|
+
.eds-navigation-card:hover {
|
|
169
|
+
background-color: var(--components-layout-card-standard-fill-hoveractive);
|
|
170
|
+
box-shadow: 0.625rem 0.625rem 1rem var(--components-layout-card-standard-shadowlayer3), 0.375rem 0.375rem 0.75rem var(--components-layout-card-standard-shadowlayer2), 0.1875rem 0.1875rem 0.375rem var(--components-layout-card-standard-shadowlayer1);
|
|
171
|
+
}
|
|
172
|
+
.eds-navigation-card:hover:before {
|
|
173
|
+
opacity: 1;
|
|
174
|
+
}
|
|
175
|
+
.eds-navigation-card:hover .eds-navigation-card-header__highlight {
|
|
176
|
+
width: 5rem;
|
|
177
|
+
}
|
|
178
|
+
.eds-contrast .eds-navigation-card:hover {
|
|
179
|
+
background-color: var(--components-layout-card-contrast-fill-hoveractive);
|
|
180
|
+
box-shadow: 0.625rem 0.625rem 1rem var(--components-layout-card-contrast-shadowlayer3), 0.375rem 0.375rem 0.75rem var(--components-layout-card-contrast-shadowlayer2), 0.1875rem 0.1875rem 0.375rem var(--components-layout-card-contrast-shadowlayer1);
|
|
181
|
+
}
|
|
182
|
+
.eds-navigation-card:active {
|
|
183
|
+
background-color: var(--components-layout-card-standard-fill-hoveractive);
|
|
184
|
+
border: 1px solid var(--components-layout-card-standard-border-active);
|
|
185
|
+
box-shadow: none;
|
|
186
|
+
}
|
|
187
|
+
.eds-contrast .eds-navigation-card:active {
|
|
188
|
+
background-color: var(--components-layout-card-contrast-fill-hoveractive);
|
|
189
|
+
border-color: var(--components-layout-card-contrast-border-active);
|
|
153
190
|
box-shadow: none;
|
|
154
|
-
|
|
191
|
+
}
|
|
192
|
+
.eds-navigation-card:focus-visible {
|
|
193
|
+
outline: 2px solid #181c56;
|
|
194
|
+
outline-color: var(--basecolors-stroke-focus-standard);
|
|
195
|
+
outline-offset: 0.125rem;
|
|
196
|
+
}
|
|
197
|
+
.eds-contrast .eds-navigation-card:focus-visible {
|
|
198
|
+
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
199
|
+
}
|
|
200
|
+
.eds-navigation-card__arrow-icon {
|
|
201
|
+
margin-top: 0.5rem;
|
|
202
|
+
}
|
|
203
|
+
.eds-navigation-card--compact {
|
|
204
|
+
padding: 1.5rem;
|
|
205
|
+
}
|
|
206
|
+
.eds-navigation-card--compact .eds-navigation-card-header {
|
|
207
|
+
margin-bottom: 0;
|
|
208
|
+
}
|
|
209
|
+
.eds-navigation-card .eds-paragraph {
|
|
210
|
+
margin-bottom: 0;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
@media (prefers-reduced-motion: reduce) {
|
|
214
|
+
.eds-navigation-card {
|
|
215
|
+
transition: none;
|
|
216
|
+
}
|
|
217
|
+
.eds-navigation-card-header__highlight {
|
|
218
|
+
transition: none;
|
|
219
|
+
}
|
|
220
|
+
.eds-navigation-card:hover {
|
|
221
|
+
transform: none;
|
|
222
|
+
box-shadow: none;
|
|
223
|
+
}
|
|
224
|
+
.eds-navigation-card:hover .eds-navigation-card-header__highlight {
|
|
225
|
+
width: 2rem;
|
|
226
|
+
}
|
|
155
227
|
}
|
|
156
228
|
/* DO NOT CHANGE!*/
|
|
157
229
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -288,97 +360,25 @@
|
|
|
288
360
|
--white-alpha-90: rgba(255,255,255,0.89804);
|
|
289
361
|
}
|
|
290
362
|
|
|
291
|
-
.eds-
|
|
292
|
-
display: flex;
|
|
293
|
-
flex-direction: column;
|
|
294
|
-
padding: 2rem;
|
|
295
|
-
position: relative;
|
|
296
|
-
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
|
|
297
|
-
}
|
|
298
|
-
.eds-navigation-card-header {
|
|
299
|
-
display: flex;
|
|
300
|
-
flex-direction: column;
|
|
301
|
-
margin-bottom: 1rem;
|
|
302
|
-
}
|
|
303
|
-
.eds-navigation-card-header__content {
|
|
363
|
+
.eds-base-card {
|
|
304
364
|
display: flex;
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
.
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
.eds-navigation-card-header__highlight {
|
|
317
|
-
width: 2rem;
|
|
318
|
-
height: 0.1875rem;
|
|
319
|
-
background: var(--components-layout-card-standard-divide);
|
|
320
|
-
opacity: var(--show-active-line);
|
|
321
|
-
transition: width 0.2s ease-in-out;
|
|
322
|
-
}
|
|
323
|
-
.eds-navigation-card:hover {
|
|
324
|
-
background-color: var(--components-layout-card-standard-fill-hoveractive);
|
|
325
|
-
box-shadow: 0.625rem 0.625rem 1rem var(--components-layout-card-standard-shadowlayer3), 0.375rem 0.375rem 0.75rem var(--components-layout-card-standard-shadowlayer2), 0.1875rem 0.1875rem 0.375rem var(--components-layout-card-standard-shadowlayer1);
|
|
326
|
-
}
|
|
327
|
-
.eds-navigation-card:hover:before {
|
|
328
|
-
opacity: 1;
|
|
329
|
-
}
|
|
330
|
-
.eds-navigation-card:hover .eds-navigation-card-header__highlight {
|
|
331
|
-
width: 5rem;
|
|
332
|
-
}
|
|
333
|
-
.eds-contrast .eds-navigation-card:hover {
|
|
334
|
-
background-color: var(--components-layout-card-contrast-fill-hoveractive);
|
|
335
|
-
box-shadow: 0.625rem 0.625rem 1rem var(--components-layout-card-contrast-shadowlayer3), 0.375rem 0.375rem 0.75rem var(--components-layout-card-contrast-shadowlayer2), 0.1875rem 0.1875rem 0.375rem var(--components-layout-card-contrast-shadowlayer1);
|
|
336
|
-
}
|
|
337
|
-
.eds-navigation-card:active {
|
|
338
|
-
background-color: var(--components-layout-card-standard-fill-hoveractive);
|
|
339
|
-
border: 1px solid var(--components-layout-card-standard-border-active);
|
|
340
|
-
box-shadow: none;
|
|
365
|
+
box-shadow: 6px 6px 10px 0px var(--components-layout-card-standard-shadowlayer3), 3px 3px 6px 0px var(--components-layout-card-standard-shadowlayer2), 1px 1px 2px 0px var(--components-layout-card-standard-shadowlayer1);
|
|
366
|
+
background-color: var(--components-layout-card-standard-fill-default-solid);
|
|
367
|
+
border: 0.0625rem solid var(--components-layout-card-standard-border-default);
|
|
368
|
+
color: var(--components-layout-card-standard-text);
|
|
369
|
+
border-radius: 0.25rem;
|
|
370
|
+
align-items: flex-start;
|
|
371
|
+
-webkit-appearance: none;
|
|
372
|
+
-moz-appearance: none;
|
|
373
|
+
appearance: none;
|
|
374
|
+
-webkit-text-decoration: none;
|
|
375
|
+
text-decoration: none;
|
|
341
376
|
}
|
|
342
|
-
.eds-contrast .eds-
|
|
343
|
-
background-color: var(--components-layout-card-contrast-fill-
|
|
344
|
-
border-color: var(--components-layout-card-contrast-border-
|
|
377
|
+
.eds-contrast .eds-base-card {
|
|
378
|
+
background-color: var(--components-layout-card-contrast-fill-default-solid);
|
|
379
|
+
border-color: var(--components-layout-card-contrast-border-default);
|
|
345
380
|
box-shadow: none;
|
|
346
|
-
|
|
347
|
-
.eds-navigation-card:focus-visible {
|
|
348
|
-
outline: 2px solid #181c56;
|
|
349
|
-
outline-color: var(--basecolors-stroke-focus-standard);
|
|
350
|
-
outline-offset: 0.125rem;
|
|
351
|
-
}
|
|
352
|
-
.eds-contrast .eds-navigation-card:focus-visible {
|
|
353
|
-
outline-color: var(--basecolors-stroke-focus-contrast);
|
|
354
|
-
}
|
|
355
|
-
.eds-navigation-card__arrow-icon {
|
|
356
|
-
margin-top: 0.5rem;
|
|
357
|
-
}
|
|
358
|
-
.eds-navigation-card--compact {
|
|
359
|
-
padding: 1.5rem;
|
|
360
|
-
}
|
|
361
|
-
.eds-navigation-card--compact .eds-navigation-card-header {
|
|
362
|
-
margin-bottom: 0;
|
|
363
|
-
}
|
|
364
|
-
.eds-navigation-card .eds-paragraph {
|
|
365
|
-
margin-bottom: 0;
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
@media (prefers-reduced-motion: reduce) {
|
|
369
|
-
.eds-navigation-card {
|
|
370
|
-
transition: none;
|
|
371
|
-
}
|
|
372
|
-
.eds-navigation-card-header__highlight {
|
|
373
|
-
transition: none;
|
|
374
|
-
}
|
|
375
|
-
.eds-navigation-card:hover {
|
|
376
|
-
transform: none;
|
|
377
|
-
box-shadow: none;
|
|
378
|
-
}
|
|
379
|
-
.eds-navigation-card:hover .eds-navigation-card-header__highlight {
|
|
380
|
-
width: 2rem;
|
|
381
|
-
}
|
|
381
|
+
color: var(--components-layout-card-contrast-text);
|
|
382
382
|
}
|
|
383
383
|
/* DO NOT CHANGE!*/
|
|
384
384
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
@@ -706,6 +706,37 @@
|
|
|
706
706
|
}
|
|
707
707
|
/* DO NOT CHANGE!*/
|
|
708
708
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
709
|
+
.eds-tag {
|
|
710
|
+
background: #e9e9e9;
|
|
711
|
+
color: #181c56;
|
|
712
|
+
display: inline-block;
|
|
713
|
+
min-width: 2rem;
|
|
714
|
+
padding: 0.25rem 0.75rem;
|
|
715
|
+
font-size: 0.875rem;
|
|
716
|
+
line-height: 1.375rem;
|
|
717
|
+
}
|
|
718
|
+
.eds-tag--leading-icon .eds-icon {
|
|
719
|
+
margin-right: 0.5rem;
|
|
720
|
+
}
|
|
721
|
+
.eds-tag--trailing-icon .eds-icon {
|
|
722
|
+
margin-left: 0.5rem;
|
|
723
|
+
}
|
|
724
|
+
.eds-tag--compact {
|
|
725
|
+
font-size: 0.75rem;
|
|
726
|
+
padding: 0.125rem 0.5rem;
|
|
727
|
+
line-height: 1.25rem;
|
|
728
|
+
height: 1.5rem;
|
|
729
|
+
}
|
|
730
|
+
.eds-tag--compact.eds-tag--leading-icon .eds-icon {
|
|
731
|
+
margin-right: 0.25rem;
|
|
732
|
+
}
|
|
733
|
+
.eds-tag--compact.eds-tag--trailing-icon .eds-icon {
|
|
734
|
+
margin-left: 0.25rem;
|
|
735
|
+
}
|
|
736
|
+
/* DO NOT CHANGE!*/
|
|
737
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
738
|
+
/* DO NOT CHANGE!*/
|
|
739
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
709
740
|
/* DO NOT CHANGE!*/
|
|
710
741
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
711
742
|
/* DO NOT CHANGE!*/
|
|
@@ -1021,34 +1052,3 @@
|
|
|
1021
1052
|
:root {
|
|
1022
1053
|
--eds-layout: 1;
|
|
1023
1054
|
}
|
|
1024
|
-
/* DO NOT CHANGE!*/
|
|
1025
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
1026
|
-
.eds-tag {
|
|
1027
|
-
background: #e9e9e9;
|
|
1028
|
-
color: #181c56;
|
|
1029
|
-
display: inline-block;
|
|
1030
|
-
min-width: 2rem;
|
|
1031
|
-
padding: 0.25rem 0.75rem;
|
|
1032
|
-
font-size: 0.875rem;
|
|
1033
|
-
line-height: 1.375rem;
|
|
1034
|
-
}
|
|
1035
|
-
.eds-tag--leading-icon .eds-icon {
|
|
1036
|
-
margin-right: 0.5rem;
|
|
1037
|
-
}
|
|
1038
|
-
.eds-tag--trailing-icon .eds-icon {
|
|
1039
|
-
margin-left: 0.5rem;
|
|
1040
|
-
}
|
|
1041
|
-
.eds-tag--compact {
|
|
1042
|
-
font-size: 0.75rem;
|
|
1043
|
-
padding: 0.125rem 0.5rem;
|
|
1044
|
-
line-height: 1.25rem;
|
|
1045
|
-
height: 1.5rem;
|
|
1046
|
-
}
|
|
1047
|
-
.eds-tag--compact.eds-tag--leading-icon .eds-icon {
|
|
1048
|
-
margin-right: 0.25rem;
|
|
1049
|
-
}
|
|
1050
|
-
.eds-tag--compact.eds-tag--trailing-icon .eds-icon {
|
|
1051
|
-
margin-left: 0.25rem;
|
|
1052
|
-
}
|
|
1053
|
-
/* DO NOT CHANGE!*/
|
|
1054
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/layout",
|
|
3
|
-
"version": "3.1.9-beta.
|
|
3
|
+
"version": "3.1.9-beta.13",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/layout.esm.js",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@entur/icons": "^8.0.0",
|
|
31
31
|
"@entur/tokens": "^3.19.1",
|
|
32
|
-
"@entur/typography": "^1.10.0-beta.
|
|
32
|
+
"@entur/typography": "^1.10.0-beta.13",
|
|
33
33
|
"@entur/utils": "^0.12.3",
|
|
34
34
|
"classnames": "^2.3.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"dts-cli": "2.0.5"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "c9b59ab0f79e2611a602951c89f4f2c8213e235f"
|
|
40
40
|
}
|