Update RTL to use root element dir (#30)

CHANGELOG.md

@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## v7.1.0
+## Changed
+- RTL is now handled by using the `dir` attribute in the root html element.
+
+## v7.0.4
+## Fixed
+- `--color-bg-loading-panel` color in dark mode to be a darker grey to decrease its contrast
+
+## v7.0.3
+## Fixed
+- Reverted container color change made in v7.0.2
+- Added appropriate dashboard background color.
+
+## v7.0.2
+## Changed
+- Container background color in light color to be light gray instead of white
+
 ## v7.0.1
 ### Fixed
 - Rename fluent themes to default names

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
   "description": "Azure IoT common styles library for CSS, Colors and Themes",
-  "version": "7.0.4",
+  "version": "7.1.0",
   "license": "MIT",
   "engines": {
     "node": "^8.0.0"

src/_mixins.scss

@@ -5,7 +5,7 @@
 /// Right to left 
 ///
 @mixin rtl() {
-    :global(.rtl) & {
+    :root[dir='rtl'] & {
         @content;
     }
 }

src/_normalize.scss

@@ -9,6 +9,10 @@
 @import "constants";
 @import "mixins";
 
+:root[dir='rtl'] {
+  direction: rtl;
+}
+
 :global {
   body {
     margin: 0;