@transfermarkt/global-styles 1.15.0 → 1.17.0

package/package.json

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

package/scss/mixins/_icon.scss

@@ -1,50 +1,14 @@
-/* stylelint-disable */
-$icon-color-filters: (
-  white: invert(100%) sepia(100%) saturate(1%) hue-rotate(207deg) brightness(102%) contrast(102%),
-  admiral: invert(9%) sepia(84%) saturate(2624%) hue-rotate(209deg) brightness(16%) contrast(87%),
-  lightblue-light: invert(47%) sepia(87%) saturate(1532%) hue-rotate(184deg) brightness(103%)
-    contrast(101%),
-  darkblue-400: invert(78%) sepia(6%) saturate(7%) hue-rotate(196deg) brightness(92%) contrast(87%),
-  warning-light: invert(77%) sepia(38%) saturate(5784%) hue-rotate(359deg) brightness(101%)
-    contrast(105%),
-  warning-dark: invert(15%) sepia(64%) saturate(5304%) hue-rotate(350deg) brightness(90%)
-    contrast(105%),
-  warning: invert(22%) sepia(93%) saturate(6517%) hue-rotate(353deg) brightness(101%) contrast(102%),
-  success-dark: invert(29%) sepia(58%) saturate(433%) hue-rotate(121deg) brightness(92%)
-    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%)
-);
+@use '../variables/colors' as *;
 
-@function icon-filter-base($state) {
-  @if $state == 'disabled' {
-    @return invert(80%) sepia(10%) saturate(0%) brightness(90%) contrast(80%);
-  } @else if $state == 'warning-dark' {
-    @return invert(77%) sepia(38%) saturate(5784%) hue-rotate(359deg) brightness(101%)
-      contrast(105%);
-  } @else if $state == 'success' {
-    @return invert(76%) sepia(61%) saturate(125%) hue-rotate(86deg) brightness(119%) contrast(84%);
-  } @else {
-    @return invert(100%) sepia(100%) saturate(1%) hue-rotate(207deg) brightness(102%) contrast(102%);
-  }
-}
+/* stylelint-disable */
 
-@function icon-filter-hover($state) {
-  @if $state == 'warning' {
-    @return invert(65%) sepia(60%) saturate(4500%) hue-rotate(359deg) brightness(105%)
-      contrast(110%);
-  } @else if $state == 'success' {
-    @return invert(58%) sepia(90%) saturate(500%) hue-rotate(93deg) brightness(100%) contrast(95%);
-  } @else {
-    @return invert(90%) sepia(90%) saturate(10%) hue-rotate(207deg) brightness(110%) contrast(110%);
-  }
+@function icon-svg-url($name) {
+  $base-url: 'https://tmsi.akamaized.net/tm-svg-icons';
+  @return '#{$base-url}/#{$name}.svg';
 }
 
-@mixin tm-icon-generate($name, $position: left, $state: 'default') {
-  $base-url: 'https://tmsi.akamaized.net/tm-svg-icons';
-  $image-url: '#{$base-url}/#{$name}.svg';
-  $base-filter: icon-filter-base($state);
+@mixin tm-icon-generate($name, $position: left) {
+  $image-url: icon-svg-url($name);
 
   @if $position == left or $position == both {
     &::before {
@@ -52,16 +16,9 @@ $icon-color-filters: (
       display: inline-block;
       vertical-align: middle;
       margin-right: 8px;
-      width: 20px;
-      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);
-        }
-      }
+      background-color: currentColor;
+      mask: url('#{$image-url}') no-repeat center / contain;
+      -webkit-mask: url('#{$image-url}') no-repeat center / contain;
     }
   }
 
@@ -71,24 +28,18 @@ $icon-color-filters: (
       display: inline-block;
       vertical-align: middle;
       margin-left: 8px;
-      width: 20px;
-      height: 20px;
-      background: url('#{$image-url}') no-repeat center/contain;
-      filter: $base-filter;
-      @if $state != 'disabled' {
-        &:hover {
-          filter: icon-filter-hover($state);
-        }
-      }
+      background-color: currentColor;
+      mask: url('#{$image-url}') no-repeat center / contain;
+      -webkit-mask: url('#{$image-url}') no-repeat center / contain;
     }
   }
 }
 
 @mixin tm-icon-color($color-name) {
-  $filter: map-get($icon-color-filters, $color-name);
+  $c: tm-color($color-name);
   &::before,
   &::after {
-    filter: $filter;
+    background-color: $c;
   }
 }
 

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

@@ -29,6 +29,24 @@
     display: flex;
   }
 
