Merge branch 'in0ni-fix-dir-rtl'

Author: JoeGermuska

CONTRIBUTING.md

@@ -28,7 +28,7 @@ Timeline uses `webpack` for bundling, and uses the `webpack-dev-server` as part
 
 ### Building
 
-In order to "compile" TimelineJS for use in other contexts, after following the instructions above, run the command `npm run dist`. This will populate a directory, `dist/` in the rool of your checked-out repository, with the javascript and CSS necessary to self-host TimelineJS.
+In order to "compile" TimelineJS for use in other contexts, after following the instructions above, run the command `npm run dist`. This will populate a directory, `dist/` in the root of your checked-out repository, with the javascript and CSS necessary to self-host TimelineJS.
 
 
 ### Testing

src/js/slider/SlideNav.js

@@ -114,7 +114,7 @@ export class SlideNav {
 		this._el.title = DOM.create("div", "tl-slidenav-title", this._el.content_container);
 		this._el.description = DOM.create("div", "tl-slidenav-description", this._el.content_container);
 
-		this._el.icon.innerHTML				= " "
+		// this._el.icon.innerHTML				= " "
 
 		this._update();
 	}

src/less/Variables.less

@@ -103,6 +103,8 @@
 @opacity-slide-nav-title:		15;
 @opacity-slide-nav-desc:		 0;
 @opacity-slide-nav-desc-hover:  50;
+@width-slide-nav:				100px;
+@margin-slide-nav:				10px;
 
 /* Animation
 ================================================== */

src/less/slider/TL.SlideNav.less

@@ -19,8 +19,7 @@
     font-weight: inherit;
 
     .tl-slidenav-content-container {
-		width:100px;
-		position:absolute;
+		width:@width-slide-nav;
 	}
 	.tl-slidenav-title, .tl-slidenav-description {
 		//width:100%;
@@ -102,8 +101,8 @@
 
 .tl-slidenav-next {
 	text-align: right;
-	margin-right:10px;
-    right: 100px;
+	margin-right:@margin-slide-nav;
+    right: 0;
 	.tl-slidenav-title, .tl-slidenav-description {
 		margin-left:20px;
 	}
@@ -116,7 +115,8 @@
 }
 .tl-slidenav-previous {
 	text-align: left;
-	margin-left:10px;
+    left: 0;
+	margin-left:@margin-slide-nav;
 	.tl-slidenav-icon {
 		margin-left: 0px;
 	}
@@ -125,6 +125,18 @@
 	}
 }
 
+// Fixes usage of browsers default setting of `direction: rtl`
+[dir="rtl"] {
+	.tl-slidenav-previous {
+		direction: ltr;
+	}
+	.tl-slidenav-next {
+		&:hover .tl-slidenav-icon {
+			margin-right: -4px;
+		}
+	}
+}
+
 
 
 /* NAVIGATION HOVER
@@ -162,7 +174,6 @@
 } 
 .tl-skinny {
 	.tl-slidenav-next {
-	    right: 32px;
 		.tl-slidenav-icon {
 			margin-left:32 - 24px;
 		}

src/less/timenav/TL.TimeNav.less

@@ -12,6 +12,8 @@
 	//border-top: 1px solid #e3e3e3;
 	//box-shadow: inset 10px 10px 5px 0px rgba(0,0,0,0.75);
 	//.box-shadow(inset -7px 0px 7px rgba(0,0,0,.30));
+	// fixes use of [dir="rtl"]
+	direction: ltr;
 
 	.tl-timenav-line {
 		position: absolute;