feat(admin-ui): Add rtl styles of LoginComponent

vendure-ecommerce · Oct 18, 2023 · b75b529 · b75b529
1 parent f35acdc
commit b75b529
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/packages/admin-ui/src/lib/login/src/components/login/login.component.scss b/packages/admin-ui/src/lib/login/src/components/login/login.component.scss
@@ -10,6 +10,8 @@
     padding: 20px;
 
     .login-wrapper-inner {
+
+
         background: #fff;
         width: 1120px;
         height: 590px;
@@ -53,8 +55,8 @@
                 left: 0;
                 bottom: 0;
                 z-index: 10;
-                background: rgb(2,0,36);
-                background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.75) 100%);
+                background: rgb(2, 0, 36);
+                background: linear-gradient(180deg, rgba(2, 0, 36, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;
@@ -74,13 +76,14 @@
 
                 .login-wrapper-image-copyright {
                     opacity: 0.8;
+
                     p {
                         font-size: 0.6rem;
                         color: white;
                         margin: 0 !important;
                     }
 
-                    a{
+                    a {
                         color: white;
                         text-decoration: underline;
                     }
@@ -96,7 +99,7 @@
             flex-direction: column;
             align-items: stretch;
             justify-content: center;
-            box-shadow: 0px 20px 25px rgba(0,0,0,0.1);
+            box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.1);
             overflow: hidden;
             border-radius: 5px;
             flex-shrink: 0;
@@ -182,6 +185,7 @@
 }
 
 @keyframes shake {
+
     10%,
     90% {
         transform: translate3d(-1px, 0, 0);
@@ -203,3 +207,19 @@
         transform: translate3d(4px, 0, 0);
     }
 }
+
+.login-wrapper[dir="rtl"] {
+    .login-wrapper-inner {
+        .login-wrapper-logo {
+            right: auto;
+            left: 20px;
+        }
+
+        .login-wrapper-image {
+            .login-wrapper-image-content {
+                left: auto;
+                right: 0;
+            }
+        }
+    }
+}