@itcenteratunihelsinki/huds-lib 0.5.46 → 0.6.2

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.
Files changed (35) hide show
  1. package/dist/cjs/color-box_8.cjs.entry.js +1 -1
  2. package/dist/cjs/huds-lib.cjs.js +1 -1
  3. package/dist/cjs/{hy-accordion-container_91.cjs.entry.js → hy-accordion-container_89.cjs.entry.js} +39 -505
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/{utils-eeb7b089.js → utils-00f72b1e.js} +0 -2
  6. package/dist/collection/collection-manifest.json +0 -4
  7. package/dist/collection/components/hy-main/hy-main.css +3 -2
  8. package/dist/collection/components/hy-search-field/hy-search-field.js +1 -1
  9. package/dist/collection/components/hy-video/hy-video.css +54 -2
  10. package/dist/collection/components/hy-video/hy-video.js +119 -36
  11. package/dist/collection/components/navigation/menu/menu.js +1 -1
  12. package/dist/collection/components/navigation/menu-item/menu-item.js +1 -17
  13. package/dist/collection/components/navigation/menu-level-container/menu-level-container.css +0 -236
  14. package/dist/collection/components/navigation/menu-level-container/menu-level-container.js +1 -48
  15. package/dist/collection/components/site-header/site-header.js +1 -1
  16. package/dist/collection/utils/utils.js +0 -2
  17. package/dist/esm/color-box_8.entry.js +1 -1
  18. package/dist/esm/huds-lib.js +1 -1
  19. package/dist/esm/{hy-accordion-container_91.entry.js → hy-accordion-container_89.entry.js} +40 -504
  20. package/dist/esm/loader.js +1 -1
  21. package/dist/esm/{utils-966ffdb5.js → utils-159098a4.js} +0 -2
  22. package/dist/huds-lib/huds-lib.esm.js +1 -1
  23. package/dist/huds-lib/{p-d3ced29c.entry.js → p-2efc8ca0.entry.js} +1 -1
  24. package/dist/huds-lib/{p-77f7df4b.entry.js → p-59b6df24.entry.js} +54 -54
  25. package/dist/huds-lib/{p-cd2316f0.js → p-d9dc337b.js} +1 -1
  26. package/dist/types/components/hy-video/hy-video.d.ts +2 -0
  27. package/dist/types/components.d.ts +4 -200
  28. package/dist/types/utils/utils.d.ts +0 -2
  29. package/package.json +1 -1
  30. package/dist/collection/components/navigation/menu-item-sidebar/menu-item-sidebar.css +0 -399
  31. package/dist/collection/components/navigation/menu-item-sidebar/menu-item-sidebar.js +0 -580
  32. package/dist/collection/components/navigation/menu-sidebar/menu-sidebar.css +0 -337
  33. package/dist/collection/components/navigation/menu-sidebar/menu-sidebar.js +0 -677
  34. package/dist/types/components/navigation/menu-item-sidebar/menu-item-sidebar.d.ts +0 -34
  35. package/dist/types/components/navigation/menu-sidebar/menu-sidebar.d.ts +0 -90
@@ -1,399 +0,0 @@
1
- :root {
2
- --brand-main: #0e688b;
3
- --brand-main-soft: #b1e7ff;
4
- --brand-main-bright: #48c5f8;
5
- --brand-main-light: #107eab;
6
- --brand-main-active: #005379;
7
- --brand-main-dark: #003146;
8
- --brand-main-nearly-black: #000222;
9
- --link-blue: #0479a4;
10
- --link-disabled: #767676;
11
- --grayscale-white: #fff;
12
- --grayscale-slightly-gray: #fefefe;
13
- --grayscale-light: #f8f8f8;
14
- --grayscale-medium: #d2d2d2;
15
- --grayscale-background-box: #f5f5f5;
16
- --grayscale-tabs-border: #e6e6e6;
17
- --grayscale-background-arrow: #dfdfdf;
18
- --grayscale-medium-dark: #979797;
19
- --grayscale-dark: #555555;
20
- --grayscale-dark-text: #222222;
21
- --grayscale-black: #000000;
22
- --additional-red-light: #e5053a;
23
- --additional-red-dark: #a31621;
24
- --additional-purple-light: #420039;
25
- --additional-yellow: #f9a21a;
26
- --additional-skyblue: #48c5f8;
27
- --additional-orange: #d14600;
28
- --additional-green-light: #96ba3c;
29
- --additional-green-dark: #006400;
30
- --hover-gray: #eaeaea;
31
- }
32
-
33
- * {
34
- -webkit-box-sizing: border-box;
35
- box-sizing: border-box;
36
- }
37
-
38
- :root {
39
- --gutter-mobile: 16px;
40
- --gutter-narrow: 24px;
41
- --gutter-medium: 24px;
42
- --gutter-wide: 24px;
43
- --gutter-extrawide: 32px;
44
- }
45
-
46
- /**
47
- * Mixin for fluid type.
48
- * Example usage: @include fluid-type(font-size, 320px, 1600px, 32px, 80px);
49
- */
50
-
51
- :root {
52
- --breakpoint-extrawide: 75.0625rem;
53
- --breakpoint-max-width: 75.0625rem;
54
- --breakpoint-medium: 48rem;
55
- --breakpoint-narrow: 30rem;
56
- --breakpoint-wide: 60rem;
57
- }
58
-
59
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item-sidebar__label,
60
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item__label__icon,
61
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item-sidebar__label,
62
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) .hy-menu-item__label__icon {
63
- background: -webkit-gradient(linear, right top, left top, from(#f5f5f5), to(#f8f8f8));
64
- background: linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%);
65
- }
66
-
67
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar__label,
68
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar__label {
69
- background-color: none !important;
70
- }
71
-
72
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item-sidebar__label:hover,
73
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item-sidebar__label:hover {
74
- background: var(--hover-gray) !important;
75
- text-decoration: underline;
76
- }
77
-
78
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover,
79
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover {
80
- background: var(--hover-gray) !important;
81
- cursor: pointer;
82
- }
83
-
84
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover svg,
85
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:not([aria-expanded=true]):hover svg {
86
- width: 22px;
87
- height: 22px;
88
- }
89
-
90
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover,
91
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover {
92
- background: var(--brand-main);
93
- cursor: pointer;
94
- -webkit-transition: all 0.25s ease;
95
- transition: all 0.25s ease;
96
- }
97
-
98
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover .hy-menu-item__label__icon__svg,
99
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover .hy-menu-item__label__icon__svg {
100
- -webkit-transform: rotate(180deg) translateX(2px);
101
- transform: rotate(180deg) translateX(2px);
102
- }
103
-
104
- .hy-menu-sidebar--container.sidebar-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover svg,
105
- .hy-menu-sidepanel--container.sidepanel-open .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon[aria-expanded=true]:hover svg {
106
- width: 22px;
107
- height: 22px;
108
- }
109
-
110
- .hy-menu-sidebar--container:not(.sidebar-open) .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item-sidebar__label:hover {
111
- border: 1px solid var(--brand-main);
112
- margin: -1px;
113
- text-decoration: underline;
114
- }
115
-
116
- .hy-menu-sidebar--container:not(.sidebar-open) .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:hover {
117
- border: 1px solid var(--brand-main);
118
- margin: -1px;
119
- margin-left: 7px;
120
- text-decoration: underline;
121
- cursor: pointer;
122
- }
123
-
124
- .hy-menu-sidebar--container:not(.sidebar-open) .hy-menu-item-sidebar:not(.is-parent) .hy-menu-item__label__icon:hover svg {
125
- width: 22px;
126
- height: 22px;
127
- }
128
-
129
- .hy-menu-item-sidebar {
130
- list-style-type: none;
131
- margin-bottom: 6px;
132
- /* &:hover {
133
- color: var(--brand-main-nearly-black);
134
- } */
135
- }
136
-
137
- .hy-menu-item-sidebar--label-container {
138
- font-size: 0.875rem;
139
- line-height: 20px;
140
- font-weight: 600;
141
- -webkit-box-sizing: border-box;
142
- box-sizing: border-box;
143
- color: var(--brand-main-light);
144
- display: -webkit-box;
145
- display: -ms-flexbox;
146
- display: flex;
147
- font-family: var(--main-font-family);
148
- -webkit-box-pack: justify;
149
- -ms-flex-pack: justify;
150
- justify-content: space-between;
151
- -webkit-hyphens: auto;
152
- -ms-hyphens: auto;
153
- hyphens: auto;
154
- min-height: 48px;
155
- padding: 0;
156
- word-break: break-word;
157
- }
158
-
159
- @media (min-width: 1601px) {
160
- .hy-menu-item-sidebar--label-container {
161
- font-size: 1rem;
162
- line-height: 22px;
163
- }
164
- }
165
-
166
- .hy-menu-item-sidebar:focus {
167
- outline-offset: 4px;
168
- }
169
-
170
- .hy-menu-item-sidebar > .hy-menu-level-container.hy-menu-level-container--sidepanel {
171
- display: none;
172
- }
173
-
174
- .hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail > .hy-menu-item-sidebar--label-container {
175
- border: 1px solid var(--brand-main-light);
176
- text-decoration: none;
177
- }
178
-
179
- .hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail > .hy-menu-item-sidebar--label-container > .hy-menu-item__label__icon {
180
- background-color: var(--brand-main-light);
181
- border: none;
182
- }
183
-
184
- .hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail > .hy-menu-item-sidebar--label-container > .hy-menu-item__label__icon svg {
185
- fill: var(--grayscale-white);
186
- }
187
-
188
- .hy-menu-item-sidebar.hy-menu-item-sidebar--sidepanel.in-active-trail > .hy-menu-level-container--sidepanel {
189
- display: -webkit-box;
190
- display: -ms-flexbox;
191
- display: flex;
192
- }
193
-
194
- .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item > .hy-menu-item-sidebar--label-container {
195
- background: var(--grayscale-white) !important;
196
- text-decoration: none;
197
- }
198
-
199
- .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item > .hy-menu-item-sidebar--label-container > a.hy-menu-item-sidebar__label {
200
- border: 1px solid var(--brand-main-light);
201
- border-right: 0;
202
- }
203
-
204
- .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item > .hy-menu-item-sidebar--label-container > .hy-menu-item__label__icon {
205
- background: var(--brand-main-light);
206
- border: none;
207
- margin-left: 4px;
208
- }
209
-
210
- .hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level).is-active-item > .hy-menu-item-sidebar--label-container > .hy-menu-item__label__icon svg {
211
- fill: var(--grayscale-white);
212
- }
213
-
214
- .hy-menu-item-sidebar__label {
215
- -webkit-box-align: center;
216
- -ms-flex-align: center;
217
- align-items: center;
218
- background-color: var(--grayscale-white);
219
- color: var(--brand-main-light);
220
- display: -webkit-box;
221
- display: -ms-flexbox;
222
- display: flex;
223
- -webkit-hyphens: auto;
224
- -ms-hyphens: auto;
225
- hyphens: auto;
226
- padding: 8px 10px 8px 20px;
227
- text-decoration: none;
228
- width: 100%;
229
- word-break: break-word;
230
- }
231
-
232
- .hy-menu-item-sidebar__label:focus {
233
- outline: none;
234
- -webkit-box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
235
- box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
236
- border-radius: none;
237
- }
238
-
239
- .hy-menu-item-sidebar .hy-menu-item__label__icon {
240
- border-top: 0;
241
- border-right: 0;
242
- border-bottom: 0;
243
- background: var(--grayscale-white);
244
- border-left: 1px solid var(--brand-main-light);
245
- color: var(--brand-main-light);
246
- display: inline-block;
247
- position: relative;
248
- width: 61.5px;
249
- margin-left: 6px;
250
- min-height: 48px;
251
- }
252
-
253
- .hy-menu-item-sidebar .hy-menu-item__label__icon svg {
254
- position: absolute;
255
- left: 50%;
256
- top: 50%;
257
- -webkit-transform: translate(-50%, -50%);
258
- transform: translate(-50%, -50%);
259
- }
260
-
261
- .hy-menu-item-sidebar .hy-menu-item__label__icon:focus {
262
- outline: none;
263
- -webkit-box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
264
- box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
265
- border-radius: none;
266
- }
267
-
268
- .hy-menu-item-sidebar.is-parent {
269
- -webkit-box-align: center;
270
- -ms-flex-align: center;
271
- align-items: center;
272
- display: -webkit-box;
273
- display: -ms-flexbox;
274
- display: flex;
275
- -webkit-box-orient: horizontal;
276
- -webkit-box-direction: normal;
277
- -ms-flex-direction: row;
278
- flex-direction: row;
279
- -webkit-box-pack: start;
280
- -ms-flex-pack: start;
281
- justify-content: flex-start;
282
- margin-bottom: 10px;
283
- max-width: 280px;
284
- padding-bottom: 10px;
285
- width: calc(100% - 25px);
286
- }
287
-
288
- .hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar--label-container {
289
- -webkit-box-align: center;
290
- -ms-flex-align: center;
291
- align-items: center;
292
- background: none;
293
- border: none;
294
- color: var(--brand-main-light);
295
- display: -webkit-box;
296
- display: -ms-flexbox;
297
- display: flex;
298
- }
299
-
300
- .hy-menu-item-sidebar.is-parent .hy-menu-item-sidebar--label-container .hy-menu-item-sidebar__label {
301
- font-size: 1.625rem;
302
- line-height: 26px;
303
- background-color: transparent !important;
304
- font-family: var(--main-font-family);
305
- font-weight: bold;
306
- letter-spacing: -0.81px;
307
- padding: 0;
308
- text-decoration: none;
309
- text-transform: uppercase;
310
- }
311
-
312
- .hy-menu-item-sidebar.is-parent:hover span {
313
- background: none;
314
- border: none;
315
- margin: 0;
316
- }
317
-
318
- .hy-menu-item-sidebar.is-parent:hover a {
319
- border: none;
320
- color: var(--brand-main) !important;
321
- text-decoration: underline;
322
- margin: 0;
323
- }
324
-
325
- .hy-menu-item-sidebar.is-parent:hover .hy-menu-item__parent__icon__svg {
326
- fill: var(--brand-main-nearly-black);
327
- }
328
-
329
- .hy-menu-item-sidebar.is-parent .hy-menu-item__parent__icon {
330
- -webkit-box-align: center;
331
- -ms-flex-align: center;
332
- align-items: center;
333
- display: -webkit-box;
334
- display: -ms-flexbox;
335
- display: flex;
336
- -webkit-box-orient: horizontal;
337
- -webkit-box-direction: normal;
338
- -ms-flex-direction: row;
339
- flex-direction: row;
340
- height: 26px;
341
- }
342
-
343
- .hy-menu-item-sidebar.is-parent .hy-menu-item__parent__icon__svg svg {
344
- fill: var(--brand-main-light);
345
- }
346
-
347
- .hy-menu-item-sidebar.is-parent.is-parent--sub-level {
348
- -webkit-box-align: end;
349
- -ms-flex-align: end;
350
- align-items: flex-end;
351
- background: none;
352
- border-bottom: 1px solid var(--brand-main-light);
353
- display: -webkit-box;
354
- display: -ms-flexbox;
355
- display: flex;
356
- margin-bottom: 12px;
357
- padding-bottom: 18px;
358
- position: absolute;
359
- -webkit-transform: translateY(calc(-100% - 12px));
360
- transform: translateY(calc(-100% - 12px));
361
- width: calc(100% - 25px);
362
- }
363
-
364
- .hy-menu-item-sidebar.is-parent.is-parent--sub-level .hy-menu-item-parent__icon {
365
- bottom: 20px;
366
- left: -20px;
367
- position: absolute;
368
- }
369
-
370
- .hy-menu-item-sidebar.is-parent.is-parent--sub-level * {
371
- text-transform: uppercase;
372
- }
373
-
374
- .hy-menu-item-sidebar.is-parent.is-parent--sub-level svg {
375
- fill: var(--brand-main-light);
376
- }
377
-
378
- .hy-menu-item-sidebar.is-parent.is-parent--sub-level .hy-menu-item-sidebar__label:hover {
379
- background: none !important;
380
- text-decoration: underline;
381
- }
382
-
383
- .hy-menu-item-sidebar.is-parent.is-parent--sub-level > .hy-menu-item-sidebar--label-container {
384
- -webkit-box-align: end;
385
- -ms-flex-align: end;
386
- align-items: flex-end;
387
- margin: 0 0 0 0.5rem;
388
- padding: 0;
389
- }
390
-
391
- .hy-menu-item-sidebar.is-current-page span.hy-menu-item-sidebar__label {
392
- border-left: 4px solid var(--grayscale-black);
393
- color: var(--grayscale-black);
394
- padding: 8px 10px 8px 6px !important;
395
- }
396
-
397
- .hy-menu-item-sidebar.is-current-page.is-parent .hy-menu-item__parent__icon {
398
- display: none;
399
- }