mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-16 19:44:13 +02:00
Code Issues Releases Wiki Activity

Add RTL support to Controls

Browse Source 
Add RTL support to Controls
This commit is contained in:
Martino
2020-02-05 14:16:15 +01:00
parent b6c890b1a7
commit ccb42c7ca9
3 changed files with 125 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
css/reveal.scss
View File

@@ -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;