client/src/app/shared/shared-main/buttons/action-dropdown.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .dropdown-divider:last-child {
   5   display: none;
   6 }
   7
   8 .action-button {
   9   @include peertube-button;
  10
  11   display: inline-block;
  12
  13   &.button-styled {
  14
  15     &.grey {
  16       @include grey-button;
  17     }
  18
  19     &.orange {
  20       @include orange-button;
  21     }
  22
  23     &:hover,
  24     &:active,
  25     &:focus {
  26       background-color: $grey-background-color;
  27     }
  28   }
  29
  30   &::after {
  31     display: none;
  32   }
  33
  34   .more-icon {
  35     width: 21px;
  36
  37     ::ng-deep {
  38       @include apply-svg-color(pvar(--actionButtonColor));
  39     }
  40   }
  41
  42   &.small {
  43     font-size: 14px;
  44     height: 20px;
  45     line-height: 20px;
  46   }
  47 }
  48
  49 .dropdown-toggle::after {
  50   position: relative;
  51   top: 1px;
  52 }
  53
  54 .dropdown-menu {
  55   max-width: 75vw;
  56
  57   .dropdown-header {
  58     padding: 0.2rem 1rem;
  59   }
  60
  61   .dropdown-item {
  62     display: flex;
  63     cursor: pointer;
  64
  65     &.with-icon {
  66       @include dropdown-with-icon-item;
  67     }
  68
  69     a,
  70     span {
  71       display: block;
  72       width: 100%;
  73     }
  74   }
  75 }
  76
  77 .item-label {
  78   display: flex;
  79   flex-direction: column;
  80   min-width: 1px;
  81
  82   > * {
  83     @include ellipsis;
  84   }
  85 }