@transfermarkt/global-styles 1.15.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transfermarkt/global-styles",
-  "version": "1.15.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

@@ -58,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 {
@@ -106,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 {
@@ -150,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 {
@@ -175,6 +190,10 @@
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('arrow');
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__arrow-right {
@@ -185,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 {
@@ -201,6 +228,10 @@
 
   &__chevron-both {
     @include tm-icon-generate('chevron', both);
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__check {
@@ -559,6 +590,10 @@
     }
   }
 
+  &__disabled {
+    @include tm-icon-color(disabled);
+  }
+
   &__large {
     @include tm-icon-size(24px);
   }