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