@mjsz-vbr-elements/shared 2.1.0-beta.5 → 2.1.0-beta.50

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.
@@ -1,4 +1,7 @@
1
1
  .is-card {
2
+ container-name: card-row;
3
+ container-type: inline-size;
4
+
2
5
  background-color: #fff;
3
6
  padding: 15px;
4
7
  margin-bottom: 20px;
@@ -25,6 +28,19 @@
25
28
  display: block;
26
29
  }
27
30
 
31
+ .mjsz-vbr-card-item .is-team-name-short {
32
+ display: none;
33
+ }
34
+
35
+ @container card-row (max-width: 768px) {
36
+ .mjsz-vbr-card-item .is-team-name-long {
37
+ display: none;
38
+ }
39
+ .mjsz-vbr-card-item .is-team-name-short {
40
+ display: block;
41
+ }
42
+ }
43
+
28
44
  .mjsz-vbr-card-item .is-info {
29
45
  grid-column: 1/4;
30
46
  display: flex;
@@ -67,8 +67,21 @@ ul {
67
67
  --vbr-widget-danger-color-a400: #ff1744;
68
68
 
69
69
  --vbr-widget-live-game-color: #8bc34a;
70
-
71
- --vbr-widget-table-header-font-size: 12px;
70
+ --vbr-widget-neutral-color: #ffc107;
71
+
72
+ --vbr-widget-typography-text-xs-size: 0.75rem; /* 12px */
73
+ --vbr-widget-typography-text-xs-lineheight: 1.25rem; /* 20px */
74
+ --vbr-widget-typography-text-sm-size: 0.875rem; /* 14px */
75
+ --vbr-widget-typography-text-sm-lineheight: 1.5rem; /* 24px */
76
+ --vbr-widget-typography-text-base-size: 1rem; /* 16px */
77
+ --vbr-widget-typography-text-base-lineheight: 1.75rem; /* 28px */
78
+ --vbr-widget-typography-text-lg-size: 1.125rem; /* 18px */
79
+ --vbr-widget-typography-text-lg-lineheight: 2rem; /* 32px */
80
+ --vbr-widget-typography-text-xl-size: 1.25rem; /* 20px */
81
+ --vbr-widget-typography-text-xl-lineheight: 2rem; /* 32px */
82
+ --vbr-widget-typography-heading-weight: 500;
83
+
84
+ --vbr-widget-table-header-font-size: var(--vbr-widget-typography-text-xs-size);
72
85
  --vbr-widget-table-default-column-width: 30px;
73
86
  --vbr-widget-table-default-bg-color: var(--vbr-widget-primary-color-0);
74
87
  --vbr-widget-table-color: var(--vbr-widget-primary-color-800);
@@ -104,7 +117,7 @@ ul {
104
117
  --vbr-widget-paginator-active-bg-color: var(--vbr-widget-primary-color-900);
105
118
  --vbr-widget-paginator-disabled-color: var(--vbr-widget-primary-color-200);
106
119
 
107
- --vbr-widget-tooltip-font-size: 12px;
120
+ --vbr-widget-tooltip-font-size: var(--vbr-widget-typography-text-xs-size);
108
121
  --vbr-widget-tooltip-color: #ffffff;
109
122
  --vbr-widget-tooltip-bg-color: #000000;
110
123
 
@@ -124,22 +137,23 @@ ul {
124
137
  --vbr-widget-hover-color: var(--vbr-widget-secondary-color-900);
125
138
 
126
139
  --vbr-widget-base-input-color: var(--vbr-widget-primary-color-800);
127
- --vbr-widget-base-input-font-size: 0.875rem;
140
+ --vbr-widget-base-input-font-size: var(--vbr-widget-typography-text-sm-size);
128
141
  --vbr-widget-base-input-border-color: var(--vbr-widget-primary-color-300);
129
142
  --vbr-widget-base-input-border-radius: 3px;
130
143
 
131
144
  --vbr-widget-form-label-color: var(--vbr-widget-primary-color-500);
132
- --vbr-widget-form-label-font-size: 0.75rem;
145
+ --vbr-widget-form-label-font-size: var(--vbr-widget-typography-text-xs-size);
133
146
 
134
147
  --vbr-widget-timezone-selector-color: var(--vbr-widget-primary-color-500);
135
- --vbr-widget-timezone-selector-font-size: 0.8125rem;
148
+ --vbr-widget-timezone-selector-font-size: var(--vbr-widget-typography-text-sm-size); /* 0.8125rem */
136
149
 
137
150
  --vbr-widget-badge-bg-color: var(--vbr-widget-primary-color-50);
138
151
  --vbr-widget-badge-color: var(--vbr-widget-primary-color-400);
139
152
  --vbr-widget-badge-font-size: 0.625rem;
153
+ --vbr-widget-badge-large-font-size: 0.6875rem;
140
154
 
141
155
  --vbr-widget-tab-btn-padding: 0.625rem 1rem;
142
- --vbr-widget-tab-btn-font-size: 1rem;
156
+ --vbr-widget-tab-btn-font-size: var();
143
157
  --vbr-widget-tab-btn-font-weight: 500;
144
158
  --vbr-widget-tab-btn-bg-color: var(--vbr-widget-primary-color-0);
145
159
  --vbr-widget-tab-btn-color: var(--vbr-widget-primary-color-300);
@@ -154,6 +168,14 @@ ul {
154
168
  --vbr-widget-tab-btn-active-color: var(--vbr-widget-primary-color-900);
155
169
  --vbr-widget-tab-btn-active-border-color: var(--vbr-widget-secondary-color-500);
156
170
 
171
+ --vbr-widget-toggle-group-gap: 0.625rem;
172
+ --vbr-widget-toggle-group-btn-padding: 3px 10px;
173
+ --vbr-widget-toggle-group-btn-size: var(--vbr-widget-typography-text-sm-size);
174
+ --vbr-widget-toggle-group-btn-bg-color: var(--vbr-widget-primary-color-50);
175
+ --vbr-widget-toggle-group-btn-active-color: var(--vbr-widget-primary-color-0);
176
+ --vbr-widget-toggle-group-btn-active-bg-color: var(--vbr-widget-live-game-color);
177
+ --vbr-widget-toggle-group-btn-radius: 4px;
178
+
157
179
  --vbr-widget-progress-height: 10px;
158
180
  --vbr-widget-progress-border-radius: 5px;
159
181
  --vbr-widget-progress-bg-color: var(--vbr-widget-primary-color-50);
@@ -162,37 +184,44 @@ ul {
162
184
  --vbr-widget-progress-bar-stripe-angle: 45deg;
163
185
 
164
186
  --vbr-widget-gamecenter-result-size: 6rem;
187
+ --vbr-widget-gamecenter-result-weight: 700;
165
188
  --vbr-widget-gamecenter-result-color: var(--vbr-widget-primary-color-800);
166
189
  --vbr-widget-gamecenter-teamname-size: 1.3125rem;
167
190
  --vbr-widget-gamecenter-teamname-color: var(--vbr-widget-primary-color-800);
191
+ --vbr-widget-gamecenter-teamname-weight: 700;
168
192
  --vbr-widget-gamecenter-title-color: var(--vbr-widget-primary-color-800);
169
- --vbr-widget-gamecenter-title-size: 1rem;
193
+ --vbr-widget-gamecenter-title-size: var(--vbr-widget-typography-text-base-size);
194
+ --vbr-widget-gamecenter-title-weight: 700;
170
195
  --vbr-widget-gamecenter-gamedate-color: var(--vbr-widget-primary-color-500);
171
- --vbr-widget-gamecenter-gamedate-size: 1rem;
196
+ --vbr-widget-gamecenter-gamedate-size: var(--vbr-widget-typography-text-base-size);
172
197
  --vbr-widget-gamecenter-local-gamedate-color: var(--vbr-widget-primary-color-500);
173
198
  --vbr-widget-gamecenter-local-gamedate-size: 0.8125rem;
174
199
  --vbr-widget-gamecenter-gamestatus-color: var(--vbr-widget-primary-color-600);
175
- --vbr-widget-gamecenter-gamestatus-size: 1rem;
200
+ --vbr-widget-gamecenter-gamestatus-size: 0.9375rem;
176
201
  --vbr-widget-gamecenter-periodresults-color: var(--vbr-widget-primary-color-600);
177
202
  --vbr-widget-gamecenter-periodresults-size: 1.3125rem;
178
203
  --vbr-widget-gamecenter-period-header-bg-color: var(--vbr-widget-primary-color-800);
179
204
  --vbr-widget-gamecenter-period-header-color: var(--vbr-widget-primary-color-0);
205
+ --vbr-widget-gamecenter-period-header-size: 0.8125rem;
206
+ --vbr-widget-gamecenter-period-header-weight: 500;
180
207
  --vbr-widget-gamecenter-stats-bg-color: var(--vbr-widget-primary-color-50);
181
208
  --vbr-widget-gamecenter-stats-border-color: var(--vbr-widget-primary-color-100);
182
209
  --vbr-widget-gamecenter-stats-title-size: 0.8125rem;
183
210
  --vbr-widget-gamecenter-stats-title-color: var(--vbr-widget-primary-color-400);
184
- --vbr-widget-gamecenter-stats-size: 1rem;
211
+ --vbr-widget-gamecenter-stats-size: var(--vbr-widget-typography-text-base-size);
185
212
  --vbr-widget-gamecenter-stats-color: var(--vbr-widget-primary-color-800);
186
213
 
187
214
  --vbr-widget-gamecenter-team-container-title-color: var(--vbr-widget-primary-color-800);
188
215
  --vbr-widget-gamecenter-team-container-title-bg-color: var(--vbr-widget-primary-color-100);
189
216
  --vbr-widget-gamecenter-team-container-border-color: var(--vbr-widget-primary-color-100);
190
217
 
218
+ --vbr-widget-gamecenter-events-evented-person-size: var(--vbr-widget-typography-text-base-size);
219
+ --vbr-widget-gamecenter-events-evented-person-weight: 500;
191
220
  --vbr-widget-gamecenter-events-assitst-list-size: 0.9375rem;
192
- --vbr-widget-gamecenter-events-poi-list-size: 0.75rem;
193
- --vbr-widget-gamecenter-events-score-size: 1rem;
194
- --vbr-widget-gamecenter-events-penalty-size: 0.875rem;
195
- --vbr-widget-gamecenter-events-goalie-direction-size: 0.875rem;
221
+ --vbr-widget-gamecenter-events-poi-list-size: var(--vbr-widget-typography-text-xs-size);
222
+ --vbr-widget-gamecenter-events-score-size: var(--vbr-widget-typography-text-base-size);
223
+ --vbr-widget-gamecenter-events-penalty-size: var(--vbr-widget-typography-text-sm-size);
224
+ --vbr-widget-gamecenter-events-goalie-direction-size: var(--vbr-widget-typography-text-sm-size);
196
225
  }
197
226
 
198
227
  .transition-fade-enter-active,
@@ -317,3 +346,23 @@ a:hover {
317
346
  color: var(--vbr-widget-badge-bg-color);
318
347
  background-color: var(--vbr-widget-badge-color);
319
348
  }
349
+
350
+ .is-badge.is-green {
351
+ color: var(--vbr-widget-primary-color-0);
352
+ background-color: var(--vbr-widget-live-game-color);
353
+ }
354
+
355
+ .is-badge.is-red {
356
+ color: var(--vbr-widget-primary-color-0);
357
+ background-color: var(--vbr-widget-danger-color-a400);
358
+ }
359
+
360
+ .is-badge.is-yellow {
361
+ color: var(--vbr-widget-primary-color-0);
362
+ background-color: var(--vbr-widget-neutral-color);
363
+ }
364
+
365
+ .is-badge.is-large {
366
+ font-size: var(--vbr-widget-badge-large-font-size);
367
+ padding: 0.15rem 0.35rem;
368
+ }
@@ -1,5 +1,6 @@
1
1
  .mjsz-vbr-base-input {
2
2
  padding: 0.375rem 0.75rem;
3
+ font-family: inherit;
3
4
  color: var(--vbr-widget-base-input-color);
4
5
  border: 1px solid var(--vbr-widget-base-input-border-color);
5
6
  border-radius: var(--vbr-widget-base-input-border-radius);
@@ -61,3 +62,23 @@ label {
61
62
  border-color: var(--vbr-widget-tab-btn-active-border-color);
62
63
  background-color: var(--vbr-widget-tab-btn-active-bg-color);
63
64
  }
65
+
66
+ .mjsz-vbr-toggle-group {
67
+ display: flex;
68
+ flex-wrap: wrap;
69
+ gap: var(--vbr-widget-toggle-group-gap);
70
+ margin-bottom: 15px;
71
+ }
72
+
73
+ .mjsz-vbr-toggle-group button {
74
+ padding: var(--vbr-widget-toggle-group-btn-padding);
75
+ font-family: inherit;
76
+ font-size: var(--vbr-widget-toggle-group-btn-size);
77
+ background-color: var(--vbr-widget-toggle-group-btn-bg-color);
78
+ border-radius: var(--vbr-widget-toggle-group-btn-radius);
79
+ }
80
+
81
+ .mjsz-vbr-toggle-group button.is-active {
82
+ color: var(--vbr-widget-toggle-group-btn-active-color);
83
+ background-color: var(--vbr-widget-toggle-group-btn-active-bg-color);
84
+ }
@@ -17,10 +17,14 @@
17
17
  }
18
18
  }
19
19
 
20
+ .mjsz-vbr-gamecenter-game-data .is-title-container {
21
+ margin-bottom: 30px;
22
+ }
23
+
20
24
  .mjsz-vbr-gamecenter-game-data .is-title {
21
25
  color: var(--vbr-widget-gamecenter-title-color);
22
26
  font-size: var(--vbr-widget-gamecenter-title-size);
23
- font-weight: 700;
27
+ font-weight: var(--vbr-widget-gamecenter-title-weight);
24
28
  text-transform: uppercase;
25
29
  }
26
30
 
@@ -34,25 +38,27 @@
34
38
  color: var(--vbr-widget-gamecenter-local-gamedate-color);
35
39
  font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
36
40
  text-transform: uppercase;
37
- margin-bottom: 30px;
38
41
  }
39
42
 
40
43
  .mjsz-vbr-gamecenter-game-data .is-game-result {
41
44
  color: var(--vbr-widget-gamecenter-result-color);
42
- font-weight: 700;
45
+ font-weight: var(--vbr-widget-gamecenter-result-weight);
43
46
  font-size: var(--vbr-widget-gamecenter-result-size);
44
47
  line-height: var(--vbr-widget-gamecenter-result-size);
45
48
  }
46
49
 
47
50
  .mjsz-vbr-gamecenter-game-data .is-team-name {
51
+ display: block;
52
+ padding: 8px 0;
48
53
  color: var(--vbr-widget-gamecenter-teamname-color);
49
- font-weight: 700;
54
+ font-weight: var(--vbr-widget-gamecenter-teamname-weight);
50
55
  font-size: var(--vbr-widget-gamecenter-teamname-size);
51
56
  }
52
57
 
53
58
  .mjsz-vbr-gamecenter-game-data .is-game-status {
54
59
  color: var(--vbr-widget-gamecenter-gamestatus-color);
55
60
  font-size: var(--vbr-widget-gamecenter-gamestatus-size);
61
+ text-transform: uppercase;
56
62
  }
57
63
 
58
64
  .mjsz-vbr-gamecenter-game-data .is-period-results {
@@ -67,6 +73,39 @@
67
73
  width: 128px;
68
74
  height: 128px;
69
75
  }
76
+
77
+ .mjsz-vbr-gamecenter-game-data .is-game-status-live {
78
+ color: var(--vbr-widget-live-game-color);
79
+ }
80
+
81
+ .mjsz-vbr-gamecenter-game-data .is-external-contents {
82
+ padding: 5px;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ }
87
+
88
+ .mjsz-vbr-gamecenter-game-data .is-external-contents a {
89
+ display: flex;
90
+ align-items: center;
91
+ font-size: var(--vbr-widget-gamecenter-local-gamedate-size);
92
+ }
93
+
94
+ .mjsz-vbr-gamecenter-game-data .is-external-contents a:after {
95
+ content: '/';
96
+ margin: 0 5px;
97
+ }
98
+
99
+ .mjsz-vbr-gamecenter-game-data .is-external-contents a:last-of-type:after {
100
+ content: '';
101
+ }
102
+
103
+ .mjsz-vbr-gamecenter-game-data .is-external-contents .is-icon {
104
+ margin-right: 5px;
105
+ display: inline-block;
106
+ width: 15px;
107
+ height: 15px;
108
+ }
70
109
  .mjsz-vbr-gamecenter-game-stats {
71
110
  margin-bottom: 20px;
72
111
  }
@@ -124,7 +163,10 @@
124
163
  }
125
164
  .mjsz-vbr-gamecenter-game-events .is-period-header {
126
165
  padding: 10px 20px;
166
+ font-size: var(--vbr-widget-gamecenter-period-header-size);
167
+ font-weight: var(--vbr-widget-gamecenter-period-header-weight);
127
168
  text-align: center;
169
+ text-transform: uppercase;
128
170
  color: var(--vbr-widget-gamecenter-period-header-color);
129
171
  background-color: var(--vbr-widget-gamecenter-period-header-bg-color);
130
172
  }
@@ -168,6 +210,9 @@
168
210
  .mjsz-vbr-gamecenter-game-event .is-penalty-icon {
169
211
  color: var(--vbr-widget-primary-color-300);
170
212
  }
213
+ .mjsz-vbr-gamecenter-game-event .is-goal-so-icon {
214
+ color: var(--vbr-widget-primary-color-500);
215
+ }
171
216
  .mjsz-vbr-gamecenter-game-event .is-goal-icon {
172
217
  color: var(--vbr-widget-danger-color-a400);
173
218
  }
@@ -193,11 +238,24 @@
193
238
  text-align: center;
194
239
  color: var(--vbr-widget-danger-color-a400);
195
240
  }
241
+ .mjsz-vbr-gamecenter-game-event .is-score-so {
242
+ font-size: var(--vbr-widget-gamecenter-events-score-size);
243
+ font-weight: 700;
244
+ text-align: center;
245
+ color: var(--vbr-widget-primary-color-500);
246
+ }
247
+ .mjsz-vbr-gamecenter-game-event .is-score-so-goal {
248
+ color: var(--vbr-widget-live-game-color);
249
+ }
196
250
  .mjsz-vbr-gamecenter-game-event .is-goalie-direction {
197
251
  font-size: var(--vbr-widget-gamecenter-events-goalie-direction-size);
198
252
  text-align: center;
199
253
  color: var(--vbr-widget-primary-color-400);
200
254
  }
255
+ .mjsz-vbr-gamecenter-game-event .is-evented-person {
256
+ font-size: var(--vbr-widget-gamecenter-events-evented-person-size);
257
+ font-weight: var(--vbr-widget-gamecenter-events-evented-person-weight);
258
+ }
201
259
  .mjsz-vbr-gamecenter-game-event .is-assists-list {
202
260
  font-size: var(--vbr-widget-gamecenter-events-assitst-list-size);
203
261
  color: var(--vbr-widget-primary-color-400);
@@ -0,0 +1,22 @@
1
+ .mjsz-vbr-main-image-wrapper {
2
+ --overlay-size: 160px;
3
+
4
+ display: grid;
5
+ grid-template-columns: 1fr var(--overlay-size) 1fr;
6
+ grid-template-rows: 1fr 1fr 1fr calc(var(--overlay-size) / 2) calc(var(--overlay-size) / 2);
7
+ }
8
+
9
+ .mjsz-vbr-main-image-wrapper .is-main-image {
10
+ grid-column: 1/4;
11
+ grid-row: 1/5;
12
+
13
+ background-color: var(--vbr-widget-primary-color-50);
14
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
15
+ }
16
+
17
+ .mjsz-vbr-main-image-wrapper .is-ovarlay-image {
18
+ grid-row: 4/-1;
19
+ grid-column: 2;
20
+ justify-self: center;
21
+ z-index: 1;
22
+ }
@@ -1,4 +1,7 @@
1
1
  .mjsz-vbr-table-responsive {
2
+ container-name: table-wrapper;
3
+ container-type: inline-size;
4
+
2
5
  width: 100%;
3
6
  overflow-x: auto;
4
7
  }
@@ -137,6 +137,21 @@
137
137
  width: auto;
138
138
  }
139
139
 
140
+ .mjsz-vbr-table td.is-horizontal-content {
141
+ display: inline-flex;
142
+ align-items: center;
143
+ }
144
+
145
+ .mjsz-vbr-table td.is-text-positive,
146
+ .mjsz-vbr-table td .is-text-positive {
147
+ color: var(--vbr-widget-live-game-color);
148
+ }
149
+
150
+ .mjsz-vbr-table td.is-text-negative,
151
+ .mjsz-vbr-table td .is-text-negative {
152
+ color: var(--vbr-widget-danger-color-a400);
153
+ }
154
+
140
155
  .mjsz-vbr-table td svg {
141
156
  width: 16px;
142
157
  height: 16px;
@@ -184,6 +199,23 @@
184
199
  color: var(--vbr-widget-hover-color);
185
200
  }
186
201
 
202
+ .mjsz-vbr-table td .is-team-name-long {
203
+ display: block;
204
+ }
205
+
206
+ .mjsz-vbr-table td .is-team-name-short {
207
+ display: none;
208
+ }
209
+
210
+ @container table-wrapper (max-width: 768px) {
211
+ .mjsz-vbr-table td .is-team-name-long {
212
+ display: none;
213
+ }
214
+ .mjsz-vbr-table td .is-team-name-short {
215
+ display: block;
216
+ }
217
+ }
218
+
187
219
  .mjsz-vbr-table th,
188
220
  .mjsz-vbr-table td {
189
221
  padding: 8px;
@@ -207,6 +239,10 @@
207
239
  color: var(--vbr-widget-table-neutral-color);
208
240
  }
209
241
 
242
+ .mjsz-vbr-table tr.is-highlighted {
243
+ color: var(--vbr-widget-danger-color-a400);
244
+ }
245
+
210
246
  .mjsz-vbr-table tr:nth-child(even) {
211
247
  background-color: var(--vbr-widget-table-stripped-bg-color);
212
248
  }
@@ -0,0 +1,75 @@
1
+ .mjsz-vbr-wrapped-grid {
2
+ --min-width: 300px;
3
+ --max-width: 1fr;
4
+
5
+ display: grid;
6
+ grid-template-columns: repeat(auto-fill, minmax(var(--min-width), var(--max-width)));
7
+ gap: 30px;
8
+ padding-block: 20px;
9
+ text-align: center;
10
+ }
11
+
12
+ .mjsz-vbr-wrapped-grid a {
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ row-gap: 20px;
17
+ }
18
+
19
+ .mjsz-vbr-wrapped-grid .is-team-logo {
20
+ display: block;
21
+ width: 100%;
22
+ aspect-ratio: 1;
23
+ }
24
+
25
+ .mjsz-vbr-team-image-wrapper {
26
+ position: relative;
27
+ margin-bottom: 100px;
28
+ }
29
+
30
+ .mjsz-vbr-team-image-wrapper .is-team-picture {
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ height: 120px;
35
+ width: 100%;
36
+ background-color: var(--vbr-widget-primary-color-50);
37
+ overflow: hidden;
38
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
39
+ }
40
+
41
+ .mjsz-vbr-team-image-wrapper .is-team-picture img {
42
+ object-fit: cover;
43
+ }
44
+
45
+ @media all and (min-width: 576px) {
46
+
47
+ .mjsz-vbr-team-image-wrapper .is-team-picture {
48
+ height: 320px;
49
+ }
50
+ }
51
+
52
+ @media all and (min-width: 768px) {
53
+
54
+ .mjsz-vbr-team-image-wrapper .is-team-picture {
55
+ height: 420px;
56
+ }
57
+ }
58
+
59
+ .mjsz-vbr-team-image-wrapper .is-team-logo {
60
+ position: absolute;
61
+ bottom: 0;
62
+ left: 50%;
63
+ display: block;
64
+ width: 80px;
65
+ height: 80px;
66
+ transform: translate(-50%, 50%);
67
+ }
68
+
69
+ @media all and (min-width: 576px) {
70
+
71
+ .mjsz-vbr-team-image-wrapper .is-team-logo {
72
+ width: 160px;
73
+ height: 160px
74
+ }
75
+ }
@@ -11,24 +11,24 @@
11
11
  font-style: italic;
12
12
  }
13
13
  .is-text-xs {
14
- font-size: 0.75rem; /* 12px */
15
- line-height: 1rem; /* 16px */
14
+ font-size: var(--vbr-widget-typography-text-xs-size);
15
+ line-height: var(--vbr-widget-typography-text-xs-lineheight);
16
16
  }
17
17
  .is-text-sm {
18
- font-size: 0.875rem; /* 14px */
19
- line-height: 1.25rem; /* 20px */
18
+ font-size: var(--vbr-widget-typography-text-sm-size);
19
+ line-height: var(--vbr-widget-typography-text-xs-lineheight);
20
20
  }
21
21
  .is-text-base {
22
- font-size: 1rem; /* 16px */
23
- line-height: 1.5rem; /* 24px */
22
+ font-size: var(--vbr-widget-typography-text-base-size);
23
+ line-height: var(--vbr-widget-typography-text-base-lineheight);
24
24
  }
25
25
  .is-text-lg {
26
- font-size: 1.125rem; /* 18px */
27
- line-height: 1.75rem; /* 28px */
26
+ font-size: var(--vbr-widget-typography-text-lg-size);
27
+ line-height: var(--vbr-widget-typography-text-lg-lineheight);
28
28
  }
29
29
  .is-text-xl {
30
- font-size: 1.25rem; /* 20px */
31
- line-height: 1.75rem; /* 28px */
30
+ font-size: var(--vbr-widget-typography-text-xl-size);
31
+ line-height: var(--vbr-widget-typography-text-xl-lineheight);
32
32
  }
