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