Move to sass module

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

diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
index b739c5ae29a9d07109f59628a7015d8fb2643980..da8eaf646307187e4d616d7b4fcd6296ae2bd2df 100644 (file)
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables' as *;
+@use '_mixins' as *;
 
 .btn-group-subscribe {
   @include peertube-button;
@@ -8,8 +8,8 @@
   float: right;
   padding: 0;
 
-  & > .btn,
-  & > .dropdown > .dropdown-toggle {
+  > .btn,
+  > .dropdown > .dropdown-toggle {
     font-size: 15px;
   }
 
@@ -20,15 +20,16 @@
   &.big {
     height: 35px;
 
-    & > button:first-child {
-      width: 175px;
+    > button:first-child {
+      width: max-content;
+      min-width: 175px;
     }
 
     button .extra-text {
       span:first-child {
         line-height: 80%;
       }
-    
+
       span:not(:first-child) {
         font-size: 75%;
       }
@@ -36,16 +37,16 @@
   }
 
   // Unlogged
-  & > .dropdown > .dropdown-toggle span {
-    padding-right: 3px;
+  > .dropdown > .dropdown-toggle span {
+    @include padding-right(3px);
   }
 
   // Logged
-  & > .btn {
-    padding-right: 4px;
+  > .btn {
+    @include padding-right(4px);
 
-    & + .dropdown > button {
-      padding-left: 2px;
+    + .dropdown > button {
+      @include padding-left(2px);
 
       &::after {
         position: relative;
@@ -61,7 +62,7 @@
     }
 
     span.followers-count {
-      padding-left: 5px;
+      @include padding-left(5px);
     }
   }
   &.unsubscribe-button {
@@ -107,6 +108,6 @@
 
   span:not(:first-child) {
     font-size: 60%;
-    text-align: left;
+    text-align: start;
   }
 }