@transfermarkt/global-styles 1.19.0 → 1.20.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 (2) hide show
  1. package/package.json +1 -1
  2. 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.20.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/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 {