Merge pull request #2579 from Martinomagnifico/dev

Add RTL support to Controls

2 files changed, 91 insertions, 5 deletions

diff --git a/css/reveal.css b/css/reveal.css
index e7c6b1c..143755d 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -198,6 +198,28 @@ body {
     -webkit-transform: translateX(-5px);
             transform: translateX(-5px); } }
 
+@-webkit-keyframes bounce-left {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0); }
+  20% {
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px); }
+  30% {
+    -webkit-transform: translateX(5px);
+            transform: translateX(5px); } }
+
+@keyframes bounce-left {
+  0%, 10%, 25%, 40%, 50% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0); }
+  20% {
+    -webkit-transform: translateX(-10px);
+            transform: translateX(-10px); }
+  30% {
+    -webkit-transform: translateX(5px);
+            transform: translateX(5px); } }
+
 @-webkit-keyframes bounce-down {
   0%, 10%, 25%, 40%, 50% {
     -webkit-transform: translateY(0);
@@ -291,6 +313,9 @@ body {
     bottom: 3.2em;
     -webkit-transform: translateX(-10px);
             transform: translateX(-10px); }
+    .reveal .controls .navigate-left.highlight {
+      -webkit-animation: bounce-left 2s 50 both ease-out;
+              animation: bounce-left 2s 50 both ease-out; }
   .reveal .controls .navigate-right {
     right: 0;
     bottom: 3.2em;
@@ -322,13 +347,10 @@ body {
     .reveal .controls .navigate-down.highlight {
       -webkit-animation: bounce-down 2s 50 both ease-out;
               animation: bounce-down 2s 50 both ease-out; }
-  .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
   .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
     opacity: 0.3; }
-    .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,
     .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {
       opacity: 1; }
-  .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,
   .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {
     opacity: 0;
     visibility: hidden; }
@@ -344,6 +366,24 @@ body {
   .reveal .controls .enabled.fragmented:hover {
     opacity: 1; }
 
+.reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled {
+  opacity: 0.3; }
+  .reveal:not(.rtl) .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover {
+    opacity: 1; }
+
+.reveal:not(.rtl) .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled {
+  opacity: 0;
+  visibility: hidden; }
+
+.reveal.rtl .controls[data-controls-back-arrows="faded"] .navigate-right.enabled {
+  opacity: 0.3; }
+  .reveal.rtl .controls[data-controls-back-arrows="faded"] .navigate-right.enabled:hover {
+    opacity: 1; }
+
+.reveal.rtl .controls[data-controls-back-arrows="hidden"] .navigate-right.enabled {
+  opacity: 0;
+  visibility: hidden; }
+
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
   display: none; }
diff --git a/css/reveal.scss b/css/reveal.scss
index ab11f32..7b91d7f 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -230,6 +230,12 @@ body {
 	30% {transform: translateX(-5px);}
 }
 
+@keyframes bounce-left {
+	0%, 10%, 25%, 40%, 50% {transform: translateX(0);}
+	20% {transform: translateX(-10px);}
+	30% {transform: translateX(5px);}
+}
+
 @keyframes bounce-down {
 	0%, 10%, 25%, 40%, 50% {transform: translateY(0);}
 	20% {transform: translateY(10px);}
@@ -327,6 +333,10 @@ $controlsArrowAngleActive: 36deg;
 		right: $controlArrowSize + $controlArrowSpacing*2;
 		bottom: $controlArrowSpacing + $controlArrowSize/2;
 		transform: translateX( -10px );
+
+		&.highlight {
+			animation: bounce-left 2s 50 both ease-out;
+		}
 	}
 
 	.navigate-right {
@@ -371,7 +381,6 @@ $controlsArrowAngleActive: 36deg;
 	// Back arrow style: "faded":
 	// Deemphasize backwards navigation arrows in favor of drawing
 	// attention to forwards navigation
-	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
 	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
 		opacity: 0.3;
 
@@ -382,7 +391,6 @@ $controlsArrowAngleActive: 36deg;
 
 	// Back arrow style: "hidden":
 	// Never show arrows for backwards navigation
-	&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
 	&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
 		opacity: 0;
 		visibility: hidden;
@@ -408,6 +416,44 @@ $controlsArrowAngleActive: 36deg;
 	}
 }
 
+.reveal:not(.rtl) .controls {
+	// Back arrow style: "faded":
+	// Deemphasize left arrow
+	&[data-controls-back-arrows="faded"] .navigate-left.enabled {
+		opacity: 0.3;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	// Back arrow style: "hidden":
+	// Never show left arrow
+	&[data-controls-back-arrows="hidden"] .navigate-left.enabled {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
+.reveal.rtl .controls {
+	// Back arrow style: "faded":
+	// Deemphasize right arrow in RTL mode
+	&[data-controls-back-arrows="faded"] .navigate-right.enabled  {
+		opacity: 0.3;
+
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	// Back arrow style: "hidden":
+	// Never show right arrow in RTL mode
+	&[data-controls-back-arrows="hidden"] .navigate-right.enabled {
+		opacity: 0;
+		visibility: hidden;
+	}
+}
+
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
 .reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
 	display: none;