@mjsz-vbr-elements/shared 2.9.1 → 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 -60
  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 +41 -1
  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 -56
  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,36 +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-xxs-size: 0.6875rem; /* 11px */
74
- --vbr-widget-typography-text-xxs-lineheight: 1rem; /* 16px */
75
- --vbr-widget-typography-text-xs-size: 0.75rem; /* 12px */
76
- --vbr-widget-typography-text-xs-lineheight: 1.25rem; /* 20px */
77
- --vbr-widget-typography-text-xsm-size: 0.8125rem; /* 13px */
78
- --vbr-widget-typography-text-xsm-lineheight: 1.375rem; /* 22px */
79
- --vbr-widget-typography-text-sm-size: 0.875rem; /* 14px */
80
- --vbr-widget-typography-text-sm-lineheight: 1.5rem; /* 24px */
81
- --vbr-widget-typography-text-base-size: 1rem; /* 16px */
82
- --vbr-widget-typography-text-base-lineheight: 1.75rem; /* 28px */
83
- --vbr-widget-typography-text-lg-size: 1.125rem; /* 18px */
84
- --vbr-widget-typography-text-lg-lineheight: 2rem; /* 32px */
85
- --vbr-widget-typography-text-xl-size: 1.25rem; /* 20px */
86
- --vbr-widget-typography-text-xl-lineheight: 2rem; /* 32px */
87
- --vbr-widget-typography-text-2xl-size: 1.5rem; /* 24px */
88
- --vbr-widget-typography-text-2xl-lineheight: 2.5rem; /* 40px */
89
- --vbr-widget-typography-text-3xl-size: 1.75rem; /* 28px */
90
- --vbr-widget-typography-text-3xl-lineheight: 2.5rem; /* 40px */
91
- --vbr-widget-typography-text-4xl-size: 2rem; /* 32px */
92
- --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
+
93
100
  --vbr-widget-typography-heading-weight: 500;
94
101
 
95
- --vbr-widget-typography-heading-1-size: var(--vbr-widget-typography-text-2xl-size);
96
- --vbr-widget-typography-heading-2-size: var(--vbr-widget-typography-text-xl-size);
97
- --vbr-widget-typography-heading-3-size: var(--vbr-widget-typography-text-lg-size);
98
- --vbr-widget-typography-heading-4-size: var(--vbr-widget-typography-text-base-size);
99
- --vbr-widget-typography-heading-5-size: var(--vbr-widget-typography-text-sm-size);
100
- --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);
101
108
 
102
- --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);
103
110
  --vbr-widget-table-default-column-width: 30px;
104
111
  --vbr-widget-table-default-bg-color: var(--vbr-widget-primary-color-0);
105
112
  --vbr-widget-table-color: var(--vbr-widget-primary-color-800);
@@ -136,7 +143,7 @@ ul {
136
143
  --vbr-widget-paginator-active-bg-color: var(--vbr-widget-primary-color-900);
137
144
  --vbr-widget-paginator-disabled-color: var(--vbr-widget-primary-color-200);
138
145
 
139
- --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);
140
147
  --vbr-widget-tooltip-color: #ffffff;
141
148
  --vbr-widget-tooltip-bg-color: #000000;
142
149
 
@@ -156,24 +163,24 @@ ul {
156
163
  --vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
157
164
 
158
165
  --vbr-widget-base-input-color: var(--vbr-widget-primary-color-800);
159
- --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);
160
167
  --vbr-widget-base-input-border-color: var(--vbr-widget-primary-color-300);
161
168
  --vbr-widget-base-input-border-radius: 3px;
162
169
 
163
170
  --vbr-widget-form-label-color: var(--vbr-widget-primary-color-500);
164
- --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);
165
172
 
166
173
  --vbr-widget-timezone-selector-color: var(--vbr-widget-primary-color-500);
167
- --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);
168
175
 
169
176
  --vbr-widget-badge-bg-color: var(--vbr-widget-primary-color-50);
170
177
  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
171
- --vbr-widget-badge-font-size: 0.625rem;
172
- --vbr-widget-badge-large-font-size: 0.6875rem;
173
- --vbr-widget-badge-extra-large-font-size: var(--vbr-widget-typography-text-xsm-size);
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);
174
181
 
175
182
  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
176
- --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-text-base-size);
183
+ --vbr-widget-tab-btn-font-size: var(--vbr-widget-typography-font-size-500);
177
184
  --vbr-widget-tab-btn-font-weight: 500;
178
185
  --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
179
186
  --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
@@ -190,7 +197,7 @@ ul {
190
197
 
191
198
  --vbr-widget-toggle-group-gap: 0.625rem;
192
199
  --vbr-widget-toggle-group-btn-padding: 3px 10px;
193
- --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);
194
201
  --vbr-widget-toggle-group-btn-bg-color: var(--vbr-widget-primary-color-50);
195
202
  --vbr-widget-toggle-group-btn-active-color: var(--vbr-widget-primary-color-0);
196
203
  --vbr-widget-toggle-group-btn-active-bg-color: var(--vbr-widget-live-game-color);
@@ -206,42 +213,42 @@ ul {
206
213
  --vbr-widget-gamecenter-result-size: 6rem;
207
214
  --vbr-widget-gamecenter-result-weight: 700;
208
215
  --vbr-widget-gamecenter-result-color: var(--vbr-widget-primary-color-800);
209
- --vbr-widget-gamecenter-teamname-size: 1.3125rem;
216
+ --vbr-widget-gamecenter-teamname-size: var(--vbr-widget-typography-font-size-700);
210
217
  --vbr-widget-gamecenter-teamname-color: var(--vbr-widget-primary-color-800);
211
218
  --vbr-widget-gamecenter-teamname-weight: 700;
212
219
  --vbr-widget-gamecenter-title-color: var(--vbr-widget-primary-color-800);
213
- --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);
214
221
  --vbr-widget-gamecenter-title-weight: 700;
215
222
  --vbr-widget-gamecenter-gamedate-color: var(--vbr-widget-primary-color-500);
216
- --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);
217
224
  --vbr-widget-gamecenter-local-gamedate-color: var(--vbr-widget-primary-color-500);
218
- --vbr-widget-gamecenter-local-gamedate-size: 0.8125rem;
225
+ --vbr-widget-gamecenter-local-gamedate-size: var(--vbr-widget-typography-font-size-300);
219
226
  --vbr-widget-gamecenter-gamestatus-color: var(--vbr-widget-primary-color-600);
220
- --vbr-widget-gamecenter-gamestatus-size: 0.9375rem;
227
+ --vbr-widget-gamecenter-gamestatus-size: var(--vbr-widget-typography-font-size-400);
221
228
  --vbr-widget-gamecenter-periodresults-color: var(--vbr-widget-primary-color-600);
222
- --vbr-widget-gamecenter-periodresults-size: 1.3125rem;
229
+ --vbr-widget-gamecenter-periodresults-size: var(--vbr-widget-typography-font-size-700);
223
230
  --vbr-widget-gamecenter-period-header-bg-color: var(--vbr-widget-primary-color-800);
224
231
  --vbr-widget-gamecenter-period-header-color: var(--vbr-widget-primary-color-0);
225
- --vbr-widget-gamecenter-period-header-size: 0.8125rem;
232
+ --vbr-widget-gamecenter-period-header-size: var(--vbr-widget-typography-font-size-300);
226
233
  --vbr-widget-gamecenter-period-header-weight: 500;
227
234
  --vbr-widget-gamecenter-stats-bg-color: var(--vbr-widget-primary-color-50);
228
235
  --vbr-widget-gamecenter-stats-border-color: var(--vbr-widget-primary-color-100);
229
- --vbr-widget-gamecenter-stats-title-size: 0.8125rem;
236
+ --vbr-widget-gamecenter-stats-title-size: var(--vbr-widget-typography-font-size-300);
230
237
  --vbr-widget-gamecenter-stats-title-color: var(--vbr-widget-primary-color-400);
231
- --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);
232
239
  --vbr-widget-gamecenter-stats-color: var(--vbr-widget-primary-color-800);
233
240
 
234
241
  --vbr-widget-gamecenter-team-container-title-color: var(--vbr-widget-primary-color-800);
235
242
  --vbr-widget-gamecenter-team-container-title-bg-color: var(--vbr-widget-primary-color-100);
236
243
  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
237
244
 
238
- --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);
239
246
  --vbr-widget-gamecenter-events-evented-person-weight: 600;
240
- --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
241
- --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
242
- --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
243
- --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
244
- --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);
245
252
  --vbr-widget-gamecenter-events-timeout-bg-color: #2870ed;
246
253
 
247
254
  --vbr-widget-gamecenter-card-title-color: var(--vbr-widget-primary-color-900);
@@ -258,23 +265,23 @@ ul {
258
265
  --vbr-widget-gamecenter-home-team-identifier-border-color: transparent;
259
266
  --vbr-widget-gamecenter-away-team-identifier-border-color: transparent;
260
267
 
261
- --vbr-widget-main-image-wrapper-horizontal-margin: 0rem;
268
+ --vbr-widget-main-image-wrapper-horizontal-margin: 0;
262
269
 
263
270
  --vbr-widget-sticky-top-offset: 0;
264
271
 
265
- --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-text-xxs-size);
272
+ --vbr-widget-games-timeline-game-date-size: var(--vbr-widget-typography-font-size-100);
266
273
  --vbr-widget-games-timeline-game-date-color: var(--vbr-widget-primary-color-500);
267
274
  --vbr-widget-games-timeline-game-team-color: var(--vbr-widget-primary-color-700);
268
- --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-text-xsm-size);
275
+ --vbr-widget-games-timeline-game-team-size: var(--vbr-widget-typography-font-size-300);
269
276
  --vbr-widget-games-timeline-game-status-color: var(--vbr-widget-primary-color-300);
270
- --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-text-xs-size);
277
+ --vbr-widget-games-timeline-game-status-size: var(--vbr-widget-typography-font-size-200);
271
278
  --vbr-widget-games-timeline-game-hover-bg-color: linear-gradient(#fff, #f5f6f7 50%, #fff);
272
279
  --vbr-widget-games-timeline-arrow-color: var(--vbr-widget-primary-color-300);
273
280
  --vbr-widget-games-timeline-arrow-hover-color: var(--vbr-widget-primary-color-500);
274
281
  --vbr-widget-games-timeline-arrow-disabled-color: var(--vbr-widget-primary-color-100);
275
282
  --vbr-widget-games-timeline-arrow-border-color: var(--vbr-widget-primary-color-100);
276
283
  --vbr-widget-games-timeline-external-link-color: var(--vbr-widget-primary-color-500);
277
- --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-text-xs-size);
284
+ --vbr-widget-games-timeline-external-link-size: var(--vbr-widget-typography-font-size-200);
278
285
  }
279
286
 
280
287
  html,
@@ -399,7 +406,7 @@ a:hover {
399
406
 
400
407
  .is-badge {
401
408
  display: inline-block;
402
- padding: 0.125rem 0.25rem;
409
+ padding: 0.125em 0.25em;
403
410
  color: var(--vbr-widget-badge-color);
404
411
  font-size: var(--vbr-widget-badge-font-size);
405
412
  font-weight: 700;
@@ -409,7 +416,7 @@ a:hover {
409
416
  }
410
417
 
411
418
  .is-badge + .is-badge {
412
- margin-left: 3px;
419
+ margin-inline-start: 3px;
413
420
  }
414
421
 
415
422
  .is-badge.is-invert {
@@ -439,10 +446,10 @@ a:hover {
439
446
 
440
447
  .is-badge.is-large {
441
448
  font-size: var(--vbr-widget-badge-large-font-size);
442
- padding: 0.15rem 0.35rem;
449
+ padding: 0.15em 0.35em;
443
450
  }
444
451
 
445
452
  .is-badge.is-extra-large {
446
453
  font-size: var(--vbr-widget-badge-extra-large-font-size);
447
- padding: 0.21875rem 0.4196rem;
454
+ padding: 0.2695em 0.5165em;
448
455
  }