reduce control spacing

edit
Hakim El Hattab 2016-10-12 11:19:21 +02:00
parent 54a2137c0d
commit 2a0a6cbabc
2 changed files with 17 additions and 15 deletions

View File

@ -251,21 +251,21 @@ body {
transform: translateX(10.5px) translateY(23px) rotate(-36deg); } transform: translateX(10.5px) translateY(23px) rotate(-36deg); }
.reveal .controls .navigate-left { .reveal .controls .navigate-left {
top: 50%; top: 50%;
left: 20px; left: 8px;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
transform: translateY(-50%); } transform: translateY(-50%); }
.reveal .controls .navigate-right { .reveal .controls .navigate-right {
top: 50%; top: 50%;
right: 20px; right: 8px;
-webkit-transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg); } transform: translateY(-50%) rotate(180deg); }
.reveal .controls .navigate-up { .reveal .controls .navigate-up {
top: 20px; top: 8px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(90deg); -webkit-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg); } transform: translateX(-50%) rotate(90deg); }
.reveal .controls .navigate-down { .reveal .controls .navigate-down {
bottom: 20px; bottom: 8px;
left: 50%; left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg); -webkit-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg); } transform: translateX(-50%) rotate(-90deg); }
@ -290,8 +290,8 @@ body {
opacity: 1; } opacity: 1; }
.reveal .controls[data-controls-layout="bottom-right"] { .reveal .controls[data-controls-layout="bottom-right"] {
top: auto; top: auto;
bottom: 20px; bottom: 8px;
right: 20px; right: 8px;
left: auto; left: auto;
-webkit-transform: scale(0.85); -webkit-transform: scale(0.85);
transform: scale(0.85); transform: scale(0.85);
@ -318,8 +318,8 @@ body {
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.reveal .controls { .reveal .controls {
top: auto; top: auto;
bottom: 20px; bottom: 8px;
right: 20px; right: 8px;
left: auto; left: auto;
-webkit-transform: scale(0.85); -webkit-transform: scale(0.85);
transform: scale(0.85); transform: scale(0.85);

View File

@ -238,7 +238,7 @@ body {
.reveal .controls { .reveal .controls {
$size: 52px; $size: 52px;
$length: floor($size * 0.6); $length: floor($size * 0.6);
$spacing: 20px; $spacing: 8px;
$thickness: 6px; $thickness: 6px;
$angle: 44deg; $angle: 44deg;
$angleHover: 40deg; $angleHover: 40deg;
@ -374,6 +374,8 @@ body {
} }
@mixin bottom-right-controls() { @mixin bottom-right-controls() {
$innerSpacing: 20px;
& { & {
top: auto; top: auto;
bottom: $spacing; bottom: $spacing;
@ -392,19 +394,19 @@ body {
} }
.navigate-left { .navigate-left {
right: $size + $spacing*2; right: $size + $innerSpacing*2;
bottom: $spacing; bottom: $innerSpacing;
} }
.navigate-right { .navigate-right {
right: 0; right: 0;
bottom: $spacing; bottom: $innerSpacing;
} }
.navigate-up { .navigate-up {
right: $spacing; right: $innerSpacing;
bottom: $size + $spacing*2; bottom: $size + $innerSpacing*2;
} }
.navigate-down { .navigate-down {
right: $spacing; right: $innerSpacing;
bottom: 0; bottom: 0;
} }
} }