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