Merge branch 'release/4.2.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-main / buttons / button.component.scss

diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 09b5f95d7cfdfb0b9b4880f60e3877a40735cc19..7f0cdf1ed19e281a893c34a6b41d8d8b9b7025a1 100644 (file)
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 @mixin responsive-label {
   .action-button {
@@ -9,50 +9,59 @@
   .button-label {
     display: none;
   }
-}
 
-:host {
-  outline: none;
+  my-global-icon {
+    margin: 0 !important;
+  }
 }
 
-my-small-loader ::ng-deep .root {
+:host {
   display: inline-block;
-  margin: 0 3px 0 0;
-  width: 20px;
 }
 
 a[class$=-button],
 span[class$=-button] {
   > span {
-    margin-left: 5px;
+    @include margin-left(5px);
   }
 }
 
 .action-button {
-  @include peertube-button-link;
-  @include button-with-icon(21px, 0, -1px);
+  width: 100%; // useful for ellipsis, allow to define a max-width on host component
+
+  &.has-icon {
+    @include button-with-icon(21px);
+  }
+
+  &.icon-only my-global-icon {
+    margin: 0 !important;
+  }
 }
 
-.orange-button {
+.orange-button,
+.grey-button {
   @include peertube-button;
-  @include orange-button;
 }
 
-.orange-button-link {
+.orange-button-link,
+.grey-button-link {
   @include peertube-button-link;
-  @include orange-button;
 }
 
-.grey-button {
-  @include peertube-button;
-  @include grey-button;
+.orange-button,
+.orange-button-link {
+  @include orange-button;
 }
 
+.grey-button,
 .grey-button-link {
-  @include peertube-button-link;
   @include grey-button;
 }
 
+.button-label {
+  @include ellipsis;
+}
+
 // In a table, try to minimize the space taken by this button
 @media screen and (max-width: 1400px) {
   :host-context(td) {