new optional controls aligned to screen edges

This commit is contained in:
Hakim El Hattab
2016-04-20 13:45:03 +02:00
parent 963e5c8678
commit 1319016957
15 changed files with 494 additions and 241 deletions

View File

@ -297,42 +297,47 @@ body {
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
border-right-color: $linkColor;
}
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
border-left-color: $linkColor;
}
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
border-bottom-color: $linkColor;
}
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
border-top-color: $linkColor;
}
.reveal .controls .navigate-left.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: $linkColorHover;
}
.reveal .controls .navigate-right.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: $linkColorHover;
}
.reveal .controls .navigate-up.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: $linkColorHover;
}
.reveal .controls .navigate-down.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: $linkColorHover;
}
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: $mainColor;
}
/*********************************************
* PROGRESS BAR