@transfermarkt/global-styles 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transfermarkt/global-styles",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
   "author": "Transfermarkt",
   "license": "MIT",

package/scss/utils/components/buttons/buttons.scss

@@ -25,6 +25,10 @@
   padding: rem-calc(8) rem-calc(20);
   position: relative;
   text-decoration: none;
+  transition:
+    background-color 100ms linear,
+    color 100ms linear,
+    border-color 100ms linear;
 
   &--full-size {
     display: flex;
@@ -57,6 +61,7 @@
 
     &--large {
       height: rem-calc(40);
+      letter-spacing: rem-calc(1);
       text-transform: uppercase;
     }
 
@@ -70,6 +75,7 @@
     &--small {
       font-size: $font-size-small;
       height: rem-calc(30);
+      line-height: normal;
       padding: rem-calc(8) rem-calc(12);
     }
 
@@ -309,14 +315,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -336,14 +348,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &:hover {
@@ -357,14 +375,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -383,14 +407,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -405,14 +435,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -421,14 +457,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -443,14 +485,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -461,14 +509,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -477,14 +531,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -495,14 +555,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -513,14 +579,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -529,14 +601,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -547,14 +625,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -565,14 +649,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -581,14 +671,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -599,14 +695,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -617,14 +719,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -633,14 +741,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -651,14 +765,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -669,14 +789,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -685,14 +811,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -703,14 +835,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -721,14 +859,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -737,14 +881,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -755,14 +905,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -773,14 +929,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -789,14 +951,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -807,14 +975,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -825,14 +999,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -841,14 +1021,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -859,14 +1045,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -877,14 +1069,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -893,14 +1091,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -911,14 +1115,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -929,14 +1139,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -945,14 +1161,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -963,14 +1185,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -981,14 +1209,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -997,14 +1231,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1015,14 +1255,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1033,14 +1279,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1049,14 +1301,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1067,14 +1325,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1085,14 +1349,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1101,14 +1371,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1119,14 +1395,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1137,14 +1419,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1153,14 +1441,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1171,14 +1465,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1189,14 +1489,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1205,14 +1511,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1223,14 +1535,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1241,14 +1559,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1257,14 +1581,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1275,14 +1605,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1293,14 +1629,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1309,14 +1651,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1327,14 +1675,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1345,14 +1699,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1361,14 +1721,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1379,14 +1745,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1397,14 +1769,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1413,14 +1791,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }