control layout tweaks

This commit is contained in:
Hakim El Hattab 2017-05-17 17:10:17 +02:00
parent c966672aa4
commit d770f32bb9
2 changed files with 33 additions and 26 deletions

View File

@ -354,24 +354,27 @@ body {
.reveal .controls .enabled.fragmented:hover { .reveal .controls .enabled.fragmented:hover {
opacity: 1; } opacity: 1; }
.reveal:not(.has-vertical-slides) .controls .navigate-left, .reveal:not(.has-vertical-slides) .controls .navigate-left {
.reveal:not(.has-vertical-slides) .controls .navigate-right { bottom: 1.2em;
bottom: 10px; } right: 5.8em; }
.reveal:not(.has-horizontal-slides) .controls .navigate-up, .reveal:not(.has-vertical-slides) .controls .navigate-right {
.reveal:not(.has-horizontal-slides) .controls .navigate-down { bottom: 1.2em;
right: 10px; } right: 1.2em; }
.reveal:not(.has-horizontal-slides) .controls .navigate-up { .reveal:not(.has-horizontal-slides) .controls .navigate-up {
bottom: 3.9em; } right: 1.2em;
bottom: 5.8em; }
.reveal.has-dark-background .controls .pagination-arrow:after, .reveal:not(.has-horizontal-slides) .controls .navigate-down {
.reveal.has-dark-background .controls .pagination-arrow:before { right: 1.2em;
background-color: #fff; } bottom: 1.2em; }
.reveal.has-light-background .controls .pagination-arrow:after, .reveal.has-dark-background .controls {
.reveal.has-light-background .controls .pagination-arrow:before { color: #fff; }
background-color: #000; }
.reveal.has-light-background .controls {
color: #000; }
@media screen and (min-width: 500px) { @media screen and (min-width: 500px) {
.reveal .controls[data-controls-layout="edges"] { .reveal .controls[data-controls-layout="edges"] {

View File

@ -419,27 +419,31 @@ $controlArrowThickness: 0.5em;
} }
// Adjust the layout when there are no vertical slides // Adjust the layout when there are no vertical slides
.reveal:not(.has-vertical-slides) .controls .navigate-left, .reveal:not(.has-vertical-slides) .controls .navigate-left {
bottom: 1.2em;
right: 2.2em + $controlArrowSize;
}
.reveal:not(.has-vertical-slides) .controls .navigate-right { .reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 10px; bottom: 1.2em;
right: 1.2em;
} }
.reveal:not(.has-horizontal-slides) .controls .navigate-up,
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 10px;
}
.reveal:not(.has-horizontal-slides) .controls .navigate-up { .reveal:not(.has-horizontal-slides) .controls .navigate-up {
bottom: $controlArrowSpacing*1.5 + $controlArrowSize/2; right: 1.2em;
bottom: 2.2em + $controlArrowSize;
}
.reveal:not(.has-horizontal-slides) .controls .navigate-down {
right: 1.2em;
bottom: 1.2em;
} }
.reveal.has-dark-background .controls .pagination-arrow:after, .reveal.has-dark-background .controls {
.reveal.has-dark-background .controls .pagination-arrow:before { color: #fff;
background-color: #fff;
} }
.reveal.has-light-background .controls .pagination-arrow:after, .reveal.has-light-background .controls {
.reveal.has-light-background .controls .pagination-arrow:before { color: #000;
background-color: #000;
} }
// Edge aligned controls layout // Edge aligned controls layout