new controls responsively move to bottom right for small displays
This commit is contained in:
Hakim El Hattab
parent
1319016957
commit
ce4537f883
2 changed files with 101 additions and 65 deletions
|
|
@ -254,8 +254,8 @@ body {
|
||||||
.reveal .controls[data-controls-type="edges"] button {
|
.reveal .controls[data-controls-type="edges"] button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 36px;
|
width: 44px;
|
||||||
height: 36px;
|
height: 44px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
|
@ -272,69 +272,83 @@ body {
|
||||||
.reveal .controls[data-controls-type="edges"] button:after {
|
.reveal .controls[data-controls-type="edges"] button:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 36px;
|
width: 33px;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
border-radius: 2.5px;
|
border-radius: 2.5px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
-webkit-transition: all 0.15s ease;
|
-webkit-transition: all 0.15s ease;
|
||||||
transition: all 0.15s ease;
|
transition: all 0.15s ease;
|
||||||
-webkit-transform-origin: 0% 50%;
|
-webkit-transform-origin: 2.5px 50%;
|
||||||
transform-origin: 0% 50%; }
|
transform-origin: 2.5px 50%; }
|
||||||
.reveal .controls[data-controls-type="edges"] button:before {
|
.reveal .controls[data-controls-type="edges"] button:before {
|
||||||
-webkit-transform: translate(0, -1px) rotate(40deg);
|
-webkit-transform: translateY(19.5px) rotate(40deg);
|
||||||
transform: translate(0, -1px) rotate(40deg); }
|
transform: translateY(19.5px) rotate(40deg); }
|
||||||
.reveal .controls[data-controls-type="edges"] button:after {
|
.reveal .controls[data-controls-type="edges"] button:after {
|
||||||
-webkit-transform: translate(0, 1px) rotate(-40deg);
|
-webkit-transform: translateY(19.5px) rotate(-40deg);
|
||||||
transform: translate(0, 1px) rotate(-40deg); }
|
transform: translateY(19.5px) rotate(-40deg); }
|
||||||
.reveal .controls[data-controls-type="edges"] button:hover:before {
|
.reveal .controls[data-controls-type="edges"] button:hover:before {
|
||||||
-webkit-transform: translate(0, -1px) rotate(36deg);
|
-webkit-transform: translateY(19.5px) rotate(36deg);
|
||||||
transform: translate(0, -1px) rotate(36deg); }
|
transform: translateY(19.5px) rotate(36deg); }
|
||||||
.reveal .controls[data-controls-type="edges"] button:hover:after {
|
.reveal .controls[data-controls-type="edges"] button:hover:after {
|
||||||
-webkit-transform: translate(0, 1px) rotate(-36deg);
|
-webkit-transform: translateY(19.5px) rotate(-36deg);
|
||||||
transform: translate(0, 1px) rotate(-36deg); }
|
transform: translateY(19.5px) rotate(-36deg); }
|
||||||
.reveal .controls[data-controls-type="edges"] button:active:before {
|
.reveal .controls[data-controls-type="edges"] button:active:before {
|
||||||
-webkit-transform: translate(0, -1px) rotate(34deg);
|
-webkit-transform: translateY(19.5px) rotate(34deg);
|
||||||
transform: translate(0, -1px) rotate(34deg); }
|
transform: translateY(19.5px) rotate(34deg); }
|
||||||
.reveal .controls[data-controls-type="edges"] button:active:after {
|
.reveal .controls[data-controls-type="edges"] button:active:after {
|
||||||
-webkit-transform: translate(0, 1px) rotate(-34deg);
|
-webkit-transform: translateY(19.5px) rotate(-34deg);
|
||||||
transform: translate(0, 1px) rotate(-34deg); }
|
transform: translateY(19.5px) rotate(-34deg); }
|
||||||
.reveal .controls[data-controls-type="edges"] .enabled {
|
.reveal .controls[data-controls-type="edges"] .enabled {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
.reveal .controls[data-controls-type="edges"] .enabled:hover {
|
.reveal .controls[data-controls-type="edges"] .enabled:hover {
|
||||||
opacity: 1; }
|
opacity: 1; }
|
||||||
|
.reveal .controls[data-controls-type="edges"] .enabled.fragmented {
|
||||||
|
opacity: 0.3; }
|
||||||
.reveal .controls[data-controls-type="edges"] .navigate-left {
|
.reveal .controls[data-controls-type="edges"] .navigate-left {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 18px;
|
left: 18px;
|
||||||
margin-top: -18px; }
|
-webkit-transform: translateY(-50%);
|
||||||
.reveal .controls[data-controls-type="edges"] .navigate-left.fragmented {
|
transform: translateY(-50%); }
|
||||||
opacity: 0.3; }
|
|
||||||
.reveal .controls[data-controls-type="edges"] .navigate-right {
|
.reveal .controls[data-controls-type="edges"] .navigate-right {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: 18px;
|
right: 18px;
|
||||||
margin-top: -18px;
|
-webkit-transform: translateY(-50%) rotate(180deg);
|
||||||
-webkit-transform: rotate(180deg);
|
transform: translateY(-50%) 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 {
|
.reveal .controls[data-controls-type="edges"] .navigate-up {
|
||||||
top: 18px;
|
top: 18px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -18px;
|
-webkit-transform: translateX(-50%) rotate(90deg);
|
||||||
-webkit-transform: rotate(90deg);
|
transform: translateX(-50%) 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 {
|
.reveal .controls[data-controls-type="edges"] .navigate-down {
|
||||||
bottom: 18px;
|
bottom: 18px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -18px;
|
-webkit-transform: translateX(-50%) rotate(-90deg);
|
||||||
-webkit-transform: rotate(-90deg);
|
transform: translateX(-50%) rotate(-90deg); }
|
||||||
transform: rotate(-90deg); }
|
@media screen and (max-width: 500px) {
|
||||||
.reveal .controls[data-controls-type="edges"] .navigate-down.fragmented {
|
.reveal .controls[data-controls-type="edges"] {
|
||||||
opacity: 0.3; }
|
bottom: 18px;
|
||||||
|
right: 18px; }
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-left,
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-right,
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-up,
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-down {
|
||||||
|
top: auto;
|
||||||
|
left: auto; }
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-left {
|
||||||
|
right: 80px;
|
||||||
|
bottom: 18px; }
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-right {
|
||||||
|
right: 0;
|
||||||
|
bottom: 18px; }
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-up {
|
||||||
|
right: 18px;
|
||||||
|
bottom: 80px; }
|
||||||
|
.reveal .controls[data-controls-type="edges"] .navigate-down {
|
||||||
|
right: 18px;
|
||||||
|
bottom: 0; } }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* PROGRESS BAR
|
* PROGRESS BAR
|
||||||
|
|
|
||||||
|
|
@ -314,20 +314,21 @@ body {
|
||||||
|
|
||||||
|
|
||||||
.reveal .controls[data-controls-type="edges"] {
|
.reveal .controls[data-controls-type="edges"] {
|
||||||
$size: 36px;
|
$size: 44px;
|
||||||
|
$length: floor($size * 0.75);
|
||||||
$spacing: 18px;
|
$spacing: 18px;
|
||||||
$thickness: 5px;
|
$thickness: 5px;
|
||||||
$angle: 40deg;
|
$angle: 40deg;
|
||||||
$angleHover: 36deg;
|
$angleHover: 36deg;
|
||||||
$angleActive: 34deg;
|
$angleActive: 34deg;
|
||||||
|
|
||||||
@mixin arrowTransform( $angle, $x: 0, $y: 0 ) {
|
@mixin arrowTransform( $angle ) {
|
||||||
&:before {
|
&:before {
|
||||||
transform: translate( $x, $y ) rotate( $angle );
|
transform: translateY(($size - $thickness)/2) rotate( $angle );
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
transform: translate( $x, -$y ) rotate( -$angle );
|
transform: translateY(($size - $thickness)/2) rotate( -$angle );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -359,26 +360,26 @@ body {
|
||||||
button:after {
|
button:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: $size;
|
width: $length;
|
||||||
height: $thickness;
|
height: $thickness;
|
||||||
border-radius: $thickness / 2;
|
border-radius: $thickness/2;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
transition: all 0.15s ease;
|
transition: all 0.15s ease;
|
||||||
transform-origin: 0% 50%;
|
transform-origin: $thickness/2 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
@include arrowTransform( $angle, 0, -1px );
|
@include arrowTransform( $angle );
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@include arrowTransform( $angleHover, 0, -1px );
|
@include arrowTransform( $angleHover );
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
@include arrowTransform( $angleActive, 0, -1px );
|
@include arrowTransform( $angleActive );
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -391,43 +392,64 @@ body {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.enabled.fragmented {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
.navigate-left {
|
.navigate-left {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: $spacing;
|
left: $spacing;
|
||||||
margin-top: -$size/2;
|
transform: translateY(-50%);
|
||||||
}
|
|
||||||
.navigate-left.fragmented {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigate-right {
|
.navigate-right {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
right: $spacing;
|
right: $spacing;
|
||||||
margin-top: -$size/2;
|
transform: translateY(-50%) rotate( 180deg );
|
||||||
transform: rotate( 180deg );
|
|
||||||
}
|
|
||||||
.navigate-right.fragmented {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigate-up {
|
.navigate-up {
|
||||||
top: $spacing;
|
top: $spacing;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -$size/2;
|
transform: translateX(-50%) rotate( 90deg );
|
||||||
transform: rotate( 90deg );
|
|
||||||
}
|
|
||||||
.navigate-up.fragmented {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigate-down {
|
.navigate-down {
|
||||||
bottom: $spacing;
|
bottom: $spacing;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -$size/2;
|
transform: translateX(-50%) rotate( -90deg );
|
||||||
transform: rotate( -90deg );
|
|
||||||
}
|
}
|
||||||
.navigate-down.fragmented {
|
|
||||||
opacity: 0.3;
|
@media screen and (max-width: 500px) {
|
||||||
|
& {
|
||||||
|
bottom: $spacing;
|
||||||
|
right: $spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigate-left,
|
||||||
|
.navigate-right,
|
||||||
|
.navigate-up,
|
||||||
|
.navigate-down {
|
||||||
|
top: auto;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigate-left {
|
||||||
|
right: $size + $spacing*2;
|
||||||
|
bottom: $spacing;
|
||||||
|
}
|
||||||
|
.navigate-right {
|
||||||
|
right: 0;
|
||||||
|
bottom: $spacing;
|
||||||
|
}
|
||||||
|
.navigate-up {
|
||||||
|
right: $spacing;
|
||||||
|
bottom: $size + $spacing*2;
|
||||||
|
}
|
||||||
|
.navigate-down {
|
||||||
|
right: $spacing;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue