Move to sass @use

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-settings / my-account-notification-preferences / my-account-notification-preferences.component.scss

diff --git a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
index 6feb16ab1521ee2e6b4f27198495eae9caaa798c..f35d15f935fc30843112d98b6d1e3717683707a6 100644 (file)
--- a/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss
@@ -1,25 +1,27 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .custom-row {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
+  border-bottom: 1px solid $separator-border-color;
 
   &:first-child {
     font-size: 16px;
-
-    & > div {
-      font-weight: $font-semibold;
-    }
   }
 
-  & > div {
-    width: 350px;
-  }
+  > div {
+    padding: 10px;
 
-  & > div {
-    padding: 10px
+    &:first-child {
+      width: 350px;
+    }
+
+    @media screen and (max-width: #{breakpoint(sm)}) {
+      &:first-child {
+        width: auto;
+        flex-grow: 1;
+      }
+    }
   }
 }
-