client/src/app/shared/shared-main/buttons/button.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 @mixin responsive-label {
   5   .action-button {
   6     padding: 0 13px;
   7   }
   8
   9   .button-label {
  10     display: none;
  11   }
  12 }
  13
  14 :host {
  15   outline: none;
  16   display: inline-block;
  17 }
  18
  19 my-small-loader ::ng-deep .root {
  20   display: inline-block;
  21   margin: 0 3px 0 0;
  22   width: 20px;
  23 }
  24
  25 a[class$=-button],
  26 span[class$=-button] {
  27   > span {
  28     @include margin-left(5px);
  29   }
  30 }
  31
  32 .action-button {
  33   @include peertube-button-link;
  34   @include button-with-icon(21px);
  35
  36   width: 100%; // useful for ellipsis, allow to define a max-width on host component
  37
  38   &.icon-only {
  39     my-global-icon {
  40       margin: 0;
  41     }
  42   }
  43 }
  44
  45 .orange-button {
  46   @include peertube-button;
  47   @include orange-button;
  48 }
  49
  50 .orange-button-link {
  51   @include peertube-button-link;
  52   @include orange-button;
  53 }
  54
  55 .grey-button {
  56   @include peertube-button;
  57   @include grey-button;
  58 }
  59
  60 .grey-button-link {
  61   @include peertube-button-link;
  62   @include grey-button;
  63 }
  64
  65 .button-label {
  66   @include ellipsis;
  67 }
  68
  69 // In a table, try to minimize the space taken by this button
  70 @media screen and (max-width: 1400px) {
  71   :host-context(td) {
  72     @include responsive-label;
  73   }
  74 }
  75
  76 @media screen and (max-width: $small-view) {
  77   .responsive-label {
  78     @include responsive-label;
  79   }
  80 }