aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2017-05-18 14:11:48 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-05-18 14:11:48 +0200
commit6dde00fb2e3cee979d6b2fafb1c0adc1443d6c14 (patch)
tree285f4929ce46d69f3e5e9182e55311dd3d41683c
parentfb1b8a2790a5984c7e47539c2012030633d2b3e7 (diff)
downloadfosdem-2018-presentation-6dde00fb2e3cee979d6b2fafb1c0adc1443d6c14.tar
fosdem-2018-presentation-6dde00fb2e3cee979d6b2fafb1c0adc1443d6c14.tar.gz
improve controls on touch devices
-rw-r--r--css/reveal.css10
-rw-r--r--css/reveal.scss40
-rw-r--r--js/reveal.js7
3 files changed, 40 insertions, 17 deletions
diff --git a/css/reveal.css b/css/reveal.css
index c8cefe1..bc31453 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -376,6 +376,16 @@ body {
.reveal.has-light-background .controls {
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) {
.reveal .controls[data-controls-layout="edges"] {
top: 0;
diff --git a/css/reveal.scss b/css/reveal.scss
index 31f235f..b82cebc 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -251,22 +251,22 @@ $controlArrowSize: 3.6em;
$controlArrowSpacing: 1.4em;
$controlArrowLength: 2.6em;
$controlArrowThickness: 0.5em;
+$controlsArrowAngle: 45deg;
+$controlsArrowAngleHover: 40deg;
+$controlsArrowAngleActive: 36deg;
-.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 );
- }
+@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 );
- }
+ &:after {
+ transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
}
+}
+
+.reveal .controls {
+ $spacing: 12px;
display: none;
position: absolute;
@@ -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) {
diff --git a/js/reveal.js b/js/reveal.js
index bf2f6a0..d0178d4 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -523,6 +523,13 @@
// Prevent transitions while we're loading
dom.slides.classList.add( 'no-transition' );
+ if( isMobileDevice ) {
+ dom.wrapper.classList.add( 'no-hover' );
+ }
+ else {
+ dom.wrapper.classList.remove( 'no-hover' );
+ }
+
// Background element
dom.background = createSingletonNode( dom.wrapper, 'div', 'backgrounds', null );