adjust control layouts when there are no vertical/horiozontal slides
This commit is contained in:
Hakim El Hattab
parent
b784bd56d1
commit
c966672aa4
|
|
@ -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
|
||||
*********************************************/
|
||||
|
|
|
|||
133
css/reveal.scss
133
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
|
||||
|
|
|
|||
Loading…
Reference in New Issue