@times-components/ts-components 1.145.1-76ee0965069e2a17bc1f8dcf02d24e8fefd6869a.0 → 1.145.1-7e7a12feaf05c514789e802bf49cadca92e6a2b9.10

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 (143) hide show
  1. package/dist/components/carousel-component/CarouselComponent.stories.js +146 -0
  2. package/dist/components/carousel-component/CarouselItem.d.ts +3 -0
  3. package/dist/components/carousel-component/CarouselItem.js +11 -0
  4. package/dist/components/carousel-component/DefaultNavigationArrow.d.ts +8 -0
  5. package/dist/components/carousel-component/DefaultNavigationArrow.js +6 -0
  6. package/dist/components/carousel-component/DefaultPageDot.d.ts +8 -0
  7. package/dist/components/carousel-component/DefaultPageDot.js +4 -0
  8. package/dist/components/{opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.d.ts → carousel-component/__tests__/CarouselComponent.test.d.ts} +0 -1
  9. package/dist/components/carousel-component/__tests__/CarouselComponent.test.js +163 -0
  10. package/dist/components/carousel-component/__tests__/CarouselItem.test.d.ts +1 -0
  11. package/dist/components/carousel-component/__tests__/CarouselItem.test.js +80 -0
  12. package/dist/components/carousel-component/__tests__/DefaultNavigationArrow.test.d.ts +1 -0
  13. package/dist/components/carousel-component/__tests__/DefaultNavigationArrow.test.js +62 -0
  14. package/dist/components/carousel-component/__tests__/DefaultPageDot.test.d.ts +1 -0
  15. package/dist/components/carousel-component/__tests__/DefaultPageDot.test.js +68 -0
  16. package/dist/components/carousel-component/hooks/__tests__/useCarousel.test.d.ts +1 -0
  17. package/dist/components/carousel-component/hooks/__tests__/useCarousel.test.js +459 -0
  18. package/dist/components/carousel-component/hooks/useCarousel.d.ts +2 -0
  19. package/dist/components/carousel-component/hooks/useCarousel.js +175 -0
  20. package/dist/components/carousel-component/index.d.ts +4 -0
  21. package/dist/components/carousel-component/index.js +20 -0
  22. package/dist/components/carousel-component/styles.d.ts +27 -0
  23. package/dist/components/carousel-component/styles.js +169 -0
  24. package/dist/components/carousel-component/types.d.ts +53 -0
  25. package/dist/components/carousel-component/types.js +2 -0
  26. package/dist/components/opta/football/opta-match-stats/shared/styles.js +1 -8
  27. package/dist/components/trip-cards/SkeletonCard.d.ts +6 -0
  28. package/dist/components/trip-cards/SkeletonCard.js +21 -0
  29. package/dist/components/trip-cards/TripCard.d.ts +3 -0
  30. package/dist/components/trip-cards/TripCard.js +49 -0
  31. package/dist/components/trip-cards/TripCards.stories.d.ts +1 -0
  32. package/dist/components/trip-cards/TripCards.stories.js +189 -0
  33. package/dist/components/trip-cards/TripCardsLayout.d.ts +3 -0
  34. package/dist/components/trip-cards/TripCardsLayout.js +37 -0
  35. package/dist/components/trip-cards/__tests__/SkeletonCard.test.d.ts +1 -0
  36. package/dist/components/trip-cards/__tests__/SkeletonCard.test.js +139 -0
  37. package/dist/components/trip-cards/__tests__/TripCard.test.d.ts +1 -0
  38. package/dist/components/trip-cards/__tests__/TripCard.test.js +95 -0
  39. package/dist/components/trip-cards/__tests__/TripCardsLayout.test.d.ts +1 -0
  40. package/dist/components/trip-cards/__tests__/TripCardsLayout.test.js +277 -0
  41. package/dist/components/trip-cards/__tests__/assets.test.d.ts +1 -0
  42. package/dist/components/trip-cards/__tests__/assets.test.js +165 -0
  43. package/dist/components/trip-cards/__tests__/helpers.test.d.ts +1 -0
  44. package/dist/components/trip-cards/__tests__/helpers.test.js +216 -0
  45. package/dist/components/trip-cards/__tests__/index.test.d.ts +1 -0
  46. package/dist/components/trip-cards/__tests__/index.test.js +433 -0
  47. package/dist/components/trip-cards/__tests__/mockData.test.d.ts +1 -0
  48. package/dist/components/trip-cards/__tests__/mockData.test.js +57 -0
  49. package/dist/components/trip-cards/__tests__/skeletonStyles.test.d.ts +1 -0
  50. package/dist/components/trip-cards/__tests__/skeletonStyles.test.js +194 -0
  51. package/dist/components/trip-cards/assets/BoatIcon.d.ts +1 -0
  52. package/dist/components/trip-cards/assets/BoatIcon.js +4 -0
  53. package/dist/components/trip-cards/assets/CalendarIcon.d.ts +1 -0
  54. package/dist/components/trip-cards/assets/CalendarIcon.js +4 -0
  55. package/dist/components/trip-cards/assets/ChevronRightIcon.d.ts +1 -0
  56. package/dist/components/trip-cards/assets/ChevronRightIcon.js +4 -0
  57. package/dist/components/trip-cards/assets/LocationIcon.d.ts +1 -0
  58. package/dist/components/trip-cards/assets/LocationIcon.js +4 -0
  59. package/dist/components/trip-cards/assets/MoonIcon.d.ts +1 -0
  60. package/dist/components/trip-cards/assets/MoonIcon.js +4 -0
  61. package/dist/components/trip-cards/assets/index.d.ts +6 -0
  62. package/dist/components/trip-cards/assets/index.js +7 -0
  63. package/dist/components/trip-cards/helpers.d.ts +4 -0
  64. package/dist/components/trip-cards/helpers.js +115 -0
  65. package/dist/components/trip-cards/index.d.ts +4 -0
  66. package/dist/components/trip-cards/index.js +70 -0
  67. package/dist/components/trip-cards/mockData.d.ts +3 -0
  68. package/dist/components/trip-cards/mockData.js +317 -0
  69. package/dist/components/trip-cards/skeletonStyles.d.ts +9 -0
  70. package/dist/components/trip-cards/skeletonStyles.js +37 -0
  71. package/dist/components/trip-cards/styles.d.ts +38 -0
  72. package/dist/components/trip-cards/styles.js +401 -0
  73. package/dist/components/trip-cards/types.d.ts +119 -0
  74. package/dist/components/trip-cards/types.js +2 -0
  75. package/dist/index.d.ts +1 -0
  76. package/dist/index.js +2 -4
  77. package/package.json +3 -3
  78. package/rnw.js +1 -1
  79. package/src/components/carousel-component/CarouselComponent.stories.tsx +220 -0
  80. package/src/components/carousel-component/CarouselItem.tsx +25 -0
  81. package/src/components/carousel-component/DefaultNavigationArrow.tsx +37 -0
  82. package/src/components/carousel-component/DefaultPageDot.tsx +20 -0
  83. package/src/components/carousel-component/__tests__/CarouselComponent.test.tsx +259 -0
  84. package/src/components/carousel-component/__tests__/CarouselItem.test.tsx +140 -0
  85. package/src/components/carousel-component/__tests__/DefaultNavigationArrow.test.tsx +153 -0
  86. package/src/components/carousel-component/__tests__/DefaultPageDot.test.tsx +105 -0
  87. package/src/components/carousel-component/hooks/__tests__/useCarousel.test.ts +625 -0
  88. package/src/components/carousel-component/hooks/useCarousel.ts +231 -0
  89. package/src/components/carousel-component/index.tsx +92 -0
  90. package/src/components/carousel-component/styles.ts +185 -0
  91. package/src/components/carousel-component/types.ts +62 -0
  92. package/src/components/opta/football/opta-match-stats/commentary/__tests__/__snapshots__/OptaMatchStatsCommentary.test.tsx.snap +1 -1
  93. package/src/components/opta/football/opta-match-stats/shared/styles.ts +0 -8
  94. package/src/components/opta/football/opta-match-stats/stats-graphs/__tests__/__snapshots__/OptaMatchStatsGraphs.test.tsx.snap +1 -1
  95. package/src/components/trip-cards/SkeletonCard.tsx +62 -0
  96. package/src/components/trip-cards/TripCard.tsx +143 -0
  97. package/src/components/trip-cards/TripCards.stories.tsx +254 -0
  98. package/src/components/trip-cards/TripCardsLayout.tsx +108 -0
  99. package/src/components/trip-cards/__tests__/SkeletonCard.test.tsx +169 -0
  100. package/src/components/trip-cards/__tests__/TripCard.test.tsx +120 -0
  101. package/src/components/trip-cards/__tests__/TripCardsLayout.test.tsx +532 -0
  102. package/src/components/trip-cards/__tests__/assets.test.tsx +206 -0
  103. package/src/components/trip-cards/__tests__/helpers.test.ts +266 -0
  104. package/src/components/trip-cards/__tests__/index.test.tsx +495 -0
  105. package/src/components/trip-cards/__tests__/mockData.test.ts +67 -0
  106. package/src/components/trip-cards/__tests__/skeletonStyles.test.tsx +256 -0
  107. package/src/components/trip-cards/assets/BoatIcon.tsx +17 -0
  108. package/src/components/trip-cards/assets/CalendarIcon.tsx +17 -0
  109. package/src/components/trip-cards/assets/ChevronRightIcon.tsx +20 -0
  110. package/src/components/trip-cards/assets/LocationIcon.tsx +17 -0
  111. package/src/components/trip-cards/assets/MoonIcon.tsx +17 -0
  112. package/src/components/trip-cards/assets/index.ts +7 -0
  113. package/src/components/trip-cards/helpers.ts +150 -0
  114. package/src/components/trip-cards/index.tsx +119 -0
  115. package/src/components/trip-cards/mockData.ts +345 -0
  116. package/src/components/trip-cards/skeletonStyles.ts +46 -0
  117. package/src/components/trip-cards/styles.ts +446 -0
  118. package/src/components/trip-cards/types.ts +128 -0
  119. package/src/index.ts +2 -3
  120. package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.d.ts +0 -10
  121. package/dist/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.js +0 -69
  122. package/dist/components/opta/football/opta-match-stats/matchday-live/MobileWidget.d.ts +0 -12
  123. package/dist/components/opta/football/opta-match-stats/matchday-live/MobileWidget.js +0 -90
  124. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.d.ts +0 -12
  125. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.js +0 -10
  126. package/dist/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.js +0 -24
  127. package/dist/components/opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.js +0 -48
  128. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.d.ts +0 -1
  129. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.js +0 -19
  130. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.d.ts +0 -12
  131. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.js +0 -67
  132. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.d.ts +0 -6
  133. package/dist/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.js +0 -714
  134. package/src/components/opta/football/opta-match-stats/matchday-live/DesktopWidget.tsx +0 -108
  135. package/src/components/opta/football/opta-match-stats/matchday-live/MobileWidget.tsx +0 -158
  136. package/src/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.tsx +0 -38
  137. package/src/components/opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.tsx +0 -23
  138. package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/OptaMatchStatsMatchdayLive.test.tsx +0 -61
  139. package/src/components/opta/football/opta-match-stats/matchday-live/__tests__/__snapshots__/OptaMatchStatsMatchdayLive.test.tsx.snap +0 -61
  140. package/src/components/opta/football/opta-match-stats/matchday-live/styles/MatchdayLiveController.tsx +0 -19
  141. package/src/components/opta/football/opta-match-stats/matchday-live/styles/NavigationWrapper.tsx +0 -81
  142. package/src/components/opta/football/opta-match-stats/matchday-live/styles/WidgetContainer.tsx +0 -745
  143. /package/dist/components/{opta/football/opta-match-stats/matchday-live/OptaMatchStatsMatchdayLive.stories.d.ts → carousel-component/CarouselComponent.stories.d.ts} +0 -0
