Commit 13190169 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

new optional controls aligned to screen edges

parent 963e5c86
......@@ -189,7 +189,7 @@ body {
/*********************************************
* CONTROLS
*********************************************/
.reveal .controls {
.reveal .controls[data-controls-type="bottom-right"] {
display: none;
position: fixed;
width: 110px;
......@@ -198,62 +198,143 @@ body {
right: 10px;
bottom: 10px;
-webkit-user-select: none; }
.reveal .controls button {
padding: 0;
.reveal .controls[data-controls-type="bottom-right"] button {
padding: 0;
position: absolute;
opacity: 0.05;
width: 0;
height: 0;
background-color: transparent;
border: 12px solid transparent;
-webkit-transform: scale(0.9999);
transform: scale(0.9999);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent; }
.reveal .controls[data-controls-type="bottom-right"] .enabled {
opacity: 0.7;
cursor: pointer; }
.reveal .controls[data-controls-type="bottom-right"] .enabled:active {
margin-top: 1px; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left {
top: 42px;
border-right-width: 22px;
border-right-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right {
left: 74px;
top: 42px;
border-left-width: 22px;
border-left-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up {
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down {
left: 42px;
top: 74px;
border-top-width: 22px;
border-top-color: #000; }
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] {
display: none;
position: absolute;
opacity: 0.05;
width: 0;
height: 0;
background-color: transparent;
border: 12px solid transparent;
-webkit-transform: scale(0.9999);
transform: scale(0.9999);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent; }
.reveal .controls .enabled {
opacity: 0.7;
cursor: pointer; }
.reveal .controls .enabled:active {
margin-top: 1px; }
.reveal .controls .navigate-left {
top: 42px;
border-right-width: 22px;
border-right-color: #000; }
.reveal .controls .navigate-left.fragmented {
opacity: 0.3; }
.reveal .controls .navigate-right {
left: 74px;
top: 42px;
border-left-width: 22px;
border-left-color: #000; }
.reveal .controls .navigate-right.fragmented {
opacity: 0.3; }
.reveal .controls .navigate-up {
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #000; }
.reveal .controls .navigate-up.fragmented {
opacity: 0.3; }
.reveal .controls .navigate-down {
left: 42px;
top: 74px;
border-top-width: 22px;
border-top-color: #000; }
.reveal .controls .navigate-down.fragmented {
opacity: 0.3; }
top: 0;
right: 0;
bottom: 0;
left: 0; }
.reveal .controls[data-controls-type="edges"] button {
position: absolute;
padding: 0;
width: 36px;
height: 36px;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer;
opacity: 0;
-webkit-transform: scale(0.9999);
transform: scale(0.9999);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
z-index: 2;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
content: '';
position: absolute;
top: 40%;
left: 0;
width: 36px;
height: 5px;
border-radius: 2.5px;
background: #fff;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%; }
.reveal .controls[data-controls-type="edges"] button:before {
-webkit-transform: translate(0, -1px) rotate(40deg);
transform: translate(0, -1px) rotate(40deg); }
.reveal .controls[data-controls-type="edges"] button:after {
-webkit-transform: translate(0, 1px) rotate(-40deg);
transform: translate(0, 1px) rotate(-40deg); }
.reveal .controls[data-controls-type="edges"] button:hover:before {
-webkit-transform: translate(0, -1px) rotate(36deg);
transform: translate(0, -1px) rotate(36deg); }
.reveal .controls[data-controls-type="edges"] button:hover:after {
-webkit-transform: translate(0, 1px) rotate(-36deg);
transform: translate(0, 1px) rotate(-36deg); }
.reveal .controls[data-controls-type="edges"] button:active:before {
-webkit-transform: translate(0, -1px) rotate(34deg);
transform: translate(0, -1px) rotate(34deg); }
.reveal .controls[data-controls-type="edges"] button:active:after {
-webkit-transform: translate(0, 1px) rotate(-34deg);
transform: translate(0, 1px) rotate(-34deg); }
.reveal .controls[data-controls-type="edges"] .enabled {
opacity: 0.7;
cursor: pointer; }
.reveal .controls[data-controls-type="edges"] .enabled:hover {
opacity: 1; }
.reveal .controls[data-controls-type="edges"] .navigate-left {
top: 50%;
left: 18px;
margin-top: -18px; }
.reveal .controls[data-controls-type="edges"] .navigate-left.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .navigate-right {
top: 50%;
right: 18px;
margin-top: -18px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.reveal .controls[data-controls-type="edges"] .navigate-right.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .navigate-up {
top: 18px;
left: 50%;
margin-left: -18px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.reveal .controls[data-controls-type="edges"] .navigate-up.fragmented {
opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .navigate-down {
bottom: 18px;
left: 50%;
margin-left: -18px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg); }
.reveal .controls[data-controls-type="edges"] .navigate-down.fragmented {
opacity: 0.3; }
/*********************************************
* PROGRESS BAR
......
......@@ -235,7 +235,7 @@ body {
* CONTROLS
*********************************************/
.reveal .controls {
.reveal .controls[data-controls-type="bottom-right"] {
display: none;
position: fixed;
width: 110px;
......@@ -245,72 +245,191 @@ body {
bottom: 10px;
-webkit-user-select: none;
}
.reveal .controls button {
padding: 0;
position: absolute;
opacity: 0.05;
width: 0;
height: 0;
background-color: transparent;
border: 12px solid transparent;
transform: scale(.9999);
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
.reveal .controls .enabled {
opacity: 0.7;
cursor: pointer;
}
button {
padding: 0;
position: absolute;
opacity: 0.05;
width: 0;
height: 0;
background-color: transparent;
border: 12px solid transparent;
transform: scale(.9999);
transition: all 0.2s ease;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
.enabled {
opacity: 0.7;
cursor: pointer;
}
.reveal .controls .enabled:active {
margin-top: 1px;
}
.enabled:active {
margin-top: 1px;
}
.reveal .controls .navigate-left {
.navigate-left {
top: 42px;
border-right-width: 22px;
border-right-color: #000;
}
.reveal .controls .navigate-left.fragmented {
opacity: 0.3;
}
.navigate-left.fragmented {
opacity: 0.3;
}
.reveal .controls .navigate-right {
.navigate-right {
left: 74px;
top: 42px;
border-left-width: 22px;
border-left-color: #000;
}
.reveal .controls .navigate-right.fragmented {
opacity: 0.3;
}
.navigate-right.fragmented {
opacity: 0.3;
}
.reveal .controls .navigate-up {
.navigate-up {
left: 42px;
border-bottom-width: 22px;
border-bottom-color: #000;
}
.reveal .controls .navigate-up.fragmented {
opacity: 0.3;
}
.navigate-up.fragmented {
opacity: 0.3;
}
.reveal .controls .navigate-down {
.navigate-down {
left: 42px;
top: 74px;
border-top-width: 22px;
border-top-color: #000;
}
.reveal .controls .navigate-down.fragmented {
opacity: 0.3;
.navigate-down.fragmented {
opacity: 0.3;
}
}
.reveal .controls[data-controls-type="edges"] {
$size: 36px;
$spacing: 18px;
$thickness: 5px;
$angle: 40deg;
$angleHover: 36deg;
$angleActive: 34deg;
@mixin arrowTransform( $angle, $x: 0, $y: 0 ) {
&:before {
transform: translate( $x, $y ) rotate( $angle );
}
&:after {
transform: translate( $x, -$y ) rotate( -$angle );
}
}
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
button {
position: absolute;
padding: 0;
width: $size;
height: $size;
background-color: transparent;
border: 0;
outline: 0;
cursor: pointer;
opacity: 0;
transform: scale(.9999);
transition: all 0.2s ease;
z-index: 2; // above slides
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
}
button:before,
button:after {
content: '';
position: absolute;
top: 40%;
left: 0;
width: $size;
height: $thickness;
border-radius: $thickness / 2;
background: #fff;
transition: all 0.15s ease;
transform-origin: 0% 50%;
}
button {
@include arrowTransform( $angle, 0, -1px );
&:hover {
@include arrowTransform( $angleHover, 0, -1px );
}
&:active {
@include arrowTransform( $angleActive, 0, -1px );
}
}
.enabled {
opacity: 0.7;
cursor: pointer;
}
.enabled:hover {
opacity: 1;
}
.navigate-left {
top: 50%;
left: $spacing;
margin-top: -$size/2;
}
.navigate-left.fragmented {
opacity: 0.3;
}
.navigate-right {
top: 50%;
right: $spacing;
margin-top: -$size/2;
transform: rotate( 180deg );
}
.navigate-right.fragmented {
opacity: 0.3;
}
.navigate-up {
top: $spacing;
left: 50%;
margin-left: -$size/2;
transform: rotate( 90deg );
}
.navigate-up.fragmented {
opacity: 0.3;
}
.navigate-down {
bottom: $spacing;
left: 50%;
margin-left: -$size/2;
transform: rotate( -90deg );
}
.navigate-down.fragmented {
opacity: 0.3;
}
}
/*********************************************
......
......@@ -255,34 +255,38 @@ 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: #8b743d; }
.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: #8b743d; }
.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: #8b743d; }
.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: #8b743d; }
.reveal .controls .navigate-left.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #c0a86e; }
.reveal .controls .navigate-right.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #c0a86e; }
.reveal .controls .navigate-up.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #c0a86e; }
.reveal .controls .navigate-down.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #c0a86e; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #333; }
/*********************************************
* PROGRESS BAR
*********************************************/
......
......@@ -251,34 +251,38 @@ 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: #42affa; }
.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: #42affa; }
.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: #42affa; }
.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: #42affa; }
.reveal .controls .navigate-left.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #8dcffc; }
.reveal .controls .navigate-right.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #8dcffc; }
.reveal .controls .navigate-up.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #8dcffc; }
.reveal .controls .navigate-down.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #8dcffc; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #fff; }
/*********************************************
* PROGRESS BAR
*********************************************/
......
......@@ -254,34 +254,38 @@ 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: #a23; }
.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: #a23; }
.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: #a23; }
.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: #a23; }
.reveal .controls .navigate-left.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
border-right-color: #dd5566; }
.reveal .controls .navigate-right.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
border-left-color: #dd5566; }
.reveal .controls .navigate-up.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
border-bottom-color: #dd5566; }
.reveal .controls .navigate-down.enabled:hover {
.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
border-top-color: #dd5566; }
.reveal .controls[data-controls-type="edges"] button:before,
.reveal .controls[data-controls-type="edges"] button:after {
background-color: #eee; }
/*********************************************
* PROGRESS BAR
*********************************************/
......
......@@ -257,34 +257,38 @@ 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: #13DAEC; }