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

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