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