33
33
  .is-uppercase {
34
34
  text-transform: uppercase;
@@ -39,9 +39,39 @@
39
39
  .is-opacity-30 {
40
40
  opacity: 0.3;
41
41
  }
42
+ .is-opacity-40 {
43
+ opacity: 0.4;
44
+ }
42
45
  .is-opacity-50 {
43
46
  opacity: 0.5;
44
47
  }
48
+ .is-mt-5 {
49
+ margin-top: 1rem;
50
+ }
45
51
  .is-mb-5 {
46
52
  margin-bottom: 1rem;
47
53
  }
54
+ .is-whitespace-nowrap {
55
+ white-space: nowrap;
56
+ }
57
+ .is-heading-1 {
58
+ font-size: var(--vbr-widget-typography-text-xl-size);
59
+ line-height: var(--vbr-widget-typography-text-xl-lineheight);
60
+ margin-block-start: var(--vbr-widget-typography-text-xl-size);
61
+ margin-block-end: calc(var(--vbr-widget-typography-text-xl-size) / 2);
62
+ font-weight: var(--vbr-widget-typography-heading-weight);
63
+ }
64
+ .is-heading-2 {
65
+ font-size: var(--vbr-widget-typography-text-lg-size);
66
+ line-height: var(--vbr-widget-typography-text-lg-lineheight);
67
+ font-weight: var(--vbr-widget-typography-heading-weight);
68
+ margin-block-start: var(--vbr-widget-typography-text-lg-size);
69
+ margin-block-end: calc(var(--vbr-widget-typography-text-lg-size) / 2);
70
+ }
71
+ .is-heading-3 {
72
+ font-size: var(--vbr-widget-typography-text-base-size);
73
+ line-height: var(--vbr-widget-typography-text-base-lineheight);
74
+ font-weight: var(--vbr-widget-typography-heading-weight);
75
+ margin-block-start: var(--vbr-widget-typography-text-base-size);
76
+ margin-block-end: calc(var(--vbr-widget-typography-text-base-size) / 2);
77
+ }
package/package.json CHANGED
@@ -1,15 +1,17 @@
1
1
  {
2
2
  "name": "@mjsz-vbr-elements/shared",
3
3
  "private": false,
4
- "version": "2.1.0-beta.5",
4
+ "version": "2.1.0-beta.50",
5
+ "author": "Ákos Stegner <akos.stegner@gmail.com>",
6
+ "homepage": "https://api.icehockey.hu/widgets/docs/v2/",
5
7
  "type": "module",
6
8
  "files": [
7
9
  "dist"
8
10
  ],
9
- "module": "./dist/index.js",
11
+ "module": "./dist/icons/index.js",
10
12
  "exports": {
11
13
  ".": {
12
- "import": "./dist/icons/mjsz-vbr-elements-shared.js"
14
+ "import": "./dist/icons/index.js"
13
15
  },
14
16
  "./icons/*": {
15
17
  "import": "./dist/icons/*.js"
@@ -22,13 +24,13 @@
22
24
  "devDependencies": {
23
25
  "@vitejs/plugin-vue": "^4.2.3",
24
26
  "glob": "^10.2.6",
25
- "nodemon": "^2.0.22",
26
- "postcss": "^8.4.24",
27
+ "nodemon": "^3.0.1",
28
+ "postcss": "^8.4.31",
27
29
  "postcss-import": "^15.1.0",
28
30
  "postcss-mixins": "^9.0.4",
29
31
  "postcss-nested": "^6.0.1",
30
32
  "postcss-prefixer": "^3.0.0",
31
- "vite": "^4.3.9",
33
+ "vite": "^4.5.0",
32
34
  "vite-svg-loader": "^4.0.0"
33
35
  },
34
36
  "scripts": {