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

@@ -1,3 +1,5 @@
+@import './mixins';
+
 /*
 Alerts
 
@@ -52,20 +54,20 @@ 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%);
 		}
 	}
 
 	&.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;
 	}

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);
         }
     }
 }

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);
   }

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();
 }

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 {

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;

src/common/_facility-approved-product-table.scss

@@ -34,6 +34,6 @@
     color: $red;
   }
   input.btn-danger {
-    margin-left: 3px;
+    @include margin-left(3px);
   }
 }

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;

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);
     }
 }

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);
     }
 }

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

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);
     }
 }