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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .action-button {
   5   @include peertube-button-link;
   6
   7   font-size: 15px;
   8   font-weight: $font-semibold;
   9   color: #585858;
  10   background-color: #E5E5E5;
  11
  12   &:hover {
  13     background-color: #EFEFEF;
  14   }
  15
  16   .icon {
  17     @include icon(21px);
  18
  19     position: relative;
  20     top: -2px;
  21
  22     &.icon-edit {
  23       background-image: url('../../../assets/images/global/edit-grey.svg');
  24     }
  25
  26     &.icon-delete-grey {
  27       background-image: url('../../../assets/images/global/delete-grey.svg');
  28     }
  29
  30     &.icon-im-with-her {
  31       background-image: url('../../../assets/images/global/im-with-her.svg');
  32     }
  33
  34     &.icon-tick {
  35       background-image: url('../../../assets/images/global/tick.svg');
  36     }
  37
  38     &.icon-cross {
  39       background-image: url('../../../assets/images/global/cross.svg');
  40     }
  41   }
  42 }
  43
  44 // In a table, try to minimize the space taken by this button
  45 @media screen and (max-width: 1400px) {
  46   :host-context(td) {
  47     .action-button {
  48       padding: 0 13px;
  49     }
  50
  51     .button-label {
  52       display: none;
  53     }
  54   }
  55 }