1
0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-20 13:31:55 +02:00

more flexible control size using em

This commit is contained in:
Hakim El Hattab
2017-05-17 14:44:49 +02:00
parent 13733edaa8
commit b784bd56d1
2 changed files with 47 additions and 50 deletions

View File

@@ -248,14 +248,14 @@ body {
}
.reveal .controls {
$size: 46px;
$length: floor($size * 0.7);
$thickness: 6px;
$angle: 44deg;
$size: 3.6em;
$length: 2.6em;
$thickness: 0.5em;
$angle: 45deg;
$angleHover: 40deg;
$angleActive: 36deg;
$spacing: 12px;
$innerSpacing: 18px;
$innerSpacing: 1.4em;
@mixin arrowTransform( $angle ) {
&:before {
@@ -276,6 +276,7 @@ body {
z-index: 1;
color: #fff;
pointer-events: none;
font-size: 10px;
button {
position: absolute;
@@ -291,6 +292,7 @@ body {
transform 0.2s ease;
z-index: 2; // above slides
pointer-events: auto;
font-size: inherit;
visibility: hidden;
opacity: 0;
@@ -333,21 +335,17 @@ body {
.navigate-left {
right: $size + $innerSpacing*2;
bottom: $innerSpacing;
bottom: $innerSpacing + $size/2;
transform: translateX( -10px );
.pagination-arrow {
transform: translateY(-50%);
}
}
.navigate-right {
right: 0;
bottom: $innerSpacing;
bottom: $innerSpacing + $size/2;
transform: translateX( 10px );
.pagination-arrow {
transform: translateY(-50%) rotate( 180deg );
transform: rotate( 180deg );
}
&.highlight {
@@ -357,7 +355,7 @@ body {
.navigate-up {
right: $innerSpacing;
bottom: $size + $innerSpacing*2;
bottom: $innerSpacing*2 + $size;
transform: translateY( -10px );
.pagination-arrow {
@@ -366,12 +364,12 @@ body {
}
.navigate-down {
right: $innerSpacing;
right: $innerSpacing + $size/2;
bottom: 0;
transform: translateY( 10px );
.pagination-arrow {
transform: translateX(-50%) rotate( -90deg );
transform: rotate( -90deg );
}
&.highlight {
@@ -380,7 +378,7 @@ body {
}
// Back arrow style: "faded":
// Strongly deemphasizes backwards navigation in favor of drawing
// Deemphasize backwards navigation arrows in favor of drawing
// attention to forwards navigation
&[data-controls-back-arrows="faded"] .navigate-left.enabled,
&[data-controls-back-arrows="faded"] .navigate-up.enabled {
@@ -392,7 +390,7 @@ body {
}
// Back arrow style: "hidden":
// Never shows any arrows for backwards navigation
// Never show arrows for backwards navigation
&[data-controls-back-arrows="hidden"] .navigate-left.enabled,
&[data-controls-back-arrows="hidden"] .navigate-up.enabled {
opacity: 0;