Skip to content
Browse files

Added the ability to mark all an element’s children as "delayed" => l…

…ess code
  • Loading branch information...
1 parent f9fe99d commit 55b659ddf51715c342856cb0507a838fde671fe6 Lea Verou committed Aug 25, 2011
Showing with 39 additions and 5 deletions.
  1. +38 −4 slideshow.css
  2. +1 −1 slideshow.js
View
42 slideshow.css
@@ -78,7 +78,8 @@
}
/* Delayed items that are shown incrementally after the slide is */
-.slide .delayed {
+.delayed,
+.delayed-children > * {
opacity: 0;
-webkit-transition:.7s opacity;
@@ -87,12 +88,15 @@
transition:.7s opacity;
}
-.slide .delayed.displayed {
+.delayed.displayed,
+.delayed-children > .displayed {
opacity: .3;
}
-.slide .delayed.current,
-.slide .delayed.displayed.non-dismissable {
+.delayed.current,
+.delayed-children > .current,
+.delayed.displayed.non-dismissable,
+.delayed-children > .displayed.non-dismissable {
opacity: 1;
}
@@ -214,6 +218,7 @@
transform: rotate(30deg);
}
+/* Timer */
#timer {
position:absolute;
@@ -244,6 +249,35 @@
width: 100%;
}
+/* Ribbon */
+[data-type].slide:not(.hide-ribbon):after {
+ content: attr(data-type);
+ position: fixed;
+ top: 0;
+ right: 0;
+ color: white;
+ font-size: 50%;
+ text-align: center;
+ text-transform: uppercase;
+ font-weight: bold;
+ background: hsl(40,100%,50%);
+ background-image: -webkit-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+ background-image: -moz-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+ background-image: -o-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+ line-height: 1.6;
+ min-width: 20em;
+
+ -moz-box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
+ -webkit-box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
+ box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
+
+ -moz-transform: rotate(45deg) translate(6em, -2em);
+ -ms-transform: rotate(45deg) translate(6em, -2em);
+ -webkit-transform: rotate(45deg) translate(6em, -2em);
+ -o-transform: rotate(45deg) translate(6em, -2em);
+ transform: rotate(45deg) translate(6em, -2em);
+}
+
/* Presenter & projector views */
.projector #timer {
View
2 slideshow.js
@@ -313,7 +313,7 @@ SlideShow.prototype = {
this.adjustFontSize();
// Update items collection
- this.items = this.slides[this.slide].querySelectorAll('.delayed');
+ this.items = this.slides[this.slide].querySelectorAll('.delayed, .delayed-children > *');
this.item = 0;
// Tell other windows

0 comments on commit 55b659d

Please sign in to comment.
Something went wrong with that request. Please try again.