Merge pull request #51 from OpenLMIS/OIS-24

OIS-24: improved styles that were not supporting RTL
OpenLMIS · Sep 9, 2024 · f53b35a · f53b35a
2 parents 5d65df3 + 645523d
commit f53b35a
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 19 deletions.
diff --git a/src/requisition-batch-approval/_requisition-batch-approval.scss b/src/requisition-batch-approval/_requisition-batch-approval.scss
@@ -20,7 +20,8 @@
     }
 
     h2 {
-        margin: 0px $space-size $space-size/2;
+        margin-bottom: $space-size/2;
+        @include margin-right($space-size);
         border-bottom: 1px $border-color solid;
     }
 

diff --git a/src/requisition-losses-and-adjustments/_losses-and-adjustment.scss b/src/requisition-losses-and-adjustments/_losses-and-adjustment.scss
@@ -7,7 +7,7 @@
         content: '\f044';
         font-family: 'FontAwesome';
         font-weight: normal;
-        margin-right: auto;
+        @include margin-right(auto);
     }
 
     &:hover {

diff --git a/src/requisition-order-create/order-create.scss b/src/requisition-order-create/order-create.scss
@@ -40,7 +40,7 @@
 
   .page-footer {
     button {
-      margin-right: 1em;
+      @include margin-right(1em);
     }
 
     justify-content: flex-end;
@@ -61,7 +61,7 @@
           font-family: 'FONTAWESOME';
           content: '\f0d7'; // fa-caret-down
           position: absolute;
-          left: 1em;
+          @include left(1em);
           color: $light-grey;
           top: 50%;
           transform: translateY(-50%);
@@ -72,7 +72,7 @@
           border: 1px solid $light-grey;
           background-color: inherit;
           border-radius: 4px;
-          padding: 0.5em 0.5em 0.5em 2em;
+          @include padding(0.5em, 0.5em, 0.5em, 2em);
 
           &:focus {
             outline: none;
@@ -82,7 +82,7 @@
         }
 
         .clear-icon {
-          margin-left: -2em;
+          @include margin-left(-2em);
           color: $light-grey;
 
           &:hover {
@@ -136,7 +136,7 @@
             font: inherit;
             outline: inherit;
             padding: 0.5em;
-            text-align: left;
+            @include text-align(left);
             width: 100%;
 
             &.is-selected {

diff --git a/src/requisition-product-grid/_product-grid.scss b/src/requisition-product-grid/_product-grid.scss
@@ -17,7 +17,7 @@
 
 	button.add-product {
 		@include button($green);
-		float: right;
+		@include float(right);
 	}
 
 	button.hide-line-item {
@@ -32,6 +32,6 @@
 
 .requisition-product-grid-cell {
 	&.has-popover {
-		padding-right: 2em !important;
+		@include padding-right(2em);
 	}
 }
diff --git a/src/requisition-summary/_requisition-summary.scss b/src/requisition-summary/_requisition-summary.scss
@@ -19,12 +19,13 @@ aside.requisition-summary {
     }
     > dl{
         justify-content: flex-end;
-        padding: 0 $space-size 0 0;
+        padding: 0;
+        @include padding-right($space-size);
         > dt {
             width: auto;
             position: relative;
             top: 0;
-            margin-right: 0.5em;
+            @include margin-right(0.5em);
         }
         > dd{
             flex-grow: 0;
@@ -51,6 +52,6 @@ aside.requisition-summary {
     dl > dd {
         flex: 0 0 auto;
         white-space: nowrap;
-        text-align: right;
+        @include text-align(right);
     }
 }
diff --git a/src/requisition-view/_requisition-header.scss b/src/requisition-view/_requisition-header.scss
@@ -14,7 +14,7 @@
         li {
             display: flex;
             flex-direction: column;
-            padding-right: 2em;
+            @include padding-right(2em);
             padding-bottom: 0.2em;
         }
 

diff --git a/src/requisition-view/_requisition-view.scss b/src/requisition-view/_requisition-view.scss
@@ -7,7 +7,7 @@
         content: '\f044';
         font-family: 'FontAwesome';
         font-weight: normal;
-        margin-right: auto;
+        @include margin-right(auto);
     }
 
     &:hover {
@@ -28,23 +28,23 @@
 .totalSupplementalFund dt {
     font-weight: bold;
     width: 35%;
-    float: left;
+    @include float(left);
 }
 
 #amount, #remaining {
- text-align: right;
+    @include text-align(right);
 }
 
 .nav > li.is-invalid.has-popover > a {
-    padding-right: 2em !important;
+    @include padding-right(2em);
     @include icon("exclamation-circle");
     &::before{
         position: absolute;
         top: 50%;
-        right: 0.5em;
+        @include right(0.5em);
         transform: translateY(-50%);
         color: $brand-danger;
-        border-left: none;
+        @include border-left(none);
     }
 }