Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
server
team-presentation
Commits
6dde00fb
Commit
6dde00fb
authored
May 18, 2017
by
Hakim El Hattab
Browse files
improve controls on touch devices
parent
fb1b8a27
Changes
3
Hide whitespace changes
Inline
Side-by-side
css/reveal.css
View file @
6dde00fb
...
...
@@ -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
;
...
...
css/reveal.scss
View file @
6dde00fb
...
...
@@ -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
a
rrowTransform
(
$
a
ngle
);
@include
controlsA
rrowTransform
(
$
controlsArrowA
ngle
);
&
:hover
{
@include
a
rrowTransform
(
$
a
ngleHover
);
@include
controlsA
rrowTransform
(
$
controlsArrowA
ngleHover
);
}
&
:active
{
@include
a
rrowTransform
(
$
a
ngleActive
);
@include
controlsA
rrowTransform
(
$
controlsArrowA
ngleActive
);
}
}
...
...
@@ -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
)
{
...
...
js/reveal.js
View file @
6dde00fb
...
...
@@ -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
);
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment