xobs/lca2019-talk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

new controls responsively move to bottom right for small displays

Browse Source
This commit is contained in:
Hakim El Hattab 2016-04-20 16:18:58 +02:00
parent 1319016957
commit ce4537f883
2 changed files with 101 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
css/reveal.css
View File

@ -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

78
css/reveal.scss
View File

@ -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 ); }
@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;
} }
.navigate-down.fragmented {
opacity: 0.3;
} }
} }