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

improve controls on touch devices

Browse Source
This commit is contained in:
Hakim El Hattab
2017-05-18 14:11:48 +02:00
parent fb1b8a2790
commit 6dde00fb2e
3 changed files with 40 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
css/reveal.scss
View File

@@ -251,23 +251,23 @@ $controlArrowSize: 3.6em;
$controlArrowSpacing: 1.4em;
$controlArrowLength: 2.6em;
$controlArrowThickness: 0.5em;
$controlsArrowAngle: 45deg;
$controlsArrowAngleHover: 40deg;
$controlsArrowAngleActive: 36deg;
@mixin controlsArrowTransform( $angle ) {
&:before {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
}
&:after {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
}
}
.reveal .controls {
$angle: 45deg;
$angleHover: 40deg;
$angleActive: 36deg;
$spacing: 12px;
@mixin arrowTransform( $angle ) {
&:before {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
}
&:after {
transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
}
}
display: none;
position: absolute;
top: auto;
@@ -323,14 +323,14 @@ $controlArrowThickness: 0.5em;
width: $controlArrowSize;
height: $controlArrowSize;
@include arrowTransform( $angle );
@include controlsArrowTransform( $controlsArrowAngle );
&:hover {
@include arrowTransform( $angleHover );
@include controlsArrowTransform( $controlsArrowAngleHover );
}
&:active {
@include arrowTransform( $angleActive );
@include controlsArrowTransform( $controlsArrowAngleActive );
}
}
@@ -438,14 +438,20 @@ $controlArrowThickness: 0.5em;
bottom: $controlArrowSpacing;
}
// Invert arrows based on background color
.reveal.has-dark-background .controls {
color: #fff;
}
.reveal.has-light-background .controls {
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
@media screen and (min-width: 500px) {