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

   1 @use '_variables';
   2 @use '_mixins';
   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 }
  17
  18 my-small-loader ::ng-deep .root {
  19   display: inline-block;
  20   margin: 0 3px 0 0;
  21   width: 20px;
  22 }
  23
  24 a[class$=-button],
  25 span[class$=-button] {
  26   > span {
  27     @include margin-left(5px);
  28   }
  29 }
  30
  31 .action-button {
  32   @include peertube-button-link;
  33   @include button-with-icon(21px);
  34 }
  35
  36 .orange-button {
  37   @include peertube-button;
  38   @include orange-button;
  39 }
  40
  41 .orange-button-link {
  42   @include peertube-button-link;
  43   @include orange-button;
  44 }
  45
  46 .grey-button {
  47   @include peertube-button;
  48   @include grey-button;
  49 }
  50
  51 .grey-button-link {
  52   @include peertube-button-link;
  53   @include grey-button;
  54 }
  55
  56 // In a table, try to minimize the space taken by this button
  57 @media screen and (max-width: 1400px) {
  58   :host-context(td) {
  59     @include responsive-label;
  60   }
  61 }
  62
  63 @media screen and (max-width: $small-view) {
  64   .responsive-label {
  65     @include responsive-label;
  66   }
  67 }