Commit 6dde00fb authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

improve controls on touch devices

parent fb1b8a27
...@@ -376,6 +376,16 @@ body { ...@@ -376,6 +376,16 @@ body {
.reveal.has-light-background .controls { .reveal.has-light-background .controls {
color: #000; } color: #000; }
.reveal.no-hover .controls .controls-arrow:hover:before,
.reveal.no-hover .controls .controls-arrow:active:before {
-webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
transform: translateX(0.5em) translateY(1.55em) rotate(45deg); }
.reveal.no-hover .controls .controls-arrow:hover:after,
.reveal.no-hover .controls .controls-arrow:active:after {
-webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
transform: translateX(0.5em) translateY(1.55em) rotate(-45deg); }
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
.reveal .controls[data-controls-layout="edges"] { .reveal .controls[data-controls-layout="edges"] {
top: 0; top: 0;
......
...@@ -251,22 +251,22 @@ $controlArrowSize: 3.6em; ...@@ -251,22 +251,22 @@ $controlArrowSize: 3.6em;
$controlArrowSpacing: 1.4em; $controlArrowSpacing: 1.4em;
$controlArrowLength: 2.6em; $controlArrowLength: 2.6em;
$controlArrowThickness: 0.5em; $controlArrowThickness: 0.5em;
$controlsArrowAngle: 45deg;
$controlsArrowAngleHover: 40deg;
$controlsArrowAngleActive: 36deg;
.reveal .controls { @mixin controlsArrowTransform( $angle ) {
$angle: 45deg; &:before {
$angleHover: 40deg; transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
$angleActive: 36deg; }
$spacing: 12px;
@mixin arrowTransform( $angle ) {
&:before {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
}
&:after { &:after {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle ); transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
}
} }
}
.reveal .controls {
$spacing: 12px;
display: none; display: none;
position: absolute; position: absolute;
...@@ -323,14 +323,14 @@ $controlArrowThickness: 0.5em; ...@@ -323,14 +323,14 @@ $controlArrowThickness: 0.5em;
width: $controlArrowSize; width: $controlArrowSize;
height: $controlArrowSize; height: $controlArrowSize;
@include arrowTransform( $angle ); @include controlsArrowTransform( $controlsArrowAngle );
&:hover { &:hover {
@include arrowTransform( $angleHover ); @include controlsArrowTransform( $controlsArrowAngleHover );
} }
&:active { &:active {
@include arrowTransform( $angleActive ); @include controlsArrowTransform( $controlsArrowAngleActive );
} }
} }
...@@ -438,14 +438,20 @@ $controlArrowThickness: 0.5em; ...@@ -438,14 +438,20 @@ $controlArrowThickness: 0.5em;
bottom: $controlArrowSpacing; bottom: $controlArrowSpacing;
} }
// Invert arrows based on background color
.reveal.has-dark-background .controls { .reveal.has-dark-background .controls {
color: #fff; color: #fff;
} }
.reveal.has-light-background .controls { .reveal.has-light-background .controls {
color: #000; color: #000;
} }
// Disable active states on touch devices
.reveal.no-hover .controls .controls-arrow:hover,
.reveal.no-hover .controls .controls-arrow:active {
@include controlsArrowTransform( $controlsArrowAngle );
}
// Edge aligned controls layout // Edge aligned controls layout
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
......
...@@ -523,6 +523,13 @@ ...@@ -523,6 +523,13 @@
// Prevent transitions while we're loading // Prevent transitions while we're loading
dom.slides.classList.add( 'no-transition' ); dom.slides.classList.add( 'no-transition' );
if( isMobileDevice ) {
dom.wrapper.classList.add( 'no-hover' );
}
else {
dom.wrapper.classList.remove( 'no-hover' );
}
// Background element // Background element
dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null ); dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment