@mjsz-vbr-elements/shared 2.9.0 → 2.10.0

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 (29) hide show
  1. package/dist/css/common.css +67 -52
  2. package/dist/css/game-center-timeline.css +158 -156
  3. package/dist/css/game-center.css +123 -69
  4. package/dist/css/games-timeline.css +45 -23
  5. package/dist/css/grid.css +3 -0
  6. package/dist/css/playoffs.css +43 -29
  7. package/dist/css/progress.css +2 -2
  8. package/dist/css/standings-selector.css +14 -0
  9. package/dist/css/table.css +59 -54
  10. package/dist/css/teams.css +5 -2
  11. package/dist/css/typography.css +21 -21
  12. package/dist/css/variables.css +63 -48
  13. package/dist/icons/IconArrowDown.js +11 -11
  14. package/dist/icons/IconArrowUp.js +12 -12
  15. package/dist/icons/IconBroadcast.js +29 -29
  16. package/dist/icons/IconHockeyPuck.js +13 -13
  17. package/dist/icons/IconLeft.js +10 -10
  18. package/dist/icons/IconMore.js +24 -24
  19. package/dist/icons/IconRight.js +10 -10
  20. package/dist/icons/IconSheet.js +16 -16
  21. package/dist/icons/IconSort.js +12 -12
  22. package/dist/icons/IconSortAsc.js +12 -12
  23. package/dist/icons/IconSortDesc.js +13 -13
  24. package/dist/icons/IconStar.js +17 -17
  25. package/dist/icons/IconTimer.js +13 -13
  26. package/dist/icons/IconWarning.js +21 -21
  27. package/dist/icons/IconWhistle.js +12 -12
  28. package/dist/icons/IconYoutube.js +10 -10
  29. package/package.json +8 -8
package/dist/css/common.css CHANGED
@@ -32,6 +32,9 @@ ul {
32
32
  list-style: none;
33
33
  }
34
34
 
35
+ /* --vbr-widget-typography-font-size-50
36
+ --vbr-widget-typography-font-lineheight-50 */
37
+
35
38
  :root,
36
39
  :host {
37
40
  font-family: 'Roboto Condensed', Avenir, Helvetica, Arial, sans-serif;
@@ -70,32 +73,40 @@ ul {
70
73
  --vbr-widget-live-game-color: #8bc34a;
71
74
  --vbr-widget-neutral-color: #ffc107;
72
75
 
73
- --vbr-widget-typography-text-xs-size: 0.75rem; /* 12px */
74
- --vbr-widget-typography-text-xs-lineheight: 1.25rem; /* 20px */
75
- --vbr-widget-typography-text-sm-size: 0.875rem; /* 14px */
76
- --vbr-widget-typography-text-sm-lineheight: 1.5rem; /* 24px */
77
- --vbr-widget-typography-text-base-size: 1rem; /* 16px */
78
- --vbr-widget-typography-text-base-lineheight: 1.75rem; /* 28px */
79
- --vbr-widget-typography-text-lg-size: 1.125rem; /* 18px */
80
- --vbr-widget-typography-text-lg-lineheight: 2rem; /* 32px */
81
- --vbr-widget-typography-text-xl-size: 1.25rem; /* 20px */
82
- --vbr-widget-typography-text-xl-lineheight: 2rem; /* 32px */
83
- --vbr-widget-typography-text-2xl-size: 1.5rem; /* 24px */
84
- --vbr-widget-typography-text-2xl-lineheight: 2.5rem; /* 40px */
85
- --vbr-widget-typography-text-3xl-size: 1.75rem; /* 28px */
86
- --vbr-widget-typography-text-3xl-lineheight: 2.5rem; /* 40px */
87
- --vbr-widget-typography-text-4xl-size: 2rem; /* 32px */
88
- --vbr-widget-typography-text-4xl-lineheight: 2.75rem; /* 44px */
76
+ --vbr-widget-typography-font-size-50: 0.6275rem; /* 10px */
77
+ --vbr-widget-typography-font-size-100: 0.6875rem; /* 11px */
78
+ --vbr-widget-typography-font-size-200: 0.75rem; /* 12px */
79
+ --vbr-widget-typography-font-size-300: 0.8125rem; /* 13px */
80
+ --vbr-widget-typography-font-size-400: 0.875rem; /* 14px */
81
+ --vbr-widget-typography-font-size-500: 1rem; /* 16px */
82
+ --vbr-widget-typography-font-size-600: 1.125rem; /* 18px */
83
+ --vbr-widget-typography-font-size-700: 1.25rem; /* 20px */
84
+ --vbr-widget-typography-font-size-800: 1.5rem; /* 24px */
85
+ --vbr-widget-typography-font-size-900: 1.75rem; /* 28px */
86
+ --vbr-widget-typography-font-size-950: 2rem; /* 32px */
87
+
88
+ --vbr-widget-typography-font-lineheight-50: calc(var(--vbr-widget-typography-font-size-50) * 1.628);
89
+ --vbr-widget-typography-font-lineheight-100: calc(var(--vbr-widget-typography-font-size-100) * 1.628);
90
+ --vbr-widget-typography-font-lineheight-200: calc(var(--vbr-widget-typography-font-size-200) * 1.628);
91
+ --vbr-widget-typography-font-lineheight-300: calc(var(--vbr-widget-typography-font-size-300) * 1.628);
92
+ --vbr-widget-typography-font-lineheight-400: calc(var(--vbr-widget-typography-font-size-400) * 1.628);
93
+ --vbr-widget-typography-font-lineheight-500: calc(var(--vbr-widget-typography-font-size-500) * 1.628);
94
+ --vbr-widget-typography-font-lineheight-600: calc(var(--vbr-widget-typography-font-size-600) * 1.628);
95
+ --vbr-widget-typography-font-lineheight-700: calc(var(--vbr-widget-typography-font-size-700) * 1.628);
96
+ --vbr-widget-typography-font-lineheight-800: calc(var(--vbr-widget-typography-font-size-800) * 1.628);
97
+ --vbr-widget-typography-font-lineheight-900: calc(var(--vbr-widget-typography-font-size-900) * 1.628);
98
+ --vbr-widget-typography-font-lineheight-950: calc(var(--vbr-widget-typography-font-size-950) * 1.628);
99
+
89
100
  --vbr-widget-typography-heading-weight: 500;
90
101
 
91
- --vbr-widget-typography-heading-1-size: var(--vbr-widget-typography-text-2xl-size);
92
- --vbr-widget-typography-heading-2-size: var(--vbr-widget-typography-text-xl-size);
93
- --vbr-widget-typography-heading-3-size: var(--vbr-widget-typography-text-lg-size);
94
- --vbr-widget-typography-heading-4-size: var(--vbr-widget-typography-text-base-size);
95
- --vbr-widget-typography-heading-5-size: var(--vbr-widget-typography-text-sm-size);
96
- --vbr-widget-typography-heading-6-size: var(--vbr-widget-typography-text-xs-size);
102
+ --vbr-widget-typography-heading-1-size: var(--vbr-widget-typography-font-size-800);
103
+ --vbr-widget-typography-heading-2-size: var(--vbr-widget-typography-font-size-700);
104
+ --vbr-widget-typography-heading-3-size: var(--vbr-widget-typography-font-size-600);
105
+ --vbr-widget-typography-heading-4-size: var(--vbr-widget-typography-font-size-500);
106
+ --vbr-widget-typography-heading-5-size: var(--vbr-widget-typography-font-size-400);
107
+ --vbr-widget-typography-heading-6-size: var(--vbr-widget-typography-font-size-200);
97
108
 
98
- --vbr-widget-table-header-font-size: var(--vbr-widget-typography-text-xs-size);
109
+ --vbr-widget-table-header-font-size: var(--vbr-widget-typography-font-size-200);
99
110
  --vbr-widget-table-default-column-width: 30px;
100
111
  --vbr-widget-table-default-bg-color: var(--vbr-widget-primary-color-0);
101
112
  --vbr-widget-table-color: var(--vbr-widget-primary-color-800);
@@ -132,7 +143,7 @@ ul {
132
143
  --vbr-widget-paginator-active-bg-color: var(--vbr-widget-primary-color-900);
133
144
  --vbr-widget-paginator-disabled-color: var(--vbr-widget-primary-color-200);
134
145
 
135
- --vbr-widget-tooltip-font-size: var(--vbr-widget-typography-text-xs-size);
146
+ --vbr-widget-tooltip-font-size: var(--vbr-widget-typography-font-size-200);
136
147
  --vbr-widget-tooltip-color: #ffffff;
137
148
  --vbr-widget-tooltip-bg-color: #000000;
138
149
 
@@ -152,24 +163,24 @@ ul {
152
163
  --vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
153
164
 
154
165
  --vbr-widget-base-input-color: var(--vbr-widget-primary-color-800);
155
- --vbr-widget-base-input-font-size: var(--vbr-widget-typography-text-sm-size);
166
+ --vbr-widget-base-input-font-size: var(--vbr-widget-typography-font-size-400);
156
167
  --vbr-widget-base-input-border-color: var(--vbr-widget-primary-color-300);
157
168
  --vbr-widget-base-input-border-radius: 3px;
158
169
 
159
170
  --vbr-widget-form-label-color: var(--vbr-widget-primary-color-500);
160
- --vbr-widget-form-label-font-size: var(--vbr-widget-typography-text-xs-size);
171
+ --vbr-widget-form-label-font-size: var(--vbr-widget-typography-font-size-200);
161
172
 
162
173
  --vbr-widget-timezone-selector-color: var(--vbr-widget-primary-color-500);
163
- --vbr-widget-timezone-selector-font-size: var(--vbr-widget-typography-text-sm-size); /* 0.8125rem */
174
+ --vbr-widget-timezone-selector-font-size: var(--vbr-widget-typography-font-size-400);
164
175
 
165
176
  --vbr-widget-badge-bg-color: var(--vbr-widget-primary-color-50);
166
177
  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
167
- --vbr-widget-badge-font-size: 0.625rem;
168
- --vbr-widget-badge-large-font-size: 0.6875rem;
169
- --vbr-widget-badge-extra-large-font-size: 0.8125rem;
178
+ --vbr-widget-badge-font-size: var(--vbr-widget-typography-font-size-50);
179
+ --vbr-widget-badge-large-font-size: var(--vbr-widget-typography-font-size-100);
180
+ --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-font-size-300);
170
181
 
171
182
  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
172
- --vbr-widget-tab-btn-font-size: var();
183
+ --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-font-size-500);
173
184
  --vbr-widget-tab-btn-font-weight: 500;
174
185
  --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
175
186
  --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
@@ -186,7 +197,7 @@ ul {
186
197
 
187
198
  --vbr-widget-toggle-group-gap: 0.625rem;
188
199
  --vbr-widget-toggle-group-btn-padding: 3px 10px;
189
- --vbr-widget-toggle-group-btn-size: var(--vbr-widget-typography-text-sm-size);
200
+ --vbr-widget-toggle-group-btn-size: var(--vbr-widget-typography-font-size-400);
190
201
  --vbr-widget-toggle-group-btn-bg-color: var(--vbr-widget-primary-color-50);
191
202
  --vbr-widget-toggle-group-btn-active-color: var(--vbr-widget-primary-color-0);
192
203
  --vbr-widget-toggle-group-btn-active-bg-color: var(--vbr-widget-live-game-color);
@@ -202,42 +213,42 @@ ul {
202
213
  --vbr-widget-gamecenter-result-size: 6rem;
203
214
  --vbr-widget-gamecenter-result-weight: 700;
204
215
  --vbr-widget-gamecenter-result-color: var(--vbr-widget-primary-color-800);
205
- --vbr-widget-gamecenter-teamname-size: 1.3125rem;
216
+ --vbr-widget-gamecenter-teamname-size: var(--vbr-widget-typography-font-size-700);
206
217
  --vbr-widget-gamecenter-teamname-color: var(--vbr-widget-primary-color-800);
207
218
  --vbr-widget-gamecenter-teamname-weight: 700;
208
219
  --vbr-widget-gamecenter-title-color: var(--vbr-widget-primary-color-800);
209
- --vbr-widget-gamecenter-title-size: var(--vbr-widget-typography-text-base-size);
220
+ --vbr-widget-gamecenter-title-size: var(--vbr-widget-typography-font-size-500);
210
221
  --vbr-widget-gamecenter-title-weight: 700;
211
222
  --vbr-widget-gamecenter-gamedate-color: var(--vbr-widget-primary-color-500);
212
- --vbr-widget-gamecenter-gamedate-size: var(--vbr-widget-typography-text-base-size);
223
+ --vbr-widget-gamecenter-gamedate-size: var(--vbr-widget-typography-font-size-500);
213
224
  --vbr-widget-gamecenter-local-gamedate-color: var(--vbr-widget-primary-color-500);
214
- --vbr-widget-gamecenter-local-gamedate-size: 0.8125rem;
225
+ --vbr-widget-gamecenter-local-gamedate-size: var(--vbr-widget-typography-font-size-300);
215
226
  --vbr-widget-gamecenter-gamestatus-color: var(--vbr-widget-primary-color-600);
216
- --vbr-widget-gamecenter-gamestatus-size: 0.9375rem;
227
+ --vbr-widget-gamecenter-gamestatus-size: var(--vbr-widget-typography-font-size-400);
217
228
  --vbr-widget-gamecenter-periodresults-color: var(--vbr-widget-primary-color-600);
218
- --vbr-widget-gamecenter-periodresults-size: 1.3125rem;
229
+ --vbr-widget-gamecenter-periodresults-size: var(--vbr-widget-typography-font-size-700);
219
230
  --vbr-widget-gamecenter-period-header-bg-color: var(--vbr-widget-primary-color-800);
220
231
  --vbr-widget-gamecenter-period-header-color: var(--vbr-widget-primary-color-0);
221
- --vbr-widget-gamecenter-period-header-size: 0.8125rem;
232
+ --vbr-widget-gamecenter-period-header-size: var(--vbr-widget-typography-font-size-300);
222
233
  --vbr-widget-gamecenter-period-header-weight: 500;
223
234
  --vbr-widget-gamecenter-stats-bg-color: var(--vbr-widget-primary-color-50);
224
235
  --vbr-widget-gamecenter-stats-border-color: var(--vbr-widget-primary-color-100);
225
- --vbr-widget-gamecenter-stats-title-size: 0.8125rem;
236
+ --vbr-widget-gamecenter-stats-title-size: var(--vbr-widget-typography-font-size-300);
226
237
  --vbr-widget-gamecenter-stats-title-color: var(--vbr-widget-primary-color-400);
227
- --vbr-widget-gamecenter-stats-size: var(--vbr-widget-typography-text-base-size);
238
+ --vbr-widget-gamecenter-stats-size: var(--vbr-widget-typography-font-size-500);
228
239
  --vbr-widget-gamecenter-stats-color: var(--vbr-widget-primary-color-800);
229
240
 
230
241
  --vbr-widget-gamecenter-team-container-title-color: var(--vbr-widget-primary-color-800);
231
242
  --vbr-widget-gamecenter-team-container-title-bg-color: var(--vbr-widget-primary-color-100);
232
243
  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
233
244
 
234
- --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
245
+ --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-font-size-500);
235
246
  --vbr-widget-gamecenter-events-evented-person-weight: 600;
236
- --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
237
- --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
238
- --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
239
- --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
240
- --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
247
+ --vbr-widget-gamecenter-events-assitst-list-size: var(--vbr-widget-typography-font-size-400);
248
+ --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-font-size-200);
249
+ --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-font-size-500);
250
+ --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-font-size-400);
251
+ --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-font-size-400);
241
252
  --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
242
253
 
243
254
  --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
@@ -254,19 +265,23 @@ ul {
254
265
  --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
255
266
  --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
256
267
 
257
- --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
268
+ --vbr-widget-main-image-wrapper-horizontal-margin: 0;
258
269
 
259
270
  --vbr-widget-sticky-top-offset: 0;
260
271
 
272
+ --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-font-size-100);
261
273
  --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
262
274
  --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
275
+ --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-font-size-300);
263
276
  --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
277
+ --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-font-size-200);
264
278
  --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
265
279
  --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
266
280
  --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
267
281
  --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
268
282
  --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
269
283
  --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
284
+ --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-font-size-200);
270
285
  }
271
286
 
272
287
  html,
@@ -391,7 +406,7 @@ a:hover {
391
406
 
392
407
  .is-badge {
393
408
  display: inline-block;
394
- padding: 0.125rem 0.25rem;
409
+ padding: 0.125em 0.25em;
395
410
  color: var(--vbr-widget-badge-color);
396
411
  font-size: var(--vbr-widget-badge-font-size);
397
412
  font-weight: 700;
@@ -401,7 +416,7 @@ a:hover {
401
416
  }
402
417
 
403
418
  .is-badge + .is-badge {
404
- margin-left: 3px;
419
+ margin-inline-start: 3px;
405
420
  }
406
421
 
407
422
  .is-badge.is-invert {
@@ -431,10 +446,10 @@ a:hover {
431
446
 
432
447
  .is-badge.is-large {
433
448
  font-size: var(--vbr-widget-badge-large-font-size);
434
- padding: 0.15rem 0.35rem;
449
+ padding: 0.15em 0.35em;
435
450
  }
436
451
 
437
452
  .is-badge.is-extra-large {
438
453
  font-size: var(--vbr-widget-badge-extra-large-font-size);
439
- padding: 0.21875rem 0.45rem;
454
+ padding: 0.2695em 0.5165em;
440
455
  }