xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

'controls-placement' -> 'controls-layout', cut back on controls spacing

Browse Source
This commit is contained in:
Hakim El Hattab
2016-06-28 13:34:12 +02:00
parent 10545d41cc
commit 44a355b6e9
3 changed files with 54 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
css/reveal.css
View File

@@ -201,8 +201,8 @@ body {
.reveal .controls button { .reveal .controls button {
position: absolute; position: absolute;
padding: 0; padding: 0;
width: 50px; width: 52px;
height: 50px; height: 52px;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
outline: 0; outline: 0;
@@ -223,49 +223,49 @@ body {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 30px; width: 31px;
height: 5px; height: 6px;
border-radius: 2.5px; border-radius: 3px;
background-color: currentColor; background-color: currentColor;
-webkit-transition: all 0.15s ease, background-color 0.8s ease; -webkit-transition: all 0.15s ease, background-color 0.8s ease;
transition: all 0.15s ease, background-color 0.8s ease; transition: all 0.15s ease, background-color 0.8s ease;
-webkit-transform-origin: 2.5px 50%; -webkit-transform-origin: 3px 50%;
transform-origin: 2.5px 50%; } transform-origin: 3px 50%; }
.reveal .controls button:before { .reveal .controls button:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg); -webkit-transform: translateX(10.5px) translateY(23px) rotate(44deg);
transform: translateX(10px) translateY(22.5px) rotate(44deg); } transform: translateX(10.5px) translateY(23px) rotate(44deg); }
.reveal .controls button:after { .reveal .controls button:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg); -webkit-transform: translateX(10.5px) translateY(23px) rotate(-44deg);
transform: translateX(10px) translateY(22.5px) rotate(-44deg); } transform: translateX(10.5px) translateY(23px) rotate(-44deg); }
.reveal .controls button:hover:before { .reveal .controls button:hover:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg); -webkit-transform: translateX(10.5px) translateY(23px) rotate(40deg);
transform: translateX(10px) translateY(22.5px) rotate(40deg); } transform: translateX(10.5px) translateY(23px) rotate(40deg); }
.reveal .controls button:hover:after { .reveal .controls button:hover:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg); -webkit-transform: translateX(10.5px) translateY(23px) rotate(-40deg);
transform: translateX(10px) translateY(22.5px) rotate(-40deg); } transform: translateX(10.5px) translateY(23px) rotate(-40deg); }
.reveal .controls button:active:before { .reveal .controls button:active:before {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg); -webkit-transform: translateX(10.5px) translateY(23px) rotate(36deg);
transform: translateX(10px) translateY(22.5px) rotate(36deg); } transform: translateX(10.5px) translateY(23px) rotate(36deg); }
.reveal .controls button:active:after { .reveal .controls button:active:after {
-webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg); -webkit-transform: translateX(10.5px) translateY(23px) rotate(-36deg);
transform: translateX(10px) translateY(22.5px) rotate(-36deg); } transform: translateX(10.5px) translateY(23px) rotate(-36deg); }
.reveal .controls .navigate-left { .reveal .controls .navigate-left {
top: 50%; top: 50%;
left: 18px; left: 20px;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
transform: translateY(-50%); } transform: translateY(-50%); }
.reveal .controls .navigate-right { .reveal .controls .navigate-right {
top: 50%; top: 50%;
right: 18px; right: 20px;
-webkit-transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); } transform: translateY(-50%) rotate(180deg); }
.reveal .controls .navigate-up { .reveal .controls .navigate-up {
top: 18px; top: 20px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg); } transform: translateX(-50%) rotate(90deg); }
.reveal .controls .navigate-down { .reveal .controls .navigate-down {
bottom: 18px; bottom: 20px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); } transform: translateX(-50%) rotate(-90deg); }
@@ -288,38 +288,38 @@ body {
.reveal .controls .enabled:hover, .reveal .controls .enabled:hover,
.reveal .controls .enabled.fragmented:hover { .reveal .controls .enabled.fragmented:hover {
opacity: 1; } opacity: 1; }
.reveal .controls[data-controls-placement="bottom-right"] { .reveal .controls[data-controls-layout="bottom-right"] {
top: auto; top: auto;
bottom: 18px; bottom: 20px;
right: 18px; right: 20px;
left: auto; left: auto;
-webkit-transform: scale(0.85); -webkit-transform: scale(0.85);
transform: scale(0.85); transform: scale(0.85);
-webkit-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%; } transform-origin: 100% 100%; }
.reveal .controls[data-controls-placement="bottom-right"] .navigate-left, .reveal .controls[data-controls-layout="bottom-right"] .navigate-left,
.reveal .controls[data-controls-placement="bottom-right"] .navigate-right, .reveal .controls[data-controls-layout="bottom-right"] .navigate-right,
.reveal .controls[data-controls-placement="bottom-right"] .navigate-up, .reveal .controls[data-controls-layout="bottom-right"] .navigate-up,
.reveal .controls[data-controls-placement="bottom-right"] .navigate-down { .reveal .controls[data-controls-layout="bottom-right"] .navigate-down {
top: auto; top: auto;
left: auto; } left: auto; }
.reveal .controls[data-controls-placement="bottom-right"] .navigate-left { .reveal .controls[data-controls-layout="bottom-right"] .navigate-left {
right: 86px; right: 92px;
bottom: 18px; } bottom: 20px; }
.reveal .controls[data-controls-placement="bottom-right"] .navigate-right { .reveal .controls[data-controls-layout="bottom-right"] .navigate-right {
right: 0; right: 0;
bottom: 18px; } bottom: 20px; }
.reveal .controls[data-controls-placement="bottom-right"] .navigate-up { .reveal .controls[data-controls-layout="bottom-right"] .navigate-up {
right: 18px; right: 20px;
bottom: 86px; } bottom: 92px; }
.reveal .controls[data-controls-placement="bottom-right"] .navigate-down { .reveal .controls[data-controls-layout="bottom-right"] .navigate-down {
right: 18px; right: 20px;
bottom: 0; } bottom: 0; }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.reveal .controls { .reveal .controls {
top: auto; top: auto;
bottom: 18px; bottom: 20px;
right: 18px; right: 20px;
left: auto; left: auto;
-webkit-transform: scale(0.85); -webkit-transform: scale(0.85);
transform: scale(0.85); transform: scale(0.85);
@@ -332,16 +332,16 @@ body {
top: auto; top: auto;
left: auto; } left: auto; }
.reveal .controls .navigate-left { .reveal .controls .navigate-left {
right: 86px; right: 92px;
bottom: 18px; } bottom: 20px; }
.reveal .controls .navigate-right { .reveal .controls .navigate-right {
right: 0; right: 0;
bottom: 18px; } bottom: 20px; }
.reveal .controls .navigate-up { .reveal .controls .navigate-up {
right: 18px; right: 20px;
bottom: 86px; } bottom: 92px; }
.reveal .controls .navigate-down { .reveal .controls .navigate-down {
right: 18px; right: 20px;
bottom: 0; } } bottom: 0; } }
.reveal.has-dark-background .controls button:after, .reveal.has-dark-background .controls button:after,

8
css/reveal.scss
View File

@@ -236,10 +236,10 @@ body {
*********************************************/ *********************************************/
.reveal .controls { .reveal .controls {
$size: 50px; $size: 52px;
$length: floor($size * 0.6); $length: floor($size * 0.6);
$spacing: 18px; $spacing: 20px;
$thickness: 5px; $thickness: 6px;
$angle: 44deg; $angle: 44deg;
$angleHover: 40deg; $angleHover: 40deg;
$angleActive: 36deg; $angleActive: 36deg;
@@ -409,7 +409,7 @@ body {
} }
} }
&[data-controls-placement="bottom-right"] { &[data-controls-layout="bottom-right"] {
@include bottom-right-controls() @include bottom-right-controls()
} }

4
js/reveal.js
View File

@@ -53,7 +53,7 @@
controls: true, controls: true,
// Determines where controls appear, "edges" or "bottom-right" // Determines where controls appear, "edges" or "bottom-right"
controlsPlacement: 'bottom-right', controlsLayout: 'bottom-right',
// Specifies the display rules for backwards navigation arrows; // Specifies the display rules for backwards navigation arrows;
// "deemphasized", "hidden" or "visible" // "deemphasized", "hidden" or "visible"
@@ -1005,7 +1005,7 @@
dom.controls.style.display = config.controls ? 'block' : 'none'; dom.controls.style.display = config.controls ? 'block' : 'none';
dom.progress.style.display = config.progress ? 'block' : 'none'; dom.progress.style.display = config.progress ? 'block' : 'none';
dom.controls.setAttribute( 'data-controls-placement', config.controlsPlacement ); dom.controls.setAttribute( 'data-controls-layout', config.controlsLayout );
dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows ); dom.controls.setAttribute( 'data-controls-back-arrows', config.controlsBackArrows );
if( config.shuffle ) { if( config.shuffle ) {