Skip to content
GitLab
Commit c966672a authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

adjust control layouts when there are no vertical/horiozontal slides

parent b784bd56
Hide whitespace changes
Inline Side-by-side
css/reveal.css
View file @ c966672a
......@@ -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
*********************************************/
......
css/reveal.scss
View file @ c966672a
......@@ -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
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment