OIS-24: applied mixins in order to support RTL

OpenLMIS · Sep 9, 2024 · 728f8da · 728f8da
1 parent fee89d6
commit 728f8da
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 167 deletions.
diff --git a/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss b/src/admin-buq/components/AdminBuqForm/_admin-buq-form.scss
@@ -1,3 +1,5 @@
+@import '../../../common/mixins';
+
 $accent-color: #49baeb;
 $light-grey: #bebebe;
 
@@ -77,10 +79,10 @@ $light-grey: #bebebe;
       content: "\f06a";
       font-family: FontAwesome;
       display: inline-block;
-      margin-left: -2em;
+      @include margin-left(-2em);
       margin-top: 0.5em;
       position: fixed;
-      text-align: right;
+      @include text-align(right);
     }
   }
 

diff --git a/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss b/src/admin-buq/components/AdminBuqPage/_admin-buq-page.scss
@@ -1,5 +1,4 @@
 .admin-buq {
-
     .admin-buq-row {
         display: flex;
         flex-direction: row;
@@ -9,7 +8,7 @@
         margin-right: 0px;
     }
 
-      .admin-buq-main {
+    .admin-buq-main {
         overflow: auto;
         display: flex;
         flex-direction: column;
@@ -27,9 +26,9 @@
         padding: 1em 2em;
 
         .breadcrumb {
-          padding-left: 0;
-          padding-top: 0;
-          font-size: 14px;
+            @include padding-left(0);
+            padding-top: 0;
+            font-size: 14px;
         }
     }
 
@@ -40,23 +39,23 @@
     }
 
     .admin-buq-navigation {
-        border-bottom: #D9D9D9 1px solid;
+        border-bottom: #d9d9d9 1px solid;
         margin-bottom: 1em;
         list-style: none;
         display: flex;
-        padding-left: 0;
+        @include padding-left(0);
 
         .admin-buq-link {
-            background-color: #E4E4E4;
+            background-color: #e4e4e4;
             padding: 10px 15px;
             border-radius: 4px 4px 0 0;
-            margin-right: 2px;
+            @include margin-right(2px);
             cursor: pointer;
         }
 
         .admin-buq-link.active {
-            background-color: #FFFFFF;
-            border: #D9D9D9 1px solid;
+            background-color: #ffffff;
+            border: #d9d9d9 1px solid;
             border-bottom: none;
             color: $link-color;
         }
@@ -84,8 +83,8 @@
     }
 
     .admin-buq-table-add-button {
-        margin-right: 5px;
-        margin-left: auto;
+        @include margin-right(5px);
+        @include margin-left(auto);
     }
 }
 

diff --git a/src/admin-buq/components/Modal/_modal.scss b/src/admin-buq/components/Modal/_modal.scss
@@ -1,28 +1,28 @@
 .modal {
     position: fixed;
     top: 0;
-    left: 0;
+    @include left(0);
     width:100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
   }
-    
+
   .modal-main {
     position:fixed;
     background: white;
     height: auto;
     top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
+    @include left(50%);
+    //TODO: apply here a mixin once the ui-components is merged translate-xy(-50%,-50%);
+    transform: translate(-50%, -50%);
     width: 600px;
     margin: 30px auto;
   }
-    
+
   .display-block {
     display: block;
   }
-    
+
   .display-none {
     display: none;
   }
-
diff --git a/src/admin-data-import/_admin-data-import.scss b/src/admin-data-import/_admin-data-import.scss
@@ -69,10 +69,7 @@ input::file-selector-button {
   display: block;
   padding: 8px 16px;
   border-radius: 4px;
-  border-top: #e4e4e4 1px solid;
-  border-right: #e4e4e4 1px solid;
-  border-left: #e4e4e4 1px solid;
-  border-bottom: #e4e4e4 1px solid;
+  border: #e4e4e4 1px solid;
   color: #333333;
   text-shadow: 0 0 0.1em #ffffff;
   background: #e4e4e4 linear-gradient(to bottom, #fefefe, #f1f1f1 10%, #e4e4e4);

diff --git a/src/admin-role-form/_type-form.scss b/src/admin-role-form/_type-form.scss
@@ -14,7 +14,7 @@ dl.type-form {
 
     dd {
         flex: 1 1 calc(100% - 200px - 1em);
-        margin-left: 1em;
+        @include margin-left(1em);
     }
 
     & > dt:not(:first-of-type),

diff --git a/src/admin-user-form/_user-password-modal.scss b/src/admin-user-form/_user-password-modal.scss
@@ -2,7 +2,7 @@
 
     //Hack to bypass classes set by the ngModel validation
     input[type=password].number {
-        text-align: left;
+        @include text-align(left);
     }
 
 }
diff --git a/src/buq/_buq.scss b/src/buq/_buq.scss
@@ -10,7 +10,7 @@
     padding: 1em 2em;
 
     .breadcrumb {
-      padding-left: 0;
+      @include padding-left(0);
       font-size: 14px;
     }
   }
@@ -42,7 +42,7 @@
     .suggestions-results {
       z-index: 1;
       position: absolute;
-      left: 0;
+      @include left(0);
       max-height: 7em;
     }
   }
@@ -66,13 +66,13 @@
   white-space: break-spaces;
   transform: translate(-30%, 115%);
   bottom: 0;
-  padding: 8px 15px 8px 8px;
+  @include padding(8px, 15px, 8px, 8px);
   height: fit-content;
   width: 200px;
 
   &:before {
     top: -25%;
-    left: 28%;
+    @include left(28%);
     border-width: 8px;
     border-color: transparent transparent #fff transparent;
   }

diff --git a/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss b/src/buq/components/createAuthorizeForecasting/_createAuthorizeForecasting.scss
@@ -14,7 +14,7 @@
     margin-top: 16px;
 
     th {
-      padding-right: 48px;
+      @include padding-right(48px);
     }
 
     .proceed {

diff --git a/src/buq/components/prepareBuq/_prepare-buq-page.scss b/src/buq/components/prepareBuq/_prepare-buq-page.scss
@@ -28,10 +28,10 @@
         &.is-required:after {
             color: $brand-danger;
             content: '*';
-            margin-left: 0.25em;
+            @include margin-left(0.25em);
         }
     }
-    
+
     .prepare-buq-button {
         width: 100%;
         display: flex;
@@ -56,19 +56,19 @@
         border: 0;
         background: #ffffff;
         padding: 1em 2em;
-    
+
         .breadcrumb {
           padding-top: 1.5em;
-          padding-left: 0;
+          @include padding-left(0);
           font-size: 14px;
         }
     }
-    
+
     .prepare-buq-page-title {
         border-bottom: #bebebe 1px solid;
         padding: 3.2px 0em;
     }
-    
+
     .prepare-buq-table-actions {
         display: flex;
         justify-content: center;
@@ -107,7 +107,7 @@
 
         .comments-input-title {
             margin-bottom: 3px;
-            margin-left: 5px;
+            @include margin-left(5px);
         }
     }
 
@@ -135,7 +135,7 @@
         .react-table{
             th{
                 white-space: nowrap;
-                padding-right: 8px;
+                @include padding-right(8px);
             }
         }
     }
@@ -219,10 +219,10 @@
         &.is-required:after {
             color: $brand-danger;
             content: '*';
-            margin-left: 0.25em;
+            @include margin-left(0.25em);
         }
     }
-    
+
     .approve-buq-button {
         width: 100%;
         display: flex;