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