UX: Update mobile site setting slide-out nav for RTL

discourse · Feb 11, 2020 · d73e94b · d73e94b · discoursebot · Feb 11, 2020
1 parent adbff58
commit d73e94b
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
@@ -90,3 +90,33 @@
   border-right: 1px solid #cfcfcf;
   border-left: none !important;
 }
+
+.rtl {
+  $mobile-breakpoint: 700px;
+
+  .admin-detail.mobile-open {
+    @media (max-width: $mobile-breakpoint) {
+      transition: transform 0.3s ease;
+      @include transform(translateX(-250px));
+    }
+    @media (max-width: 500px) {
+      transition: transform 0.3s ease;
+      @include transform(translateX(-50%));
+    }
+  }
+
+  .admin-detail.mobile-closed {
+    @media (max-width: $mobile-breakpoint) {
+      transition: transform 0.3s ease;
+      @include transform(translateX(0));
+      margin-left: -10px !important;
+      padding-left: 10px !important;
+    }
+  }
+
+  .admin-nav {
+    .nav-stacked {
+      margin: 0 -10px 0 10px !important;
+    }
+  }
+}