aboutsummaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
authorJohannes Ammon <j.ammon@dr-ammon.de>2015-01-18 10:55:05 +0100
committerJohannes Ammon <j.ammon@dr-ammon.de>2015-01-18 10:55:05 +0100
commit95bba5179fa422ec8bd3934a67929053b41ac5d8 (patch)
treea084762841d2b3e6f210a7306ed1809b92cdef6d /css
parent9a89e39367dda0d39a618c9672df59b95b7eb3a8 (diff)
downloadfosdem-2018-presentation-95bba5179fa422ec8bd3934a67929053b41ac5d8.tar
fosdem-2018-presentation-95bba5179fa422ec8bd3934a67929053b41ac5d8.tar.gz
Mixins for readability of transitions added
To honor the DRY principle repeating patterns have been factored out. In addition there was an anchor missing in README.md.
Diffstat (limited to 'css')
-rw-r--r--css/reveal.scss159
1 files changed, 78 insertions, 81 deletions
diff --git a/css/reveal.scss b/css/reveal.scss
index 6cc21ba..ed74153 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -447,93 +447,98 @@ body {
/*********************************************
- * SLIDE TRANSITION
- * Aliased 'linear' for backwards compatibility
+ * Mixins for readability of transitions
*********************************************/
-.reveal.slide section,
-.reveal.linear section {
- backface-visibility: hidden;
+@mixin transition-global($style) {
+ .reveal .slides>section[data-transition=#{$style}],
+ .reveal.#{$style} .slides>section:not([data-transition]) {
+ @content;
+ }
}
-
-.reveal .slides>section[data-transition=slide].past,
-.reveal.slide .slides>section:not([data-transition]).past,
-.reveal .slides>section[data-transition=linear].past,
-.reveal.linear .slides>section:not([data-transition]).past {
- transform: translate(-150%, 0);
+@mixin transition-horizontal-past($style) {
+ .reveal .slides>section[data-transition=#{$style}].past,
+ .reveal.#{$style} .slides>section:not([data-transition]).past {
+ @content;
+ }
}
-.reveal .slides>section[data-transition=slide].future,
-.reveal.slide .slides>section:not([data-transition]).future,
-.reveal .slides>section[data-transition=linear].future,
-.reveal.linear .slides>section:not([data-transition]).future {
- transform: translate(150%, 0);
+@mixin transition-horizontal-future($style) {
+ .reveal .slides>section[data-transition=#{$style}].future,
+ .reveal.#{$style} .slides>section:not([data-transition]).future {
+ @content;
+ }
}
-.reveal .slides>section>section[data-transition=slide].past,
-.reveal.slide .slides>section>section:not([data-transition]).past,
-.reveal .slides>section>section[data-transition=linear].past,
-.reveal.linear .slides>section>section:not([data-transition]).past {
- transform: translate(0, -150%);
+@mixin transition-vertical-past($style) {
+ .reveal .slides>section>section[data-transition=#{$style}].past,
+ .reveal.#{$style} .slides>section>section:not([data-transition]).past {
+ @content;
+ }
}
-.reveal .slides>section>section[data-transition=slide].future,
-.reveal.slide .slides>section>section:not([data-transition]).future,
-.reveal .slides>section>section[data-transition=linear].future,
-.reveal.linear .slides>section>section:not([data-transition]).future {
- transform: translate(0, 150%);
+@mixin transition-vertical-future($style) {
+ .reveal .slides>section>section[data-transition=#{$style}].future,
+ .reveal.#{$style} .slides>section>section:not([data-transition]).future {
+ @content;
+ }
}
+/*********************************************
+ * SLIDE TRANSITION
+ * Aliased 'linear' for backwards compatibility
+ *********************************************/
+
+@each $stylename in slide, linear {
+ .reveal.#{$stylename} section {
+ backface-visibility: hidden;
+ }
+ @include transition-horizontal-past(#{$stylename}) {
+ transform: translate(-150%, 0);
+ }
+ @include transition-horizontal-future(#{$stylename}) {
+ transform: translate(150%, 0);
+ }
+ @include transition-vertical-past(#{$stylename}) {
+ transform: translate(0, -150%);
+ }
+ @include transition-vertical-future(#{$stylename}) {
+ transform: translate(0, 150%);
+ }
+}
/*********************************************
* CONVEX TRANSITION
* Aliased 'default' for backwards compatibility
*********************************************/
-.reveal .slides>section[data-transition=default].past,
-.reveal.default .slides>section:not([data-transition]).past,
-.reveal .slides>section[data-transition=convex].past,
-.reveal.convex .slides>section:not([data-transition]).past {
- transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-}
-.reveal .slides>section[data-transition=default].future,
-.reveal.default .slides>section:not([data-transition]).future,
-.reveal .slides>section[data-transition=convex].future,
-.reveal.convex .slides>section:not([data-transition]).future {
- transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-}
-
-.reveal .slides>section>section[data-transition=default].past,
-.reveal.default .slides>section>section:not([data-transition]).past,
-.reveal .slides>section>section[data-transition=convex].past,
-.reveal.convex .slides>section>section:not([data-transition]).past {
- transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
-}
-.reveal .slides>section>section[data-transition=default].future,
-.reveal.default .slides>section>section:not([data-transition]).future,
-.reveal .slides>section>section[data-transition=convex].future,
-.reveal.convex .slides>section>section:not([data-transition]).future {
- transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+@each $stylename in default, convex {
+ @include transition-horizontal-past(#{$stylename}) {
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ }
+ @include transition-horizontal-future(#{$stylename}) {
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ }
+ @include transition-vertical-past(#{$stylename}) {
+ transform: translate3d(0, -300px, 0) rotateX(70deg) translate3d(0, -300px, 0);
+ }
+ @include transition-vertical-future(#{$stylename}) {
+ transform: translate3d(0, 300px, 0) rotateX(-70deg) translate3d(0, 300px, 0);
+ }
}
-
/*********************************************
* CONCAVE TRANSITION
*********************************************/
-.reveal .slides>section[data-transition=concave].past,
-.reveal.concave .slides>section:not([data-transition]).past {
+@include transition-horizontal-past(concave) {
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
-.reveal .slides>section[data-transition=concave].future,
-.reveal.concave .slides>section:not([data-transition]).future {
+@include transition-horizontal-future(concave) {
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
-
-.reveal .slides>section>section[data-transition=concave].past,
-.reveal.concave .slides>section>section:not([data-transition]).past {
+@include transition-vertical-past(concave) {
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
}
-.reveal .slides>section>section[data-transition=concave].future,
-.reveal.concave .slides>section>section:not([data-transition]).future {
+@include transition-vertical-future(concave) {
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
@@ -542,29 +547,22 @@ body {
* ZOOM TRANSITION
*********************************************/
-.reveal .slides>section[data-transition=zoom],
-.reveal.zoom .slides>section:not([data-transition]) {
- transition-timing-function: ease;
+@include transition-global(zoom) {
+ transition-timing-function: ease;
}
-
-.reveal .slides>section[data-transition=zoom].past,
-.reveal.zoom .slides>section:not([data-transition]).past {
- visibility: hidden;
- transform: scale(16);
+@include transition-horizontal-past(zoom) {
+ visibility: hidden;
+ transform: scale(16);
}
-.reveal .slides>section[data-transition=zoom].future,
-.reveal.zoom .slides>section:not([data-transition]).future {
- visibility: hidden;
- transform: scale(0.2);
+@include transition-horizontal-future(zoom) {
+ visibility: hidden;
+ transform: scale(0.2);
}
-
-.reveal .slides>section>section[data-transition=zoom].past,
-.reveal.zoom .slides>section>section:not([data-transition]).past {
- transform: translate(0, -150%);
+@include transition-vertical-past(zoom) {
+ transform: translate(0, -150%);
}
-.reveal .slides>section>section[data-transition=zoom].future,
-.reveal.zoom .slides>section>section:not([data-transition]).future {
- transform: translate(0, 150%);
+@include transition-vertical-future(zoom) {
+ transform: translate(0, 150%);
}
@@ -732,8 +730,7 @@ body {
* NO TRANSITION
*********************************************/
-.reveal .slides section[data-transition=none],
-.reveal.none .slides section:not([data-transition]) {
+@include transition-global(none) {
transform: none;
transition: none;
}