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

control size tweaks

Browse Source
This commit is contained in:
Hakim El Hattab
2016-04-26 11:08:10 +02:00
parent 69c72b9e08
commit 8a09557699
2 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
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: 44px; width: 50px;
height: 44px; height: 50px;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
outline: 0; outline: 0;
@@ -274,7 +274,7 @@ body {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 33px; width: 30px;
height: 5px; height: 5px;
border-radius: 2.5px; border-radius: 2.5px;
background-color: #fff; background-color: #fff;
@@ -283,30 +283,31 @@ body {
-webkit-transform-origin: 2.5px 50%; -webkit-transform-origin: 2.5px 50%;
transform-origin: 2.5px 50%; } transform-origin: 2.5px 50%; }
.reveal .controls[data-controls-type="edges"] button:before { .reveal .controls[data-controls-type="edges"] button:before {
-webkit-transform: translateY(19.5px) rotate(40deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(44deg);
transform: translateY(19.5px) rotate(40deg); } transform: translateX(10px) translateY(22.5px) rotate(44deg); }
.reveal .controls[data-controls-type="edges"] button:after { .reveal .controls[data-controls-type="edges"] button:after {
-webkit-transform: translateY(19.5px) rotate(-40deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(-44deg);
transform: translateY(19.5px) rotate(-40deg); } transform: translateX(10px) translateY(22.5px) rotate(-44deg); }
.reveal .controls[data-controls-type="edges"] button:hover:before { .reveal .controls[data-controls-type="edges"] button:hover:before {
-webkit-transform: translateY(19.5px) rotate(36deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(40deg);
transform: translateY(19.5px) rotate(36deg); } transform: translateX(10px) translateY(22.5px) rotate(40deg); }
.reveal .controls[data-controls-type="edges"] button:hover:after { .reveal .controls[data-controls-type="edges"] button:hover:after {
-webkit-transform: translateY(19.5px) rotate(-36deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(-40deg);
transform: translateY(19.5px) rotate(-36deg); } transform: translateX(10px) translateY(22.5px) rotate(-40deg); }
.reveal .controls[data-controls-type="edges"] button:active:before { .reveal .controls[data-controls-type="edges"] button:active:before {
-webkit-transform: translateY(19.5px) rotate(34deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(36deg);
transform: translateY(19.5px) rotate(34deg); } transform: translateX(10px) translateY(22.5px) rotate(36deg); }
.reveal .controls[data-controls-type="edges"] button:active:after { .reveal .controls[data-controls-type="edges"] button:active:after {
-webkit-transform: translateY(19.5px) rotate(-34deg); -webkit-transform: translateX(10px) translateY(22.5px) rotate(-36deg);
transform: translateY(19.5px) rotate(-34deg); } transform: translateX(10px) translateY(22.5px) rotate(-36deg); }
.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 {
opacity: 1; }
.reveal .controls[data-controls-type="edges"] .enabled.fragmented { .reveal .controls[data-controls-type="edges"] .enabled.fragmented {
opacity: 0.3; } opacity: 0.3; }
.reveal .controls[data-controls-type="edges"] .enabled:hover,
.reveal .controls[data-controls-type="edges"] .enabled.fragmented:hover {
opacity: 1; }
.reveal .controls[data-controls-type="edges"] .navigate-left { .reveal .controls[data-controls-type="edges"] .navigate-left {
top: 50%; top: 50%;
left: 18px; left: 18px;
@@ -338,14 +339,14 @@ body {
top: auto; top: auto;
left: auto; } left: auto; }
.reveal .controls[data-controls-type="edges"] .navigate-left { .reveal .controls[data-controls-type="edges"] .navigate-left {
right: 80px; right: 86px;
bottom: 18px; } bottom: 18px; }
.reveal .controls[data-controls-type="edges"] .navigate-right { .reveal .controls[data-controls-type="edges"] .navigate-right {
right: 0; right: 0;
bottom: 18px; } bottom: 18px; }
.reveal .controls[data-controls-type="edges"] .navigate-up { .reveal .controls[data-controls-type="edges"] .navigate-up {
right: 18px; right: 18px;
bottom: 80px; } bottom: 86px; }
.reveal .controls[data-controls-type="edges"] .navigate-down { .reveal .controls[data-controls-type="edges"] .navigate-down {
right: 18px; right: 18px;
bottom: 0; } } bottom: 0; } }

23
css/reveal.scss
View File

@@ -314,21 +314,21 @@ body {
.reveal .controls[data-controls-type="edges"] { .reveal .controls[data-controls-type="edges"] {
$size: 44px; $size: 50px;
$length: floor($size * 0.75); $length: floor($size * 0.6);
$spacing: 18px; $spacing: 18px;
$thickness: 5px; $thickness: 5px;
$angle: 40deg; $angle: 44deg;
$angleHover: 36deg; $angleHover: 40deg;
$angleActive: 34deg; $angleActive: 36deg;
@mixin arrowTransform( $angle ) { @mixin arrowTransform( $angle ) {
&:before { &:before {
transform: translateY(($size - $thickness)/2) rotate( $angle ); transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( $angle );
} }
&:after { &:after {
transform: translateY(($size - $thickness)/2) rotate( -$angle ); transform: translateX(($size - $length)/2) translateY(($size - $thickness)/2) rotate( -$angle );
} }
} }
@@ -388,14 +388,15 @@ body {
cursor: pointer; cursor: pointer;
} }
.enabled:hover {
opacity: 1;
}
.enabled.fragmented { .enabled.fragmented {
opacity: 0.3; opacity: 0.3;
} }
.enabled:hover,
.enabled.fragmented:hover {
opacity: 1;
}
.navigate-left { .navigate-left {
top: 50%; top: 50%;
left: $spacing; left: $spacing;