@@ -1,714 +0,0 @@
1
- import styled from 'styled-components';
2
- import { colours, fonts } from '@times-components/ts-styleguide';
3
- import { backgroundColor, darkBackgroundColor, darkTextColor, borderColor, textColor, maxMDBreakpoint, darkBorderColor } from '../../shared/styles';
4
- export const WidgetContainer = styled.div `
5
- ${props => props.isApp &&
6
- `
7
- @media(prefers-color-scheme: dark) {
8
- background-color: ${darkBackgroundColor} !important;
9
- color: ${darkTextColor} !important;
10
- }
11
- `} .Opta-Cf.Opta-js-main {
12
- ${props => props.isApp &&
13
- `
14
- @media(prefers-color-scheme: dark) {
15
- background-color: ${darkBackgroundColor};
16
- }
17
- `};
18
- }
19
-
20
- .Opta > .Opta_W {
21
- margin-top: 0px !important;
22
- margin-bottom: 0px !important;
23
- }
24
-
25
- .Opta-Cf {
26
- display: flex;
27
- flex-direction: column;
28
-
29
- ${props => props.isApp &&
30
- `
31
- @media(prefers-color-scheme: dark) {
32
- background-color: ${darkBackgroundColor} !important;
33
- color: ${darkTextColor} !important;
34
- }
35
- `};
36
- }
37
-
38
- .Opta-Score,
39
- .Opta-Divider {
40
- display: none !important;
41
- }
42
-
43
- // Move match data to top
44
- .Opta-Matchdata {
45
- order: -1;
46
- margin-top: 8px !important;
47
- margin-bottom: 0px !important;
48
- border-top: 1px solid ${borderColor};
49
- border-bottom: 1px solid ${borderColor};
50
- background-color: ${backgroundColor} !important;
51
-
52
- dd,
53
- dt {
54
- font-family: Roboto, sans-serif;
55
- font-weight: 400;
56
- line-height: 150%;
57
- color: #333;
58
- }
59
-
60
- ${props => props.isApp &&
61
- `
62
- @media(prefers-color-scheme: dark) {
63
- background-color: ${darkBackgroundColor} !important;
64
- border-top: 1px solid ${darkBorderColor};
65
- border-bottom: 1px solid ${darkBorderColor};
66
- dd, dt {
67
- color: ${darkTextColor};
68
- }
69
- }
70
- `};
71
- }
72
-
73
- .Opta-MatchHeader {
74
- margin-bottom: 0;
75
- tr {
76
- display: flex;
77
- gap: 20px;
78
- align-items: center;
79
- padding: 16px;
80
- }
81
-
82
- .Opta-Team {
83
- font-family: Roboto, sans-serif;
84
- font-weight: 700;
85
- font-size: 20px;
86
- line-height: 150%;
87
- color: ${textColor};
88
- display: flex;
89
- align-items: center;
90
- ${props => props.isApp &&
91
- `
92
- @media(prefers-color-scheme: dark) {
93
- color: ${darkTextColor};
94
- }
95
- `};
96
-
97
- &.Opta-Home {
98
- order: 2;
99
- }
100
-
101
- &.Opta-Away {
102
- order: 5;
103
- }
104
- }
105
-
106
- .Opta-Crest {
107
- display: contents;
108
-
109
- .Opta-Image-Team img {
110
- height: 48px;
111
- width: 48px;
112
- }
113
-
114
- .Opta-TeamFormation {
115
- font-family: Roboto, sans-serif;
116
- font-weight: 400;
117
- font-size: 14px;
118
- line-height: 150%;
119
- letter-spacing: 0.08px;
120
- color: ${textColor};
121
- ${props => props.isApp &&
122
- `
123
- @media(prefers-color-scheme: dark) {
124
- color: ${darkTextColor};
125
- }
126
- `};
127
- }
128
-
129
- &:first-of-type {
130
- .Opta-Image-Team {
131
- order: 1;
132
- }
133
- .Opta-TeamFormation {
134
- order: 3;
135
- margin: 0;
136
- margin-right: auto;
137
- }
138
- }
139
-
140
- &:last-of-type {
141
- .Opta-Image-Team {
142
- order: 6;
143
- }
144
- .Opta-TeamFormation {
145
- order: 4;
146
- margin: 0;
147
- margin-left: auto;
148
- }
149
- }
150
- }
151
- }
152
-
153
- .Opta-FootballPitch {
154
- margin-inline: 16px;
155
- margin-bottom: 16px;
156
- border-radius: 8px;
157
- background: none !important;
158
- background-image: repeating-linear-gradient(
159
- 90deg,
160
- #d4e3db 0,
161
- #d4e3db 28px,
162
- #e5f0ea 28px,
163
- #e5f0ea 56px
164
- ) !important;
165
- background-size: 56px 100% !important;
166
-
167
- circle {
168
- stroke: none !important;
169
- &.Opta-Home {
170
- fill: ${props => props.homeTeamColor.light} !important;
171
- }
172
- &.Opta-Away {
173
- fill: ${props => props.awayTeamColor.light} !important;
174
- }
175
- }
176
-
177
- .Opta-JerseyNumber {
178
- font-family: ${fonts.headline};
179
- font-weight: 800;
180
- font-size: 16px;
181
- line-height: 112.99999%;
182
- transform: translateY(-1px);
183
- }
184
-
185
- .Opta-PlayerName {
186
- fill: ${textColor} !important;
187
- filter: none;
188
- font-family: Roboto, sans-serif;
189
- font-weight: 600;
190
- font-size: 13px;
191
- line-height: 100%;
192
- }
193
- }
194
-
195
- .Opta-Subs-Wrap {
196
- border-top: 1px solid ${borderColor};
197
- ${props => props.isApp &&
198
- `
199
- @media(prefers-color-scheme: dark) {
200
- border-top: 1px solid ${darkBorderColor};
201
- }
202
- `};
203
- thead {
204
- th {
205
- background-color: ${backgroundColor} !important;
206
- color: ${textColor};
207
- font-family: Roboto, sans-serif;
208
- font-weight: 500;
209
- font-size: 18px;
210
- line-height: 112.999%;
211
- padding-block: 32px;
212
- ${props => props.isApp &&
213
- `
214
- @media(prefers-color-scheme: dark) {
215
- background-color: ${darkBackgroundColor} !important;
216
- color: ${darkTextColor};
217
- }
218
- `};
219
- }
220
- }
221
-
222
- .Opta-FootballPitch-Subplayers {
223
- margin: 0;
224
- tr {
225
- display: flex;
226
- justify-content: center;
227
- }
228
- td {
229
- display: flex;
230
- flex-direction: column;
231
- height: auto;
232
-
233
- .Opta-Sub {
234
- display: grid;
235
- grid-template-columns: auto 16px auto auto;
236
- grid-template-rows: auto auto;
237
-
238
- &.Opta-Home {
239
- span.Opta-Circle {
240
- border: 2px solid ${props => props.homeTeamColor.light};
241
- color: ${props => props.homeTeamColor.light};
242
- }
243
- }
244
-
245
- &.Opta-Away {
246
- span.Opta-Circle {
247
- border: 2px solid ${props => props.awayTeamColor.light};
248
- color: ${props => props.awayTeamColor.light} !important;
249
- }
250
- }
251
-
252
- ${props => props.isApp &&
253
- `
254
- @media(prefers-color-scheme: dark) {
255
- &.Opta-Home {
256
- span.Opta-Circle {
257
- border: 2px solid ${props.homeTeamColor.dark};
258
- color: ${props.homeTeamColor.dark};
259
- }
260
- }
261
-
262
- &.Opta-Away {
263
- span.Opta-Circle {
264
- border: 2px solid ${props.awayTeamColor.dark};
265
- color: ${props.awayTeamColor.dark} !important;
266
- }
267
- }
268
- }
269
- `};
270
-
271
- &.Opta-Unused {
272
- opacity: 1;
273
- }
274
-
275
- span.Opta-Circle {
276
- grid-column: 1 / 1;
277
- grid-row: 1 / 3;
278
- background-color: ${backgroundColor};
279
- font-family: ${fonts.headline};
280
- font-weight: 800;
281
- font-size: 16px;
282
- line-height: 112.99999%;
283
- margin-bottom: 0;
284
-
285
- ${props => props.isApp &&
286
- `
287
- @media(prefers-color-scheme: dark) {
288
- background-color: ${darkBackgroundColor};
289
- }
290
- `};
291
-
292
- & + span.Opta-PlayerName {
293
- grid-column: 3 / 4;
294
- grid-row: 1 / 2;
295
- padding-right: 8px;
296
- width: max-content;
297
- font-size: 14px !important;
298
-
299
- & + span.Opta-PlayerName {
300
- grid-column: 4 / 5;
301
- grid-row: 1 / 2;
302
- width: max-content;
303
- font-size: 14px !important;
304
- }
305
- }
306
- }
307
-
308
- span.Opta-PlayerName {
309
- font-family: Roboto, sans-serif;
310
- font-weight: 500;
311
- font-size: 14px !important;
312
- line-height: 100%;
313
- }
314
-
315
- span.Opta-MatcheventsIcons {
316
- grid-column: 3 / 5;
317
- grid-row: 2 / 3;
318
- display: flex;
319
- gap: 4px;
320
- }
321
- }
322
- }
323
- }
324
- }
325
-
326
- .Opta-Overlay {
327
- border-radius: 8px;
328
- overflow: hidden;
329
- border: none !important;
330
- .Opta-Cf {
331
- ul {
332
- background-color: #e5f0ea;
333
- margin: 0 !important;
334
- padding: 16px;
335
- display: flex !important;
336
- flex-direction: column;
337
- align-items: center;
338
- text-align: center;
339
-
340
- .Opta-Circle {
341
- font-family: ${fonts.headline} !important;
342
- font-weight: 800 !important;
343
- font-size: 20px !important;
344
- line-height: 112.99999% !important;
345
- color: ${colours.functional.white};
346
- height: 48px !important;
347
- width: 48px !important;
348
- display: flex !important;
349
- align-items: center;
350
- justify-content: center;
351
- margin-bottom: 16px !important;
352
- &.Opta-Home {
353
- background-color: ${props => props.homeTeamColor.light} !important;
354
- }
355
-
356
- &.Opta-Away {
357
- background-color: ${props => props.awayTeamColor.light} !important;
358
- }
359
-
360
- & + li {
361
- color: ${textColor};
362
- font-family: Roboto, sans-serif;
363
- font-weight: 600;
364
- font-size: 20px;
365
- line-height: 100%;
366
- margin-bottom: 16px;
367
-
368
- & + li {
369
- color: ${textColor} !important;
370
- font-family: Roboto, sans-serif;
371
- font-weight: 500;
372
- font-size: 16px;
373
- margin-bottom: 8px;
374
- }
375
- }
376
- }
377
-
378
- .Opta-MatchEvent {
379
- display: flex;
380
- align-items: center;
381
-
382
- .Opta-Icon {
383
- &.Opta-IconGoal {
384
- margin-top: 2px;
385
- }
386
- &.Opta-IconOff,
387
- &.Opta-IconOn {
388
- margin-top: 6px;
389
- }
390
- }
391
-
392
- span {
393
- color: ${textColor} !important;
394
- font-family: Roboto, sans-serif !important;
395
- font-weight: 400 !important;
396
- font-size: 16px !important;
397
- }
398
- }
399
- }
400
- }
401
-
402
- .Opta-Flex {
403
- display: grid;
404
- grid-template-rows: 1fr;
405
- padding-inline: 32px;
406
- padding-block: 32px;
407
- ${props => props.isApp &&
408
- `
409
- @media(prefers-color-scheme: dark) {
410
- background-color: ${darkBackgroundColor} !important;
411
- color: ${darkTextColor} !important;
412
- }
413
- `};
414
- }
415
-
416
- .Opta-Flex-Group {
417
- display: grid;
418
- grid-template-columns: repeat(3, 1fr);
419
- gap: 16px;
420
- }
421
-
422
- .Opta-Flex-Item {
423
- display: flex !important;
424
- width: 100% !important;
425
- height: 100% !important;
426
- padding: 0 !important;
427
- padding-bottom: 16px !important;
428
- }
429
-
430
- .Opta-Stat {
431
- flex-grow: 1 !important;
432
- background-color: #e5f0ea !important;
433
- border-radius: 8px;
434
- padding-block: 16px;
435
- padding-inline: 8px;
436
- margin: 0 !important;
437
- .Opta-Value {
438
- color: ${textColor} !important;
439
- font-family: ${fonts.headline} !important;
440
- font-weight: 800;
441
- font-size: 36px;
442
- line-height: 112.999%;
443
- padding-bottom: 4px;
444
- }
445
- .Opta-Label {
446
- color: ${textColor} !important;
447
- font-family: Roboto, sans-serif !important;
448
- font-weight: 500;
449
- font-size: 16px;
450
- line-height: 112.999%;
451
- }
452
- }
453
- }
454
-
455
- // Mobile styles
456
- @media (max-width: ${maxMDBreakpoint}px) {
457
- // General Styles
458
- .Opta-Cf {
459
- display: flex;
460
- flex-direction: column;
461
- ${props => props.isApp &&
462
- `
463
- @media(prefers-color-scheme: dark) {
464
- background-color: ${darkBackgroundColor} !important;
465
- color: ${darkTextColor} !important;
466
- }
467
- `};
468
-
469
- // Formations
470
- .Opta-MatchHeader {
471
- order: 1;
472
- border-top: 1px solid ${borderColor};
473
- border-bottom: 1px solid ${borderColor};
474
- ${props => props.isApp &&
475
- `
476
- @media(prefers-color-scheme: dark) {
477
- border-top: 1px solid ${darkBorderColor};
478
- border-bottom: 1px solid ${darkBorderColor};
479
- }
480
- `};
481
-
482
- tr {
483
- justify-content: center;
484
- }
485
-
486
- .Opta-Team {
487
- // Hide team name
488
- font-size: 0;
489
- padding: 0;
490
- }
491
-
492
- .Opta-TeamFormation {
493
- font-family: Roboto, sans-serif;
494
- font-weight: 700;
495
- font-size: 16px;
496
- line-height: 150%;
497
-
498
- &::before {
499
- content: 'Formation: ';
500
- font-size: 16px;
501
- font-family: Roboto, sans-serif;
502
- font-weight: 400;
503
- line-height: 150%;
504
- }
505
-
506
- ${props => props.isApp &&
507
- `
508
- @media(prefers-color-scheme: dark) {
509
- color: ${darkTextColor};
510
- &::before {
511
- color: ${darkTextColor};
512
- }
513
- }
514
- `};
515
- }
516
- }
517
-
518
- // Pitch
519
- .Opta-FootballPitch {
520
- order: 2;
521
- margin: 0;
522
- border-radius: 0;
523
- background: none !important;
524
- background-image: repeating-linear-gradient(
525
- 0deg,
526
- #d4e3db 0,
527
- #d4e3db 56px,
528
- #e5f0ea 56px,
529
- #e5f0ea 112px
530
- ) !important;
531
-
532
- // Resize player elements
533
- .Opta-PlayerNumber {
534
- circle {
535
- stroke: #ffffff !important;
536
- stroke-width: 3px !important;
537
- r: 26px !important;
538
- border: 2px solid ${colours.functional.white} !important;
539
- -webkit-tap-highlight-color: transparent;
540
- }
541
- .Opta-JerseyNumber {
542
- font-size: 32px;
543
- -webkit-tap-highlight-color: transparent;
544
- }
545
- }
546
- .Opta-PlayerName {
547
- font-size: 18px;
548
- transform: translateY(14px);
549
- & + .Opta-PlayerName {
550
- transform: translateY(20px);
551
- & + .Opta-Icon {
552
- transform: translateY(30px);
553
- }
554
- }
555
- }
556
- .Opta-Icon {
557
- transform: translateY(20px);
558
- }
559
- }
560
-
561
- // Referee
562
- .Opta-Matchdata {
563
- order: 3;
564
- margin: 0 !important;
565
- padding: 16px !important;
566
- border-bottom: none !important;
567
- dt {
568
- font-family: Roboto, sans-serif;
569
- font-weight: 400;
570
- font-size: 16px;
571
- line-height: 150%;
572
- }
573
- dd {
574
- font-family: Roboto, sans-serif;
575
- font-weight: 700;
576
- font-size: 16px;
577
- line-height: 150%;
578
- }
579
-
580
- ${props => props.isApp &&
581
- `
582
- @media(prefers-color-scheme: dark) {
583
- background-color: ${darkBackgroundColor} !important;
584
- dt, dd {
585
- color: ${darkTextColor};
586
- }
587
- }
588
- `};
589
- }
590
-
591
- // Substitutions
592
- .Opta-Subs-Wrap {
593
- order: 4;
594
- thead {
595
- th {
596
- font-family: ${fonts.headline};
597
- font-size: 24px;
598
- font-weight: 800;
599
- padding-block: 40px;
600
- display: flex;
601
- justify-content: center;
602
- align-items: center;
603
- ${props => props.isApp &&
604
- `
605
- @media(prefers-color-scheme: dark) {
606
- color: ${darkTextColor};
607
- background-color: ${darkBackgroundColor} !important;
608
- }
609
- `};
610
- }
611
- }
612
- tbody {
613
- tr {
614
- justify-content: flex-start;
615
-
616
- td {
617
- padding: 0;
618
- }
619
-
620
- .Opta-Sub {
621
- display: flex;
622
- flex-direction: row;
623
- align-items: center;
624
- margin-top: 0;
625
- margin-left: 16px;
626
- margin-bottom: 16px;
627
-
628
- .Opta-Circle {
629
- aspect-ratio: 1 / 1;
630
- height: 30px !important;
631
- width: 30px !important;
632
- font-size: 16px !important;
633
- display: flex;
634
- justify-content: center;
635
- align-items: center;
636
- margin-right: 8px;
637
- border-width: 1px !important;
638
- padding-top: 3px;
639
- -webkit-tap-highlight-color: transparent;
640
- }
641
-
642
- .Opta-PlayerName {
643
- padding-right: 4px !important;
644
- white-space: nowrap;
645
- font-size: 16px !important;
646
- }
647
-
648
- .Opta-MatcheventsIcons {
649
- margin-top: 0;
650
- }
651
- }
652
- }
653
- }
654
- }
655
- }
656
-
657
- .Opta-Overlay {
658
- .Opta-Circle {
659
- padding-top: 3px;
660
- }
661
- }
662
-
663
- // Need to override specific styles due to higher specificity in mobile view
664
- .Opta-Subs-Wrap
665
- .Opta-FootballPitch-Subplayers
666
- td
667
- .Opta-Sub
668
- span.Opta-Circle {
669
- color: ${textColor} !important;
670
- border-color: ${textColor} !important;
671
- ${props => props.isApp &&
672
- `
673
- @media(prefers-color-scheme: dark) {
674
- color: ${darkTextColor} !important;
675
- border-color: ${darkTextColor} !important;
676
- }
677
- `};
678
- }
679
- .Opta-Subs-Wrap
680
- .Opta-FootballPitch-Subplayers
681
- td
682
- .Opta-Sub.Opta-Away
683
- span.Opta-Circle {
684
- color: ${textColor} !important;
685
- border-color: ${textColor} !important;
686
- ${props => props.isApp &&
687
- `
688
- @media(prefers-color-scheme: dark) {
689
- color: ${darkTextColor} !important;
690
- border-color: ${darkTextColor} !important;
691
- }
692
- `};
693
- }
694
-
695
- // Home team styles
696
- &.home-widget-container {
697
- .Opta-MatchHeader {
698
- .Opta-Away {
699
- display: none;
700
- }
701
- }
702
- }
703
-
704
- // Away team styles
705
- &.away-widget-container {
706
- .Opta-MatchHeader {
707
- .Opta-Home {
708
- display: none;
709
- }
710
- }
711
- }
712
- }
713
- `;
714
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiV2lkZ2V0Q29udGFpbmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvb3B0YS9mb290YmFsbC9vcHRhLW1hdGNoLXN0YXRzL21hdGNoZGF5LWxpdmUvc3R5bGVzL1dpZGdldENvbnRhaW5lci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxNQUFNLE1BQU0sbUJBQW1CLENBQUM7QUFDdkMsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUVqRSxPQUFPLEVBQ0wsZUFBZSxFQUNmLG1CQUFtQixFQUNuQixhQUFhLEVBQ2IsV0FBVyxFQUNYLFNBQVMsRUFDVCxlQUFlLEVBQ2YsZUFBZSxFQUNoQixNQUFNLHFCQUFxQixDQUFDO0FBRTdCLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsR0FBRyxDQUl2QztJQUNFLEtBQUssQ0FBQyxFQUFFLENBQ1IsS0FBSyxDQUFDLEtBQUs7SUFDWDs7MEJBRXNCLG1CQUFtQjtlQUM5QixhQUFhOztHQUV6QjtNQUNHLEtBQUssQ0FBQyxFQUFFLENBQ1IsS0FBSyxDQUFDLEtBQUs7SUFDWDs7MEJBRW9CLG1CQUFtQjs7R0FFMUM7Ozs7Ozs7Ozs7OztNQVlHLEtBQUssQ0FBQyxFQUFFLENBQ1IsS0FBSyxDQUFDLEtBQUs7SUFDWDs7NEJBRXNCLG1CQUFtQjtpQkFDOUIsYUFBYTs7R0FFM0I7Ozs7Ozs7Ozs7Ozs7NEJBYXlCLFdBQVc7K0JBQ1IsV0FBVzt3QkFDbEIsZUFBZTs7Ozs7Ozs7OztNQVVqQyxLQUFLLENBQUMsRUFBRSxDQUNSLEtBQUssQ0FBQyxLQUFLO0lBQ1g7OzRCQUVzQixtQkFBbUI7Z0NBQ2YsZUFBZTttQ0FDWixlQUFlOzttQkFFL0IsYUFBYTs7O0tBRzNCOzs7Ozs7Ozs7Ozs7Ozs7OztlQWlCVSxTQUFTOzs7UUFHaEIsS0FBSyxDQUFDLEVBQUUsQ0FDUixLQUFL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