From c966672aa413e4ba1a635977d3036da3296a3ff1 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 17 May 2017 15:20:45 +0200 Subject: adjust control layouts when there are no vertical/horiozontal slides --- css/reveal.css | 60 +++++++++++++------------ css/reveal.scss | 133 +++++++++++++++++++++++++++++--------------------------- 2 files changed, 101 insertions(+), 92 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 800d1bd..9067fe4 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -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 *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 9c80a22..07483f6 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -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 - $thickness)/2) rotate( $angle ); + transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle ); } &:after { - transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( -$angle ); + transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle ); } } @@ -307,20 +308,20 @@ body { position: absolute; top: 0; left: 0; - width: $length; - height: $thickness; - border-radius: $thickness/2; + width: $controlArrowLength; + height: $controlArrowThickness; + border-radius: $controlArrowThickness/2; background-color: currentColor; transition: all 0.15s ease, background-color 0.8s ease; - transform-origin: $thickness/2 50%; + transform-origin: $controlArrowThickness/2 50%; will-change: transform; } .pagination-arrow { position: relative; - width: $size; - height: $size; + width: $controlArrowSize; + height: $controlArrowSize; @include arrowTransform( $angle ); @@ -334,14 +335,14 @@ body { } .navigate-left { - right: $size + $innerSpacing*2; - bottom: $innerSpacing + $size/2; + right: $controlArrowSize + $controlArrowSpacing*2; + bottom: $controlArrowSpacing + $controlArrowSize/2; transform: translateX( -10px ); } .navigate-right { right: 0; - bottom: $innerSpacing + $size/2; + bottom: $controlArrowSpacing + $controlArrowSize/2; transform: translateX( 10px ); .pagination-arrow { @@ -354,17 +355,17 @@ body { } .navigate-up { - right: $innerSpacing; - bottom: $innerSpacing*2 + $size; + right: $controlArrowSpacing; + bottom: $controlArrowSpacing*2 + $controlArrowSize; transform: translateY( -10px ); .pagination-arrow { - transform: translateX(-50%) rotate( 90deg ); + transform: rotate( 90deg ); } } .navigate-down { - right: $innerSpacing + $size/2; + right: $controlArrowSpacing + $controlArrowSize/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 -- cgit v1.2.3