@transfermarkt/global-styles 1.53.0 → 1.54.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.
package/package.json
CHANGED
|
@@ -163,15 +163,53 @@
|
|
|
163
163
|
color: tm-color('light-blue-new');
|
|
164
164
|
|
|
165
165
|
&--large {
|
|
166
|
+
border-radius: $border-radius;
|
|
167
|
+
font-size: ($font-size-large + rem-calc(2));
|
|
168
|
+
gap: $gap;
|
|
169
|
+
height: rem-calc(56);
|
|
170
|
+
letter-spacing: rem-calc(1);
|
|
171
|
+
line-height: rem-calc(28);
|
|
172
|
+
padding: rem-calc(8) rem-calc(16);
|
|
166
173
|
text-transform: uppercase;
|
|
174
|
+
|
|
175
|
+
@include breakpoint(laptop) {
|
|
176
|
+
font-size: $font-size-large;
|
|
177
|
+
height: rem-calc(48);
|
|
178
|
+
line-height: rem-calc(24);
|
|
179
|
+
min-width: rem-calc(36);
|
|
180
|
+
}
|
|
167
181
|
}
|
|
168
182
|
|
|
169
183
|
&--medium {
|
|
170
|
-
|
|
184
|
+
border-radius: $border-radius;
|
|
185
|
+
font-size: ($font-size-medium + rem-calc(2));
|
|
186
|
+
gap: $gap;
|
|
187
|
+
height: rem-calc(48);
|
|
188
|
+
line-height: rem-calc(24);
|
|
189
|
+
padding: rem-calc(8) rem-calc(16);
|
|
190
|
+
|
|
191
|
+
@include breakpoint(laptop) {
|
|
192
|
+
font-size: $font-size-medium;
|
|
193
|
+
height: rem-calc(40);
|
|
194
|
+
line-height: rem-calc(22);
|
|
195
|
+
min-width: rem-calc(36);
|
|
196
|
+
}
|
|
171
197
|
}
|
|
172
198
|
|
|
173
199
|
&--small {
|
|
174
|
-
|
|
200
|
+
border-radius: $border-radius;
|
|
201
|
+
font-size: ($font-size-small + rem-calc(2));
|
|
202
|
+
gap: $gap;
|
|
203
|
+
height: rem-calc(40);
|
|
204
|
+
line-height: rem-calc(22);
|
|
205
|
+
padding: rem-calc(4) rem-calc(12);
|
|
206
|
+
|
|
207
|
+
@include breakpoint(laptop) {
|
|
208
|
+
font-size: $font-size-small;
|
|
209
|
+
height: rem-calc(32);
|
|
210
|
+
line-height: rem-calc(18);
|
|
211
|
+
min-width: rem-calc(36);
|
|
212
|
+
}
|
|
175
213
|
}
|
|
176
214
|
|
|
177
215
|
@media (hover: hover) {
|
|
@@ -226,15 +264,53 @@
|
|
|
226
264
|
color: tm-color('admiral');
|
|
227
265
|
|
|
228
266
|
&--large {
|
|
267
|
+
border-radius: $border-radius;
|
|
268
|
+
font-size: ($font-size-large + rem-calc(2));
|
|
269
|
+
gap: $gap;
|
|
270
|
+
height: rem-calc(56);
|
|
271
|
+
letter-spacing: rem-calc(1);
|
|
272
|
+
line-height: rem-calc(28);
|
|
273
|
+
padding: rem-calc(8) rem-calc(16);
|
|
229
274
|
text-transform: uppercase;
|
|
275
|
+
|
|
276
|
+
@include breakpoint(laptop) {
|
|
277
|
+
font-size: $font-size-large;
|
|
278
|
+
height: rem-calc(48);
|
|
279
|
+
line-height: rem-calc(24);
|
|
280
|
+
min-width: rem-calc(36);
|
|
281
|
+
}
|
|
230
282
|
}
|
|
231
283
|
|
|
232
284
|
&--medium {
|
|
233
|
-
|
|
285
|
+
border-radius: $border-radius;
|
|
286
|
+
font-size: ($font-size-medium + rem-calc(2));
|
|
287
|
+
gap: $gap;
|
|
288
|
+
height: rem-calc(48);
|
|
289
|
+
line-height: rem-calc(24);
|
|
290
|
+
padding: rem-calc(8) rem-calc(16);
|
|
291
|
+
|
|
292
|
+
@include breakpoint(laptop) {
|
|
293
|
+
font-size: $font-size-medium;
|
|
294
|
+
height: rem-calc(40);
|
|
295
|
+
line-height: rem-calc(22);
|
|
296
|
+
min-width: rem-calc(36);
|
|
297
|
+
}
|
|
234
298
|
}
|
|
235
299
|
|
|
236
300
|
&--small {
|
|
237
|
-
|
|
301
|
+
border-radius: $border-radius;
|
|
302
|
+
font-size: ($font-size-small + rem-calc(2));
|
|
303
|
+
gap: $gap;
|
|
304
|
+
height: rem-calc(40);
|
|
305
|
+
line-height: rem-calc(22);
|
|
306
|
+
padding: rem-calc(4) rem-calc(12);
|
|
307
|
+
|
|
308
|
+
@include breakpoint(laptop) {
|
|
309
|
+
font-size: $font-size-small;
|
|
310
|
+
height: rem-calc(32);
|
|
311
|
+
line-height: rem-calc(18);
|
|
312
|
+
min-width: rem-calc(36);
|
|
313
|
+
}
|
|
238
314
|
}
|
|
239
315
|
|
|
240
316
|
@media (hover: hover) {
|
|
@@ -256,6 +332,12 @@
|
|
|
256
332
|
}
|
|
257
333
|
}
|
|
258
334
|
}
|
|
335
|
+
|
|
336
|
+
&--active {
|
|
337
|
+
background-color: tm-color('admiral');
|
|
338
|
+
border: none;
|
|
339
|
+
color: tm-color('white');
|
|
340
|
+
}
|
|
259
341
|
}
|
|
260
342
|
|
|
261
343
|
&__tertiary {
|
|
@@ -263,22 +345,52 @@
|
|
|
263
345
|
color: tm-color('light-blue-new');
|
|
264
346
|
|
|
265
347
|
&--large {
|
|
348
|
+
border-radius: $border-radius;
|
|
349
|
+
font-size: ($font-size-large + rem-calc(2));
|
|
350
|
+
gap: $gap;
|
|
351
|
+
height: rem-calc(56);
|
|
352
|
+
letter-spacing: rem-calc(1);
|
|
353
|
+
line-height: rem-calc(28);
|
|
354
|
+
padding: rem-calc(8) rem-calc(16);
|
|
266
355
|
text-transform: uppercase;
|
|
356
|
+
|
|
357
|
+
@include breakpoint(laptop) {
|
|
358
|
+
font-size: $font-size-large;
|
|
359
|
+
height: rem-calc(48);
|
|
360
|
+
line-height: rem-calc(24);
|
|
361
|
+
min-width: rem-calc(36);
|
|
362
|
+
}
|
|
267
363
|
}
|
|
268
364
|
|
|
269
365
|
&--medium {
|
|
366
|
+
border-radius: $border-radius;
|
|
270
367
|
font-size: ($font-size-medium + rem-calc(2));
|
|
368
|
+
gap: $gap;
|
|
369
|
+
height: rem-calc(48);
|
|
370
|
+
line-height: rem-calc(24);
|
|
371
|
+
padding: rem-calc(8) rem-calc(16);
|
|
271
372
|
|
|
272
373
|
@include breakpoint(laptop) {
|
|
273
374
|
font-size: $font-size-medium;
|
|
375
|
+
height: rem-calc(40);
|
|
376
|
+
line-height: rem-calc(22);
|
|
377
|
+
min-width: rem-calc(36);
|
|
274
378
|
}
|
|
275
379
|
}
|
|
276
380
|
|
|
277
381
|
&--small {
|
|
382
|
+
border-radius: $border-radius;
|
|
278
383
|
font-size: ($font-size-small + rem-calc(2));
|
|
384
|
+
gap: $gap;
|
|
385
|
+
height: rem-calc(40);
|
|
386
|
+
line-height: rem-calc(22);
|
|
387
|
+
padding: rem-calc(4) rem-calc(12);
|
|
279
388
|
|
|
280
389
|
@include breakpoint(laptop) {
|
|
281
390
|
font-size: $font-size-small;
|
|
391
|
+
height: rem-calc(32);
|
|
392
|
+
line-height: rem-calc(18);
|
|
393
|
+
min-width: rem-calc(36);
|
|
282
394
|
}
|
|
283
395
|
}
|
|
284
396
|
|
|
@@ -291,7 +403,7 @@
|
|
|
291
403
|
|
|
292
404
|
&--disabled {
|
|
293
405
|
color: tm-color('soft-sky') !important;
|
|
294
|
-
|
|
406
|
+
pointer-events: none;
|
|
295
407
|
}
|
|
296
408
|
|
|
297
409
|
&--warning {
|
|
@@ -320,15 +432,52 @@
|
|
|
320
432
|
color: tm-color('light-blue-new');
|
|
321
433
|
|
|
322
434
|
&--large {
|
|
435
|
+
border-radius: $border-radius;
|
|
436
|
+
font-size: ($font-size-large + rem-calc(2));
|
|
437
|
+
gap: $gap;
|
|
438
|
+
height: rem-calc(56);
|
|
439
|
+
letter-spacing: rem-calc(1);
|
|
440
|
+
line-height: rem-calc(28);
|
|
441
|
+
padding: rem-calc(8) rem-calc(16);
|
|
323
442
|
text-transform: uppercase;
|
|
443
|
+
|
|
444
|
+
@include breakpoint(laptop) {
|
|
445
|
+
font-size: $font-size-large;
|
|
446
|
+
height: rem-calc(48);
|
|
447
|
+
line-height: rem-calc(24);
|
|
448
|
+
}
|
|
324
449
|
}
|
|
325
450
|
|
|
326
451
|
&--medium {
|
|
327
|
-
|
|
452
|
+
border-radius: $border-radius;
|
|
453
|
+
font-size: ($font-size-medium + rem-calc(2));
|
|
454
|
+
gap: $gap;
|
|
455
|
+
height: rem-calc(48);
|
|
456
|
+
line-height: rem-calc(24);
|
|
457
|
+
padding: rem-calc(8) rem-calc(16);
|
|
458
|
+
|
|
459
|
+
@include breakpoint(laptop) {
|
|
460
|
+
font-size: $font-size-medium;
|
|
461
|
+
height: rem-calc(40);
|
|
462
|
+
line-height: rem-calc(22);
|
|
463
|
+
min-width: rem-calc(36);
|
|
464
|
+
}
|
|
328
465
|
}
|
|
329
466
|
|
|
330
467
|
&--small {
|
|
331
|
-
|
|
468
|
+
border-radius: $border-radius;
|
|
469
|
+
font-size: ($font-size-small + rem-calc(2));
|
|
470
|
+
gap: $gap;
|
|
471
|
+
height: rem-calc(40);
|
|
472
|
+
line-height: rem-calc(22);
|
|
473
|
+
padding: rem-calc(4) rem-calc(12);
|
|
474
|
+
|
|
475
|
+
@include breakpoint(laptop) {
|
|
476
|
+
font-size: $font-size-small;
|
|
477
|
+
height: rem-calc(32);
|
|
478
|
+
line-height: rem-calc(18);
|
|
479
|
+
min-width: rem-calc(36);
|
|
480
|
+
}
|
|
332
481
|
}
|
|
333
482
|
|
|
334
483
|
@media (hover: hover) {
|
|
@@ -354,15 +503,53 @@
|
|
|
354
503
|
color: tm-color('admiral');
|
|
355
504
|
|
|
356
505
|
&--large {
|
|
506
|
+
border-radius: $border-radius;
|
|
507
|
+
font-size: ($font-size-large + rem-calc(2));
|
|
508
|
+
gap: $gap;
|
|
509
|
+
height: rem-calc(56);
|
|
510
|
+
letter-spacing: rem-calc(1);
|
|
511
|
+
line-height: rem-calc(28);
|
|
512
|
+
padding: rem-calc(8) rem-calc(16);
|
|
357
513
|
text-transform: uppercase;
|
|
514
|
+
|
|
515
|
+
@include breakpoint(laptop) {
|
|
516
|
+
font-size: $font-size-large;
|
|
517
|
+
height: rem-calc(48);
|
|
518
|
+
line-height: rem-calc(24);
|
|
519
|
+
min-width: rem-calc(36);
|
|
520
|
+
}
|
|
358
521
|
}
|
|
359
522
|
|
|
360
523
|
&--medium {
|
|
361
|
-
|
|
524
|
+
border-radius: $border-radius;
|
|
525
|
+
font-size: ($font-size-medium + rem-calc(2));
|
|
526
|
+
gap: $gap;
|
|
527
|
+
height: rem-calc(48);
|
|
528
|
+
line-height: rem-calc(24);
|
|
529
|
+
padding: rem-calc(8) rem-calc(16);
|
|
530
|
+
|
|
531
|
+
@include breakpoint(laptop) {
|
|
532
|
+
font-size: $font-size-medium;
|
|
533
|
+
height: rem-calc(40);
|
|
534
|
+
line-height: rem-calc(22);
|
|
535
|
+
min-width: rem-calc(36);
|
|
536
|
+
}
|
|
362
537
|
}
|
|
363
538
|
|
|
364
539
|
&--small {
|
|
365
|
-
|
|
540
|
+
border-radius: $border-radius;
|
|
541
|
+
font-size: ($font-size-small + rem-calc(2));
|
|
542
|
+
gap: $gap;
|
|
543
|
+
height: rem-calc(40);
|
|
544
|
+
line-height: rem-calc(22);
|
|
545
|
+
padding: rem-calc(4) rem-calc(12);
|
|
546
|
+
|
|
547
|
+
@include breakpoint(laptop) {
|
|
548
|
+
font-size: $font-size-small;
|
|
549
|
+
height: rem-calc(32);
|
|
550
|
+
line-height: rem-calc(18);
|
|
551
|
+
min-width: rem-calc(36);
|
|
552
|
+
}
|
|
366
553
|
}
|
|
367
554
|
|
|
368
555
|
@media (hover: hover) {
|
|
@@ -531,7 +718,7 @@
|
|
|
531
718
|
@include tm-icon-color('silver-mist');
|
|
532
719
|
|
|
533
720
|
color: tm-color('silver-mist') !important;
|
|
534
|
-
|
|
721
|
+
pointer-events: none;
|
|
535
722
|
}
|
|
536
723
|
|
|
537
724
|
&::before {
|
|
@@ -570,7 +757,7 @@
|
|
|
570
757
|
@include tm-icon-color('silver-mist');
|
|
571
758
|
|
|
572
759
|
color: tm-color('silver-mist') !important;
|
|
573
|
-
|
|
760
|
+
pointer-events: none;
|
|
574
761
|
}
|
|
575
762
|
}
|
|
576
763
|
|
|
@@ -599,7 +786,7 @@
|
|
|
599
786
|
@include tm-icon-color('silver-mist');
|
|
600
787
|
|
|
601
788
|
color: tm-color('silver-mist') !important;
|
|
602
|
-
|
|
789
|
+
pointer-events: none;
|
|
603
790
|
}
|
|
604
791
|
|
|
605
792
|
&::before {
|