aboutsummaryrefslogtreecommitdiff
path: root/theme/sass
diff options
context:
space:
mode:
authorEric Bidelman2012-04-09 13:40:34 -0700
committerEric Bidelman2012-04-09 13:40:34 -0700
commita72619425c7b796a72c9e50ea06f6f8308e8703a (patch)
tree4bb7712f7147497ce0d882bcef5f66c969ed726d /theme/sass
parentd370b1d98b2a3375cb6093d70fcbf791c867b46d (diff)
downloadio-slides-remote-a72619425c7b796a72c9e50ea06f6f8308e8703a.tar.gz
auto fadein slide animations happen with css (no more js :))
Diffstat (limited to 'theme/sass')
-rw-r--r--theme/sass/default.scss33
1 files changed, 17 insertions, 16 deletions
diff --git a/theme/sass/default.scss b/theme/sass/default.scss
index 647671e..73f6723 100644
--- a/theme/sass/default.scss
+++ b/theme/sass/default.scss
@@ -151,6 +151,14 @@ slides > slide {
151 display: block; 151 display: block;
152 @include transform(translate(0)); 152 @include transform(translate(0));
153 @include transform(translate3d(0, 0, 0)); 153 @include transform(translate3d(0, 0, 0));
154
155 .auto-fadein {
156 opacity: 1;
157 }
158
159 .gdbar {
160 background-size: 100% 100%;
161 }
154 } 162 }
155 163
156 &.next { 164 &.next {
@@ -502,7 +510,7 @@ article.smaller {
502 } 510 }
503 511
504 .build-fade { 512 .build-fade {
505 opacity: 0.5; 513 opacity: 0.3;
506 514
507 &:hover { 515 &:hover {
508 opacity: 1.0; 516 opacity: 1.0;
@@ -605,6 +613,11 @@ input, button {
605 width: 100%; 613 width: 100%;
606} 614}
607 615
616.auto-fadein {
617 @include transition(opacity 0.6s ease-in 1s);
618 opacity: 0;
619}
620
608/* ===== SLIDE CONTENT ===== */ 621/* ===== SLIDE CONTENT ===== */
609.logoslide { 622.logoslide {
610 img { 623 img {
@@ -622,14 +635,6 @@ input, button {
622 color: $gray-1; 635 color: $gray-1;
623 line-height: 2.8; 636 line-height: 2.8;
624 } 637 }
625 hgroup {
626 opacity: 0;
627 @include transition(opacity 0.6s ease-in 1s);
628
629 &.on {
630 opacity: 1;
631 }
632 }
633} 638}
634 639
635.thank-you-slide { 640.thank-you-slide {
@@ -663,13 +668,9 @@ aside.gdbar {
663 @include border-radius(0 10px 10px 0); 668 @include border-radius(0 10px 10px 0);
664 @include background(linear-gradient(left, $gray-1, $gray-1) no-repeat); 669 @include background(linear-gradient(left, $gray-1, $gray-1) no-repeat);
665 @include background-size(100% 100%); 670 @include background-size(100% 100%);
666 background-size: 100% 100%; 671 background-size: 0 100%;
667 @include transition(all 0.5s ease-out 0.5s); /* Better to transition only on background-size, but not sure how to do that with the mixin. */ 672 @include transition(all 0.5s ease-out 0.5s); /* Better to transition only on background-size, but not sure how to do that with the mixin. */
668 673
669 &.to-build {
670 background-size: 0 100%;
671 }
672
673 &.right { 674 &.right {
674 right: 0; 675 right: 0;
675 left: -moz-initial; 676 left: -moz-initial;
@@ -691,7 +692,7 @@ aside.gdbar {
691 } 692 }
692} 693}
693 694
694#title-slide { 695.title-slide {
695 696
696 hgroup { 697 hgroup {
697 position: absolute; 698 position: absolute;
@@ -719,7 +720,7 @@ aside.gdbar {
719 } 720 }
720} 721}
721 722
722#title-slide, .thank-you-slide, .segue { 723.thank-you-slide, .segue {
723 padding: $slide-left-right-padding $slide-left-right-padding * 2; 724 padding: $slide-left-right-padding $slide-left-right-padding * 2;
724 725
725 aside { 726 aside {