xobs
/
fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

revise progress to make them easier to override

This commit is contained in:
Hakim El Hattab 2017-05-18 09:58:25 +02:00
parent a5e175d59f
commit fb1b8a2790
15 changed files with 66 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/reveal.css
View File

@ -261,8 +261,8 @@ body {
opacity: 0; opacity: 0;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color: transparent; }
.reveal .controls .pagination-arrow:before, .reveal .controls .controls-arrow:before,
.reveal .controls .pagination-arrow:after { .reveal .controls .controls-arrow:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -275,26 +275,26 @@ body {
-webkit-transform-origin: 0.25em 50%; -webkit-transform-origin: 0.25em 50%;
transform-origin: 0.25em 50%; transform-origin: 0.25em 50%;
will-change: transform; } will-change: transform; }
.reveal .controls .pagination-arrow { .reveal .controls .controls-arrow {
position: relative; position: relative;
width: 3.6em; width: 3.6em;
height: 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); -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(45deg);
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); -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-45deg);
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); -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(40deg);
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); -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-40deg);
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); -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(36deg);
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); -webkit-transform: translateX(0.5em) translateY(1.55em) rotate(-36deg);
transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); } transform: translateX(0.5em) translateY(1.55em) rotate(-36deg); }
.reveal .controls .navigate-left { .reveal .controls .navigate-left {
@ -307,7 +307,7 @@ body {
bottom: 3.2em; bottom: 3.2em;
-webkit-transform: translateX(10px); -webkit-transform: translateX(10px);
transform: translateX(10px); } transform: translateX(10px); }
.reveal .controls .navigate-right .pagination-arrow { .reveal .controls .navigate-right .controls-arrow {
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg);
transform: rotate(180deg); } transform: rotate(180deg); }
.reveal .controls .navigate-right.highlight { .reveal .controls .navigate-right.highlight {
@ -318,7 +318,7 @@ body {
bottom: 6.4em; bottom: 6.4em;
-webkit-transform: translateY(-10px); -webkit-transform: translateY(-10px);
transform: translateY(-10px); } transform: translateY(-10px); }
.reveal .controls .navigate-up .pagination-arrow { .reveal .controls .navigate-up .controls-arrow {
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
transform: rotate(90deg); } transform: rotate(90deg); }
.reveal .controls .navigate-down { .reveal .controls .navigate-down {
@ -326,7 +326,7 @@ body {
bottom: 0; bottom: 0;
-webkit-transform: translateY(10px); -webkit-transform: translateY(10px);
transform: translateY(10px); } transform: translateY(10px); }
.reveal .controls .navigate-down .pagination-arrow { .reveal .controls .navigate-down .controls-arrow {
-webkit-transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
transform: rotate(-90deg); } transform: rotate(-90deg); }
.reveal .controls .navigate-down.highlight { .reveal .controls .navigate-down.highlight {
@ -355,20 +355,20 @@ body {
opacity: 1; } opacity: 1; }
.reveal:not(.has-vertical-slides) .controls .navigate-left { .reveal:not(.has-vertical-slides) .controls .navigate-left {
bottom: 1.2em; bottom: 1.4em;
right: 5.8em; } right: 6.4em; }
.reveal:not(.has-vertical-slides) .controls .navigate-right { .reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 1.2em; bottom: 1.4em;
right: 1.2em; } right: 1.4em; }
.reveal:not(.has-horizontal-slides) .controls .navigate-up { .reveal:not(.has-horizontal-slides) .controls .navigate-up {
right: 1.2em; right: 1.4em;
bottom: 5.8em; } bottom: 6.4em; }
.reveal:not(.has-horizontal-slides) .controls .navigate-down { .reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 1.2em; right: 1.4em;
bottom: 1.2em; } bottom: 1.4em; }
.reveal.has-dark-background .controls { .reveal.has-dark-background .controls {
color: #fff; } color: #fff; }
@ -412,7 +412,8 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
background-color: rgba(0, 0, 0, 0.2); } background-color: rgba(0, 0, 0, 0.2);
color: #fff; }
.reveal .progress:after { .reveal .progress:after {
content: ''; content: '';
@ -426,7 +427,7 @@ body {
display: block; display: block;
height: 100%; height: 100%;
width: 0px; width: 0px;
background-color: #000; background-color: currentColor;
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); }
/********************************************* /*********************************************

31
css/reveal.scss
View File

@ -302,8 +302,8 @@ $controlArrowThickness: 0.5em;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
} }
.pagination-arrow:before, .controls-arrow:before,
.pagination-arrow:after { .controls-arrow:after {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -318,7 +318,7 @@ $controlArrowThickness: 0.5em;
will-change: transform; will-change: transform;
} }
.pagination-arrow { .controls-arrow {
position: relative; position: relative;
width: $controlArrowSize; width: $controlArrowSize;
height: $controlArrowSize; height: $controlArrowSize;
@ -345,7 +345,7 @@ $controlArrowThickness: 0.5em;
bottom: $controlArrowSpacing + $controlArrowSize/2; bottom: $controlArrowSpacing + $controlArrowSize/2;
transform: translateX( 10px ); transform: translateX( 10px );
.pagination-arrow { .controls-arrow {
transform: rotate( 180deg ); transform: rotate( 180deg );
} }
@ -359,7 +359,7 @@ $controlArrowThickness: 0.5em;
bottom: $controlArrowSpacing*2 + $controlArrowSize; bottom: $controlArrowSpacing*2 + $controlArrowSize;
transform: translateY( -10px ); transform: translateY( -10px );
.pagination-arrow { .controls-arrow {
transform: rotate( 90deg ); transform: rotate( 90deg );
} }
} }
@ -369,7 +369,7 @@ $controlArrowThickness: 0.5em;
bottom: 0; bottom: 0;
transform: translateY( 10px ); transform: translateY( 10px );
.pagination-arrow { .controls-arrow {
transform: rotate( -90deg ); transform: rotate( -90deg );
} }
@ -420,22 +420,22 @@ $controlArrowThickness: 0.5em;
// Adjust the layout when there are no vertical slides // Adjust the layout when there are no vertical slides
.reveal:not(.has-vertical-slides) .controls .navigate-left { .reveal:not(.has-vertical-slides) .controls .navigate-left {
bottom: 1.2em; bottom: $controlArrowSpacing;
right: 2.2em + $controlArrowSize; right: $controlArrowSpacing*2 + $controlArrowSize;
} }
.reveal:not(.has-vertical-slides) .controls .navigate-right { .reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 1.2em; bottom: $controlArrowSpacing;
right: 1.2em; right: $controlArrowSpacing;
} }
.reveal:not(.has-horizontal-slides) .controls .navigate-up { .reveal:not(.has-horizontal-slides) .controls .navigate-up {
right: 1.2em; right: $controlArrowSpacing;
bottom: 2.2em + $controlArrowSize; bottom: $controlArrowSpacing*2 + $controlArrowSize;
} }
.reveal:not(.has-horizontal-slides) .controls .navigate-down { .reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 1.2em; right: $controlArrowSpacing;
bottom: 1.2em; bottom: $controlArrowSpacing;
} }
.reveal.has-dark-background .controls { .reveal.has-dark-background .controls {
@ -505,6 +505,7 @@ $controlArrowThickness: 0.5em;
z-index: 10; z-index: 10;
background-color: rgba( 0, 0, 0, 0.2 ); background-color: rgba( 0, 0, 0, 0.2 );
color: #fff;
} }
.reveal .progress:after { .reveal .progress:after {
content: ''; content: '';
@ -519,7 +520,7 @@ $controlArrowThickness: 0.5em;
height: 100%; height: 100%;
width: 0px; width: 0px;
background-color: #000; background-color: currentColor;
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);
} }

4
css/theme/beige.css
View File

@ -262,10 +262,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #8b743d; }
.reveal .progress span { .reveal .progress span {
background: #8b743d;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/black.css
View File

@ -258,10 +258,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #42affa; }
.reveal .progress span { .reveal .progress span {
background: #42affa;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/blood.css
View File

@ -261,10 +261,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #a23; }
.reveal .progress span { .reveal .progress span {
background: #a23;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/league.css
View File

@ -264,10 +264,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #13DAEC; }
.reveal .progress span { .reveal .progress span {
background: #13DAEC;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/moon.css
View File

@ -262,10 +262,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #268bd2; }
.reveal .progress span { .reveal .progress span {
background: #268bd2;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/night.css
View File

@ -256,10 +256,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #e7ad52; }
.reveal .progress span { .reveal .progress span {
background: #e7ad52;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/serif.css
View File

@ -258,10 +258,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #51483D; }
.reveal .progress span { .reveal .progress span {
background: #51483D;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/simple.css
View File

@ -261,10 +261,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #00008B; }
.reveal .progress span { .reveal .progress span {
background: #00008B;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/sky.css
View File

@ -265,10 +265,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #3b759e; }
.reveal .progress span { .reveal .progress span {
background: #3b759e;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

4
css/theme/solarized.css
View File

@ -262,10 +262,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #268bd2; }
.reveal .progress span { .reveal .progress span {
background: #268bd2;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

3
css/theme/template/theme.scss
View File

@ -308,10 +308,9 @@ body {
.reveal .progress { .reveal .progress {
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
color: $linkColor;
} }
.reveal .progress span { .reveal .progress span {
background: $linkColor;
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -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); -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); transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

4
css/theme/white.css
View File

@ -258,10 +258,10 @@ body {
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #2a76dd; }
.reveal .progress span { .reveal .progress span {
background: #2a76dd;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -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); -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); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

8
js/reveal.js
View File

@ -532,10 +532,10 @@
// Arrow controls // Arrow controls
dom.controls = createSingletonNode( dom.wrapper, 'aside', '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-left" aria-label="previous slide"><div class="controls-arrow"></div></button>' +
'<button class="navigate-right" aria-label="next slide"><div class="pagination-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="pagination-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="pagination-arrow"></div></button>' ); '<button class="navigate-down" aria-label="below slide"><div class="controls-arrow"></div></button>' );
// Slide number // Slide number
dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );