aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2016-04-20 16:18:58 +0200
committerHakim El Hattab <hakim.elhattab@gmail.com>2017-05-16 09:45:37 +0200
commitce4537f883c2af1a1884418c2addf9e42003e55d (patch)
tree31b45ecb32d9b23181ba98c34f6a5f7b4bf05f42
parent1319016957e806af362761e43bd389e6aa9edefe (diff)
downloadfosdem-2018-presentation-ce4537f883c2af1a1884418c2addf9e42003e55d.tar
fosdem-2018-presentation-ce4537f883c2af1a1884418c2addf9e42003e55d.tar.gz
new controls responsively move to bottom right for small displays
-rw-r--r--css/reveal.css86
-rw-r--r--css/reveal.scss80
2 files changed, 101 insertions, 65 deletions
diff --git a/css/reveal.css b/css/reveal.css
index 8f026a6..60df7c3 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -254,8 +254,8 @@ body {
.reveal .controls[data-controls-type="edges"] button {
position: absolute;
padding: 0;
- width: 36px;
- height: 36px;
+ width: 44px;
+ height: 44px;
background-color: transparent;
border: 0;
outline: 0;
@@ -272,69 +272,83 @@ body {
.reveal .controls[data-controls-type="edges"] button:after {
content: '';
position: absolute;
- top: 40%;
+ top: 0;
left: 0;
- width: 36px;
+ width: 33px;
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%; }
+ -webkit-transform-origin: 2.5px 50%;
+ transform-origin: 2.5px 50%; }
.reveal .controls[data-controls-type="edges"] button:before {
- -webkit-transform: translate(0, -1px) rotate(40deg);
- transform: translate(0, -1px) rotate(40deg); }
+ -webkit-transform: translateY(19.5px) rotate(40deg);
+ transform: translateY(19.5px) rotate(40deg); }
.reveal .controls[data-controls-type="edges"] button:after {
- -webkit-transform: translate(0, 1px) rotate(-40deg);
- transform: translate(0, 1px) rotate(-40deg); }
+ -webkit-transform: translateY(19.5px) rotate(-40deg);
+ transform: translateY(19.5px) rotate(-40deg); }
.reveal .controls[data-controls-type="edges"] button:hover:before {
- -webkit-transform: translate(0, -1px) rotate(36deg);
- transform: translate(0, -1px) rotate(36deg); }
+ -webkit-transform: translateY(19.5px) rotate(36deg);
+ transform: translateY(19.5px) rotate(36deg); }
.reveal .controls[data-controls-type="edges"] button:hover:after {
- -webkit-transform: translate(0, 1px) rotate(-36deg);
- transform: translate(0, 1px) rotate(-36deg); }
+ -webkit-transform: translateY(19.5px) rotate(-36deg);
+ transform: translateY(19.5px) rotate(-36deg); }
.reveal .controls[data-controls-type="edges"] button:active:before {
- -webkit-transform: translate(0, -1px) rotate(34deg);
- transform: translate(0, -1px) rotate(34deg); }
+ -webkit-transform: translateY(19.5px) rotate(34deg);
+ transform: translateY(19.5px) rotate(34deg); }
.reveal .controls[data-controls-type="edges"] button:active:after {
- -webkit-transform: translate(0, 1px) rotate(-34deg);
- transform: translate(0, 1px) rotate(-34deg); }
+ -webkit-transform: translateY(19.5px) rotate(-34deg);
+ transform: translateY(19.5px) 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"] .enabled.fragmented {
+ opacity: 0.3; }
.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; }
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%); }
.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; }
+ -webkit-transform: translateY(-50%) rotate(180deg);
+ transform: translateY(-50%) rotate(180deg); }
.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; }
+ -webkit-transform: translateX(-50%) rotate(90deg);
+ transform: translateX(-50%) rotate(90deg); }
.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; }
+ -webkit-transform: translateX(-50%) rotate(-90deg);
+ transform: translateX(-50%) rotate(-90deg); }
+ @media screen and (max-width: 500px) {
+ .reveal .controls[data-controls-type="edges"] {
+ 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
diff --git a/css/reveal.scss b/css/reveal.scss
index 04316bf..82e1b0a 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -314,20 +314,21 @@ body {
.reveal .controls[data-controls-type="edges"] {
- $size: 36px;
+ $size: 44px;
+ $length: floor($size * 0.75);
$spacing: 18px;
$thickness: 5px;
$angle: 40deg;
$angleHover: 36deg;
$angleActive: 34deg;
- @mixin arrowTransform( $angle, $x: 0, $y: 0 ) {
+ @mixin arrowTransform( $angle ) {
&:before {
- transform: translate( $x, $y ) rotate( $angle );
+ transform: translateY(($size - $thickness)/2) rotate( $angle );
}
&:after {
- transform: translate( $x, -$y ) rotate( -$angle );
+ transform: translateY(($size - $thickness)/2) rotate( -$angle );
}
}
@@ -359,26 +360,26 @@ body {
button:after {
content: '';
position: absolute;
- top: 40%;
+ top: 0;
left: 0;
- width: $size;
+ width: $length;
height: $thickness;
- border-radius: $thickness / 2;
+ border-radius: $thickness/2;
background: #fff;
transition: all 0.15s ease;
- transform-origin: 0% 50%;
+ transform-origin: $thickness/2 50%;
}
button {
- @include arrowTransform( $angle, 0, -1px );
+ @include arrowTransform( $angle );
&:hover {
- @include arrowTransform( $angleHover, 0, -1px );
+ @include arrowTransform( $angleHover );
}
&:active {
- @include arrowTransform( $angleActive, 0, -1px );
+ @include arrowTransform( $angleActive );
}
}
@@ -391,43 +392,64 @@ body {
opacity: 1;
}
+ .enabled.fragmented {
+ opacity: 0.3;
+ }
+
.navigate-left {
top: 50%;
left: $spacing;
- margin-top: -$size/2;
- }
- .navigate-left.fragmented {
- opacity: 0.3;
+ transform: translateY(-50%);
}
.navigate-right {
top: 50%;
right: $spacing;
- margin-top: -$size/2;
- transform: rotate( 180deg );
- }
- .navigate-right.fragmented {
- opacity: 0.3;
+ transform: translateY(-50%) rotate( 180deg );
}
.navigate-up {
top: $spacing;
left: 50%;
- margin-left: -$size/2;
- transform: rotate( 90deg );
- }
- .navigate-up.fragmented {
- opacity: 0.3;
+ transform: translateX(-50%) rotate( 90deg );
}
.navigate-down {
bottom: $spacing;
left: 50%;
- margin-left: -$size/2;
- transform: rotate( -90deg );
+ transform: translateX(-50%) 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;
+ }
}
}