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   my-loader {
  33     @include margin-right(3px);
  34
  35     display: inline-flex;
  36     vertical-align: middle;
  37     margin-top: -1px;
  38   }
  39
  40   &.has-icon {
  41     @include button-with-icon(21px);
  42   }
  43
  44   &.icon-only my-global-icon {
  45     margin: 0 !important;
  46   }
  47 }
  48
  49 .orange-button,
  50 .grey-button {
  51   @include peertube-button;
  52 }
  53
  54 .orange-button-link,
  55 .grey-button-link {
  56   @include peertube-button-link;
  57 }
  58
  59 .orange-button,
  60 .orange-button-link {
  61   @include orange-button;
  62 }
  63
  64 .grey-button,
  65 .grey-button-link {
  66   @include grey-button;
  67 }
  68
  69 .button-label {
  70   @include ellipsis;
  71 }
  72
  73 // In a table, try to minimize the space taken by this button
  74 @media screen and (max-width: 1400px) {
  75   :host-context(td) {
  76     @include responsive-label;
  77   }
  78 }
  79
  80 @media screen and (max-width: $small-view) {
  81   .responsive-label {
  82     @include responsive-label;
  83   }
  84 }