From 44a355b6e969d6a1cfbf23cb44079104d4dc6945 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 28 Jun 2016 13:34:12 +0200 Subject: [PATCH] 'controls-placement' -> 'controls-layout', cut back on controls spacing --- css/reveal.css | 96 ++++++++++++++++++++++++------------------------- css/reveal.scss | 8 ++--- js/reveal.js | 4 +-- 3 files changed, 54 insertions(+), 54 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 3de6695..8ec6bbd 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -201,8 +201,8 @@ body { .reveal .controls button { position: absolute; padding: 0; - width: 50px; - height: 50px; + width: 52px; + height: 52px; background-color: transparent; border: 0; outline: 0; @@ -223,49 +223,49 @@ body { position: absolute; top: 0; left: 0; - width: 30px; - height: 5px; - border-radius: 2.5px; + width: 31px; + height: 6px; + border-radius: 3px; background-color: currentColor; -webkit-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%; - transform-origin: 2.5px 50%; } + -webkit-transform-origin: 3px 50%; + transform-origin: 3px 50%; } .reveal .controls button:before { - -webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg); - transform: translateX(10px) translateY(22.5px) rotate(44deg); } + -webkit-transform: translateX(10.5px) translateY(23px) rotate(44deg); + transform: translateX(10.5px) translateY(23px) rotate(44deg); } .reveal .controls button:after { - -webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg); - transform: translateX(10px) translateY(22.5px) rotate(-44deg); } + -webkit-transform: translateX(10.5px) translateY(23px) rotate(-44deg); + transform: translateX(10.5px) translateY(23px) rotate(-44deg); } .reveal .controls button:hover:before { - -webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg); - transform: translateX(10px) translateY(22.5px) rotate(40deg); } + -webkit-transform: translateX(10.5px) translateY(23px) rotate(40deg); + transform: translateX(10.5px) translateY(23px) rotate(40deg); } .reveal .controls button:hover:after { - -webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg); - transform: translateX(10px) translateY(22.5px) rotate(-40deg); } + -webkit-transform: translateX(10.5px) translateY(23px) rotate(-40deg); + transform: translateX(10.5px) translateY(23px) rotate(-40deg); } .reveal .controls button:active:before { - -webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg); - transform: translateX(10px) translateY(22.5px) rotate(36deg); } + -webkit-transform: translateX(10.5px) translateY(23px) rotate(36deg); + transform: translateX(10.5px) translateY(23px) rotate(36deg); } .reveal .controls button:active:after { - -webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg); - transform: translateX(10px) translateY(22.5px) rotate(-36deg); } + -webkit-transform: translateX(10.5px) translateY(23px) rotate(-36deg); + transform: translateX(10.5px) translateY(23px) rotate(-36deg); } .reveal .controls .navigate-left { top: 50%; - left: 18px; + left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .reveal .controls .navigate-right { top: 50%; - right: 18px; + right: 20px; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .reveal .controls .navigate-up { - top: 18px; + top: 20px; left: 50%; -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } .reveal .controls .navigate-down { - bottom: 18px; + bottom: 20px; left: 50%; -webkit-transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg); } @@ -288,38 +288,38 @@ body { .reveal .controls .enabled:hover, .reveal .controls .enabled.fragmented:hover { opacity: 1; } - .reveal .controls[data-controls-placement="bottom-right"] { + .reveal .controls[data-controls-layout="bottom-right"] { top: auto; - bottom: 18px; - right: 18px; + bottom: 20px; + right: 20px; left: auto; -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } - .reveal .controls[data-controls-placement="bottom-right"] .navigate-left, - .reveal .controls[data-controls-placement="bottom-right"] .navigate-right, - .reveal .controls[data-controls-placement="bottom-right"] .navigate-up, - .reveal .controls[data-controls-placement="bottom-right"] .navigate-down { + .reveal .controls[data-controls-layout="bottom-right"] .navigate-left, + .reveal .controls[data-controls-layout="bottom-right"] .navigate-right, + .reveal .controls[data-controls-layout="bottom-right"] .navigate-up, + .reveal .controls[data-controls-layout="bottom-right"] .navigate-down { top: auto; left: auto; } - .reveal .controls[data-controls-placement="bottom-right"] .navigate-left { - right: 86px; - bottom: 18px; } - .reveal .controls[data-controls-placement="bottom-right"] .navigate-right { + .reveal .controls[data-controls-layout="bottom-right"] .navigate-left { + right: 92px; + bottom: 20px; } + .reveal .controls[data-controls-layout="bottom-right"] .navigate-right { right: 0; - bottom: 18px; } - .reveal .controls[data-controls-placement="bottom-right"] .navigate-up { - right: 18px; - bottom: 86px; } - .reveal .controls[data-controls-placement="bottom-right"] .navigate-down { - right: 18px; + bottom: 20px; } + .reveal .controls[data-controls-layout="bottom-right"] .navigate-up { + right: 20px; + bottom: 92px; } + .reveal .controls[data-controls-layout="bottom-right"] .navigate-down { + right: 20px; bottom: 0; } @media screen and (max-width: 500px) { .reveal .controls { top: auto; - bottom: 18px; - right: 18px; + bottom: 20px; + right: 20px; left: auto; -webkit-transform: scale(0.85); transform: scale(0.85); @@ -332,16 +332,16 @@ body { top: auto; left: auto; } .reveal .controls .navigate-left { - right: 86px; - bottom: 18px; } + right: 92px; + bottom: 20px; } .reveal .controls .navigate-right { right: 0; - bottom: 18px; } + bottom: 20px; } .reveal .controls .navigate-up { - right: 18px; - bottom: 86px; } + right: 20px; + bottom: 92px; } .reveal .controls .navigate-down { - right: 18px; + right: 20px; bottom: 0; } } .reveal.has-dark-background .controls button:after, diff --git a/css/reveal.scss b/css/reveal.scss index f76fb82..42f5d5e 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -236,10 +236,10 @@ body { *********************************************/ .reveal .controls { - $size: 50px; + $size: 52px; $length: floor($size * 0.6); - $spacing: 18px; - $thickness: 5px; + $spacing: 20px; + $thickness: 6px; $angle: 44deg; $angleHover: 40deg; $angleActive: 36deg; @@ -409,7 +409,7 @@ body { } } - &[data-controls-placement="bottom-right"] { + &[data-controls-layout="bottom-right"] { @include bottom-right-controls() } diff --git a/js/reveal.js b/js/reveal.js index 0e8fbab..594093b 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -53,7 +53,7 @@ controls: true, // Determines where controls appear, "edges" or "bottom-right" - controlsPlacement: 'bottom-right', + controlsLayout: 'bottom-right', // Specifies the display rules for backwards navigation arrows; // "deemphasized", "hidden" or "visible" @@ -1005,7 +1005,7 @@ dom.controls.style.display = config.controls ? '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 ); if( config.shuffle ) {