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
fb1b8a27
Commit
fb1b8a27
authored
May 18, 2017
by
Hakim El Hattab
Browse files
revise progress to make them easier to override
parent
a5e175d5
Changes
15
Hide whitespace changes
Inline
Side-by-side
css/reveal.css
View file @
fb1b8a27
...
...
@@ -261,8 +261,8 @@ body {
opacity
:
0
;
-webkit-appearance
:
none
;
-webkit-tap-highlight-color
:
transparent
;
}
.reveal
.controls
.
pagination
-arrow
:before
,
.reveal
.controls
.
pagination
-arrow
:after
{
.reveal
.controls
.
controls
-arrow
:before
,
.reveal
.controls
.
controls
-arrow
:after
{
content
:
''
;
position
:
absolute
;
top
:
0
;
...
...
@@ -275,26 +275,26 @@ body {
-webkit-transform-origin
:
0.25em
50%
;
transform-origin
:
0.25em
50%
;
will-change
:
transform
;
}
.reveal
.controls
.
pagination
-arrow
{
.reveal
.controls
.
controls
-arrow
{
position
:
relative
;
width
:
3.6em
;
height
:
3.6em
;
}
.reveal
.controls
.
pagination
-arrow
:before
{
.reveal
.controls
.
controls
-arrow
:before
{
-webkit-transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
45deg
);
transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
45deg
);
}
.reveal
.controls
.
pagination
-arrow
:after
{
.reveal
.controls
.
controls
-arrow
:after
{
-webkit-transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
-45deg
);
transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
-45deg
);
}
.reveal
.controls
.
pagination
-arrow
:hover:before
{
.reveal
.controls
.
controls
-arrow
:hover:before
{
-webkit-transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
40deg
);
transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
40deg
);
}
.reveal
.controls
.
pagination
-arrow
:hover:after
{
.reveal
.controls
.
controls
-arrow
:hover:after
{
-webkit-transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
-40deg
);
transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
-40deg
);
}
.reveal
.controls
.
pagination
-arrow
:active:before
{
.reveal
.controls
.
controls
-arrow
:active:before
{
-webkit-transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
36deg
);
transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
36deg
);
}
.reveal
.controls
.
pagination
-arrow
:active:after
{
.reveal
.controls
.
controls
-arrow
:active:after
{
-webkit-transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
-36deg
);
transform
:
translateX
(
0.5em
)
translateY
(
1.55em
)
rotate
(
-36deg
);
}
.reveal
.controls
.navigate-left
{
...
...
@@ -307,7 +307,7 @@ body {
bottom
:
3.2em
;
-webkit-transform
:
translateX
(
10px
);
transform
:
translateX
(
10px
);
}
.reveal
.controls
.navigate-right
.
pagination
-arrow
{
.reveal
.controls
.navigate-right
.
controls
-arrow
{
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
);
}
.reveal
.controls
.navigate-right.highlight
{
...
...
@@ -318,7 +318,7 @@ body {
bottom
:
6.4em
;
-webkit-transform
:
translateY
(
-10px
);
transform
:
translateY
(
-10px
);
}
.reveal
.controls
.navigate-up
.
pagination
-arrow
{
.reveal
.controls
.navigate-up
.
controls
-arrow
{
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
}
.reveal
.controls
.navigate-down
{
...
...
@@ -326,7 +326,7 @@ body {
bottom
:
0
;
-webkit-transform
:
translateY
(
10px
);
transform
:
translateY
(
10px
);
}
.reveal
.controls
.navigate-down
.
pagination
-arrow
{
.reveal
.controls
.navigate-down
.
controls
-arrow
{
-webkit-transform
:
rotate
(
-90deg
);
transform
:
rotate
(
-90deg
);
}
.reveal
.controls
.navigate-down.highlight
{
...
...
@@ -355,20 +355,20 @@ body {
opacity
:
1
;
}
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-left
{
bottom
:
1.
2
em
;
right
:
5.8
em
;
}
bottom
:
1.
4
em
;
right
:
6.4
em
;
}
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-right
{
bottom
:
1.
2
em
;
right
:
1.
2
em
;
}
bottom
:
1.
4
em
;
right
:
1.
4
em
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-up
{
right
:
1.
2
em
;
bottom
:
5.8
em
;
}
right
:
1.
4
em
;
bottom
:
6.4
em
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-down
{
right
:
1.
2
em
;
bottom
:
1.
2
em
;
}
right
:
1.
4
em
;
bottom
:
1.
4
em
;
}
.reveal.has-dark-background
.controls
{
color
:
#fff
;
}
...
...
@@ -412,7 +412,8 @@ body {
bottom
:
0
;
left
:
0
;
z-index
:
10
;
background-color
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background-color
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#fff
;
}
.reveal
.progress
:after
{
content
:
''
;
...
...
@@ -426,7 +427,7 @@ body {
display
:
block
;
height
:
100%
;
width
:
0px
;
background-color
:
#000
;
background-color
:
currentColor
;
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
/*********************************************
...
...
css/reveal.scss
View file @
fb1b8a27
...
...
@@ -302,8 +302,8 @@ $controlArrowThickness: 0.5em;
-webkit-tap-highlight-color
:
rgba
(
0
,
0
,
0
,
0
);
}
.
pagination
-arrow
:before
,
.
pagination
-arrow
:after
{
.
controls
-arrow
:before
,
.
controls
-arrow
:after
{
content
:
''
;
position
:
absolute
;
top
:
0
;
...
...
@@ -318,7 +318,7 @@ $controlArrowThickness: 0.5em;
will-change
:
transform
;
}
.
pagination
-arrow
{
.
controls
-arrow
{
position
:
relative
;
width
:
$controlArrowSize
;
height
:
$controlArrowSize
;
...
...
@@ -345,7 +345,7 @@ $controlArrowThickness: 0.5em;
bottom
:
$controlArrowSpacing
+
$controlArrowSize
/
2
;
transform
:
translateX
(
10px
);
.
pagination
-arrow
{
.
controls
-arrow
{
transform
:
rotate
(
180deg
);
}
...
...
@@ -359,7 +359,7 @@ $controlArrowThickness: 0.5em;
bottom
:
$controlArrowSpacing
*
2
+
$controlArrowSize
;
transform
:
translateY
(
-10px
);
.
pagination
-arrow
{
.
controls
-arrow
{
transform
:
rotate
(
90deg
);
}
}
...
...
@@ -369,7 +369,7 @@ $controlArrowThickness: 0.5em;
bottom
:
0
;
transform
:
translateY
(
10px
);
.
pagination
-arrow
{
.
controls
-arrow
{
transform
:
rotate
(
-90deg
);
}
...
...
@@ -420,22 +420,22 @@ $controlArrowThickness: 0.5em;
// Adjust the layout when there are no vertical slides
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-left
{
bottom
:
1
.2em
;
right
:
2
.2em
+
$controlArrowSize
;
bottom
:
$controlArrowSpacing
;
right
:
$controlArrowSpacing
*
2
+
$controlArrowSize
;
}
.reveal
:not
(
.has-vertical-slides
)
.controls
.navigate-right
{
bottom
:
1
.2em
;
right
:
1
.2em
;
bottom
:
$controlArrowSpacing
;
right
:
$controlArrowSpacing
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-up
{
right
:
1
.2em
;
bottom
:
2
.2em
+
$controlArrowSize
;
right
:
$controlArrowSpacing
;
bottom
:
$controlArrowSpacing
*
2
+
$controlArrowSize
;
}
.reveal
:not
(
.has-horizontal-slides
)
.controls
.navigate-down
{
right
:
1
.2em
;
bottom
:
1
.2em
;
right
:
$controlArrowSpacing
;
bottom
:
$controlArrowSpacing
;
}
.reveal.has-dark-background
.controls
{
...
...
@@ -505,6 +505,7 @@ $controlArrowThickness: 0.5em;
z-index
:
10
;
background-color
:
rgba
(
0
,
0
,
0
,
0
.2
);
color
:
#fff
;
}
.reveal
.progress
:after
{
content
:
''
;
...
...
@@ -519,7 +520,7 @@ $controlArrowThickness: 0.5em;
height
:
100%
;
width
:
0px
;
background-color
:
#000
;
background-color
:
currentColor
;
transition
:
width
800ms
cubic-bezier
(
0
.260
,
0
.860
,
0
.440
,
0
.985
);
}
...
...
css/theme/beige.css
View file @
fb1b8a27
...
...
@@ -262,10 +262,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#8b743d
;
}
.reveal
.progress
span
{
background
:
#8b743d
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/black.css
View file @
fb1b8a27
...
...
@@ -258,10 +258,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#42affa
;
}
.reveal
.progress
span
{
background
:
#42affa
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/blood.css
View file @
fb1b8a27
...
...
@@ -261,10 +261,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#a23
;
}
.reveal
.progress
span
{
background
:
#a23
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
...
...
css/theme/league.css
View file @
fb1b8a27
...
...
@@ -264,10 +264,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#13DAEC
;
}
.reveal
.progress
span
{
background
:
#13DAEC
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/moon.css
View file @
fb1b8a27
...
...
@@ -262,10 +262,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#268bd2
;
}
.reveal
.progress
span
{
background
:
#268bd2
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/night.css
View file @
fb1b8a27
...
...
@@ -256,10 +256,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#e7ad52
;
}
.reveal
.progress
span
{
background
:
#e7ad52
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/serif.css
View file @
fb1b8a27
...
...
@@ -258,10 +258,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#51483D
;
}
.reveal
.progress
span
{
background
:
#51483D
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/simple.css
View file @
fb1b8a27
...
...
@@ -261,10 +261,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#00008B
;
}
.reveal
.progress
span
{
background
:
#00008B
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/sky.css
View file @
fb1b8a27
...
...
@@ -265,10 +265,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#3b759e
;
}
.reveal
.progress
span
{
background
:
#3b759e
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/solarized.css
View file @
fb1b8a27
...
...
@@ -262,10 +262,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#268bd2
;
}
.reveal
.progress
span
{
background
:
#268bd2
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
css/theme/template/theme.scss
View file @
fb1b8a27
...
...
@@ -308,10 +308,9 @@ body {
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0
.2
);
color
:
$linkColor
;
}
.reveal
.progress
span
{
background
:
$linkColor
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0
.260
,
0
.860
,
0
.440
,
0
.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0
.260
,
0
.860
,
0
.440
,
0
.985
);
transition
:
width
800ms
cubic-bezier
(
0
.260
,
0
.860
,
0
.440
,
0
.985
);
...
...
css/theme/white.css
View file @
fb1b8a27
...
...
@@ -258,10 +258,10 @@ body {
* PROGRESS BAR
*********************************************/
.reveal
.progress
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
}
background
:
rgba
(
0
,
0
,
0
,
0.2
);
color
:
#2a76dd
;
}
.reveal
.progress
span
{
background
:
#2a76dd
;
-webkit-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
-moz-transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
transition
:
width
800ms
cubic-bezier
(
0.26
,
0.86
,
0.44
,
0.985
);
}
js/reveal.js
View file @
fb1b8a27
...
...
@@ -532,10 +532,10 @@
// Arrow controls
dom
.
controls
=
createSingletonNode
(
dom
.
wrapper
,
'
aside
'
,
'
controls
'
,
'
<button class="navigate-left" aria-label="previous slide"><div class="
pagination
-arrow"></div></button>
'
+
'
<button class="navigate-right" aria-label="next slide"><div class="
pagination
-arrow"></div></button>
'
+
'
<button class="navigate-up" aria-label="above slide"><div class="
pagination
-arrow"></div></button>
'
+
'
<button class="navigate-down" aria-label="below slide"><div class="
pagination
-arrow"></div></button>
'
);
'
<button class="navigate-left" aria-label="previous slide"><div class="
controls
-arrow"></div></button>
'
+
'
<button class="navigate-right" aria-label="next slide"><div class="
controls
-arrow"></div></button>
'
+
'
<button class="navigate-up" aria-label="above slide"><div class="
controls
-arrow"></div></button>
'
+
'
<button class="navigate-down" aria-label="below slide"><div class="
controls
-arrow"></div></button>
'
);
// Slide number
dom
.
slideNumber
=
createSingletonNode
(
dom
.
wrapper
,
'
div
'
,
'
slide-number
'
,
''
);
...
...
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