browsercms 3.5.7 → 4.0.0.alpha

data/app/assets/stylesheets/cms/includes/animation/_shared.css.scss

@@ -0,0 +1,22 @@
+@mixin set-experimental-support($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
+  $experimental-support-for-mozilla: $moz;
+  $experimental-support-for-webkit: $webkit;
+  $experimental-support-for-microsoft: $ms;
+  $experimental-support-for-opera: $o;
+  $experimental-support-for-khtml: $khtml;
+}
+
+@mixin with-only-support-for($moz: false, $webkit: false, $ms: false, $o: false, $khtml: false) {
+  // Capture the current state
+  $original-moz: $experimental-support-for-mozilla;
+  $original-webkit: $experimental-support-for-webkit;
+  $original-o: $experimental-support-for-opera;
+  $original-ms: $experimental-support-for-microsoft;
+  $original-khtml: $experimental-support-for-khtml;
+
+  @include set-experimental-support($moz, $webkit, $ms, $o, $khtml);
+
+  @content;
+
+  @include set-experimental-support($original-moz, $original-webkit, $original-ms, $original-o, $original-khtml);
+}

data/app/assets/stylesheets/cms/includes/animation/animate/_attention-seekers.css.scss

@@ -0,0 +1,152 @@
+// ---------------------------------------------------------------------------
+@include keyframes(flash) {
+  0% {
+    opacity: 1; }
+  25% {
+    opacity: 0; }
+  50% {
+    opacity: 1; }
+  75% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounce) {
+  0% {
+    @include translateY(0); }
+  20% {
+    @include translateY(0); }
+  40% {
+    @include translateY(-30px); }
+  50% {
+    @include translateY(0); }
+  60% {
+    @include translateY(-15px); }
+  80% {
+    @include translateY(0); }
+  100% {
+    @include translateY(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(shake) {
+  0% {
+    @include translateX(0); }
+  10% {
+    @include translateX(-10px); }
+  20% {
+    @include translateX(10px); }
+  30% {
+    @include translateX(-10px); }
+  40% {
+    @include translateX(10px); }
+  50% {
+    @include translateX(-10px); }
+  60% {
+    @include translateX(10px); }
+  70% {
+    @include translateX(-10px); }
+  80% {
+    @include translateX(10px); }
+  90% {
+    @include translateX(-10px); }
+  100% {
+    @include translateX(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(tada) {
+  0% {
+    @include scale(1); }
+  10% {
+    @include transform(scale(0.9) rotate(-3deg)); }
+  20% {
+    @include transform(scale(0.9) rotate(-3deg)); }
+  30% {
+    @include transform(scale(1.1) rotate(3deg)); }
+  40% {
+    @include transform(scale(1.1) rotate(-3deg)); }
+  50% {
+    @include transform(scale(1.1) rotate(3deg)); }
+  60% {
+    @include transform(scale(1.1) rotate(-3deg)); }
+  70% {
+    @include transform(scale(1.1) rotate(3deg)); }
+  80% {
+    @include transform(scale(1.1) rotate(-3deg)); }
+  90% {
+    @include transform(scale(1.1) rotate(3deg)); }
+  100% {
+    @include transform(scale(1) rotate(0)); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(swing) {
+  20%, 40%, 60%, 80%, 100% {
+    @include transform-origin(top center); }
+  20% {
+    @include rotate(15deg); }
+  40% {
+    @include rotate(-10deg); }
+  60% {
+    @include rotate(5deg); }
+  80% {
+    @include rotate(-5deg); }
+  100% {
+    @include rotate(0deg); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(wobble) {
+  0% {
+    @include translateX(0%); }
+  15% {
+    @include transform(translateX(-25%) rotate(-5deg)); }
+  30% {
+    @include transform(translateX(20%) rotate(3deg)); }
+  45% {
+    @include transform(translateX(-15%) rotate(-3deg)); }
+  60% {
+    @include transform(translateX(10%) rotate(2deg)); }
+  75% {
+    @include transform(translateX(-5%) rotate(-1deg)); }
+  100% {
+    @include transform(translateX(0%)); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(pulse) {
+  0% {
+    @include scale(1); }
+  50% {
+    @include scale(1.1); }
+  100% {
+    @include scale(1); } }
+    
+    
+// ---------------------------------------------------------------------------
+@include keyframes(wiggle) {
+  0% {
+    @include skewX(9deg); }
+  10% {
+    @include skewX(-8deg); }
+  20% {
+    @include skewX(7deg); }
+  30% {
+    @include skewX(-6deg); }
+  40% {
+    @include skewX(5deg); }
+  50% {
+    @include skewX(-4deg); }
+  60% {
+    @include skewX(3deg); }
+  70% {
+    @include skewX(-2deg); }
+  80% {
+    @include skewX(1deg); }
+  90% {
+    @include skewX(0deg); }
+  100% {
+    @include skewX(0deg); } }

data/app/assets/stylesheets/cms/includes/animation/animate/_bouncing.css.scss

@@ -0,0 +1,3 @@
+// ---------------------------------------------------------------------------
+@import "bouncing/bouncing-exits";
+@import "bouncing/bouncing-entrances";

data/app/assets/stylesheets/cms/includes/animation/animate/_classes.css.scss

@@ -0,0 +1,21 @@
+// .animated and .animated.hinge classes for external use
+.animated {
+  @include animation(1s ease both); }
+
+.animated.hinge {
+  @include animation(2s ease both); }
+
+// Animations list
+$animations: flash, shake, bounce, tada, swing, wobble, wiggle, pulse, flip, flipInX, flipOutX, flipInY, flipOutY, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, lightSpeedIn, lightSpeedOut, hinge, rollIn, rollOut;
+
+// Animations that require backface-visibility
+$backface: flip, flipInX, flipOutX, flipInY, flipOutY;
+
+// Creation of the different classes
+@each $anim in $animations {
+  .#{$anim} {
+    @if index($backface, $anim) {
+      @include backface-visibility(visible); }
+    @if $anim == "swing" {
+      @include transform-origin(top, center); }
+    @include animation-name($anim); } }

data/app/assets/stylesheets/cms/includes/animation/animate/_fading.css.scss

@@ -0,0 +1,3 @@
+// ---------------------------------------------------------------------------
+@import "fading/fading-exits";
+@import "fading/fading-entrances";

data/app/assets/stylesheets/cms/includes/animation/animate/_flippers.css.scss

@@ -0,0 +1,87 @@
+// ---------------------------------------------------------------------------
+@include keyframes(flip) {
+  0% {
+    @include transform(perspective(400px) rotateY(0));
+    @include animation-timing-function(ease-out);
+  }
+  40% {
+    @include transform(perspective(400px) translateZ(150px) rotateY(170deg));
+    @include animation-timing-function(ease-out);
+  }
+  50% {
+    @include transform(perspective(400px) translateZ(150px) rotateY(190deg) scale(1));
+    @include animation-timing-function(ease-in);
+  }
+  80% {
+    @include transform(perspective(400px) rotateY(360deg) scale(0.95));
+    @include animation-timing-function(ease-in);
+  }
+  100% {
+    @include transform(perspective(400px) scale(1));
+    @include animation-timing-function(ease-in);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipInX) {
+  0% {
+    @include transform(perspective(400px) rotateX(90deg));
+    @include opacity(0);
+  }
+  40% {
+    @include transform(perspective(400px) rotateX(-10deg));
+  }
+  70% {
+    @include transform(perspective(400px) rotateX(10deg));
+  }
+  100% {
+    @include transform(perspective(400px) rotateX(0deg));
+    @include opacity(1);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipOutX) {
+  0% {
+    @include transform(perspective(400px) rotateX(0deg));
+    @include opacity(1);
+  }
+  100% {
+    @include transform(perspective(400px) rotateX(90deg));
+    @include opacity(0);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipInY) {
+  0% {
+    @include transform(perspective(400px) rotateY(90deg));
+    @include opacity(0);
+  }
+  40% {
+    @include transform(perspective(400px) rotateY(-10deg));
+  }
+  70% {
+    @include transform(perspective(400px) rotateY(10deg));
+  }
+  100% {
+    @include transform(perspective(400px) rotateY(0deg));
+    @include opacity(1);
+  }
+}
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(flipOutY) {
+  0% {
+    @include transform(perspective(400px) rotateY(0deg));
+    @include opacity(1);
+  }
+  100% {
+    @include transform(perspective(400px) rotateY(90deg));
+    @include opacity(0);
+  }
+}

data/app/assets/stylesheets/cms/includes/animation/animate/_lightspeed.css.scss

@@ -0,0 +1,24 @@
+// ---------------------------------------------------------------------------
+@include keyframes(lightSpeedIn) {
+  0% {
+    @include transform(translateX(100%) skewX(-30deg));
+    @include opacity(0); }
+  60% {
+    @include transform(translateX(-20%) skewX(30deg));
+    @include opacity(1); }
+  80% {
+    @include transform(translateX(0%) skewX(-15deg));
+    @include opacity(1); }
+  100% {
+    @include transform(translateX(0%) skewX(0deg));
+    @include opacity(1); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(lightSpeedOut) {
+  0% {
+    @include transform(translateX(0%) skewX(0deg));
+    @include opacity(1); }
+  100% {
+    @include transform(translateX(100%) skewX(-30deg));
+    @include opacity(0); } }

data/app/assets/stylesheets/cms/includes/animation/animate/_rotating.css.scss

@@ -0,0 +1,3 @@
+// ---------------------------------------------------------------------------
+@import "rotating/rotating-exits";
+@import "rotating/rotating-entrances";

data/app/assets/stylesheets/cms/includes/animation/animate/_specials.css.scss

@@ -0,0 +1,42 @@
+// ---------------------------------------------------------------------------
+@include keyframes(hinge) {
+  0% {
+    @include rotate(0);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  20%, 60% {
+    @include rotate(80deg);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  40% {
+    @include rotate(60deg);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  80% {
+    @include transform(rotate(60deg) translateY(0));
+    @include opacity(1);
+    @include transform-origin(top left);
+    @include animation-timing-function(ease-in-out); }
+  100% {
+    @include translateY(700px);
+    @include opacity(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rollIn) {
+  0% {
+    @include opacity(0);
+    @include transform(translateX(-100%) rotate(-120deg)); }
+  100% {
+    @include opacity(1);
+    @include transform(translateX(0px) rotate(0deg)); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(rollOut) {
+  0% {
+    @include opacity(1);
+    @include transform(translateX(0px) rotate(0deg)); }
+  100% {
+    @include opacity(0);
+    @include transform(translateX(-100%) rotate(-120deg)); } }

data/app/assets/stylesheets/cms/includes/animation/animate/bouncing/_bouncing-entrances.css.scss

@@ -0,0 +1,68 @@
+// ---------------------------------------------------------------------------
+@include keyframes(bounceIn) {
+  0% {
+    opacity: 0;
+    @include scale(0.3); }
+  50% {
+    opacity: 1;
+    @include scale(1.05); }
+  70% {
+    @include scale(0.9); }
+  100% {
+    @include scale(1); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInDown) {
+  0% {
+    opacity: 0;
+    @include translateY(-2000px); }
+  60% {
+    opacity: 1;
+    @include translateY(30px); }
+  80% {
+    @include translateY(-10px); }
+  100% {
+    @include translateY(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInUp) {
+  0% {
+    opacity: 0;
+    @include translateY(2000px); }
+  60% {
+    opacity: 1;
+    @include translateY(-30px); }
+  80% {
+    @include translateY(10px); }
+  100% {
+    @include translateY(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInRight) {
+  0% {
+    opacity: 0;
+    @include translateX(2000px); }
+  60% {
+    opacity: 1;
+    @include translateX(-30px); }
+  80% {
+    @include translateX(10px); }
+  100% {
+    @include translateX(0); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceInLeft) {
+  0% {
+    opacity: 0;
+    @include translateX(-2000px); }
+  60% {
+    opacity: 1;
+    @include translateX(30px); }
+  80% {
+    @include translateX(-10px); }
+  100% {
+    @include translateX(0); } }

data/app/assets/stylesheets/cms/includes/animation/animate/bouncing/_bouncing-exits.css.scss

@@ -0,0 +1,60 @@
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOut) {
+  0% {
+    @include scale(1); }
+  25% {
+    @include scale(0.95); }
+  50% {
+    opacity: 1;
+    @include scale(1.1); }
+  100% {
+    opacity: 0;
+    @include scale(0.3); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutUp) {
+  0% {
+    @include translateY(0); }
+  20% {
+    opacity: 1;
+    @include translateY(20px); }
+  100% {
+    opacity: 0;
+    @include translateY(-2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutDown) {
+  0% {
+    @include translateY(0); }
+  20% {
+    opacity: 1;
+    @include translateY(-20px); }
+  100% {
+    opacity: 0;
+    @include translateY(2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutLeft) {
+  0% {
+    @include translateX(0); }
+  20% {
+    opacity: 1;
+    @include translateX(20px); }
+  100% {
+    opacity: 0;
+    @include translateX(-2000px); } }
+
+
+// ---------------------------------------------------------------------------
+@include keyframes(bounceOutRight) {
+  0% {
+    @include translateX(0); }
+  20% {
+    opacity: 1;
+    @include translateX(-20px); }
+  100% {
+    opacity: 0;
+    @include translateX(2000px); } }