@transfermarkt/global-styles 1.19.0 → 1.21.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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/scss/base/index.scss +2 -2
  3. package/scss/utils/components/buttons/buttons.scss +12 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transfermarkt/global-styles",
3
- "version": "1.19.0",
3
+ "version": "1.21.0",
4
4
  "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
5
5
  "author": "Transfermarkt",
6
6
  "license": "MIT",
package/scss/base/index.scss CHANGED
@@ -1419,7 +1419,7 @@ tm-latest-transfers {
1419
1419
  .wettbewerb-stats {
1420
1420
  display: block;
1421
1421
 
1422
- @include desktop {
1422
+ @include breakpoint(laptop) {
1423
1423
  display: flex;
1424
1424
  flex-wrap: wrap;
1425
1425
  }
@@ -1427,7 +1427,7 @@ tm-latest-transfers {
1427
1427
  .columns {
1428
1428
  display: block;
1429
1429
 
1430
- @include desktop {
1430
+ @include breakpoint(laptop) {
1431
1431
  display: flex;
1432
1432
  flex: 1;
1433
1433
  flex-direction: column;
package/scss/utils/components/buttons/buttons.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  // "!importants" can be removed if the styles are not overridden by other styles (comes often from main.scss)
8
8
 
9
9
  .tm-btn {
10
+ $font-size-small: rem-calc(12);
11
+ $font-size-medium: rem-calc(15);
10
12
  $position: 'right';
11
13
 
12
14
  align-items: center;
@@ -27,6 +29,10 @@
27
29
 
28
30
  &--full-size {
29
31
  display: flex;
32
+
33
+ @include breakpoint(tablet, 'max') {
34
+ width: 100%;
35
+ }
30
36
  }
31
37
 
32
38
  &__wrapper {
@@ -56,14 +62,14 @@
56
62
  }
57
63
 
58
64
  &--medium {
59
- font-size: rem-calc(14);
65
+ font-size: $font-size-medium;
60
66
  height: rem-calc(36);
61
67
  line-height: rem-calc(20);
62
68
  padding: rem-calc(8) rem-calc(16);
63
69
  }
64
70
 
65
71
  &--small {
66
- font-size: rem-calc(12);
72
+ font-size: $font-size-small;
67
73
  height: rem-calc(30);
68
74
  padding: rem-calc(8) rem-calc(12);
69
75
  }
@@ -113,11 +119,11 @@
113
119
  }
114
120
 
115
121
  &--medium {
116
- font-size: rem-calc(14);
122
+ font-size: $font-size-medium;
117
123
  }
118
124
 
119
125
  &--small {
120
- font-size: rem-calc(12);
126
+ font-size: $font-size-small;
121
127
  }
122
128
 
123
129
  &:hover {
@@ -166,11 +172,11 @@
166
172
  }
167
173
 
168
174
  &--medium {
169
- font-size: rem-calc(14);
175
+ font-size: $font-size-medium;
170
176
  }
171
177
 
172
178
  &--small {
173
- font-size: rem-calc(12);
179
+ font-size: $font-size-small;
174
180
  }
175
181
 
176
182
  &:hover {