@transfermarkt/global-styles 1.16.0 → 1.18.0

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');
 
@@ -87,9 +105,8 @@
   }
 
   &__secondary {
-    background-color: tm-color('white');
+    background-color: unset;
     color: tm-color('admiral');
-    opacity: 1;
 
     &--large {
       text-transform: uppercase;
@@ -133,6 +150,10 @@
         color: tm-color('success');
       }
     }
+
+    &--inverted {
+      color: tm-color('white');
+    }
   }
 
   &__tertiary {
@@ -189,25 +210,76 @@
   &__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 {
@@ -215,6 +287,18 @@
 
     @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);
     }
@@ -224,11 +308,35 @@
     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);
     }
@@ -238,304 +346,988 @@
     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');
+
+    &--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 {
@@ -594,15 +1386,11 @@
     @include tm-icon-color(disabled);
   }
 
-  &__large {
-    @include tm-icon-size(24px);
-  }
-
-  &__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);
+    }
   }
 }