Merge branch 'master' of https://github.com/jammon/reveal.js into dev
This commit is contained in:
Hakim El Hattab
171
css/reveal.scss
171
css/reveal.scss
@ -427,94 +427,103 @@ body {
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* Mixins for readability of transitions
|
||||
*********************************************/
|
||||
|
||||
@mixin transition-global($style) {
|
||||
.reveal .slides>section[data-transition=#{$style}],
|
||||
.reveal.#{$style} .slides>section:not([data-transition]) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin transition-horizontal-past($style) {
|
||||
.reveal .slides>section[data-transition=#{$style}].past,
|
||||
.reveal .slides>section[data-transition~=#{$style}-out].past,
|
||||
.reveal.#{$style} .slides>section:not([data-transition]).past {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin transition-horizontal-future($style) {
|
||||
.reveal .slides>section[data-transition=#{$style}].future,
|
||||
.reveal .slides>section[data-transition~=#{$style}-in].future,
|
||||
.reveal.#{$style} .slides>section:not([data-transition]).future {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-vertical-past($style) {
|
||||
.reveal .slides>section>section[data-transition=#{$style}].past,
|
||||
.reveal .slides>section>section[data-transition~=#{$style}-out].past,
|
||||
.reveal.#{$style} .slides>section>section:not([data-transition]).past {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin transition-vertical-future($style) {
|
||||
.reveal .slides>section>section[data-transition=#{$style}].future,
|
||||
.reveal .slides>section>section[data-transition~=#{$style}-in].future,
|
||||
.reveal.#{$style} .slides>section>section:not([data-transition]).future {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* SLIDE TRANSITION
|
||||
* Aliased 'linear' for backwards compatibility
|
||||
*********************************************/
|
||||
|
||||
.reveal.slide section,
|
||||
.reveal.linear section {
|
||||
backface-visibility: hidden;
|
||||
@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%);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
.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%);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* 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);
|
||||
@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);
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
/*********************************************
|
||||
* 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);
|
||||
}
|
||||
|
||||
@ -523,29 +532,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%);
|
||||
}
|
||||
|
||||
|
||||
@ -713,8 +715,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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user