client/src/app/shared/shared-user-subscription/subscribe-button.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .btn-group-subscribe {
   5   @include peertube-button;
   6
   7   padding: 0;
   8
   9   button.dropdown-toggle {
  10     font-size: $button-font-size;
  11     line-height: 1.2;
  12   }
  13
  14   &:not(.big) {
  15     white-space: nowrap;
  16   }
  17
  18   &.big {
  19     height: 35px;
  20
  21     > button:first-child {
  22       width: max-content;
  23       min-width: 175px;
  24     }
  25
  26     button .extra-text {
  27       span:first-child {
  28         line-height: 80%;
  29       }
  30
  31       span:not(:first-child) {
  32         font-size: 75%;
  33       }
  34     }
  35   }
  36
  37   // Unlogged
  38   > .dropdown > .dropdown-toggle span {
  39     @include padding-right(5px);
  40   }
  41
  42   // Logged
  43   > .btn {
  44     @include padding-right(4px);
  45
  46     + .dropdown > button {
  47       @include padding-left(2px);
  48
  49       &::after {
  50         position: relative;
  51         top: 1px;
  52       }
  53     }
  54   }
  55
  56   &.subscribe-button {
  57     .btn {
  58       @include orange-button;
  59       font-weight: 600;
  60     }
  61
  62     span.followers-count {
  63       @include padding-left(5px);
  64     }
  65   }
  66
  67   &.unsubscribe-button {
  68     .btn {
  69       @include grey-button;
  70
  71       font-weight: 600;
  72     }
  73   }
  74
  75   .dropdown-menu {
  76     cursor: default;
  77
  78     button {
  79       cursor: pointer;
  80     }
  81
  82     .dropdown-item {
  83       @media screen and (max-width: $mobile-view) {
  84         white-space: normal;
  85       }
  86     }
  87
  88     .dropdown-item-neutral {
  89       cursor: default;
  90
  91       &:hover,
  92       &:focus {
  93         background-color: inherit;
  94       }
  95     }
  96   }
  97
  98   ::ng-deep form {
  99     padding: 0.25rem 1rem;
 100   }
 101
 102   input {
 103     @include peertube-input-text(100%);
 104   }
 105 }
 106
 107 .extra-text {
 108   display: flex;
 109   flex-direction: column;
 110
 111   span:first-child {
 112     line-height: 75%;
 113   }
 114
 115   span:not(:first-child) {
 116     font-size: 60%;
 117     text-align: start;
 118   }
 119 }