@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/playoffs.css CHANGED
@@ -1,3 +1,6 @@
1
+ /* --vbr-widget-typography-font-size-50
2
+ --vbr-widget-typography-font-lineheight-50 */
3
+
1
4
  .mjsz-vbr-playoffs .mjsz-vbr-table-grid {
2
5
  display: grid;
3
6
  grid-template-columns: 60px 160px minmax(60px, 0.41fr) minmax(160px, 1fr) minmax(40px, 60px) 70px minmax(160px, 1fr) minmax(
@@ -7,70 +10,70 @@
7
10
  color: var(--vbr-widget-table-color);
8
11
  }
9
12
 
10
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid:nth-child(odd) > div {
13
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid:nth-child(odd) > div {
11
14
  background-color: var(--vbr-widget-table-stripped-bg-color);
12
15
  }
13
16
 
14
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid.is-optional {
17
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid.is-optional {
15
18
  opacity: 0.5;
16
19
  }
17
20
 
18
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid > div {
21
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid > div {
19
22
  padding: 8px;
20
23
  }
21
24
 
22
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-truncate {
25
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-truncate {
23
26
  overflow: visible;
24
27
  text-overflow: ellipsis;
25
28
  white-space: nowrap;
26
29
  }
27
30
 
28
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-right {
31
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-right {
29
32
  text-align: right;
30
33
  }
31
34
 
32
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-center {
35
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-center {
33
36
  text-align: center;
34
37
  }
35
38
 
36
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-bold {
39
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-bold {
37
40
  font-weight: 900;
38
41
  }
39
42
 
40
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-light {
43
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-light {
41
44
  color: var(--vbr-widget-table-cell-light-color);
42
45
  }
43
46
 
44
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-dark {
47
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-dark {
45
48
  color: var(--vbr-widget-table-cell-dark-color);
46
49
  }
47
50
 
48
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-accent {
51
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-accent {
49
52
  color: var(--vbr-widget-secondary-color-500);
50
53
  }
51
54
 
52
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label {
55
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label {
53
56
  padding: 3px 6px;
54
- font-size: 11px;
57
+ font-size: var(--vbr-widget-typography-font-size-100);
55
58
  font-weight: 700;
56
59
  color: var(--vbr-widget-table-label-color);
57
60
  background-color: var(--vbr-widget-table-label-bg-color);
58
61
  border-radius: 2px;
59
62
  }
60
63
 
61
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label:not(:last-of-type) {
64
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label:not(:last-of-type) {
62
65
  margin-right: 3px;
63
66
  }
64
67
 
65
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-long {
68
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-long {
66
69
  display: block;
67
70
  }
68
71
 
69
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-short {
72
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-short {
70
73
  display: none;
71
74
  }
72
75
 
73
- @container table-wrapper (max-width: 768px) {
76
+ @container table-wrapper (max-width: 768px) {
74
77
  .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-long {
75
78
  display: none;
76
79
  }
@@ -78,15 +81,17 @@
78
81
  display: block;
79
82
  }
80
83
  }
81
- .mjsz-vbr-playoffs .mjsz-vbr-section-title {
84
+
85
+ .mjsz-vbr-playoffs .mjsz-vbr-section-title {
82
86
  padding: 10px;
83
87
  text-align: center;
84
- font-size: 16px;
88
+ font-size: var(--vbr-widget-typography-font-size-500);
85
89
  font-weight: 700;
86
90
  color: var(--vbr-widget-primary-color-100);
87
91
  background-color: var(--vbr-widget-primary-color-700);
88
92
  }
89
- .mjsz-vbr-playoffs .mjsz-vbr-section-details {
93
+
94
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details {
90
95
  display: grid;
91
96
  grid-template-columns: 1fr;
92
97
  align-items: center;
@@ -95,18 +100,23 @@
95
100
  padding: 20px;
96
101
  background-color: var(--vbr-widget-primary-color-50);
97
102
  }
98
- @media all and (min-width: 576px) {
99
- .mjsz-vbr-playoffs .mjsz-vbr-section-details {
103
+
104
+ @media all and (min-width: 576px) {
105
+
106
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details {
100
107
  grid-template-columns: 1fr fit-content(100px) fit-content(100px) fit-content(100px) 1fr;
101
108
  }
102
109
  }
103
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-long {
110
+
111
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-long {
104
112
  display: block;
105
113
  }
106
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-short {
114
+
115
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-short {
107
116
  display: none;
108
117
  }
109
- @container section-details (max-width: 768px) {
118
+
119
+ @container section-details (max-width: 768px) {
110
120
  .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-long {
111
121
  display: none;
112
122
  }
@@ -114,21 +124,25 @@
114
124
  display: block;
115
125
  }
116
126
  }
117
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-logo-image {
127
+
128
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-logo-image {
118
129
  width: 70px;
119
130
  height: 70px;
120
131
  }
121
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-result {
132
+
133
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-result {
122
134
  font-size: 4rem;
123
135
  font-weight: 700;
124
136
  text-align: center;
125
137
  color: var(--vbr-widget-primary-color-800);
126
138
  }
127
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name {
128
- font-size: 20px;
139
+
140
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name {
141
+ font-size: var(--vbr-widget-typography-font-size-700);
129
142
  font-weight: 700;
130
143
  color: var(--vbr-widget-primary-color-800);
131
144
  }
132
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-right {
145
+
146
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-right {
133
147
  text-align: right;
134
148
  }
package/dist/css/progress.css CHANGED
@@ -2,7 +2,7 @@
2
2
  display: flex;
3
3
  height: var(--vbr-widget-progress-height);
4
4
  overflow: hidden;
5
- font-size: 10px;
5
+ font-size: var(--vbr-widget-typography-font-size-50);
6
6
  background-color: var(--vbr-widget-progress-bg-color);
7
7
  border-radius: var(--vbr-widget-progress-border-radius);
8
8
  }
@@ -120,7 +120,7 @@
120
120
  grid-area: title;
121
121
 
122
122
  justify-self: center;
123
- font-size: var(--vbr-widget-typography-text-sm-size);
123
+ font-size: var(--vbr-widget-typography-font-size-400);
124
124
  font-weight: 700;
125
125
  line-height: 1.5rem;
126
126
  color: var(--vbr-widget-primary-color-500);
package/dist/css/standings-selector.css ADDED
@@ -0,0 +1,14 @@
1
+ .mjsz-vbr-standings-selector dl {
2
+ display: grid;
3
+ grid-template-columns: 1fr auto;
4
+ grid-template-areas: 'title selector' 'subtitle subtitle';
5
+ }
6
+ .mjsz-vbr-standings-selector dt {
7
+ grid-area: title;
8
+ }
9
+ .mjsz-vbr-standings-selector dd {
10
+ grid-area: subtitle;
11
+ }
12
+ .mjsz-vbr-standings-selector .is-championship-selector {
13
+ grid-area: selector;
14
+ }
package/dist/css/table.css CHANGED
@@ -1,8 +1,12 @@
1
+ /* --vbr-widget-typography-font-size-50
2
+ --vbr-widget-typography-font-lineheight-50 */
3
+
1
4
  .mjsz-vbr-table {
2
5
  border-collapse: collapse;
3
6
  border-spacing: 0;
4
7
  }
5
- .mjsz-vbr-table table,
8
+
9
+ .mjsz-vbr-table table,
6
10
  .mjsz-vbr-table caption,
7
11
  .mjsz-vbr-table tbody,
8
12
  .mjsz-vbr-table tfoot,
@@ -17,12 +21,13 @@
17
21
  font: inherit;
18
22
  vertical-align: baseline;
19
23
  }
20
- .mjsz-vbr-table {
24
+
25
+ .mjsz-vbr-table {
21
26
  color: var(--vbr-widget-table-color);
22
27
  background-color: var(--vbr-widget-table-default-bg-color);
23
28
  }
24
29
 
25
- .mjsz-vbr-table th {
30
+ .mjsz-vbr-table th {
26
31
  width: var(--vbr-widget-table-default-column-width);
27
32
  background-color: var(--vbr-widget-table-header-bg-color);
28
33
  font-size: var(--vbr-widget-table-header-font-size);
@@ -31,85 +36,85 @@
31
36
  text-align: center;
32
37
  }
33
38
 
34
- .mjsz-vbr-table th:focus-visible,
39
+ .mjsz-vbr-table th:focus-visible,
35
40
  .mjsz-vbr-table th:hover {
36
41
  background-color: var(--vbr-widget-table-header-hover-bg-color);
37
42
  outline: none;
38
43
  }
39
44
 
40
- .mjsz-vbr-table th.is-sortable {
45
+ .mjsz-vbr-table th.is-sortable {
41
46
  position: relative;
42
47
  cursor: pointer;
43
48
  }
44
49
 
45
- .mjsz-vbr-table th.is-sortable .icon-sort {
50
+ .mjsz-vbr-table th.is-sortable .icon-sort {
46
51
  opacity: 0.5;
47
52
  }
48
53
 
49
- .mjsz-vbr-table th.is-active {
54
+ .mjsz-vbr-table th.is-active {
50
55
  background-color: var(--vbr-widget-table-table-header-active-bg-color);
51
56
  color: var(--vbr-widget-table-header-active-color);
52
57
  }
53
58
 
54
- .mjsz-vbr-table th.is-active .icon-sort {
59
+ .mjsz-vbr-table th.is-active .icon-sort {
55
60
  opacity: 1;
56
61
  }
57
62
 
58
- .mjsz-vbr-table th.is-asc {
63
+ .mjsz-vbr-table th.is-asc {
59
64
  position: relative;
60
65
  }
61
66
 
62
- .mjsz-vbr-table th.is-desc {
67
+ .mjsz-vbr-table th.is-desc {
63
68
  position: relative;
64
69
  }
65
70
 
66
- .mjsz-vbr-table th.is-w-auto {
71
+ .mjsz-vbr-table th.is-w-auto {
67
72
  width: auto;
68
73
  }
69
74
 
70
- .mjsz-vbr-table th .is-icon-sort {
75
+ .mjsz-vbr-table th .is-icon-sort {
71
76
  width: 11px;
72
77
  height: 11px;
73
78
  margin-left: 5px;
74
79
  }
75
80
 
76
- .mjsz-vbr-table td {
81
+ .mjsz-vbr-table td {
77
82
  text-align: center;
78
83
  }
79
84
 
80
- .mjsz-vbr-table td.is-active {
85
+ .mjsz-vbr-table td.is-active {
81
86
  font-weight: 700;
82
87
  color: var(--vbr-widget-table-active-color);
83
88
  background-color: var(--vbr-widget-table-active-bg-color);
84
89
  }
85
90
 
86
- .mjsz-vbr-table td.is-zero {
91
+ .mjsz-vbr-table td.is-zero {
87
92
  color: var(--vbr-widget-table-zero-color);
88
93
  }
89
94
 
90
- .mjsz-vbr-table td.is-possible-empty:empty:before {
95
+ .mjsz-vbr-table td.is-possible-empty:empty:before {
91
96
  content: '0';
92
97
  color: var(--vbr-widget-table-zero-color);
93
98
  }
94
99
 
95
- .mjsz-vbr-table td .is-text-light,
100
+ .mjsz-vbr-table td .is-text-light,
96
101
  .mjsz-vbr-table td.is-text-light {
97
102
  color: var(--vbr-widget-table-cell-light-color);
98
103
  }
99
104
 
100
- .mjsz-vbr-table td .is-text-dark,
105
+ .mjsz-vbr-table td .is-text-dark,
101
106
  .mjsz-vbr-table td.is-text-dark {
102
107
  color: var(--vbr-widget-table-cell-dark-color);
103
108
  }
104
109
 
105
- .mjsz-vbr-table td .is-logo-image {
110
+ .mjsz-vbr-table td .is-logo-image {
106
111
  display: inline-block;
107
112
  vertical-align: middle;
108
113
  width: var(--vbr-widget-table-cell-logo-size);
109
114
  height: var(--vbr-widget-table-cell-logo-size);
110
115
  }
111
116
 
112
- .mjsz-vbr-table td .is-portrait-image {
117
+ .mjsz-vbr-table td .is-portrait-image {
113
118
  display: inline-block;
114
119
  vertical-align: middle;
115
120
  width: var(--vbr-widget-table-cell-portrait-size);
@@ -121,52 +126,52 @@
121
126
  border: 1px solid var(--vbr-widget-primary-color-100);
122
127
  }
123
128
 
124
- .mjsz-vbr-table td .is-portrait-image img {
129
+ .mjsz-vbr-table td .is-portrait-image img {
125
130
  width: var(--vbr-widget-table-cell-portrait-size);
126
131
  height: auto;
127
132
  }
128
133
 
129
- .mjsz-vbr-table td.is-text-bold {
134
+ .mjsz-vbr-table td.is-text-bold {
130
135
  font-weight: 700;
131
136
  }
132
137
 
133
- .mjsz-vbr-table td.is-text-italic {
138
+ .mjsz-vbr-table td.is-text-italic {
134
139
  font-style: italic;
135
140
  }
136
141
 
137
- .mjsz-vbr-table td.is-text-xl {
138
- font-size: var(--vbr-widget-typography-text-xl-size);
142
+ .mjsz-vbr-table td.is-text-xl {
143
+ font-size: var(--vbr-widget-typography-font-size-700);
139
144
  }
140
145
 
141
- .mjsz-vbr-table td .is-text-accent {
146
+ .mjsz-vbr-table td .is-text-accent {
142
147
  color: var(--vbr-widget-secondary-color-500);
143
148
  }
144
149
 
145
- .mjsz-vbr-table td.is-w-auto {
150
+ .mjsz-vbr-table td.is-w-auto {
146
151
  width: auto;
147
152
  }
148
153
 
149
- .mjsz-vbr-table td.is-horizontal-content {
154
+ .mjsz-vbr-table td.is-horizontal-content {
150
155
  display: inline-flex;
151
156
  align-items: center;
152
157
  }
153
158
 
154
- .mjsz-vbr-table td.is-text-positive,
159
+ .mjsz-vbr-table td.is-text-positive,
155
160
  .mjsz-vbr-table td .is-text-positive {
156
161
  color: var(--vbr-widget-live-game-color);
157
162
  }
158
163
 
159
- .mjsz-vbr-table td.is-text-negative,
164
+ .mjsz-vbr-table td.is-text-negative,
160
165
  .mjsz-vbr-table td .is-text-negative {
161
166
  color: var(--vbr-widget-danger-color-a400);
162
167
  }
163
168
 
164
- .mjsz-vbr-table td svg {
169
+ .mjsz-vbr-table td svg {
165
170
  width: 16px;
166
171
  height: 16px;
167
172
  }
168
173
 
169
- .mjsz-vbr-table td button {
174
+ .mjsz-vbr-table td button {
170
175
  padding: 3px 3px;
171
176
  line-height: 0;
172
177
  border: none;
@@ -174,49 +179,49 @@
174
179
  background-color: transparent;
175
180
  }
176
181
 
177
- .mjsz-vbr-table td button:hover {
182
+ .mjsz-vbr-table td button:hover {
178
183
  background-color: var(--vbr-widget-popover-trigger-hover-bg-color);
179
184
  }
180
185
 
181
- .mjsz-vbr-table td button:active,
186
+ .mjsz-vbr-table td button:active,
182
187
  .mjsz-vbr-table td button:focus {
183
188
  background-color: var(--vbr-widget-popover-trigger-focus-bg-color);
184
189
  }
185
190
 
186
- .mjsz-vbr-table td a {
191
+ .mjsz-vbr-table td a {
187
192
  text-decoration: none;
188
193
  }
189
194
 
190
- .mjsz-vbr-table td .label {
195
+ .mjsz-vbr-table td .label {
191
196
  padding: 3px 6px;
192
- font-size: 11px;
197
+ font-size: var(--vbr-widget-typography-font-size-100);
193
198
  font-weight: 700;
194
199
  color: var(--vbr-widget-table-label-color);
195
200
  background-color: var(--vbr-widget-table-label-bg-color);
196
201
  border-radius: 2px;
197
202
  }
198
203
 
199
- .mjsz-vbr-table td .label:not(:last-of-type) {
204
+ .mjsz-vbr-table td .label:not(:last-of-type) {
200
205
  margin-right: 3px;
201
206
  }
202
207
 
203
- .mjsz-vbr-table td a {
208
+ .mjsz-vbr-table td a {
204
209
  color: var(--vbr-widget-link-color);
205
210
  }
206
211
 
207
- .mjsz-vbr-table td a:hover {
212
+ .mjsz-vbr-table td a:hover {
208
213
  color: var(--vbr-widget-hover-color);
209
214
  }
210
215
 
211
- .mjsz-vbr-table td .is-team-name-long {
216
+ .mjsz-vbr-table td .is-team-name-long {
212
217
  display: block;
213
218
  }
214
219
 
215
- .mjsz-vbr-table td .is-team-name-short {
220
+ .mjsz-vbr-table td .is-team-name-short {
216
221
  display: none;
217
222
  }
218
223
 
219
- @container table-wrapper (max-width: 768px) {
224
+ @container table-wrapper (max-width: 768px) {
220
225
  .mjsz-vbr-table td .is-team-name-long {
221
226
  display: none;
222
227
  }
@@ -225,52 +230,52 @@
225
230
  }
226
231
  }
227
232
 
228
- .mjsz-vbr-table th,
233
+ .mjsz-vbr-table th,
229
234
  .mjsz-vbr-table td {
230
235
  padding: 8px;
231
236
  white-space: nowrap;
232
237
  vertical-align: middle;
233
238
  }
234
239
 
235
- .mjsz-vbr-table th.is-text-left, .mjsz-vbr-table td.is-text-left {
240
+ .mjsz-vbr-table th.is-text-left, .mjsz-vbr-table td.is-text-left {
236
241
  text-align: left;
237
242
  }
238
243
 
239
- .mjsz-vbr-table th.is-text-right, .mjsz-vbr-table td.is-text-right {
244
+ .mjsz-vbr-table th.is-text-right, .mjsz-vbr-table td.is-text-right {
240
245
  text-align: right;
241
246
  }
242
247
 
243
- .mjsz-vbr-table th.is-has-image, .mjsz-vbr-table td.is-has-image {
248
+ .mjsz-vbr-table th.is-has-image, .mjsz-vbr-table td.is-has-image {
244
249
  padding: 0 2px;
245
250
  }
246
251
 
247
- .mjsz-vbr-table th .is-duplicated, .mjsz-vbr-table td .is-duplicated {
252
+ .mjsz-vbr-table th .is-duplicated, .mjsz-vbr-table td .is-duplicated {
248
253
  color: var(--vbr-widget-table-neutral-color);
249
254
  }
250
255
 
251
- .mjsz-vbr-table tr.is-highlighted {
256
+ .mjsz-vbr-table tr.is-highlighted {
252
257
  color: var(--vbr-widget-danger-color-a400);
253
258
  }
254
259
 
255
- .mjsz-vbr-table tr.is-optional {
260
+ .mjsz-vbr-table tr.is-optional {
256
261
  opacity: 0.5;
257
262
  }
258
263
 
259
- .mjsz-vbr-table tr:nth-child(even) {
264
+ .mjsz-vbr-table tr:nth-child(even) {
260
265
  background-color: var(--vbr-widget-table-stripped-bg-color);
261
266
  }
262
267
 
263
- .mjsz-vbr-table tr:nth-child(even) td.is-active {
268
+ .mjsz-vbr-table tr:nth-child(even) td.is-active {
264
269
  background-color: var(--vbr-widget-table-active-even-bg-color);
265
270
  }
266
271
 
267
- .mjsz-vbr-table tr:focus-within,
272
+ .mjsz-vbr-table tr:focus-within,
268
273
  .mjsz-vbr-table tr:hover {
269
274
  color: var(--vbr-widget-table-hover-color);
270
275
  background-color: var(--vbr-widget-table-hover-bg-color);
271
276
  }
272
277
 
273
- .mjsz-vbr-table tr:focus-within td.is-active, .mjsz-vbr-table tr:hover td.is-active {
278
+ .mjsz-vbr-table tr:focus-within td.is-active, .mjsz-vbr-table tr:hover td.is-active {
274
279
  color: var(--vbr-widget-table-active-hover-color);
275
280
  background-color: var(--vbr-widget-table-active-hover-bg-color);
276
281
  }
package/dist/css/teams.css CHANGED
@@ -1,3 +1,6 @@
1
+ /* --vbr-widget-typography-font-size-50
2
+ --vbr-widget-typography-font-lineheight-50 */
3
+
1
4
  .mjsz-vbr-wrapped-grid {
2
5
  --min-width: 300px;
3
6
  --max-width: 1fr;
@@ -9,14 +12,14 @@
9
12
  text-align: center;
10
13
  }
11
14
 
12
- .mjsz-vbr-wrapped-grid a {
15
+ .mjsz-vbr-wrapped-grid a {
13
16
  display: flex;
14
17
  flex-direction: column;
15
18
  align-items: center;
16
19
  row-gap: 20px;
17
20
  }
18
21
 
19
- .mjsz-vbr-wrapped-grid .is-team-logo {
22
+ .mjsz-vbr-wrapped-grid .is-team-logo {
20
23
  display: block;
21
24
  width: 100%;
22
25
  aspect-ratio: 1;
package/dist/css/typography.css CHANGED
@@ -11,28 +11,28 @@
11
11
  font-style: italic;
12
12
  }
13
13
  .is-text-xs {
14
- font-size: var(--vbr-widget-typography-text-xs-size);
15
- line-height: var(--vbr-widget-typography-text-xs-lineheight);
14
+ font-size: var(--vbr-widget-typography-font-size-200);
15
+ line-height: var(--vbr-widget-typography-font-lineheight-200);
16
16
  }
17
17
  .is-text-sm {
18
- font-size: var(--vbr-widget-typography-text-sm-size);
19
- line-height: var(--vbr-widget-typography-text-xs-lineheight);
18
+ font-size: var(--vbr-widget-typography-font-size-400);
19
+ line-height: var(--vbr-widget-typography-font-lineheight-200);
20
20
  }
21
21
  .is-text-base {
22
- font-size: var(--vbr-widget-typography-text-base-size);
23
- line-height: var(--vbr-widget-typography-text-base-lineheight);
22
+ font-size: var(--vbr-widget-typography-font-size-500);
23
+ line-height: var(--vbr-widget-typography-font-lineheight-500);
24
24
  }
25
25
  .is-text-lg {
26
- font-size: var(--vbr-widget-typography-text-lg-size);
27
- line-height: var(--vbr-widget-typography-text-lg-lineheight);
26
+ font-size: var(--vbr-widget-typography-font-size-600);
27
+ line-height: var(--vbr-widget-typography-font-lineheight-600);
28
28
  }
29
29
  .is-text-xl {
30
- font-size: var(--vbr-widget-typography-text-xl-size);
31
- line-height: var(--vbr-widget-typography-text-xl-lineheight);
30
+ font-size: var(--vbr-widget-typography-font-size-700);
31
+ line-height: var(--vbr-widget-typography-font-lineheight-700);
32
32
  }
33
33
  .is-text-4xl {
34
- font-size: var(--vbr-widget-typography-text-4xl-size);
35
- line-height: var(--vbr-widget-typography-text-4xl-lineheight);
34
+ font-size: var(--vbr-widget-typography-font-size-950);
35
+ line-height: var(--vbr-widget-typography-font-lineheight-950);
36
36
  }
37
37
  .is-uppercase {
38
38
  text-transform: uppercase;
@@ -60,24 +60,24 @@
60
60
  }
61
61
  .is-heading-1 {
62
62
  font-size: var(--vbr-widget-typography-heading-1-size);
63
- line-height: var(--vbr-widget-typography-text-xl-lineheight);
64
- margin-block-start: var(--vbr-widget-typography-text-xl-size);
65
- margin-block-end: calc(var(--vbr-widget-typography-text-xl-size) / 2);
63
+ line-height: var(--vbr-widget-typography-font-lineheight-700);
64
+ margin-block-start: var(--vbr-widget-typography-font-size-700);
65
+ margin-block-end: calc(var(--vbr-widget-typography-font-size-700) / 2);
66
66
  font-weight: var(--vbr-widget-typography-heading-weight);
67
67
  }
68
68
  .is-heading-2 {
69
69
  font-size: var(--vbr-widget-typography-heading-2-size);
70
- line-height: var(--vbr-widget-typography-text-lg-lineheight);
70
+ line-height: var(--vbr-widget-typography-font-lineheight-600);
71
71
  font-weight: var(--vbr-widget-typography-heading-weight);
72
- margin-block-start: var(--vbr-widget-typography-text-lg-size);
73
- margin-block-end: calc(var(--vbr-widget-typography-text-lg-size) / 2);
72
+ margin-block-start: var(--vbr-widget-typography-font-size-600);
73
+ margin-block-end: calc(var(--vbr-widget-typography-font-size-600) / 2);
74
74
  }
75
75
  .is-heading-3 {
76
76
  font-size: var(--vbr-widget-typography-heading-3-size);
77
- line-height: var(--vbr-widget-typography-text-base-lineheight);
77
+ line-height: var(--vbr-widget-typography-font-lineheight-500);
78
78
  font-weight: var(--vbr-widget-typography-heading-weight);
79
- margin-block-start: var(--vbr-widget-typography-text-base-size);
80
- margin-block-end: calc(var(--vbr-widget-typography-text-base-size) / 2);
79
+ margin-block-start: var(--vbr-widget-typography-font-size-500);
80
+ margin-block-end: calc(var(--vbr-widget-typography-font-size-500) / 2);
81
81
  }
82
82
  .is-rounded {
83
83
  overflow: hidden;