Merge branch 'release/1.4.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / user-subscription / subscribe-button.component.scss

diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index b78d2f59cd53b27d482341f9172c7fe8a5b7a709..92a28aad9af4ee765e7de69945b42730528157da 100644 (file)
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -1,51 +1,71 @@
 @import '_variables';
 @import '_mixins';
 
-.subscribe-button {
+.btn-group-subscribe {
   @include peertube-button;
-  @include orange-button;
-}
-
-.unsubscribe-button {
-  @include peertube-button;
-  @include grey-button
-}
+  @include disable-default-a-behaviour;
 
-.subscribe-button,
-.unsubscribe-button {
-  display: inline-block;
+  float: right;
+  padding: 0;
 
-  &.small {
-    min-width: 75px;
-    height: 20px;
-    line-height: 20px;
-    font-size: 13px;
+  & > .btn,
+  & > .dropdown > .dropdown-toggle {
+    font-size: 15px;
   }
 
-  &.normal {
-    min-width: 120px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 16px;
+  // Unlogged
+  & > .dropdown > .dropdown-toggle span {
+    padding-right: 3px;
   }
-}
 
-.unsubscribe-button {
-  .subscribed {
-    display: inline;
-  }
+  // Logged
+  & > .btn {
+    padding-right: 4px;
 
-  .unsubscribe {
-    display: none;
+    & + .dropdown > button {
+      padding-left: 2px;
+
+      &::after {
+        position: relative;
+        top: 1px;
+      }
+    }
   }
 
-  &:hover {
-    .subscribed {
-      display: none;
+  &.subscribe-button {
+    .btn {
+      @include orange-button;
+      font-weight: 600;
     }
 
-    .unsubscribe {
-      display: inline;
+    span.followers-count {
+      padding-left: 5px;
     }
   }
-}
\ No newline at end of file
+  &.unsubscribe-button {
+    .btn {
+      @include grey-button;
+      font-weight: 600;
+    }
+  }
+
+  .dropdown-menu {
+    cursor: default;
+
+    button {
+      cursor: pointer;
+    }
+  }
+
+  .dropdown-header {
+    padding-left: 1rem;
+  }
+
+  ::ng-deep form {
+    padding: 0.25rem 1rem;
+  }
+
+  input {
+    @include peertube-input-text(100%);
+  }
+}