@mjsz-vbr-elements/shared 2.9.1 → 2.11.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 (35) hide show
  1. package/dist/css/cards.css +5 -10
  2. package/dist/css/common.css +69 -60
  3. package/dist/css/dropdown.css +2 -1
  4. package/dist/css/forms.css +5 -1
  5. package/dist/css/game-center-timeline.css +148 -262
  6. package/dist/css/game-center.css +120 -75
  7. package/dist/css/games-timeline.css +44 -30
  8. package/dist/css/grid.css +5 -0
  9. package/dist/css/paginator.css +1 -0
  10. package/dist/css/playoffs.css +44 -47
  11. package/dist/css/progress.css +5 -3
  12. package/dist/css/reset.css +2 -0
  13. package/dist/css/responsive-table.css +1 -0
  14. package/dist/css/standings-selector.css +14 -0
  15. package/dist/css/table.css +60 -62
  16. package/dist/css/teams.css +7 -2
  17. package/dist/css/typography.css +22 -21
  18. package/dist/css/variables.css +65 -56
  19. package/dist/icons/IconArrowDown.js +11 -11
  20. package/dist/icons/IconArrowUp.js +12 -12
  21. package/dist/icons/IconBroadcast.js +29 -29
  22. package/dist/icons/IconHockeyPuck.js +13 -13
  23. package/dist/icons/IconLeft.js +10 -10
  24. package/dist/icons/IconMore.js +24 -24
  25. package/dist/icons/IconRight.js +10 -10
  26. package/dist/icons/IconSheet.js +16 -16
  27. package/dist/icons/IconSort.js +12 -12
  28. package/dist/icons/IconSortAsc.js +12 -12
  29. package/dist/icons/IconSortDesc.js +13 -13
  30. package/dist/icons/IconStar.js +17 -17
  31. package/dist/icons/IconTimer.js +13 -13
  32. package/dist/icons/IconWarning.js +21 -21
  33. package/dist/icons/IconWhistle.js +12 -12
  34. package/dist/icons/IconYoutube.js +10 -10
  35. package/package.json +15 -13
package/dist/css/playoffs.css CHANGED
@@ -1,92 +1,87 @@
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
- grid-template-columns: 60px 160px minmax(60px, 0.41fr) minmax(160px, 1fr) minmax(40px, 60px) 70px minmax(160px, 1fr) minmax(
4
- 180px,
5
- 0.9fr
6
- );
6
+ grid-template-columns:
7
+ 60px 160px minmax(60px, 0.41fr) minmax(160px, 1fr) minmax(40px, 60px) 70px minmax(160px, 1fr)
8
+ minmax(180px, 0.9fr);
7
9
  color: var(--vbr-widget-table-color);
8
10
  }
9
11
 
10
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid:nth-child(odd) > div {
12
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid:nth-child(odd) > div {
11
13
  background-color: var(--vbr-widget-table-stripped-bg-color);
12
14
  }
13
15
 
14
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid.is-optional {
16
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid.is-optional {
15
17
  opacity: 0.5;
16
18
  }
17
19
 
18
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid > div {
20
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid > div {
19
21
  padding: 8px;
20
22
  }
21
23
 
22
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-truncate {
24
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-truncate {
23
25
  overflow: visible;
24
26
  text-overflow: ellipsis;
25
27
  white-space: nowrap;
26
28
  }
27
29
 
28
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-right {
30
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-right {
29
31
  text-align: right;
30
32
  }
31
33
 
32
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-center {
34
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-center {
33
35
  text-align: center;
34
36
  }
35
37
 
36
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-bold {
38
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-bold {
37
39
  font-weight: 900;
38
40
  }
39
41
 
40
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-light {
42
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-light {
41
43
  color: var(--vbr-widget-table-cell-light-color);
42
44
  }
43
45
 
44
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-dark {
46
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-dark {
45
47
  color: var(--vbr-widget-table-cell-dark-color);
46
48
  }
47
49
 
48
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-accent {
50
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-text-accent {
49
51
  color: var(--vbr-widget-secondary-color-500);
50
52
  }
51
53
 
52
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label {
54
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label {
53
55
  padding: 3px 6px;
54
- font-size: 11px;
56
+ font-size: var(--vbr-widget-typography-font-size-100);
55
57
  font-weight: 700;
56
58
  color: var(--vbr-widget-table-label-color);
57
59
  background-color: var(--vbr-widget-table-label-bg-color);
58
60
  border-radius: 2px;
59
61
  }
60
62
 
61
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label:not(:last-of-type) {
63
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .label:not(:last-of-type) {
62
64
  margin-right: 3px;
63
65
  }
64
66
 
65
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-long {
67
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-long {
66
68
  display: block;
67
69
  }
68
70
 
69
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-short {
71
+ .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-short {
70
72
  display: none;
71
73
  }
72
74
 
73
- @container table-wrapper (max-width: 768px) {
74
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-long {
75
- display: none;
76
- }
77
- .mjsz-vbr-playoffs .mjsz-vbr-table-grid .is-team-name-short {
78
- display: block;
79
- }
80
- }
81
- .mjsz-vbr-playoffs .mjsz-vbr-section-title {
75
+ .mjsz-vbr-playoffs .mjsz-vbr-section-title {
82
76
  padding: 10px;
83
77
  text-align: center;
84
- font-size: 16px;
78
+ font-size: var(--vbr-widget-typography-font-size-500);
85
79
  font-weight: 700;
86
80
  color: var(--vbr-widget-primary-color-100);
87
81
  background-color: var(--vbr-widget-primary-color-700);
88
82
  }
89
- .mjsz-vbr-playoffs .mjsz-vbr-section-details {
83
+
84
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details {
90
85
  display: grid;
91
86
  grid-template-columns: 1fr;
92
87
  align-items: center;
@@ -95,40 +90,42 @@
95
90
  padding: 20px;
96
91
  background-color: var(--vbr-widget-primary-color-50);
97
92
  }
98
- @media all and (min-width: 576px) {
99
- .mjsz-vbr-playoffs .mjsz-vbr-section-details {
93
+
94
+ @media all and (min-width: 576px) {
95
+
96
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details {
100
97
  grid-template-columns: 1fr fit-content(100px) fit-content(100px) fit-content(100px) 1fr;
101
98
  }
102
99
  }
103
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-long {
100
+
101
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-long {
104
102
  display: block;
105
103
  }
106
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-short {
104
+
105
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-short {
107
106
  display: none;
108
107
  }
109
- @container section-details (max-width: 768px) {
110
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-long {
111
- display: none;
112
- }
113
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name-short {
114
- display: block;
115
- }
116
- }
117
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-logo-image {
108
+
109
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-logo-image {
118
110
  width: 70px;
119
111
  height: 70px;
120
112
  }
121
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-result {
113
+
114
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-result {
122
115
  font-size: 4rem;
123
116
  font-weight: 700;
124
117
  text-align: center;
125
118
  color: var(--vbr-widget-primary-color-800);
126
119
  }
127
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name {
128
- font-size: 20px;
120
+
121
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-team-name {
122
+ font-size: var(--vbr-widget-typography-font-size-700);
129
123
  font-weight: 700;
130
124
  color: var(--vbr-widget-primary-color-800);
131
125
  }
132
- .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-right {
126
+
127
+ .mjsz-vbr-playoffs .mjsz-vbr-section-details .is-right {
133
128
  text-align: right;
134
129
  }
130
+
131
+ :export { meta: '{"e":"table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td","f":[{"b":[{"e":".is-team-name-long","d":{"display":"none"}},{"e":".is-team-name-short","d":{"display":"block"}}],"a":[[["max-width",":",768]]]}]}' }
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
  }
@@ -61,7 +61,7 @@
61
61
  align-items: center;
62
62
  }
63
63
 
64
- @media (width > 500px) {
64
+ @media (min-width: 501px) {
65
65
 
66
66
  .mjsz-vbr-statistics-double-bar {
67
67
  grid-template-areas: 'title title title title' 'value-start bar-start bar-end value-end'
@@ -120,8 +120,10 @@
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);
127
127
  }
128
+
129
+ :export { meta: '{"e":".progress","f":[]}' }
package/dist/css/reset.css CHANGED
@@ -31,3 +31,5 @@ ol,
31
31
  ul {
32
32
  list-style: none;
33
33
  }
34
+
35
+ :export { meta: '{"e":"h1,\nh2,\nh3,\nul,\nli,\np,\ndl,\ndt,\ndd","f":[]}' }
package/dist/css/responsive-table.css CHANGED
@@ -8,3 +8,4 @@
8
8
  .mjsz-vbr-table-responsive table {
9
9
  width: 100%;
10
10
  }
11
+ :export { meta: '{"e":".table-responsive","f":[]}' }
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,103 +179,96 @@
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) {
220
- .mjsz-vbr-table td .is-team-name-long {
221
- display: none;
222
- }
223
- .mjsz-vbr-table td .is-team-name-short {
224
- display: block;
225
- }
226
- }
227
-
228
- .mjsz-vbr-table th,
224
+ .mjsz-vbr-table th,
229
225
  .mjsz-vbr-table td {
230
226
  padding: 8px;
231
227
  white-space: nowrap;
232
228
  vertical-align: middle;
233
229
  }
234
230
 
235
- .mjsz-vbr-table th.is-text-left, .mjsz-vbr-table td.is-text-left {
231
+ .mjsz-vbr-table th.is-text-left, .mjsz-vbr-table td.is-text-left {
236
232
  text-align: left;
237
233
  }
238
234
 
239
- .mjsz-vbr-table th.is-text-right, .mjsz-vbr-table td.is-text-right {
235
+ .mjsz-vbr-table th.is-text-right, .mjsz-vbr-table td.is-text-right {
240
236
  text-align: right;
241
237
  }
242
238
 
243
- .mjsz-vbr-table th.is-has-image, .mjsz-vbr-table td.is-has-image {
239
+ .mjsz-vbr-table th.is-has-image, .mjsz-vbr-table td.is-has-image {
244
240
  padding: 0 2px;
245
241
  }
246
242
 
247
- .mjsz-vbr-table th .is-duplicated, .mjsz-vbr-table td .is-duplicated {
243
+ .mjsz-vbr-table th .is-duplicated, .mjsz-vbr-table td .is-duplicated {
248
244
  color: var(--vbr-widget-table-neutral-color);
249
245
  }
250
246
 
251
- .mjsz-vbr-table tr.is-highlighted {
247
+ .mjsz-vbr-table tr.is-highlighted {
252
248
  color: var(--vbr-widget-danger-color-a400);
253
249
  }
254
250
 
255
- .mjsz-vbr-table tr.is-optional {
251
+ .mjsz-vbr-table tr.is-optional {
256
252
  opacity: 0.5;
257
253
  }
258
254
 
259
- .mjsz-vbr-table tr:nth-child(even) {
255
+ .mjsz-vbr-table tr:nth-child(even) {
260
256
  background-color: var(--vbr-widget-table-stripped-bg-color);
261
257
  }
262
258
 
263
- .mjsz-vbr-table tr:nth-child(even) td.is-active {
259
+ .mjsz-vbr-table tr:nth-child(even) td.is-active {
264
260
  background-color: var(--vbr-widget-table-active-even-bg-color);
265
261
  }
266
262
 
267
- .mjsz-vbr-table tr:focus-within,
263
+ .mjsz-vbr-table tr:focus-within,
268
264
  .mjsz-vbr-table tr:hover {
269
265
  color: var(--vbr-widget-table-hover-color);
270
266
  background-color: var(--vbr-widget-table-hover-bg-color);
271
267
  }
272
268
 
273
- .mjsz-vbr-table tr:focus-within td.is-active, .mjsz-vbr-table tr:hover td.is-active {
269
+ .mjsz-vbr-table tr:focus-within td.is-active, .mjsz-vbr-table tr:hover td.is-active {
274
270
  color: var(--vbr-widget-table-active-hover-color);
275
271
  background-color: var(--vbr-widget-table-active-hover-bg-color);
276
272
  }
273
+
274
+ :export { meta: '{"e":"table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td","f":[{"b":[{"e":".is-team-name-long","d":{"display":"none"}},{"e":".is-team-name-short","d":{"display":"block"}}],"a":[[["max-width",":",768]]]}]}' }
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,15 +12,17 @@
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;
23
26
  }
27
+
28
+ :export { meta: '{"e":"table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td","f":[]}' }
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;
@@ -98,3 +98,4 @@
98
98
  .is-w-10 {
99
99
  width: 32px;
100
100
  }
101
+ :export { meta: '{"e":".is-text-right","f":[]}' }