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

adjust control layouts when there are no vertical/horiozontal slides

Browse Source
This commit is contained in:
Hakim El Hattab 2017-05-17 15:20:45 +02:00
parent b784bd56d1
commit c966672aa4
2 changed files with 101 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
css/reveal.css
View File

@ -319,8 +319,8 @@ body {
-webkit-transform: translateY(-10px); -webkit-transform: translateY(-10px);
transform: translateY(-10px); } transform: translateY(-10px); }
.reveal .controls .navigate-up .pagination-arrow { .reveal .controls .navigate-up .pagination-arrow {
-webkit-transform: translateX(-50%) rotate(90deg); -webkit-transform: rotate(90deg);
transform: translateX(-50%) rotate(90deg); } transform: rotate(90deg); }
.reveal .controls .navigate-down { .reveal .controls .navigate-down {
right: 3.2em; right: 3.2em;
bottom: 0; bottom: 0;
@ -353,7 +353,27 @@ body {
.reveal .controls .enabled:hover, .reveal .controls .enabled:hover,
.reveal .controls .enabled.fragmented:hover { .reveal .controls .enabled.fragmented:hover {
opacity: 1; } opacity: 1; }
@media screen and (min-width: 500px) {
.reveal:not(.has-vertical-slides) .controls .navigate-left,
.reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 10px; }
.reveal:not(.has-horizontal-slides) .controls .navigate-up,
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
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 {
background-color: #fff; }
.reveal.has-light-background .controls .pagination-arrow:after,
.reveal.has-light-background .controls .pagination-arrow:before {
background-color: #000; }
@media screen and (min-width: 500px) {
.reveal .controls[data-controls-layout="edges"] { .reveal .controls[data-controls-layout="edges"] {
top: 0; top: 0;
right: 0; right: 0;
@ -378,22 +398,6 @@ body {
bottom: 8px; bottom: 8px;
left: 50%; } } left: 50%; } }
.reveal:not(.has-vertical-slides) .controls .navigate-left,
.reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 0; }
.reveal:not(.has-horizontal-slides) .controls .navigate-up,
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 0; }
.reveal.has-dark-background .controls .pagination-arrow:after,
.reveal.has-dark-background .controls .pagination-arrow:before {
background-color: #fff; }
.reveal.has-light-background .controls .pagination-arrow:after,
.reveal.has-light-background .controls .pagination-arrow:before {
background-color: #000; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/

91
css/reveal.scss
View File

@ -247,23 +247,24 @@ body {
30% {transform: translateY(-5px);} 30% {transform: translateY(-5px);}
} }
$controlArrowSize: 3.6em;
$controlArrowSpacing: 1.4em;
$controlArrowLength: 2.6em;
$controlArrowThickness: 0.5em;
.reveal .controls { .reveal .controls {
$size: 3.6em;
$length: 2.6em;
$thickness: 0.5em;
$angle: 45deg; $angle: 45deg;
$angleHover: 40deg; $angleHover: 40deg;
$angleActive: 36deg; $angleActive: 36deg;
$spacing: 12px; $spacing: 12px;
$innerSpacing: 1.4em;
@mixin arrowTransform( $angle ) { @mixin arrowTransform( $angle ) {
&:before { &:before {
transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( $angle ); transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
} }
&:after { &: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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: $length; width: $controlArrowLength;
height: $thickness; height: $controlArrowThickness;
border-radius: $thickness/2; border-radius: $controlArrowThickness/2;
background-color: currentColor; background-color: currentColor;
transition: all 0.15s ease, background-color 0.8s ease; transition: all 0.15s ease, background-color 0.8s ease;
transform-origin: $thickness/2 50%; transform-origin: $controlArrowThickness/2 50%;
will-change: transform; will-change: transform;
} }
.pagination-arrow { .pagination-arrow {
position: relative; position: relative;
width: $size; width: $controlArrowSize;
height: $size; height: $controlArrowSize;
@include arrowTransform( $angle ); @include arrowTransform( $angle );
@ -334,14 +335,14 @@ body {
} }
.navigate-left { .navigate-left {
right: $size + $innerSpacing*2; right: $controlArrowSize + $controlArrowSpacing*2;
bottom: $innerSpacing + $size/2; bottom: $controlArrowSpacing + $controlArrowSize/2;
transform: translateX( -10px ); transform: translateX( -10px );
} }
.navigate-right { .navigate-right {
right: 0; right: 0;
bottom: $innerSpacing + $size/2; bottom: $controlArrowSpacing + $controlArrowSize/2;
transform: translateX( 10px ); transform: translateX( 10px );
.pagination-arrow { .pagination-arrow {
@ -354,17 +355,17 @@ body {
} }
.navigate-up { .navigate-up {
right: $innerSpacing; right: $controlArrowSpacing;
bottom: $innerSpacing*2 + $size; bottom: $controlArrowSpacing*2 + $controlArrowSize;
transform: translateY( -10px ); transform: translateY( -10px );
.pagination-arrow { .pagination-arrow {
transform: translateX(-50%) rotate( 90deg ); transform: rotate( 90deg );
} }
} }
.navigate-down { .navigate-down {
right: $innerSpacing + $size/2; right: $controlArrowSpacing + $controlArrowSize/2;
bottom: 0; bottom: 0;
transform: translateY( 10px ); transform: translateY( 10px );
@ -415,12 +416,38 @@ body {
.enabled.fragmented:hover { .enabled.fragmented:hover {
opacity: 1; opacity: 1;
} }
}
@media screen and (min-width: 500px) { // 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: 10px;
}
.reveal:not(.has-horizontal-slides) .controls .navigate-up,
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 10px;
}
.reveal:not(.has-horizontal-slides) .controls .navigate-up {
bottom: $controlArrowSpacing*1.5 + $controlArrowSize/2;
}
.reveal.has-dark-background .controls .pagination-arrow:after,
.reveal.has-dark-background .controls .pagination-arrow:before {
background-color: #fff;
}
.reveal.has-light-background .controls .pagination-arrow:after,
.reveal.has-light-background .controls .pagination-arrow:before {
background-color: #000;
}
// Edge aligned controls layout
@media screen and (min-width: 500px) {
$spacing: 8px; $spacing: 8px;
&[data-controls-layout="edges"] { .reveal .controls[data-controls-layout="edges"] {
& { & {
top: 0; top: 0;
right: 0; right: 0;
@ -457,28 +484,6 @@ body {
} }
} }
}
}
// 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;
}
.reveal:not(.has-horizontal-slides) .controls .navigate-up,
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 0;
}
.reveal.has-dark-background .controls .pagination-arrow:after,
.reveal.has-dark-background .controls .pagination-arrow:before {
background-color: #fff;
}
.reveal.has-light-background .controls .pagination-arrow:after,
.reveal.has-light-background .controls .pagination-arrow:before {
background-color: #000;
} }