Auto update publishedAt in live restream

[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 06fde9f1d41320f59ce223c460368666adb8102d..c782ac3ef218b55b27af2163f2bfb9298e0facce 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,20 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@mixin responsive-label {
+  .action-button {
+    padding: 0 13px;
+  }
+
+  .button-label {
+    display: none;
+  }
+}
+
+:host {
+  outline: none;
+  display: inline-block;
+}
 
 my-small-loader ::ng-deep .root {
   display: inline-block;
@@ -10,13 +25,15 @@ my-small-loader ::ng-deep .root {
 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);
+  @include button-with-icon(21px);
+
+  width: 100%; // useful for ellipsis, allow to define a max-width on host component
 }
 
 .orange-button {
@@ -39,15 +56,19 @@ span[class$=-button] {
   @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) {
-    .action-button {
-      padding: 0 13px;
-    }
+    @include responsive-label;
+  }
+}
 
-    .button-label {
-      display: none;
-    }
+@media screen and (max-width: $small-view) {
+  .responsive-label {
+    @include responsive-label;
   }
 }