reduce control spacing
parent
54a2137c0d
commit
2a0a6cbabc
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue