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
c966672a
Commit
c966672a
authored
May 17, 2017
by
Hakim El Hattab
Browse files
adjust control layouts when there are no vertical/horiozontal slides
parent
b784bd56
Changes
2
Hide whitespace changes
Inline
Side-by-side
css/reveal.css
View file @
c966672a
...
...
@@ -319,8 +319,8 @@ body {
-webkit-transform
:
translateY
(
-10px
);
transform
:
translateY
(
-10px
);
}
.reveal
.controls
.navigate-up
.pagination-arrow
{
-webkit-transform
:
translateX
(
-50%
)
rotate
(
90deg
);
transform
:
translateX
(
-50%
)
rotate
(
90deg
);
}
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
}
.reveal
.controls
.navigate-down
{
right
:
3.2em
;
bottom
:
0
;
...
...
@@ -353,38 +353,17 @@ body {
.reveal
.controls
.enabled
:hover
,
.reveal
.controls
.enabled.fragmented
:hover
{
opacity
:
1
;
}
@media
screen
and
(
min-width
:
500px
)
{
.reveal
.controls
[
data-controls-layout
=
"edges"
]
{
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-left
,
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-right
,
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-up
,
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-down
{
bottom
:
auto
;
right
:
auto
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-left
{
top
:
50%
;
left
:
8px
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-right
{
top
:
50%
;
right
:
8px
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-up
{
top
:
8px
;
left
:
50%
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-down
{
bottom
:
8px
;
left
:
50%
;
}
}
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-left
,
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-right
{
bottom
:
0
;
}
bottom
:
10px
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-up
,
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-down
{
right
:
0
;
}
right
:
10px
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-up
{
bottom
:
3.9em
;
}
.reveal.has-dark-background
.controls
.pagination-arrow
:after
,
.reveal.has-dark-background
.controls
.pagination-arrow
:before
{
...
...
@@ -394,6 +373,31 @@ body {
.reveal.has-light-background
.controls
.pagination-arrow
:before
{
background-color
:
#000
;
}
@media
screen
and
(
min-width
:
500px
)
{
.reveal
.controls
[
data-controls-layout
=
"edges"
]
{
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-left
,
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-right
,
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-up
,
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-down
{
bottom
:
auto
;
right
:
auto
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-left
{
top
:
50%
;
left
:
8px
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-right
{
top
:
50%
;
right
:
8px
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-up
{
top
:
8px
;
left
:
50%
;
}
.reveal
.controls
[
data-controls-layout
=
"edges"
]
.navigate-down
{
bottom
:
8px
;
left
:
50%
;
}
}
/*********************************************
* PROGRESS BAR
*********************************************/
...
...
css/reveal.scss
View file @
c966672a
...
...
@@ -247,23 +247,24 @@ body {
30
%
{
transform
:
translateY
(
-5px
);}
}
$controlArrowSize
:
3
.6em
;
$controlArrowSpacing
:
1
.4em
;
$controlArrowLength
:
2
.6em
;
$controlArrowThickness
:
0
.5em
;
.reveal
.controls
{
$size
:
3
.6em
;
$length
:
2
.6em
;
$thickness
:
0
.5em
;
$angle
:
45deg
;
$angleHover
:
40deg
;
$angleActive
:
36deg
;
$spacing
:
12px
;
$innerSpacing
:
1
.4em
;
@mixin
arrowTransform
(
$angle
)
{
&
:before
{
transform
:
translateX
((
$
size
-
$length
)
/
2
)
translateY
((
$size
-
$t
hickness
)
/
2
)
rotate
(
$angle
);
transform
:
translateX
((
$
controlArrowSize
-
$controlArrowLength
)
/
2
)
translateY
((
$controlArrowSize
-
$controlArrowT
hickness
)
/
2
)
rotate
(
$angle
);
}
&
:after
{
transform
:
translateX
((
$
size
-
$length
)
/
2
)
translateY
((
$size
-
$t
hickness
)
/
2
)
rotate
(
-
$angle
);
transform
:
translateX
((
$
controlArrowSize
-
$controlArrowLength
)
/
2
)
translateY
((
$controlArrowSize
-
$controlArrowT
hickness
)
/
2
)
rotate
(
-
$angle
);
}
}
...
...
@@ -307,20 +308,20 @@ body {
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
$
l
ength
;
height
:
$
t
hickness
;
border-radius
:
$
t
hickness
/
2
;
width
:
$
controlArrowL
ength
;
height
:
$
controlArrowT
hickness
;
border-radius
:
$
controlArrowT
hickness
/
2
;
background-color
:
currentColor
;
transition
:
all
0
.15s
ease
,
background-color
0
.8s
ease
;
transform-origin
:
$
t
hickness
/
2
50%
;
transform-origin
:
$
controlArrowT
hickness
/
2
50%
;
will-change
:
transform
;
}
.pagination-arrow
{
position
:
relative
;
width
:
$
s
ize
;
height
:
$
s
ize
;
width
:
$
controlArrowS
ize
;
height
:
$
controlArrowS
ize
;
@include
arrowTransform
(
$angle
);
...
...
@@ -334,14 +335,14 @@ body {
}
.navigate-left
{
right
:
$
size
+
$inner
Spacing
*
2
;
bottom
:
$
innerSpacing
+
$s
ize
/
2
;
right
:
$
controlArrowSize
+
$controlArrow
Spacing
*
2
;
bottom
:
$
controlArrowSpacing
+
$controlArrowS
ize
/
2
;
transform
:
translateX
(
-10px
);
}
.navigate-right
{
right
:
0
;
bottom
:
$
innerSpacing
+
$s
ize
/
2
;
bottom
:
$
controlArrowSpacing
+
$controlArrowS
ize
/
2
;
transform
:
translateX
(
10px
);
.pagination-arrow
{
...
...
@@ -354,17 +355,17 @@ body {
}
.navigate-up
{
right
:
$
inner
Spacing
;
bottom
:
$
inner
Spacing
*
2
+
$
s
ize
;
right
:
$
controlArrow
Spacing
;
bottom
:
$
controlArrow
Spacing
*
2
+
$
controlArrowS
ize
;
transform
:
translateY
(
-10px
);
.pagination-arrow
{
transform
:
translateX
(
-50%
)
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
}
}
.navigate-down
{
right
:
$
innerSpacing
+
$s
ize
/
2
;
right
:
$
controlArrowSpacing
+
$controlArrowS
ize
/
2
;
bottom
:
0
;
transform
:
translateY
(
10px
);
...
...
@@ -415,60 +416,20 @@ body {
.enabled.fragmented
:hover
{
opacity
:
1
;
}
@media
screen
and
(
min-width
:
500px
)
{
$spacing
:
8px
;
&
[
data-controls-layout
=
"edges"
]
{
&
{
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
}
.navigate-left
,
.navigate-right
,
.navigate-up
,
.navigate-down
{
bottom
:
auto
;
right
:
auto
;
}
.navigate-left
{
top
:
50%
;
left
:
$spacing
;
}
.navigate-right
{
top
:
50%
;
right
:
$spacing
;
}
.navigate-up
{
top
:
$spacing
;
left
:
50%
;
}
.navigate-down
{
bottom
:
$spacing
;
left
:
50%
;
}
}
}
}
// Adjust the layout when there are no vertical slides
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-left
,
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-right
{
bottom
:
0
;
bottom
:
10px
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-up
,
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-down
{
right
:
0
;
right
:
10px
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-up
{
bottom
:
$controlArrowSpacing
*
1
.5
+
$controlArrowSize
/
2
;
}
.reveal.has-dark-background
.controls
.pagination-arrow
:after
,
...
...
@@ -481,6 +442,50 @@ body {
background-color
:
#000
;
}
// Edge aligned controls layout
@media
screen
and
(
min-width
:
500px
)
{
$spacing
:
8px
;
.reveal
.controls
[
data-controls-layout
=
"edges"
]
{
&
{
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
}
.navigate-left
,
.navigate-right
,
.navigate-up
,
.navigate-down
{
bottom
:
auto
;
right
:
auto
;
}
.navigate-left
{
top
:
50%
;
left
:
$spacing
;
}
.navigate-right
{
top
:
50%
;
right
:
$spacing
;
}
.navigate-up
{
top
:
$spacing
;
left
:
50%
;
}
.navigate-down
{
bottom
:
$spacing
;
left
:
50%
;
}
}
}
/*********************************************
* PROGRESS BAR
...
...
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