@transfermarkt/global-styles 1.14.0 → 1.16.0

package/package.json

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

package/scss/mixins/_icon.scss

@@ -14,12 +14,13 @@ $icon-color-filters: (
     contrast(87%),
   success: invert(40%) sepia(44%) saturate(643%) hue-rotate(135deg) brightness(93%) contrast(95%),
   success-light: invert(76%) sepia(61%) saturate(125%) hue-rotate(86deg) brightness(119%)
-    contrast(84%)
+    contrast(84%),
+  disabled: invert(53%) sepia(8%) saturate(282%) hue-rotate(177deg) brightness(122%) contrast(171%)
 );
 
 @function icon-filter-base($state) {
   @if $state == 'disabled' {
-    @return invert(80%) sepia(10%) saturate(0%) brightness(90%) contrast(80%);
+    @return invert(53%) sepia(8%) saturate(282%) hue-rotate(177deg) brightness(122%) contrast(171%);
   } @else if $state == 'warning-dark' {
     @return invert(77%) sepia(38%) saturate(5784%) hue-rotate(359deg) brightness(101%)
       contrast(105%);
@@ -56,7 +57,6 @@ $icon-color-filters: (
       height: 20px;
       background: url('#{$image-url}') no-repeat center/contain;
       filter: $base-filter;
-      transform: rotate(180deg);
       @if $state != 'disabled' {
         &:hover {
           filter: icon-filter-hover($state);

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

@@ -19,10 +19,8 @@
   font-size: rem-calc(16);
   font-variation-settings: 'wght' 600;
   font-weight: normal;
-  height: rem-calc(40);
   justify-content: center;
-  line-height: rem-calc(20);
-  margin: rem-calc(10);
+  line-height: rem-calc(16);
   padding: rem-calc(8) rem-calc(20);
   position: relative;
   text-decoration: none;
@@ -35,17 +33,20 @@
     background-color: tm-color('dark-blue-new');
 
     &--large {
+      height: rem-calc(40);
       text-transform: uppercase;
     }
 
     &--medium {
       font-size: rem-calc(14);
+      height: rem-calc(36);
       line-height: rem-calc(20);
       padding: rem-calc(8) rem-calc(16);
     }
 
     &--small {
       font-size: rem-calc(12);
+      height: rem-calc(30);
       padding: rem-calc(8) rem-calc(12);
     }
 
@@ -57,6 +58,11 @@
     &--disabled {
       background-color: tm-color('gainsboro-new');
       color: tm-color('grey-new');
+
+      &:hover {
+        background-color: tm-color('gainsboro-new');
+        color: tm-color('grey-new');
+      }
     }
 
     &--warning {
@@ -105,6 +111,11 @@
     &--disabled {
       background-color: tm-color('gainsboro-new');
       color: tm-color('grey-new');
+
+      &:hover {
+        background-color: tm-color('gainsboro-new');
+        color: tm-color('grey-new');
+      }
     }
 
     &--warning {
@@ -149,6 +160,11 @@
     &--disabled {
       background-color: tm-color('gainsboro-new');
       color: tm-color('grey-new');
+
+      &:hover {
+        background-color: tm-color('gainsboro-new');
+        color: tm-color('grey-new');
+      }
     }
 
     &--warning {
@@ -174,6 +190,10 @@
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('arrow');
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__arrow-right {
@@ -184,12 +204,20 @@
 
   &__arrow-both {
     @include tm-icon-generate('arrow', both);
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__chevron {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('chevron');
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__chevron-right {
@@ -200,6 +228,10 @@
 
   &__chevron-both {
     @include tm-icon-generate('chevron', both);
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__check {
@@ -558,6 +590,10 @@
     }
   }
 
+  &__disabled {
+    @include tm-icon-color(disabled);
+  }
+
   &__large {
     @include tm-icon-size(24px);
   }