Add RTL support to Controls
Add RTL support to Controls
This commit is contained in:
Martino
@ -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; }
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user