+  &__wrapper {
+    align-items: center;
+    display: flex;
+    margin: rem-calc(15) 0;
+
+    &--right {
+      justify-content: flex-end;
+    }
+
+    &--left {
+      justify-content: flex-start;
+    }
+
+    &--center {
+      justify-content: center;
+    }
+  }
+
   &__primary {
     background-color: tm-color('dark-blue-new');
 
@@ -58,6 +76,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 {
@@ -82,9 +105,8 @@
   }
 
   &__secondary {
-    background-color: tm-color('white');
+    background-color: unset;
     color: tm-color('admiral');
-    opacity: 1;
 
     &--large {
       text-transform: uppercase;
@@ -106,6 +128,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 {
@@ -123,6 +150,10 @@
         color: tm-color('success');
       }
     }
+
+    &--inverted {
+      color: tm-color('white');
+    }
   }
 
   &__tertiary {
@@ -150,6 +181,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,337 +210,1124 @@
   &__arrow {
     padding-right: rem-calc(24);
 
-    @include tm-icon-generate('arrow');
+    @include tm-icon-generate('arrow', 'left');
+    @include tm-icon-color('admiral');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
+
+    &::before {
+      transform: rotate(180deg);
+    }
+
+    &:hover {
+      @include tm-icon-color('lightblue-light');
+    }
   }
 
   &__arrow-right {
     padding-left: rem-calc(24);
 
-    @include tm-icon-generate('arrow', right);
+    @include tm-icon-generate('arrow', 'right');
+    @include tm-icon-color('admiral');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
+
+    &:hover {
+      @include tm-icon-color('lightblue-light');
+    }
   }
 
   &__arrow-both {
-    @include tm-icon-generate('arrow', both);
+    @include tm-icon-generate('arrow', 'both');
+    @include tm-icon-color('admiral');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
+
+    &::before {
+      transform: rotate(180deg);
+    }
+
+    &:hover {
+      @include tm-icon-color('lightblue-light');
+    }
   }
 
   &__chevron {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('chevron');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__chevron-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('chevron', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__chevron-both {
     @include tm-icon-generate('chevron', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
+
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   &__check {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('check');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__check-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('check', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__check-both {
     @include tm-icon-generate('check', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__clipboard {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('clipboard');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__clipboard-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('clipboard', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__clipboard-both {
     @include tm-icon-generate('clipboard', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__close {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('close');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__close-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('close', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__close-both {
     @include tm-icon-generate('close', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__copy {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('copy');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__copy-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('copy', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__copy-both {
     @include tm-icon-generate('copy', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__delete {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('delete');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__delete-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('delete', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__delete-both {
     @include tm-icon-generate('delete', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__edit {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('edit');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__edit-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('edit', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__edit-both {
     @include tm-icon-generate('edit', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__filter {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('filter');
-  }
 
-  &__filter-right {
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
+  }
+
+  &__filter-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('filter', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__filter-both {
     @include tm-icon-generate('filter', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__globe {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('globe');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__globe-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('globe', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__globe-both {
     @include tm-icon-generate('globe', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__log-in {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('log-in');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__log-in-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('log-in', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__log-in-both {
     @include tm-icon-generate('log-in', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__log-out {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('log-out');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__log-out-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('log-out', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__log-out-both {
     @include tm-icon-generate('log-out', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__mail {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('mail');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__mail-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('mail', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__mail-both {
     @include tm-icon-generate('mail', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__map-pin {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('map-pin');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__map-pin-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('map-pin', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__map-pin-both {
     @include tm-icon-generate('map-pin', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__refresh {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('refresh');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__refresh-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('refresh', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__refresh-both {
     @include tm-icon-generate('refresh', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__search {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('search');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__search-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('search', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__search-both {
     @include tm-icon-generate('search', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__settings {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('settings');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__settings-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('settings', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__settings-both {
     @include tm-icon-generate('settings', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__share {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('share');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__share-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('share', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__share-both {
     @include tm-icon-generate('share', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__star {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('star');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__star-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('star', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__star-both {
     @include tm-icon-generate('star', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__trash {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('trash');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__trash-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('trash', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__trash-both {
     @include tm-icon-generate('trash', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__user {
     padding-right: rem-calc(24);
 
     @include tm-icon-generate('user');
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__user-right {
     padding-left: rem-calc(24);
 
     @include tm-icon-generate('user', right);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__user-both {
     @include tm-icon-generate('user', both);
+
+    &--large {
+      @include tm-icon-size(16px);
+    }
+
+    &--medium {
+      @include tm-icon-size(16px);
+    }
+
+    &--small {
+      @include tm-icon-size(14px);
+    }
   }
 
   &__white {
@@ -559,15 +1382,15 @@
     }
   }
 
-  &__large {
-    @include tm-icon-size(24px);
+  &__disabled {
+    @include tm-icon-color(disabled);
   }
 
-  &__medium {
-    @include tm-icon-size(16px);
-  }
+  &__inverted {
+    @include tm-icon-color(white);
 
-  &__small {
-    @include tm-icon-size(14px);
+    &:hover {
+      @include tm-icon-color(lightblue-light);
+    }
   }
 }