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