From 89c3f1081b04a411d5cab39d2af98c4cadbafd49 Mon Sep 17 00:00:00 2001
From: Dominik Noga <100417131+DominikNoga@users.noreply.github.com>
Date: Mon, 9 Sep 2024 16:59:42 +0200
Subject: [PATCH] OIS-24: change styling to support RTL (#40)

* OIS-24: change styling to support RTL

* Test if the build goes when importing mixins
---
 src/common/_alerts.scss                       |  10 +-
 src/common/_aside.scss                        |   6 +-
 src/common/_base.scss                         |   6 +-
 src/common/_breadcrumbs.scss                  |  31 +-
 src/common/_buttons.scss                      |   6 +-
 src/common/_dropdown.scss                     |   4 +-
 .../_facility-approved-product-table.scss     |   2 +-
 src/common/_headers.scss                      |   2 +-
 src/common/_horizontal-definition-list.scss   |   6 +-
 src/common/_icon.mixins.scss                  |   6 +-
 src/common/_layout.scss                       |   7 +-
 src/common/_loading-view.scss                 |   6 +-
 src/common/_mixins.scss                       | 420 ++++++++++--------
 src/common/_nav-tabs.scss                     |   6 +
 src/common/_openlmis-toolbar.scss             |  21 +-
 src/common/_page-hero.scss                    |   6 +-
 .../_adjustments-modal.scss                   |   4 +-
 .../_openlmis-cron-selection.scss             |   4 +-
 src/openlmis-file-upload/_file-upload.scss    |   6 +-
 src/openlmis-form/_form-errors.scss           |  10 +-
 src/openlmis-form/_form-inline.scss           |   8 +-
 src/openlmis-form/_form-toolbar.scss          |   8 +-
 src/openlmis-form/_form.scss                  | 144 +++---
 src/openlmis-form/_input-control.scss         |   4 +-
 src/openlmis-form/_openlmis-datepicker.scss   |   2 +-
 src/openlmis-form/_saving-indicator.scss      |   2 +-
 src/openlmis-form/_select-select2.scss        |  11 +-
 src/openlmis-form/_select.scss                |   4 +-
 src/openlmis-modal/_alert.scss                |   1 -
 src/openlmis-modal/_loading-modal.scss        |   2 +-
 src/openlmis-modal/_modal.scss                |   2 +-
 src/openlmis-modal/_notification.scss         |  18 +-
 src/openlmis-offline/_offline.scss            |   2 +-
 .../_openlmis-pagination.scss                 |  10 +-
 src/openlmis-popover/_popover.scss            |  14 +-
 src/openlmis-sort/_openlmis-sort.scss         |   4 +-
 .../_openlmis-table-filters.scss              |   4 +-
 src/openlmis-table-form/_table-forms.scss     |  39 +-
 .../_openlmis-table-container.scss            |   4 +-
 src/openlmis-table/_openlmis-table-pane.scss  | 222 ++++-----
 src/openlmis-table/_sticky.scss               |   8 +-
 src/openlmis-table/_table-captions.scss       |   1 +
 src/openlmis-table/_tables.scss               |   9 +-
 src/openlmis-table/_tr-empty.scss             |   2 +-
 src/react-components/_react-components.scss   | 357 +++++++--------
 45 files changed, 778 insertions(+), 673 deletions(-)
 create mode 100644 src/common/_nav-tabs.scss

diff --git a/src/common/_alerts.scss b/src/common/_alerts.scss
index a3e15a59..85bb98fa 100644
--- a/src/common/_alerts.scss
+++ b/src/common/_alerts.scss
@@ -1,3 +1,5 @@
+@import './mixins';
+
 /*
 Alerts
 
@@ -52,12 +54,12 @@ Styleguide 1.6
 	&.is-error,
 	&.is-danger,
 	&.is-offline {
-		padding-left: 4em;
+		@include padding-left(4em);
 		&::before {
 			font-size: 2em;
 			position: absolute;
 			top: 50%;
-			left: 0.5em;
+			@include left(0.5em);
 			transform: translateY(-50%);
 		}
 	}
@@ -65,7 +67,7 @@ Styleguide 1.6
 	&.is-offline {
 		&::before {
 			color: $brand-offline;
-			left: 0.75em;
+			@include left(0.75em);
 		}
 	}
 
@@ -74,7 +76,7 @@ Styleguide 1.6
 	}
 
 	> button {
-		float: right;
+		@include float(right);
 		margin-top: -0.5em;
 		margin-bottom: -0.5em;
 	}
diff --git a/src/common/_aside.scss b/src/common/_aside.scss
index 7ec0f876..1584d207 100644
--- a/src/common/_aside.scss
+++ b/src/common/_aside.scss
@@ -8,7 +8,7 @@
     > button.close {
         position: absolute;
         top: 0em;
-        right: 0em;
+        @include right(0em);
     }
 
     dl {
@@ -28,10 +28,10 @@
 
     dd {
         flex: 1 0 auto;
-        padding-right: 1em;
+        @include padding-right(1em);
 
         &:last-child {
-            padding-right: 0;
+            @include padding-right(0);
         }
     }
 }
diff --git a/src/common/_base.scss b/src/common/_base.scss
index 959b22e9..afe0a60f 100644
--- a/src/common/_base.scss
+++ b/src/common/_base.scss
@@ -21,7 +21,7 @@ body {
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding-right:0 !important; // this stops adding the padding to body when modal is closed on low resolution screens
+  @include padding-right-important(0);// this stops adding the padding to body when modal is closed on low resolution screens
 }
 
 a {
@@ -43,7 +43,7 @@ ul {
   margin-bottom: 0px; // resetting bootstrap value
 }
 
-@keyframes(fade-in) {
+@keyframes fade-in {
   from {
     transform: scale(0);
   }
@@ -52,7 +52,7 @@ ul {
   }
 }
 
-@keyframes(fade-out) {
+@keyframes fade-out {
   from {
     transform: scale(1);
   }
diff --git a/src/common/_breadcrumbs.scss b/src/common/_breadcrumbs.scss
index 3d735576..aee28d0d 100644
--- a/src/common/_breadcrumbs.scss
+++ b/src/common/_breadcrumbs.scss
@@ -15,13 +15,42 @@ markup:
 Styleguide 2.1
 */
 
+@mixin breadcrumb-no-before() {
+    [dir="ltr"] & {
+        > li:first-child {
+			&::before {
+				display: none;
+			}
+		}
+    }
+    [dir="rtl"] & {
+        > li:first-child {
+			&::before {
+				display: none;
+			}
+		}
+    }
+}
+
+@mixin breadcrumb-before-content() {
+    [dir="ltr"] & {
+        content: '/ ';
+    }
+    [dir="rtl"] & {
+        content: '\\ ';
+    }
+}
+
 .breadcrumb {
 	background-color: transparent;
 	padding: $space-size/4 0px;
 	margin-bottom: 0px;
-	> li + li{
+	> li {
 		&::before{
+			@include breadcrumb-before-content();
 			padding: 0px 0.5em;
 		}
 	}
+
+	@include breadcrumb-no-before();
 }
diff --git a/src/common/_buttons.scss b/src/common/_buttons.scss
index bb11e695..818ccc89 100644
--- a/src/common/_buttons.scss
+++ b/src/common/_buttons.scss
@@ -1,3 +1,5 @@
+@import './mixins';
+
 /*
 Buttons
 
@@ -117,13 +119,13 @@ button.close {
     > button {
         display: block;
         margin: 0px 0.5em;
-        float: left;
+        @include float(left);
     }
 
     > .is-primary,
     > .button-group.primary,
     > button.primary {
-        float: right;
+        @include float(right);
     }
 
     > a {
diff --git a/src/common/_dropdown.scss b/src/common/_dropdown.scss
index d615cf85..a34ed62e 100644
--- a/src/common/_dropdown.scss
+++ b/src/common/_dropdown.scss
@@ -23,13 +23,13 @@
     }
 
     > ul {
-        margin-right: 1em;
+        @include margin-right(1em);
         /* Arrow up */
         &::before {
             content: "";
             position:absolute;
             top: -0.4em;
-            left: 2.2em;
+            @include left(2.2em);
             width: 0em;
             height: 0em;
             border-left: 0.4em solid transparent;
diff --git a/src/common/_facility-approved-product-table.scss b/src/common/_facility-approved-product-table.scss
index a448555c..40ee012a 100644
--- a/src/common/_facility-approved-product-table.scss
+++ b/src/common/_facility-approved-product-table.scss
@@ -34,6 +34,6 @@
     color: $red;
   }
   input.btn-danger {
-    margin-left: 3px;
+    @include margin-left(3px);
   }
 }
diff --git a/src/common/_headers.scss b/src/common/_headers.scss
index 63dbe88a..2484c73e 100644
--- a/src/common/_headers.scss
+++ b/src/common/_headers.scss
@@ -109,7 +109,7 @@ header.sub-heading {
             display: block;
             position: absolute;
             top: 50%;
-            left: 0px;
+            @include left(0px);
             z-index: -1;
             width: 100%;
             border-bottom: $heading-border-color 1px solid;
diff --git a/src/common/_horizontal-definition-list.scss b/src/common/_horizontal-definition-list.scss
index bb792d9d..e84fb65a 100644
--- a/src/common/_horizontal-definition-list.scss
+++ b/src/common/_horizontal-definition-list.scss
@@ -1,13 +1,13 @@
 dl.horizontal-list {
 
     dt {
-        float: left;
+        @include float(left);
         clear: left;
         font-weight: bold;
     }
 
     dd {
-        margin: 0 0 0 10em;
-        padding: 0 0 0.5em 0;
+        @include margin(0, 0, 0, 10em);
+        @include padding(0, 0, 0.5em, 0);
     }
 }
diff --git a/src/common/_icon.mixins.scss b/src/common/_icon.mixins.scss
index 0ce908ef..6707e825 100644
--- a/src/common/_icon.mixins.scss
+++ b/src/common/_icon.mixins.scss
@@ -20,9 +20,9 @@
     &::before {
         position: absolute;
         top: 50%;
-        left: 50%;
+        @include left(50%);
         text-indent: 0em;
-        transform: translateX(-50%) translateY(-50%);
+        @include translate-xy(-50%, -50%);
     }
 }
 
@@ -39,6 +39,6 @@
 @mixin button-icon($icon) {
     @include icon($icon);
     &::before {
-        margin-right: 0.5em;
+        @include margin-right(.5em);
     }
 }
diff --git a/src/common/_layout.scss b/src/common/_layout.scss
index 22ebdc8b..6f8d853c 100644
--- a/src/common/_layout.scss
+++ b/src/common/_layout.scss
@@ -7,6 +7,9 @@ navigation and readability.
 Styleguide 2.0
 */
 
+* {
+    @include direction();
+}
 
 html {
     height: 100%;
@@ -99,8 +102,8 @@ body {
 
     .sidebar {
         width: $sidebar-width;
-        float: left;
-        margin-right: $margin;
+        @include float(left);
+        @include margin-right($margin);
 
         .select2 {
             // sidebar width minus right margin
diff --git a/src/common/_loading-view.scss b/src/common/_loading-view.scss
index 1cf1fb8a..592bdde1 100644
--- a/src/common/_loading-view.scss
+++ b/src/common/_loading-view.scss
@@ -19,14 +19,14 @@ body.no-js {
 
     position: absolute;
     top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
+    @include left(50%);
+    @include translate-xy(-50%, -50%);
     font-size: $font-size-extra-large;
     color: $white;
     &::before {
         @extend .loading;
         @extend .loading::before;
         font-size: 2em;
-        margin-right: 0.5em;
+        @include margin-right(0.5em);
     }
 }
diff --git a/src/common/_mixins.scss b/src/common/_mixins.scss
index 7edd0377..669719d7 100644
--- a/src/common/_mixins.scss
+++ b/src/common/_mixins.scss
@@ -1,259 +1,305 @@
 @mixin fade-in {
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
     }
-    100% {
-      opacity: 1;
-    }
-  }
 }
 
 @mixin fade-out {
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
+    @keyframes fadeOut {
+        0% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+}
+
+@mixin direction() {
+    [dir="ltr"] & {
+        direction: ltr;
+    }
+    [dir="rtl"] & {
+        direction: rtl;
     }
-    100% {
-      opacity: 0;
+}
+
+@mixin translate-x($value) {
+    [dir="ltr"] & {
+        transform: translateX($value);
+    }
+    [dir="rtl"] & {
+        transform: translateX(-$value);
+    }
+}
+
+@mixin translate-xy($valueX, $valueY) {
+    [dir="ltr"] & {
+        transform: translateX($valueX) translateY($valueY);
+    }
+    [dir="rtl"] & {
+        transform: translateX(-$valueX) translateY($valueY);
     }
-  }
 }
 
 @mixin padding-right($value) {
-  [dir='ltr'] & {
-    padding-right: $value;
-  }
-  [dir='rtl'] & {
-    padding-left: $value;
-  }
+    [dir="ltr"] & {
+        padding-right: $value;
+    }
+    [dir="rtl"] & {
+        padding-left: $value;
+    }
+}
+
+@mixin padding-right-important($value) {
+    [dir="ltr"] & {
+        padding-right: $value !important;
+    }
+    [dir="rtl"] & {
+        padding-left: $value !important;
+    }
 }
 
 @mixin padding-left($value) {
-  [dir='ltr'] & {
-    padding-left: $value;
-  }
-  [dir='rtl'] & {
-    padding-right: $value;
-  }
+    [dir="ltr"] & {
+        padding-left: $value;
+    }
+    [dir="rtl"] & {
+        padding-right: $value;
+    }
 }
 
 @mixin padding-x($value) {
-  [dir='ltr'] & {
-    padding-left: $value;
-    padding-right: $value;
-  }
-  [dir='rtl'] & {
-    padding-left: $value;
-    padding-right: $value;
-  }
+    [dir="ltr"] & {
+        padding-left: $value;
+        padding-right: $value;
+    }
+    [dir="rtl"] & {
+        padding-left: $value;
+        padding-right: $value;
+    }
 }
 
 @mixin padding-yx($padding-y, $padding-x) {
-  padding-top: $padding-y;
-  padding-bottom: $padding-y;
-
-  [dir='ltr'] & {
-    padding-left: $padding-x;
-    padding-right: $padding-x;
-  }
-  [dir='rtl'] & {
-    padding-left: $padding-x;
-    padding-right: $padding-x;
-  }
+    padding-top: $padding-y;
+    padding-bottom: $padding-y;
+
+    [dir="ltr"] & {
+        padding-left: $padding-x;
+        padding-right: $padding-x;
+    }
+    [dir="rtl"] & {
+        padding-left: $padding-x;
+        padding-right: $padding-x;
+    }
 }
 
 @mixin padding($padding-top, $padding-right, $padding-bottom, $padding-left) {
-  padding-top: $padding-top;
-  padding-bottom: $padding-bottom;
-
-  [dir='ltr'] & {
-    padding-left: $padding-left;
-    padding-right: $padding-right;
-  }
-  [dir='rtl'] & {
-    padding-left: $padding-right;
-    padding-right: $padding-left;
-  }
+    padding-top: $padding-top;
+    padding-bottom: $padding-bottom;
+
+    [dir="ltr"] & {
+        padding-left: $padding-left;
+        padding-right: $padding-right;
+    }
+    [dir="rtl"] & {
+        padding-left: $padding-right;
+        padding-right: $padding-left;
+    }
 }
 
 @mixin margin-right($value) {
-  [dir='ltr'] & {
-    margin-right: $value;
-  }
-  [dir='rtl'] & {
-    margin-left: $value;
-  }
+    [dir="ltr"] & {
+        margin-right: $value;
+    }
+    [dir="rtl"] & {
+        margin-left: $value;
+    }
 }
 
 @mixin margin-left($value) {
-  [dir='ltr'] & {
-    margin-left: $value;
-  }
-  [dir='rtl'] & {
-    margin-right: $value;
-  }
+    [dir="ltr"] & {
+        margin-left: $value;
+    }
+    [dir="rtl"] & {
+        margin-right: $value;
+    }
 }
 
 @mixin margin-x($value) {
-  [dir='ltr'] & {
-    margin-left: $value;
-    margin-right: $value;
-  }
-  [dir='rtl'] & {
-    margin-left: $value;
-    margin-right: $value;
-  }
+    [dir="ltr"] & {
+        margin-left: $value;
+        margin-right: $value;
+    }
+    [dir="rtl"] & {
+        margin-left: $value;
+        margin-right: $value;
+    }
 }
 
 @mixin margin-yx($margin-y, $margin-x) {
-  margin-top: $margin-y;
-  margin-bottom: $margin-y;
-
-  [dir='ltr'] & {
-    margin-left: $margin-x;
-    margin-right: $margin-x;
-  }
-  [dir='rtl'] & {
-    margin-left: $margin-x;
-    margin-right: $margin-x;
-  }
+    margin-top: $margin-y;
+    margin-bottom: $margin-y;
+
+    [dir="ltr"] & {
+        margin-left: $margin-x;
+        margin-right: $margin-x;
+    }
+    [dir="rtl"] & {
+        margin-left: $margin-x;
+        margin-right: $margin-x;
+    }
 }
 
 @mixin margin($margin-top, $margin-right, $margin-bottom, $margin-left) {
-  margin-top: $margin-top;
-  margin-bottom: $margin-bottom;
-
-  [dir='ltr'] & {
-    margin-left: $margin-left;
-    margin-right: $margin-right;
-  }
-  [dir='rtl'] & {
-    margin-left: $margin-right;
-    margin-right: $margin-left;
-  }
+    margin-top: $margin-top;
+    margin-bottom: $margin-bottom;
+
+    [dir="ltr"] & {
+        margin-left: $margin-left;
+        margin-right: $margin-right;
+    }
+    [dir="rtl"] & {
+        margin-left: $margin-right;
+        margin-right: $margin-left;
+    }
 }
 
 @mixin border-right($value) {
-  [dir='ltr'] & {
-    border-right: $value;
-  }
-  [dir='rtl'] & {
-    border-left: $value;
-  }
+    [dir="ltr"] & {
+        border-right: $value;
+    }
+    [dir="rtl"] & {
+        border-left: $value;
+    }
+}
+
+@mixin border-right-important($value) {
+    [dir="ltr"] & {
+        border-right: $value !important;
+    }
+    [dir="rtl"] & {
+        border-left: $value !important;
+    }
 }
 
 @mixin border-left($value) {
-  [dir='ltr'] & {
-    border-left: $value;
-  }
-  [dir='rtl'] & {
-    border-right: $value;
-  }
+    [dir="ltr"] & {
+        border-left: $value;
+    }
+    [dir="rtl"] & {
+        border-right: $value;
+    }
+}
+
+@mixin border-left-important($value) {
+    [dir="ltr"] & {
+        border-left: $value !important;
+    }
+    [dir="rtl"] & {
+        border-right: $value !important;
+    }
 }
 
 @mixin border-x($value) {
-  [dir='ltr'] & {
-    border-left: $value;
-    border-right: $value;
-  }
-  [dir='rtl'] & {
-    border-left: $value;
-    border-right: $value;
-  }
+    [dir="ltr"] & {
+        border-left: $value;
+        border-right: $value;
+    }
+    [dir="rtl"] & {
+        border-left: $value;
+        border-right: $value;
+    }
 }
 
 @mixin border-yx($border-y, $border-x) {
-  border-top: $border-y;
-  border-bottom: $border-y;
-
-  [dir='ltr'] & {
-    border-left: $border-x;
-    border-right: $border-x;
-  }
-  [dir='rtl'] & {
-    border-left: $border-x;
-    border-right: $border-x;
-  }
+    border-top: $border-y;
+    border-bottom: $border-y;
+
+    [dir="ltr"] & {
+        border-left: $border-x;
+        border-right: $border-x;
+    }
+    [dir="rtl"] & {
+        border-left: $border-x;
+        border-right: $border-x;
+    }
 }
 
 @mixin border($border-top, $border-right, $border-bottom, $border-left) {
-  border-top: $border-top;
-  border-bottom: $border-bottom;
-
-  [dir='ltr'] & {
-    border-left: $border-left;
-    border-right: $border-right;
-  }
-  [dir='rtl'] & {
-    border-left: $border-right;
-    border-right: $border-left;
-  }
+    border-top: $border-top;
+    border-bottom: $border-bottom;
+
+    [dir="ltr"] & {
+        border-left: $border-left;
+        border-right: $border-right;
+    }
+    [dir="rtl"] & {
+        border-left: $border-right;
+        border-right: $border-left;
+    }
 }
 
 @mixin float($float) {
-  $float-ltr: $float;
-  $float-rtl: if($float == left, right, if($float == right, left, none));
+    $float-ltr: $float;
+    $float-rtl: if($float == left, right, if($float == right, left, none));
 
-  [dir='ltr'] & {
-    float: $float-ltr;
-  }
+    [dir="ltr"] & {
+        float: $float-ltr;
+    }
 
-  [dir='rtl'] & {
-    float: $float-rtl;
-  }
+    [dir="rtl"] & {
+        float: $float-rtl;
+    }
 }
 
 @mixin right($value) {
-  [dir='ltr'] & {
-    right: $value;
-  }
+    [dir="ltr"] & {
+        right: $value;
+    }
 
-  [dir='rtl'] & {
-    left: $value;
-  }
+    [dir="rtl"] & {
+        left: $value;
+    }
 }
 
 @mixin left($value) {
-  [dir='ltr'] & {
-    left: $value;
-  }
+    [dir="ltr"] & {
+        left: $value;
+    }
 
-  [dir='rtl'] & {
-    right: $value;
-  }
+    [dir="rtl"] & {
+        right: $value;
+    }
 }
 
 @mixin text-align($alignment) {
-  $alignment-ltr: $alignment;
-  $alignment-rtl: if(
-    $alignment == left,
-    right,
-    if($alignment == right, left, $alignment)
-  );
-
-  [dir='ltr'] & {
-    text-align: $alignment-ltr;
-  }
-
-  [dir='rtl'] & {
-    text-align: $alignment-rtl;
-  }
+    $alignment-ltr: $alignment;
+    $alignment-rtl: if($alignment == left, right, if($alignment == right, left, $alignment));
+
+    [dir="ltr"] & {
+        text-align: $alignment-ltr;
+    }
+
+    [dir="rtl"] & {
+        text-align: $alignment-rtl;
+    }
 }
 
 @mixin background-position($position) {
-  $position-ltr: $position;
-  $position-rtl: if(
-    $position == left,
-    right,
-    if($position == right, left, $position)
-  );
-
-  [dir='ltr'] & {
-    background-position: $position-ltr;
-  }
-
-  [dir='rtl'] & {
-    background-position: $position-rtl;
-  }
+    $position-ltr: $position;
+    $position-rtl: if($position == left, right, if($position == right, left, $position));
+
+    [dir="ltr"] & {
+        background-position: $position-ltr;
+    }
+
+    [dir="rtl"] & {
+        background-position: $position-rtl;
+    }
 }
diff --git a/src/common/_nav-tabs.scss b/src/common/_nav-tabs.scss
new file mode 100644
index 00000000..3ec31432
--- /dev/null
+++ b/src/common/_nav-tabs.scss
@@ -0,0 +1,6 @@
+.nav-tabs {
+    @include padding-left(0);
+    li {
+        @include float(left);
+    }
+}
diff --git a/src/common/_openlmis-toolbar.scss b/src/common/_openlmis-toolbar.scss
index f0747115..951f40c9 100644
--- a/src/common/_openlmis-toolbar.scss
+++ b/src/common/_openlmis-toolbar.scss
@@ -16,13 +16,13 @@ markup:
 Styleguide 6.0
  */
 
-.openlmis-toolbar {
+ .openlmis-toolbar {
     @extend .button-group;
     background: $shadow;
     display: block;
     bottom: 0;
-    left: 0;
-    right: 0;
+    @include left(0);
+    @include right(0);
     padding: 0.5em;
     position: fixed;
     z-index: 15;
@@ -30,13 +30,12 @@ Styleguide 6.0
 
 .toolbar {
     @extend .button-group;
-    margin-left: 0;
-    margin-right: 0;
+    margin: 0;
 
     h1, h2, h3, h4, h5, h6 {
         padding: 0px;
         & ~ * {
-            margin-left: 0px;
+            @include margin-left(0px);
         }
     }
 
@@ -44,17 +43,17 @@ Styleguide 6.0
         @extend .list-unstyled;
         > * {
             display: block;
-            float: left;
-            margin: 0px;
-            padding-right: 0.5em;
+            @include float(left);
+            margin: 0;
+            @include padding-right(.5em);
             &::after{
                 content: "|";
                 display: inline-block;
-                margin-left: 0.5em;
+                @include margin-left(.5em);
             }
 
             &:last-child{
-                padding-right: 0px;
+                @include padding-right(0px);
                 &::after{
                     content: "";
                 }
diff --git a/src/common/_page-hero.scss b/src/common/_page-hero.scss
index d8238595..8255f1b8 100644
--- a/src/common/_page-hero.scss
+++ b/src/common/_page-hero.scss
@@ -12,7 +12,7 @@
 		content: "";
 		position: absolute;
 		top: 0;
-		left: 0;
+		@include left(0);
 		z-index: 0;
 		height: 100%;
 		width: 100%;
@@ -49,11 +49,11 @@
   }
   &:before {
     top: 0.1em;
-    left: -0.1em;
+    @include left(-0.1em);
   }
   &:after {
     top: 0.2em;
-    left: 0;
+    @include left(0);
   }
 }
 
diff --git a/src/openlmis-adjustments/_adjustments-modal.scss b/src/openlmis-adjustments/_adjustments-modal.scss
index 0969c3a5..00cab424 100644
--- a/src/openlmis-adjustments/_adjustments-modal.scss
+++ b/src/openlmis-adjustments/_adjustments-modal.scss
@@ -8,11 +8,11 @@
                 font-weight: bold;
                 content: ':'
             }
-            margin-right: 0.5em;
+            @include margin-right(0.5em);
         }
 
         dd:not(:last-of-type) {
-            margin-right: auto;
+            @include margin-right(auto);
         }
     }
 
diff --git a/src/openlmis-cron-selection/_openlmis-cron-selection.scss b/src/openlmis-cron-selection/_openlmis-cron-selection.scss
index f684b124..e23e9bd9 100644
--- a/src/openlmis-cron-selection/_openlmis-cron-selection.scss
+++ b/src/openlmis-cron-selection/_openlmis-cron-selection.scss
@@ -3,11 +3,11 @@
     align-items: center;
 
     &>* {
-        margin-right: 0.5em;
+        @include margin-right(0.5em);
     }
 
     .input-control>input {
         width: 2em;
-        text-align: right
+        @include text-align(right);
     }
 }
\ No newline at end of file
diff --git a/src/openlmis-file-upload/_file-upload.scss b/src/openlmis-file-upload/_file-upload.scss
index 5fe24971..ce2cb2cd 100644
--- a/src/openlmis-file-upload/_file-upload.scss
+++ b/src/openlmis-file-upload/_file-upload.scss
@@ -35,12 +35,12 @@ Styleguide 3.6
     }
 
     button.file {
-        margin-right: 0.5em;
+        @include margin-right(0.5em);
     }
 
     .clear {
         position: absolute;
-        right: 0.5em;
+        @include right(0.5em);
         top: 50%;
         transform: translateY(-50%);
         cursor: pointer;
@@ -65,6 +65,6 @@ Styleguide 3.6
 .openlmis-file-upload.is-invalid {
 
     .clear {
-        right: 2em;
+        @include right(2em);
     }
 }
diff --git a/src/openlmis-form/_form-errors.scss b/src/openlmis-form/_form-errors.scss
index 5527a78b..168e58a7 100644
--- a/src/openlmis-form/_form-errors.scss
+++ b/src/openlmis-form/_form-errors.scss
@@ -71,7 +71,7 @@ Styleguide 3.3
 	font-weight: bold;
 	border-radius: $border-radius;
 	padding: 1em;
-	padding-left: 4em;
+	@include padding-left(4em);
 }
 
 form > .alert.is-error {
@@ -86,8 +86,8 @@ form > .alert.is-error {
 	background: transparent;
 	position: relative;
 	padding: 0em;
-	padding-left: 0.5em;
-	border-left: $brand-danger 0.25em solid;
+	@include padding-left(0.5em);
+	@include border-left($brand-danger 0.25em solid);
 	border-radius: 0px;
 }
 
@@ -97,8 +97,8 @@ form > .alert.is-error {
 	color: $text-color;
 	font-weight: normal;
 	padding: 0em;
-	padding-left: 0em;
-	border-left-width: 0px;
+	@include padding-left(0em);
+	@include border-left(0px);
 	border-radius: 0px;
 
 	&::before {
diff --git a/src/openlmis-form/_form-inline.scss b/src/openlmis-form/_form-inline.scss
index af7ccf2d..9d9287c5 100644
--- a/src/openlmis-form/_form-inline.scss
+++ b/src/openlmis-form/_form-inline.scss
@@ -37,13 +37,13 @@ form.form-inline,
 	align-items: flex-end;
 	flex-wrap: nowrap;
 	max-width: none;
-	margin-left: -1em;
+	@include margin-left(-1em);
 	> * {
 		flex: 0 0 auto;
 		width: auto;
 		min-width: auto;
 		margin: 0px;
-		margin-left: 1em;
+		@include margin-left(1em);
 	}
 
 	> label {
@@ -53,12 +53,12 @@ form.form-inline,
 	> label + input,
 	> label + select,
 	> label + textarea {
-		margin-left: 0.2em;
+		@include margin-left(0.2em);
 	}
 
 	> label + input[type="submit"],
 	> label + input[type="button"] {
-		margin-left: 1em;
+		@include margin-left(1em);
 	}
 
 	> .form-group {
diff --git a/src/openlmis-form/_form-toolbar.scss b/src/openlmis-form/_form-toolbar.scss
index 6282b9ca..7d081865 100644
--- a/src/openlmis-form/_form-toolbar.scss
+++ b/src/openlmis-form/_form-toolbar.scss
@@ -8,16 +8,16 @@
   min-height: 3.6em;
   z-index: 15;
   .delete-button {
-    margin-left: 0.7em;
+    @include margin-left(0.7em);
     margin-top: 0.7em;
   }
   .save-button {
-    margin-left: 0.7em;
+    @include margin-left(0.7em);
     margin-top: 0.7em;
    }
   .primary-action {
-    float: right;
-    margin-right: 0.7em;
+    @include float(right);
+    @include margin-right(0.7em);
     margin-top: 0.7em;
   }
 }
diff --git a/src/openlmis-form/_form.scss b/src/openlmis-form/_form.scss
index 6b8eeefb..9c985e92 100644
--- a/src/openlmis-form/_form.scss
+++ b/src/openlmis-form/_form.scss
@@ -90,116 +90,116 @@ Styleguide 3.0
 */
 
 form {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    max-width: $default-form-width;
-
-    > * {
-        display: block;
-        flex: 1 0 100%;
-        margin: 0.2em 0;
-    }
-
-    > fieldset {
-        margin: 0em;
-        margin-top: 0.5em;
-    }
-
-    > label,
-    > div > label,
-    > fieldset > legend {
-        margin-top: 0.5em;
-        margin-bottom: 0.2em;
-
-        &.is-required:after {
-            color: $brand-danger;
-            content: '*';
-            margin-left: 0.25em;
-        }
-    }
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: $default-form-width;
+
+  > * {
+    display: block;
+    flex: 1 0 100%;
+    margin: 0.2em 0;
+  }
+
+  > fieldset {
+    margin: 0em;
+    margin-top: 0.5em;
+  }
 
-    &.form-inline > div > label {
-        margin-right: 0.25em;
-    }
+  > label,
+  > div > label,
+  > fieldset > legend {
+    margin-top: 0.5em;
+    margin-bottom: 0.2em;
 
-    > input[type="button"],
-    > input[type="submit"],
-    > button {
-        flex: 0 0 auto;
-        min-width: auto;
+    &.is-required:after {
+      color: $brand-danger;
+      content: "*";
+      @include margin-left(0.25em);
     }
-
-    > fieldset.form-group {
-        > label.checkbox,
-        > label.radio {
-            margin-top: 0.2em;
-        }
+  }
+
+  &.form-inline > div > label {
+    @include margin-right(0.25em);
+  }
+
+  > input[type="button"],
+  > input[type="submit"],
+  > button {
+    flex: 0 0 auto;
+    min-width: auto;
+  }
+
+  > fieldset.form-group {
+    > label.checkbox,
+    > label.radio {
+      margin-top: 0.2em;
     }
+  }
 
-	div.checkbox > label {
-        width: 100%
-    }
+  div.checkbox > label {
+    width: 100%;
+  }
 }
 
 .form-label {
-    font-weight: bold;
-    font-size: $font-size;
+  font-weight: bold;
+  font-size: $font-size;
 }
 
 .form-group {
-    margin-bottom: 0px;
+  margin-bottom: 0px;
 }
 
 form {
-    > label {
-        @extend .form-label;
-    }
+  > label {
+    @extend .form-label;
+  }
 
-    fieldset.form-control > legend,
-    fieldset.form-group > legend {
-        color: $text-color;
-        font-weight: bold;
-    }
+  fieldset.form-control > legend,
+  fieldset.form-group > legend {
+    color: $text-color;
+    font-weight: bold;
+  }
 
-    > input,
-    > textarea,
-    > select {
-        outline: none;
-    }
+  > input,
+  > textarea,
+  > select {
+    outline: none;
+  }
 }
 
 fieldset > legend {
-    @extend .form-label;
-    padding: 0px;
-    border-bottom-width: 0;
+  @extend .form-label;
+  padding: 0px;
+  border-bottom-width: 0;
 }
 
 textarea {
-    resize: none;
+  resize: none;
 }
 
 fieldset,
 .form-group {
-    @extend form;
+  @extend form;
 }
 
 input.number,
 input[type="number"] {
-    text-align: right;
+  @include text-align(right);
 }
 
 input.date {
-    text-align: left;
+  @include text-align(left);
 }
 
 .note {
-    font-size: 1em;
-    font-style: italic;
+  font-size: 1em;
+  font-style: italic;
 }
 
 form + label,
 section + label {
-    margin-top: 0.5em;
-    margin-bottom: 0.2em;
+  margin-top: 0.5em;
+  margin-bottom: 0.2em;
 }
diff --git a/src/openlmis-form/_input-control.scss b/src/openlmis-form/_input-control.scss
index 6e83c6e6..88fbd721 100644
--- a/src/openlmis-form/_input-control.scss
+++ b/src/openlmis-form/_input-control.scss
@@ -60,7 +60,7 @@ $form-control-text-color-disabled: $text-color-disabled !default;
 
 	&.is-invalid {
 		box-shadow: inset 0 0 0.5em $brand-danger;
-		padding-right: 2em;
+		@include padding-right(2em);
 
 		&::after {
 			content: "\f06a";
@@ -71,7 +71,7 @@ $form-control-text-color-disabled: $text-color-disabled !default;
 			width: 1em;
 			position: absolute;
 			top: 50%;
-			right: 0.5em;
+			@include right(0.5em);
 			transform: translateY(-50%);
 		}
 
diff --git a/src/openlmis-form/_openlmis-datepicker.scss b/src/openlmis-form/_openlmis-datepicker.scss
index 49362069..4d412502 100644
--- a/src/openlmis-form/_openlmis-datepicker.scss
+++ b/src/openlmis-form/_openlmis-datepicker.scss
@@ -21,7 +21,7 @@ Styleguide 3.5
 	width: 1em;
 	position: absolute;
 	top: 50%;
-	right: 0.5em;
+	@include right(0.5em);
 	transform: translateY(-50%);
 }
 
diff --git a/src/openlmis-form/_saving-indicator.scss b/src/openlmis-form/_saving-indicator.scss
index 8aafbaf0..4d394ea0 100644
--- a/src/openlmis-form/_saving-indicator.scss
+++ b/src/openlmis-form/_saving-indicator.scss
@@ -1,7 +1,7 @@
 
 .saving-indicator {
 
-    text-align: right;
+    @include text-align(right);
 
     .icon {
         margin: 0 1em;
diff --git a/src/openlmis-form/_select-select2.scss b/src/openlmis-form/_select-select2.scss
index 563cabf4..27a9bd0b 100644
--- a/src/openlmis-form/_select-select2.scss
+++ b/src/openlmis-form/_select-select2.scss
@@ -49,12 +49,12 @@
         .select2-selection__clear {
             position: absolute;
             top: 0px;
-            right: 0px;
+            @include right(0px);
         }
         .select2-selection__arrow {
             position: absolute;
             top: 0px;
-            left: 0px;
+            @include left(0px);
         }
     }
 
@@ -158,14 +158,15 @@
             height: 0;
             width: 0;
             position: absolute;
-            left: $font-size * 2;
+            @include left($font-size * 2);
             pointer-events: none;
             border-width: $font-size;
-            margin-left: 0 - $font-size;
+            @include margin-left(0 - $font-size);
         }
         &:before {
             border-width: $font-size + $border-width;
-            margin-left: 0 - ($font-size + $border-width);
+
+            @include margin-left(0 - ($font-size + $border-width));
         }
     }
 
diff --git a/src/openlmis-form/_select.scss b/src/openlmis-form/_select.scss
index 60ea5a99..36c9137c 100644
--- a/src/openlmis-form/_select.scss
+++ b/src/openlmis-form/_select.scss
@@ -90,7 +90,7 @@ select > option[disabled] {
 }
 
 select {
-    padding-left: 1.7em;
+    @include padding-left(1.7em);
 
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -107,7 +107,7 @@ select {
 }
 
 select:focus {
-    padding-left: 1.7em;
+    @include padding-left(1.7em);
 
     -webkit-appearance: none;
     -moz-appearance: none;
diff --git a/src/openlmis-modal/_alert.scss b/src/openlmis-modal/_alert.scss
index 8a89732d..ca2f509e 100644
--- a/src/openlmis-modal/_alert.scss
+++ b/src/openlmis-modal/_alert.scss
@@ -1,4 +1,3 @@
-
 .alert-modal {
 
 	.alert-main{
diff --git a/src/openlmis-modal/_loading-modal.scss b/src/openlmis-modal/_loading-modal.scss
index 5f34f2cf..a1aec0b0 100644
--- a/src/openlmis-modal/_loading-modal.scss
+++ b/src/openlmis-modal/_loading-modal.scss
@@ -18,7 +18,7 @@
         color: $white;
         font-size: $font-size-extra-large;
         position: absolute;
-        left: 50%;
+        @include left(50%);
         top: 50%;
     }
 
diff --git a/src/openlmis-modal/_modal.scss b/src/openlmis-modal/_modal.scss
index 62599690..fcd6c9d3 100644
--- a/src/openlmis-modal/_modal.scss
+++ b/src/openlmis-modal/_modal.scss
@@ -30,7 +30,7 @@
 	button.close{
 		position: absolute;
 		top: 0em;
-		right: 0em;
+		@include right(0em);
 		margin-top: 0px !important; // Added because bootbox.js adds inline styles
 	}
 }
diff --git a/src/openlmis-modal/_notification.scss b/src/openlmis-modal/_notification.scss
index a7459432..5b27bf8f 100644
--- a/src/openlmis-modal/_notification.scss
+++ b/src/openlmis-modal/_notification.scss
@@ -3,7 +3,7 @@ $notification-width: 350px !default;
 
 .notification-container {
   	position: fixed;
-  	right: 0px;
+  	@include right(0px);
   	top: 0px;
   	z-index: 15;
 
@@ -26,12 +26,12 @@ $notification-width: 350px !default;
     &.is-error,
     &.is-success,
     &.is-offline {
-        padding-left: 4em;
+        @include padding-left(4em);
         &::before {
             font-size: 2em;
             position: absolute;
             top: 50%;
-            left: 0.5em;
+            @include left(0.5em);
             transform: translateY(-50%);
         }
     }
@@ -51,7 +51,7 @@ $notification-width: 350px !default;
         color: $white;
 		&::before {
 			color: $white;
-            left: 0.75em;
+            @include left(0.75em);
 		}
 	}
 }
@@ -61,15 +61,19 @@ $notification-width: 350px !default;
 }
 
 .hide-notification {
-    right: 0px;
+    @include right(0px);
     -webkit-animation: slide-out 0.5s forwards;
     animation: slide-out 0.5s forwards;
 }
 
 @-webkit-keyframes slide-out {
-    100% { right: -400px; }
+    100% {
+        @include right(-400px);
+    }
 }
 
 @keyframes slide-out {
-    100% { right: -400px; }
+    100% {
+        @include right(-400px);
+    }
 }
diff --git a/src/openlmis-offline/_offline.scss b/src/openlmis-offline/_offline.scss
index ef7ecdbe..49b7cfd3 100644
--- a/src/openlmis-offline/_offline.scss
+++ b/src/openlmis-offline/_offline.scss
@@ -21,6 +21,6 @@ button.is-offline{
 		content: "\f0e7";
 		font-family: FontAwesome;
 		display: inline-block;
-		padding-right: $space-size/2;
+		@include padding-right($space-size/2);
 	}
 }
diff --git a/src/openlmis-pagination/_openlmis-pagination.scss b/src/openlmis-pagination/_openlmis-pagination.scss
index 4d3151df..ccbe0dec 100644
--- a/src/openlmis-pagination/_openlmis-pagination.scss
+++ b/src/openlmis-pagination/_openlmis-pagination.scss
@@ -20,7 +20,6 @@ Styleguide 2.3
 */
 
 .openlmis-pagination {
-
     display: flex;
     justify-content: space-between;
     font-size: 1em;
@@ -36,14 +35,17 @@ Styleguide 2.3
     margin-bottom: $space-size;
     > ul {
         @extend .pagination;
-        margin: 0px 0px 0px 1em;
+        margin: 0;
+        @include margin-left(1em);
         border-color: $border-color;
+        display: flex;
+        flex-direction: row;
 
         > li > a {
             @extend .openlmis-pagination-link;
         }
         > li:last-child > a {
-            border-right-width: 1px;
+            @include border-right(1px);
         }
 
         .active a {
@@ -74,7 +76,7 @@ Styleguide 2.3
     padding: 0.5em 1em;
     border-radius: 0px;
     border: $border-color 1px solid;
-    border-right-width: 0px;
+    @include border-right(solid 0px $border-color);
     &:hover{
         border-color: $border-color;
     }
diff --git a/src/openlmis-popover/_popover.scss b/src/openlmis-popover/_popover.scss
index 4b3c18b8..5c1a7b47 100644
--- a/src/openlmis-popover/_popover.scss
+++ b/src/openlmis-popover/_popover.scss
@@ -33,7 +33,7 @@ Styleguide 1.5
 	> button.close {
 		position: absolute;
 		top: 0px;
-		right: 0px;
+		@include right(0px);
 	}
 
 	> h3 {
@@ -41,14 +41,14 @@ Styleguide 1.5
 		font-size: 1em;
 		line-height: 1em;
 		padding: $padding-small;
-		padding-right: $padding-large;
+		@include padding-right($padding-large);
 		margin: 0em;
 	}
 
-	> .popover-content{
+	> .popover-content {
 		overflow: hidden;
 		padding: $padding-small;
-		padding-right: $padding-large;
+		@include padding-right($padding-large);
 
 		.select2 {
 			// popover width minus left padding minus right padding
@@ -56,8 +56,8 @@ Styleguide 1.5
 		}
 	}
 
-	> h3 + > .popover-content{
-		padding-right: $padding-small;
+	> h3 > .popover-content {
+		@include padding-right($padding-small);
 
 		.select2 {
 			// popover width minus left padding minus right padding
@@ -66,6 +66,6 @@ Styleguide 1.5
 	}
 }
 
-.has-popover > .show-popover{
+.has-popover > .show-popover {
 	@include icon-only("info-circle");
 }
diff --git a/src/openlmis-sort/_openlmis-sort.scss b/src/openlmis-sort/_openlmis-sort.scss
index 84ce9142..61a42680 100644
--- a/src/openlmis-sort/_openlmis-sort.scss
+++ b/src/openlmis-sort/_openlmis-sort.scss
@@ -40,7 +40,7 @@ Styleguide 2.4
     align-items: center;
 
     > * {
-        float: left;
-        margin-right: 1em;
+        @include float(left);
+        @include margin-right(1em);
     }
 }
diff --git a/src/openlmis-table-filter/_openlmis-table-filters.scss b/src/openlmis-table-filter/_openlmis-table-filters.scss
index f00bdcb9..80d843e1 100644
--- a/src/openlmis-table-filter/_openlmis-table-filters.scss
+++ b/src/openlmis-table-filter/_openlmis-table-filters.scss
@@ -67,7 +67,7 @@ Styleguide 2.5
     z-index: 1070;
 
     .popover-content{
-        padding-right: 0.5em;
+        @include padding-right(0.5em);
     }
 }
 
@@ -76,7 +76,7 @@ button.filters {
     @include button-icon('filter');
 
     > span {
-        margin-left: 0.25em;
+        @include margin-left(0.25em);
     }
 
     &.is-active {
diff --git a/src/openlmis-table-form/_table-forms.scss b/src/openlmis-table-form/_table-forms.scss
index b801146f..18fc0d7b 100644
--- a/src/openlmis-table-form/_table-forms.scss
+++ b/src/openlmis-table-form/_table-forms.scss
@@ -67,29 +67,28 @@ that is not nessicarry.
 Styleguide 4.5
 */
 
-
 th.has-popover {
-  @include icon('info-circle');
-  padding-right: 2em !important;
+  @include icon("info-circle");
+  @include padding-right(2em);
 
   &::before {
     position: absolute;
     top: 50%;
-    right: 0.5em;
+    @include right(0.5em);
     transform: translateY(-50%);
   }
 }
 
 .openlmis-table > tbody > tr > td.is-invalid,
 td.is-invalid {
-  @include icon('exclamation-circle');
-  padding-right: 2em;
+  @include icon("exclamation-circle");
+  @include padding-right(2em);
 
-  &::before{
+  &::before {
     color: $brand-danger;
     position: absolute;
     top: 50%;
-    right: 0.5em;
+    @include right(0.5em);
     transform: translateY(-50%);
   }
 }
@@ -103,14 +102,14 @@ td.is-invalid {
 td,
 td > div:first-child:last-child,
 th {
-  > input[type="checkbox"]:first-child + > label:last-child,
-  > input[type="checkbox"]:last-child + > label:first-child{
+  > input[type="checkbox"]:first-child > label:last-child,
+  > input[type="checkbox"]:last-child > label:first-child {
     position: absolute;
     top: -100em;
   }
-  > label:last-child + > input[type="checkbox"]:first-child,
-  > label:first-child + > input[type="checkbox"]:last-child,
-  > input[type="checkbox"]:first-child:last-child{
+  > label:last-child > input[type="checkbox"]:first-child,
+  > label:first-child > input[type="checkbox"]:last-child,
+  > input[type="checkbox"]:first-child:last-child {
     display: block;
     margin: 0px auto;
   }
@@ -118,27 +117,27 @@ th {
 
 td > div:first-child:last-child > label.checkbox,
 td > label.checkbox {
-  &:first-child:last-child{
+  &:first-child:last-child {
     display: block;
     position: absolute;
     top: 0px;
-    left: 0px;
+    @include left(0px);
     margin: 0px;
     width: 100%;
     height: 100%;
     overflow: hidden;
     text-indent: -30000em;
-    > input[type="checkbox"]{
+    > input[type="checkbox"] {
       position: absolute;
       top: 50%;
-      left: 50%;
-      transform: translateY(-50%) translateX(-50%);
+      @include left(50%);
+      @include translate-xy(-50%, -50%);
       margin: 0px;
     }
   }
 }
 
 .openlmis-table td > div.input-control > input[type="text"] {
-    min-width: 2em;
-    width: 100%;
+  min-width: 2em;
+  width: 100%;
 }
diff --git a/src/openlmis-table/_openlmis-table-container.scss b/src/openlmis-table/_openlmis-table-container.scss
index 99bb00fd..f0969b3c 100644
--- a/src/openlmis-table/_openlmis-table-container.scss
+++ b/src/openlmis-table/_openlmis-table-container.scss
@@ -137,10 +137,10 @@ Styleguide 4.1
         > * {
             margin: 0em 0.5em;
             &:first-child{
-              margin-left: 0em;
+              @include margin-left(0em);
             }
             &:last-child{
-              margin-right: 0em;
+              @include margin-right(0em);
             }
         }
 
diff --git a/src/openlmis-table/_openlmis-table-pane.scss b/src/openlmis-table/_openlmis-table-pane.scss
index 44f7ee19..4606a4b1 100644
--- a/src/openlmis-table/_openlmis-table-pane.scss
+++ b/src/openlmis-table/_openlmis-table-pane.scss
@@ -70,133 +70,137 @@ virtual scrolling so that extremely large lists and pages can be rendered.
 Styleguide 4.6
 */
 
-
 .openlmis-table-pane {
-    display: flex;
-    flex-direction: column;
-
-    position: relative;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
-    flex-grow: 1;
+  position: relative;
+  overflow: hidden;
 
-    .md-virtual-repeat-container {
-        flex-grow: 1;
-    }
+  flex-grow: 1;
 
-    .ps>.ps-scrollbar-x-rail,
-    .ps>.ps-scrollbar-y-rail {
-        z-index: 20;
-    }
+  .md-virtual-repeat-container {
+    flex-grow: 1;
+  }
 
-    table {
-        @extend .openlmis-table;
+  .ps > .ps-scrollbar-x-rail,
+  .ps > .ps-scrollbar-y-rail {
+    z-index: 20;
+  }
 
-        th, td {
-            padding: $space-size/2;
-        }
+  table {
+    @extend .openlmis-table;
 
-        td[openlmis-sticky-column],
-        th[openlmis-sticky-column] {
-            border-right: 1px $border-color solid !important;
-        }
+    th,
+    td {
+      padding: $space-size/2;
+    }
 
-        td[openlmis-sticky-column][openlmis-sticky-column-right],
-        th[openlmis-sticky-column][openlmis-sticky-column-right] {
-            border-left: 1px $border-color solid !important;
-            border-right-width: 0px !important;
-            &:last-child {
-                border-right-width: 1px;
-            }
-        }
+    td[openlmis-sticky-column],
+    th[openlmis-sticky-column] {
+      @include border-right-important(1px $border-color solid);
+    }
 
-        td[openlmis-sticky-column]:after,
-        th[openlmis-sticky-column]:after {
-            content: " ";
-            display: block;
-            position: absolute;
-            top: 0px;
-            z-index: -1;
-            width: $space-size/4;
-            height: 100%;
-            background: transparent;
-
-            background-image: linear-gradient(to right, $dark-gray, transparent);
-            right: ($space-size/4 + 1) * -1;
-        }
-        td[openlmis-sticky-column][openlmis-sticky-column-right]:after,
-        th[openlmis-sticky-column][openlmis-sticky-column-right]:after {
-            background-image: linear-gradient(to left, $dark-gray, transparent);
-            right: unset;
-            left: ($space-size/4 + 1) * -1;
-        }
+    td[openlmis-sticky-column][openlmis-sticky-column-right],
+    th[openlmis-sticky-column][openlmis-sticky-column-right] {
+      @include border-left-important(1px $border-color solid);
+      @include border-right-important(0px);
+      &:last-child {
+        @include border-right-important(1px $border-color solid);
+      }
+    }
 
-        td[openlmis-sticky-column][openlmis-sticky-column-right] + td[openlmis-sticky-column][openlmis-sticky-column-right] {
-            &:after {
-                content: unset;
-            }
-        }
+    td[openlmis-sticky-column]:after,
+    th[openlmis-sticky-column]:after {
+      content: " ";
+      display: block;
+      position: absolute;
+      top: 0px;
+      z-index: -1;
+      width: $space-size/4;
+      height: 100%;
+      background: transparent;
+
+      background-image: linear-gradient(to right, $dark-gray, transparent);
+      @include right(($space-size/4 + 1) * -1);
+    }
+    td[openlmis-sticky-column][openlmis-sticky-column-right]:after,
+    th[openlmis-sticky-column][openlmis-sticky-column-right]:after {
+      background-image: linear-gradient(to left, $dark-gray, transparent);
+      @include right(unset);
+      @include left(($space-size/4 + 1) * -1);
+    }
 
-        thead:last-child, tfoot tr:first-child {
-            td, th {
-                &[openlmis-table-sticky-cell]:before {
-                    content: " ";
-                    display: block;
-                    position: absolute;
-                    left: 0px;
-                    z-index: -1;
-                    height: $space-size/4;
-                    width: 100%;
-                    background: transparent;
-                }
-            }
-        }
+    td[openlmis-sticky-column][openlmis-sticky-column-right]
+      + td[openlmis-sticky-column][openlmis-sticky-column-right] {
+      &:after {
+        content: unset;
+      }
+    }
 
-        thead td[openlmis-table-sticky-cell]:before,
-        thead th[openlmis-table-sticky-cell]:before {
-            background-image: linear-gradient(to bottom, $dark-gray, transparent);
-            bottom: ($space-size/4 + 1) * -1;
+    thead:last-child,
+    tfoot tr:first-child {
+      td,
+      th {
+        &[openlmis-table-sticky-cell]:before {
+          content: " ";
+          display: block;
+          position: absolute;
+          @include left(0px);
+          z-index: -1;
+          height: $space-size/4;
+          width: 100%;
+          background: transparent;
         }
+      }
+    }
 
-        tfoot td[openlmis-table-sticky-cell]:before,
-        tfoot th[openlmis-table-sticky-cell]:before {
-            background-image: linear-gradient(to top, $dark-gray, transparent);
-            bottom: unset;
-            top: ($space-size/4 + 1) * -1;
-        }
+    thead td[openlmis-table-sticky-cell]:before,
+    thead th[openlmis-table-sticky-cell]:before {
+      background-image: linear-gradient(to bottom, $dark-gray, transparent);
+      bottom: ($space-size/4 + 1) * -1;
     }
 
-    td, th {
-        &[openlmis-table-sticky-cell] {
-            position: relative;
-            top: 0px;
-            left: 0px;
-            z-index: 9;
-            transform: translate3d(0px, 0px, 0px);
-        }
+    tfoot td[openlmis-table-sticky-cell]:before,
+    tfoot th[openlmis-table-sticky-cell]:before {
+      background-image: linear-gradient(to top, $dark-gray, transparent);
+      bottom: unset;
+      top: ($space-size/4 + 1) * -1;
+    }
+  }
+
+  td,
+  th {
+    &[openlmis-table-sticky-cell] {
+      position: relative;
+      top: 0px;
+      @include left(0px);
+      z-index: 9;
+      transform: translate3d(0px, 0px, 0px);
+    }
 
-        &[openlmis-table-sticky-cell][openlmis-sticky-top],
-        &[openlmis-table-sticky-cell][openlmis-sticky-bottom] {
-            z-index: 10;
+    &[openlmis-table-sticky-cell][openlmis-sticky-top],
+    &[openlmis-table-sticky-cell][openlmis-sticky-bottom] {
+      z-index: 10;
 
-            &[openlmis-sticky-column] {
-              z-index: 11;
-            }
-        }
+      &[openlmis-sticky-column] {
+        z-index: 11;
+      }
     }
-
-    // This is added to keep perfectScrollbars from
-    // overlapping table cells
-    .ps table {
-        tfoot tr:last-child {
-            td, th {
-                padding-bottom: $space-size;
-            }
-        }
-        tr td:last-child,
-        tr th:last-child{
-            padding-right: $space-size;
-        }
+  }
+
+  // This is added to keep perfectScrollbars from
+  // overlapping table cells
+  .ps table {
+    tfoot tr:last-child {
+      td,
+      th {
+        padding-bottom: $space-size;
+      }
     }
-
+    tr td:last-child,
+    tr th:last-child {
+      @include padding-right($space-size);
+    }
+  }
 }
diff --git a/src/openlmis-table/_sticky.scss b/src/openlmis-table/_sticky.scss
index 0721d0e4..5d2e98e3 100644
--- a/src/openlmis-table/_sticky.scss
+++ b/src/openlmis-table/_sticky.scss
@@ -53,18 +53,18 @@ tr.title > td > div  {
 
   }
   &.stuck-left:after {
-    right: $space-size/4 * -1;
+    @include right($space-size/4 * -1);
     background-image: linear-gradient(to right, $light-gray, transparent);
   }
   &.stuck-right:after {
-    left: $space-size/4 * -1;
+    @include left($space-size/4 * -1);
     background-image: linear-gradient(to left, $light-gray, transparent);
   }
   &.stuck-top {
-	z-index: 12;
+	  z-index: 12;
   }
   &.stuck-top.stuck-left,
   &.stuck-top.stuck-right {
-	z-index: 13;
+	  z-index: 13;
   }
 }
diff --git a/src/openlmis-table/_table-captions.scss b/src/openlmis-table/_table-captions.scss
index bec6e2e0..3e694ccc 100644
--- a/src/openlmis-table/_table-captions.scss
+++ b/src/openlmis-table/_table-captions.scss
@@ -88,6 +88,7 @@ Styleguide 4.2
   @extend .alert;
   display: table-caption;
   margin: 1em 0em;
+  @include text-align(left);
 
   &.error {
     @extend .alert.is-error;
diff --git a/src/openlmis-table/_tables.scss b/src/openlmis-table/_tables.scss
index 3f9ca873..6cc1829d 100644
--- a/src/openlmis-table/_tables.scss
+++ b/src/openlmis-table/_tables.scss
@@ -101,10 +101,11 @@ $table-header-background-color: $background-color-dark !default;
 
     td, th {
         border-top: $table-border-color $table-border-width solid;
-        border-left: $table-border-color $table-border-width solid;
+        @include border-left($table-border-color $table-border-width solid);
+        @include text-align(left);
 
         &:first-child {
-            border-left-width: 0px;
+            @include border-left(0px);
         }
     }
 
@@ -129,7 +130,7 @@ $table-header-background-color: $background-color-dark !default;
     }
 
     &.is-numeric {
-      text-align: right;
+      @include text-align(right);
     }
 }
 
@@ -140,7 +141,7 @@ $table-header-background-color: $background-color-dark !default;
 
     &:hover > *,
     &.is-highlighted > * {
-    background: $bg-highlight;
+        background: $bg-highlight;
     }
 }
 
diff --git a/src/openlmis-table/_tr-empty.scss b/src/openlmis-table/_tr-empty.scss
index 6f97bbcb..539c1fd0 100644
--- a/src/openlmis-table/_tr-empty.scss
+++ b/src/openlmis-table/_tr-empty.scss
@@ -4,6 +4,6 @@ td.openlmis-empty-row {
     @include icon("exclamation-circle");
     &:before {
         color: $brand-danger;
-        margin-right: 0.5em;
+        @include margin-right(0.5em);
     }
 }
diff --git a/src/react-components/_react-components.scss b/src/react-components/_react-components.scss
index 44d56768..6cade51d 100644
--- a/src/react-components/_react-components.scss
+++ b/src/react-components/_react-components.scss
@@ -49,11 +49,11 @@
 
   .breadcrumb {
     padding-top: 1.5em;
-    padding-left: 1em;
+    @include padding-left(1em);
   }
 
   .page-header-responsive {
-    padding: 0.5em 1em 1em;
+    @include padding(0.5em, 1em, 1em, 0);
 
     h2 {
       border-bottom: $heading-border-color 1px solid;
@@ -99,7 +99,7 @@
 
     .progress {
       width: 100%;
-      margin: 0 1em 0 0;
+      @include margin(0, 1em, 0, 0);
     }
   }
 
@@ -147,7 +147,7 @@
   .form-field {
     flex: 1 0 auto;
     padding: 0;
-    margin-right: 0.5em;
+    @include margin-right(0.5em);
   }
 
   .button-inline-container {
@@ -165,26 +165,26 @@ label,
 strong {
   &.is-required:after {
     color: $brand-danger;
-    content: '*';
-    margin-left: 0.25em;
+    content: "*";
+    @include margin-left(0.25em);
   }
 }
 
 .responsive-button {
   .show-text {
-    margin-right: 0.5em;
+    @include margin-right(0.5em);
   }
 
   .show-text-left {
-    margin-left: 0.5em;
+    @include margin-left(0.5em);
   }
 
   @media (min-width: $res-sm) {
     .has-text {
-      margin-right: 0.5em;
+      @include margin-right(0.5em);
     }
     .has-text-left {
-      margin-left: 0.5em;
+      @include margin-left(0.5em);
     }
   }
 
@@ -204,7 +204,7 @@ strong {
   margin-bottom: 0.5em;
 
   span {
-    margin-right: 0.5em;
+    @include margin-right(0.5em);
   }
 
   .page-btn {
@@ -230,15 +230,16 @@ strong {
   border: $table-border-color $table-border-width solid;
   border-collapse: separate;
 
-  td, th {
+  td,
+  th {
     border-top: $table-border-color $table-border-width solid;
-    border-left: $table-border-color $table-border-width solid;
+    @include border-left($table-border-color $table-border-width solid);
 
     vertical-align: middle;
     padding: $table-cell-padding;
 
     &:first-child {
-      border-left-width: 0;
+      @include border-left(0);
     }
   }
 
@@ -255,9 +256,9 @@ strong {
 
     th {
       background-image: linear-gradient(
-              to bottom,
-              $table-header-background-color,
-              darken($table-header-background-color, 15%)
+        to bottom,
+        $table-header-background-color,
+        darken($table-header-background-color, 15%)
       );
     }
   }
@@ -269,7 +270,7 @@ strong {
   border-radius: 4px;
 
   .multiselect-selected {
-    border: solid 1px #D9D9D9;
+    border: solid 1px #d9d9d9;
     border-radius: 5px;
     font-size: 14px;
     padding: 10px;
@@ -284,9 +285,9 @@ strong {
   .multiselect-options {
     display: block;
     box-sizing: border-box;
-    left: 0;
+    @include left(0);
     list-style: none;
-    padding-left: 0px;
+    @include padding-left(0px);
     border: solid 1px #eee;
     padding: 5px 0px;
   }
@@ -298,18 +299,18 @@ strong {
     cursor: pointer;
 
     &:hover {
-      background-color: #49BAEB;
+      background-color: #49baeb;
       color: white;
     }
-      
+
     &-checkbox {
-      margin-right: 6px;
+      @include margin-right(6px);
     }
   }
 }
 
 .suggestions-input {
-  border:1px $border-color solid;
+  border: 1px $border-color solid;
   border-radius: $border-radius;
   box-shadow: inset 0 0 0.5em $border-color;
   width: auto;
@@ -321,53 +322,51 @@ strong {
   min-height: 50px;
 
   input {
-      all:unset;
+    all: unset;
+    text-indent: 25px;
+    &:focus {
+      box-shadow: none;
       text-indent: 25px;
-      &:focus {
-          box-shadow: none;
-          text-indent: 25px;
-      }
+    }
   }
 
   input.not-selected {
-      background-image:
-          linear-gradient(45deg, transparent 50%, gray 50%),
-          linear-gradient(135deg, gray 50%, transparent 50%);
-      background-position:
-          10px 1em,
-          14px 1em;
-      background-size:
-          5px 5px,
-          5px 5px;
-      background-repeat: no-repeat;
+    background-image: linear-gradient(45deg, transparent 50%, gray 50%),
+      linear-gradient(135deg, gray 50%, transparent 50%);
+    background-position:
+      10px 1em,
+      14px 1em;
+    background-size:
+      5px 5px,
+      5px 5px;
+    background-repeat: no-repeat;
   }
 
   input.selected {
-      background-image:
-          linear-gradient(45deg, gray 50%, transparent 50%),
-          linear-gradient(135deg, transparent 50%, gray 50%);
-      background-position:
-            14px 1em,
-            10px 1em;
-      background-size:
-            5px 5px,
-            5px 5px;
-      background-repeat: no-repeat;
+    background-image: linear-gradient(45deg, gray 50%, transparent 50%),
+      linear-gradient(135deg, transparent 50%, gray 50%);
+    background-position:
+      14px 1em,
+      10px 1em;
+    background-size:
+      5px 5px,
+      5px 5px;
+    background-repeat: no-repeat;
   }
 
   input::placeholder {
-      color: #333333;
-      opacity: 1;
+    color: #333333;
+    opacity: 1;
   }
 
   button {
-      all:unset;
-      margin-right: 10px;
-      color: #bebebe;
+    all: unset;
+    @include margin-right(10px);
+    color: #bebebe;
   }
 
-  &:focus-within { 
-      box-shadow: inset 0 0 0.5em $brand-primary;
+  &:focus-within {
+    box-shadow: inset 0 0 0.5em $brand-primary;
   }
 }
 
@@ -376,11 +375,11 @@ strong {
   overflow: auto;
 
   .suggestions-result {
-      background: transparent;
-      border: 1px 1px 1px 0px solid #bebebe;
-      text-align: left;
-      min-height: 50px;
-      overflow-wrap: break-word;
+    background: transparent;
+    border: 1px 1px 1px 0px solid #bebebe;
+    @include text-align(left);
+    min-height: 50px;
+    overflow-wrap: break-word;
   }
 }
 
@@ -390,12 +389,12 @@ strong {
   padding-top: 15px;
 
   .filters {
-    width:30%;
-    margin-left:10px;
+    width: 30%;
+    @include margin-left(10px);
   }
 
   .popover.openlmis-table-filters .popover-content {
-    padding-right: 1em;
+    @include padding-right(1em);
   }
 
   .openlmis-table-filters.popover {
@@ -408,80 +407,80 @@ strong {
   }
 
   .popover {
-    width:100%;
+    width: 100%;
     max-width: unset;
     display: block;
     position: relative;
 
     .popover-content {
-        padding: 1em;
-        
-        i {
-          color: #bebebe;
-        }
+      padding: 1em;
+
+      i {
+        color: #bebebe;
+      }
     }
 
     .clear-icon {
-        width: 100%;
-        text-align: right;
-        font-size: x-large;
-        color: #4D4D4D;
+      width: 100%;
+      @include text-align(right);
+      font-size: x-large;
+      color: #4d4d4d;
     }
 
     .clear {
-        font-size: small;
+      font-size: small;
     }
   }
 
   .container-filter {
     position: relative;
-    width:100%;
+    width: 100%;
   }
 
   .popover.bottom {
     .arrow {
-        left: 30px;
+      @include left(30px);
     }
   }
 
   #filter-form {
-
     fieldset {
-        margin-top: 0;
+      margin-top: 0;
 
-        label {
-            display: flex;
-            align-items: center;
-        }
+      label {
+        display: flex;
+        align-items: center;
+      }
 
-        input[type=checkbox] {
-            margin-top: 0;
-            margin-right: 0.1em;
-        }
+      input[type="checkbox"] {
+        margin-top: 0;
+        margin-right: 0.1em;
+      }
 
-        .filter-checkbox, .input-with-clear-icon {
-          margin-bottom: 20px;
-        }
+      .filter-checkbox,
+      .input-with-clear-icon {
+        margin-bottom: 20px;
+      }
     }
 
     .button-group {
-        margin-top:10px;
-
-        .clear-filters {
-            border: none;
-            background-image: none;
-            margin: 0;
-            padding: 0.5em;
-            background-color: transparent;
-            text-decoration: underline;
-            color: #4D4D4D;
-        }
+      margin-top: 10px;
+
+      .clear-filters {
+        border: none;
+        background-image: none;
+        margin: 0;
+        padding: 0.5em;
+        background-color: transparent;
+        text-decoration: underline;
+        color: #4d4d4d;
+      }
     }
   }
 }
 
 .input-with-clear-icon {
-  border:1px $border-color solid;
+  border: 1px $border-color solid;
   border-radius: $border-radius;
   box-shadow: inset 0 0 0.5em $border-color;
   width: auto;
@@ -492,29 +491,29 @@ strong {
   justify-content: space-between;
 
   input {
-      all:unset;
-      width:90%;
-      height: 40px;
-      text-indent: 10px;
+    all: unset;
+    width: 90%;
+    height: 40px;
+    text-indent: 10px;
 
-      &:focus {
-          box-shadow: none;
-          height: 40px;
-      }
+    &:focus {
+      box-shadow: none;
+      height: 40px;
+    }
   }
 
   input::placeholder {
-      color: #333333;
-      opacity: 1;
+    color: #333333;
+    opacity: 1;
   }
 
   button {
-      all:unset;
-      margin-right: 10px;
+    all: unset;
+    @include margin-right(10px);
   }
 
-  &:focus-within { 
-      box-shadow: inset 0 0 0.5em $brand-primary;
+  &:focus-within {
+    box-shadow: inset 0 0 0.5em $brand-primary;
   }
 }
 
@@ -527,41 +526,41 @@ strong {
   height: 100%;
   width: 100%;
 
-.modal {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-
-  .loading-modal {
-    position: absolute;
+  .modal {
+    display: block;
+    position: fixed;
     top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 100%;
+    @include left(0);
     width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
 
-    .loading {
-      @extend .loading;
-      @extend .loading::before;
-      @extend .fa;
-      @extend .fa-circle-o-notch;
-      @extend .fa-spin;
-      @extend .fa-3x;
-      @extend .fa-fw;
-      color: $white;
-      font-size: $font-size-extra-large;
+    .loading-modal {
       position: absolute;
-      left: 50%;
-      top: 50%;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+
+      .loading {
+        @extend .loading;
+        @extend .loading::before;
+        @extend .fa;
+        @extend .fa-circle-o-notch;
+        @extend .fa-spin;
+        @extend .fa-3x;
+        @extend .fa-fw;
+        color: $white;
+        font-size: $font-size-extra-large;
+        position: absolute;
+        @include left(50%);
+        top: 50%;
+      }
     }
   }
 }
-}
 
 .display-none {
   display: none;
@@ -618,7 +617,7 @@ strong {
     input {
       all: unset;
       text-indent: 25px;
-      padding-right: 2em;
+      @include padding-right(2em);
       position: relative;
       &:focus {
         box-shadow: none;
@@ -628,18 +627,26 @@ strong {
 
     input.not-selected {
       background-image: linear-gradient(45deg, transparent 50%, gray 50%),
-      linear-gradient(135deg, gray 50%, transparent 50%);
-      background-position: 10px 1em, 14px 1em;
-      background-size: 5px 5px, 5px 5px;
+        linear-gradient(135deg, gray 50%, transparent 50%);
+      background-position:
+        10px 1em,
+        14px 1em;
+      background-size:
+        5px 5px,
+        5px 5px;
       background-repeat: no-repeat;
       width: 100%;
     }
 
     input.selected {
       background-image: linear-gradient(45deg, gray 50%, transparent 50%),
-      linear-gradient(135deg, transparent 50%, gray 50%);
-      background-position: 14px 1em, 10px 1em;
-      background-size: 5px 5px, 5px 5px;
+        linear-gradient(135deg, transparent 50%, gray 50%);
+      background-position:
+        14px 1em,
+        10px 1em;
+      background-size:
+        5px 5px,
+        5px 5px;
       background-repeat: no-repeat;
       width: 100%;
     }
@@ -652,7 +659,7 @@ strong {
     button {
       all: unset;
       color: #bebebe;
-      right: 0.5em;
+      @include right(0.5em);
     }
 
     button,
@@ -674,7 +681,7 @@ strong {
       box-shadow: inset 0 0 0.5em $brand-danger;
 
       &::after {
-        content: '\f06a';
+        content: "\f06a";
         color: $brand-danger;
         font: normal normal normal 14px/1 FontAwesome;
         display: block;
@@ -682,7 +689,7 @@ strong {
         width: 1em;
         position: absolute;
         top: 50%;
-        right: 0.5em;
+        @include right(0.5em);
         transform: translateY(-50%);
       }
     }
@@ -725,12 +732,12 @@ strong {
 
       &.second-level {
         font-weight: bold;
-        padding-left: 25px;
+        @include padding-left(25px);
         font-size: 13px;
       }
 
       &.third-level {
-        padding-left: 35px;
+        @include padding-left(35px);
         font-size: 13px;
       }
     }
@@ -741,7 +748,7 @@ strong {
   border-left: #a94442 0.25em solid;
   color: #a94442;
   font-style: normal;
-  padding-left: 0.5em;
+  @include padding-left(0.5em);
   padding-bottom: 0;
   margin-top: 0.5em;
   font-weight: 700;
@@ -763,8 +770,8 @@ strong {
   position: absolute;
   z-index: 1;
   bottom: 125%;
-  left: 50%;
-  transform: translateX(-50%);
+  @include left(50%);
+  @include translate-x(-50%);
   opacity: 0;
   transition: opacity 0.4s ease;
   font-size: 14px;
@@ -774,17 +781,17 @@ strong {
   .close-tooltip {
     position: absolute;
     top: 4px;
-    right: 4px;
+    @include right(4px);
     cursor: pointer;
     font-size: 18px;
   }
 
   &:before {
-    content: '';
+    content: "";
     position: absolute;
     top: 100%;
-    left: 50%;
-    margin-left: -5px;
+    @include left(50%);
+    @include margin-left(-5px);
     border-width: 5px;
     border-style: solid;
     border-color: #fff transparent transparent transparent;
@@ -799,7 +806,7 @@ strong {
 .action-bar-container {
   position: fixed;
   bottom: 0;
-  left: 0;
+  @include left(0);
   display: flex;
   width: 100%;
   background: rgba(0, 0, 0, 0.6);
@@ -821,20 +828,20 @@ strong {
     display: flex;
     align-self: center;
     position: fixed;
-    left: 50%;
+    @include left(50%);
     transform: translate(-50%);
   }
 
   .proceed {
     padding: 8px 16px;
     border-radius: 4px;
-    border-top: #3A95BC 1px solid;
-    border-right: #3A95BC 1px solid;
-    border-left: #3A95BC 1px solid;
-    border-bottom: #3A95BC 1px solid;
+    border-top: #3a95bc 1px solid;
+    border-right: #3a95bc 1px solid;
+    border-left: #3a95bc 1px solid;
+    border-bottom: #3a95bc 1px solid;
     color: #fff;
     text-shadow: 0px 0px 0.1em #333;
-    background: #3A95BC linear-gradient(to bottom, #5cabcd, #49a1c7 10%, #3A95BC);
+    background: #3a95bc linear-gradient(to bottom, #5cabcd, #49a1c7 10%, #3a95bc);
 
     &:hover {
       background-image: none;
@@ -847,7 +854,7 @@ strong {
   background: white;
   height: auto;
   top: 50%;
-  left: 50%;
+  @include left(50%);
   transform: translate(-50%, -50%);
   width: 600px;
   margin: 30px auto;
@@ -902,11 +909,11 @@ strong {
 
   &.exclamation-mark::after {
     color: $brand-danger;
-    content: '\f06a';
+    content: "\f06a";
     font-family: FontAwesome;
     display: inline-block;
-    text-align: right;
-    margin-left: 0.5em;
+    @include text-align(right);
+    @include margin-left(0.5em);
   }
 }
 
@@ -957,4 +964,4 @@ strong {
 
 .checkbox-component-container {
   line-height: initial;
-}
\ No newline at end of file
+}