@transfermarkt/global-styles 1.53.0 → 1.55.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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transfermarkt/global-styles",
3
- "version": "1.53.0",
3
+ "version": "1.55.0",
4
4
  "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
5
5
  "author": "Transfermarkt",
6
6
  "license": "MIT",
@@ -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
- font-size: $font-size-medium;
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
- font-size: $font-size-small;
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
- font-size: $font-size-medium;
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
- font-size: $font-size-small;
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,20 @@
256
332
  }
257
333
  }
258
334
  }
335
+
336
+ &--active {
337
+ background-color: tm-color('admiral');
338
+ border: none;
339
+ color: tm-color('white');
340
+
341
+ @media (hover: hover) {
342
+ &:hover {
343
+ background-color: tm-color('admiral');
344
+ border: none;
345
+ color: tm-color('white');
346
+ }
347
+ }
348
+ }
259
349
  }
260
350
 
261
351
  &__tertiary {
@@ -263,22 +353,52 @@
263
353
  color: tm-color('light-blue-new');
264
354
 
265
355
  &--large {
356
+ border-radius: $border-radius;
357
+ font-size: ($font-size-large + rem-calc(2));
358
+ gap: $gap;
359
+ height: rem-calc(56);
360
+ letter-spacing: rem-calc(1);
361
+ line-height: rem-calc(28);
362
+ padding: rem-calc(8) rem-calc(16);
266
363
  text-transform: uppercase;
364
+
365
+ @include breakpoint(laptop) {
366
+ font-size: $font-size-large;
367
+ height: rem-calc(48);
368
+ line-height: rem-calc(24);
369
+ min-width: rem-calc(36);
370
+ }
267
371
  }
268
372
 
269
373
  &--medium {
374
+ border-radius: $border-radius;
270
375
  font-size: ($font-size-medium + rem-calc(2));
376
+ gap: $gap;
377
+ height: rem-calc(48);
378
+ line-height: rem-calc(24);
379
+ padding: rem-calc(8) rem-calc(16);
271
380
 
272
381
  @include breakpoint(laptop) {
273
382
  font-size: $font-size-medium;
383
+ height: rem-calc(40);
384
+ line-height: rem-calc(22);
385
+ min-width: rem-calc(36);
274
386
  }
275
387
  }
276
388
 
277
389
  &--small {
390
+ border-radius: $border-radius;
278
391
  font-size: ($font-size-small + rem-calc(2));
392
+ gap: $gap;
393
+ height: rem-calc(40);
394
+ line-height: rem-calc(22);
395
+ padding: rem-calc(4) rem-calc(12);
279
396
 
280
397
  @include breakpoint(laptop) {
281
398
  font-size: $font-size-small;
399
+ height: rem-calc(32);
400
+ line-height: rem-calc(18);
401
+ min-width: rem-calc(36);
282
402
  }
283
403
  }
284
404
 
@@ -291,7 +411,7 @@
291
411
 
292
412
  &--disabled {
293
413
  color: tm-color('soft-sky') !important;
294
- cursor: not-allowed;
414
+ pointer-events: none;
295
415
  }
296
416
 
297
417
  &--warning {
@@ -320,15 +440,52 @@
320
440
  color: tm-color('light-blue-new');
321
441
 
322
442
  &--large {
443
+ border-radius: $border-radius;
444
+ font-size: ($font-size-large + rem-calc(2));
445
+ gap: $gap;
446
+ height: rem-calc(56);
447
+ letter-spacing: rem-calc(1);
448
+ line-height: rem-calc(28);
449
+ padding: rem-calc(8) rem-calc(16);
323
450
  text-transform: uppercase;
451
+
452
+ @include breakpoint(laptop) {
453
+ font-size: $font-size-large;
454
+ height: rem-calc(48);
455
+ line-height: rem-calc(24);
456
+ }
324
457
  }
325
458
 
326
459
  &--medium {
327
- font-size: $font-size-medium;
460
+ border-radius: $border-radius;
461
+ font-size: ($font-size-medium + rem-calc(2));
462
+ gap: $gap;
463
+ height: rem-calc(48);
464
+ line-height: rem-calc(24);
465
+ padding: rem-calc(8) rem-calc(16);
466
+
467
+ @include breakpoint(laptop) {
468
+ font-size: $font-size-medium;
469
+ height: rem-calc(40);
470
+ line-height: rem-calc(22);
471
+ min-width: rem-calc(36);
472
+ }
328
473
  }
329
474
 
330
475
  &--small {
331
- font-size: $font-size-small;
476
+ border-radius: $border-radius;
477
+ font-size: ($font-size-small + rem-calc(2));
478
+ gap: $gap;
479
+ height: rem-calc(40);
480
+ line-height: rem-calc(22);
481
+ padding: rem-calc(4) rem-calc(12);
482
+
483
+ @include breakpoint(laptop) {
484
+ font-size: $font-size-small;
485
+ height: rem-calc(32);
486
+ line-height: rem-calc(18);
487
+ min-width: rem-calc(36);
488
+ }
332
489
  }
333
490
 
334
491
  @media (hover: hover) {
@@ -354,15 +511,53 @@
354
511
  color: tm-color('admiral');
355
512
 
356
513
  &--large {
514
+ border-radius: $border-radius;
515
+ font-size: ($font-size-large + rem-calc(2));
516
+ gap: $gap;
517
+ height: rem-calc(56);
518
+ letter-spacing: rem-calc(1);
519
+ line-height: rem-calc(28);
520
+ padding: rem-calc(8) rem-calc(16);
357
521
  text-transform: uppercase;
522
+
523
+ @include breakpoint(laptop) {
524
+ font-size: $font-size-large;
525
+ height: rem-calc(48);
526
+ line-height: rem-calc(24);
527
+ min-width: rem-calc(36);
528
+ }
358
529
  }
359
530
 
360
531
  &--medium {
361
- font-size: $font-size-medium;
532
+ border-radius: $border-radius;
533
+ font-size: ($font-size-medium + rem-calc(2));
534
+ gap: $gap;
535
+ height: rem-calc(48);
536
+ line-height: rem-calc(24);
537
+ padding: rem-calc(8) rem-calc(16);
538
+
539
+ @include breakpoint(laptop) {
540
+ font-size: $font-size-medium;
541
+ height: rem-calc(40);
542
+ line-height: rem-calc(22);
543
+ min-width: rem-calc(36);
544
+ }
362
545
  }
363
546
 
364
547
  &--small {
365
- font-size: $font-size-small;
548
+ border-radius: $border-radius;
549
+ font-size: ($font-size-small + rem-calc(2));
550
+ gap: $gap;
551
+ height: rem-calc(40);
552
+ line-height: rem-calc(22);
553
+ padding: rem-calc(4) rem-calc(12);
554
+
555
+ @include breakpoint(laptop) {
556
+ font-size: $font-size-small;
557
+ height: rem-calc(32);
558
+ line-height: rem-calc(18);
559
+ min-width: rem-calc(36);
560
+ }
366
561
  }
367
562
 
368
563
  @media (hover: hover) {
@@ -531,7 +726,7 @@
531
726
  @include tm-icon-color('silver-mist');
532
727
 
533
728
  color: tm-color('silver-mist') !important;
534
- cursor: not-allowed;
729
+ pointer-events: none;
535
730
  }
536
731
 
537
732
  &::before {
@@ -570,7 +765,7 @@
570
765
  @include tm-icon-color('silver-mist');
571
766
 
572
767
  color: tm-color('silver-mist') !important;
573
- cursor: not-allowed;
768
+ pointer-events: none;
574
769
  }
575
770
  }
576
771
 
@@ -599,7 +794,7 @@
599
794
  @include tm-icon-color('silver-mist');
600
795
 
601
796
  color: tm-color('silver-mist') !important;
602
- cursor: not-allowed;
797
+ pointer-events: none;
603
798
  }
604
799
 
605
800
  &::before {