@transfermarkt/global-styles 1.52.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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transfermarkt/global-styles",
3
- "version": "1.52.0",
3
+ "version": "1.54.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,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
 
@@ -290,13 +402,8 @@
290
402
  }
291
403
 
292
404
  &--disabled {
293
- color: tm-color('soft-sky');
294
-
295
- @media (hover: hover) {
296
- &:hover {
297
- color: tm-color('soft-sky');
298
- }
299
- }
405
+ color: tm-color('soft-sky') !important;
406
+ pointer-events: none;
300
407
  }
301
408
 
302
409
  &--warning {
@@ -325,15 +432,52 @@
325
432
  color: tm-color('light-blue-new');
326
433
 
327
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);
328
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
+ }
329
449
  }
330
450
 
331
451
  &--medium {
332
- font-size: $font-size-medium;
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
+ }
333
465
  }
334
466
 
335
467
  &--small {
336
- font-size: $font-size-small;
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
+ }
337
481
  }
338
482
 
339
483
  @media (hover: hover) {
@@ -359,15 +503,53 @@
359
503
  color: tm-color('admiral');
360
504
 
361
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);
362
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
+ }
363
521
  }
364
522
 
365
523
  &--medium {
366
- font-size: $font-size-medium;
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
+ }
367
537
  }
368
538
 
369
539
  &--small {
370
- font-size: $font-size-small;
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
+ }
371
553
  }
372
554
 
373
555
  @media (hover: hover) {
@@ -535,8 +717,8 @@
535
717
  &--disabled {
536
718
  @include tm-icon-color('silver-mist');
537
719
 
538
- color: tm-color('silver-mist');
539
- cursor: not-allowed;
720
+ color: tm-color('silver-mist') !important;
721
+ pointer-events: none;
540
722
  }
541
723
 
542
724
  &::before {
@@ -574,8 +756,8 @@
574
756
  &--disabled {
575
757
  @include tm-icon-color('silver-mist');
576
758
 
577
- color: tm-color('silver-mist');
578
- cursor: not-allowed;
759
+ color: tm-color('silver-mist') !important;
760
+ pointer-events: none;
579
761
  }
580
762
  }
581
763
 
@@ -603,8 +785,8 @@
603
785
  &--disabled {
604
786
  @include tm-icon-color('silver-mist');
605
787
 
606
- color: tm-color('silver-mist');
607
- cursor: not-allowed;
788
+ color: tm-color('silver-mist') !important;
789
+ pointer-events: none;
608
790
  }
609
791
 
610
792
  &::before {