rapido-css 0.0.1

data/stylesheets/utilities/_animations.scss

@@ -0,0 +1,672 @@
+
+// FALSE per tutte le animazione
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+$fadeIn:				false !default;
+$fadeOut:				false !default;
+$fadeInUp:				false !default;
+$fadeOutUp:				false !default;
+$fadeInDown:			false !default;
+$fadeOutDown:			false !default;
+$fadeInRight:			false !default;
+$fadeOutLeft:			false !default;
+$fadeInLeft:			false !default;
+$fadeOutRight:			false !default;
+$fadeInUpBig:			false !default;
+$fadeOutUpBig:			false !default;
+$fadeInDownBig:			false !default;
+$fadeOutDownBig:		false !default;
+$fadeInRightBig:		false !default;
+$fadeOutLeftBig:		false !default;
+$fadeInLeftBig:			false !default;
+$fadeOutRightBig:		false !default;
+$bounceIn:				false !default;
+$bounceInDown:			false !default;
+$bounceInUp:			false !default;
+$bounceInRight:			false !default;
+$bounceInLeft:			false !default;
+$bounceOut:				false !default;
+$bounceOutUp:			false !default;
+$bounceOutDown:			false !default;
+$bounceOutLeft:			false !default;
+$bounceOutRight:		false !default;
+$flash:					false !default;
+$bounce:				false !default;
+$shake:					false !default;
+$rotateInDownLeft:		false !default;
+$rotateInUpLeft:		false !default;
+$rotateInUpRight:		false !default;
+$rotateInDownRight:		false !default;
+$rotateOutDownLeft:		false !default;
+$rotateOutUpLeft:		false !default;
+$rotateOutDownRight:	false !default;
+$rotateOutUpRight:		false !default;
+$rotateIn:				false !default;
+$rotateOut:				false !default;
+$tada:					false !default;
+
+
+// ATTIVA ANIMAZIONI
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+@each $animation in $animations {
+	@if $animation == 'fadeIn'              {$fadeIn:               true;}
+	@if $animation == 'fadeOut'             {$fadeOut:              true;}
+	@if $animation == 'fadeInUp'            {$fadeInUp:             true;}
+	@if $animation == 'fadeOutUp'           {$fadeOutUp:            true;}
+	@if $animation == 'fadeInDown'          {$fadeInDown:           true;}
+	@if $animation == 'fadeOutDown'         {$fadeOutDown:          true;}
+	@if $animation == 'fadeInRight'         {$fadeInRight:          true;}
+	@if $animation == 'fadeOutLeft'         {$fadeOutLeft:          true;}
+	@if $animation == 'fadeInLeft'          {$fadeInLeft:           true;}
+	@if $animation == 'fadeOutRight'        {$fadeOutRight:         true;}
+	@if $animation == 'fadeInUpBig'         {$fadeInUpBig:          true;}
+	@if $animation == 'fadeOutUpBig'        {$fadeOutUpBig:         true;}
+	@if $animation == 'fadeInDownBig'       {$fadeInDownBig:        true;}
+	@if $animation == 'fadeOutDownBig'      {$fadeOutDownBig:       true;}
+	@if $animation == 'fadeInRightBig'      {$fadeInRightBig:       true;}
+	@if $animation == 'fadeOutLeftBig'      {$fadeOutLeftBig:       true;}
+	@if $animation == 'fadeInLeftBig'       {$fadeInLeftBig:        true;}
+	@if $animation == 'fadeOutRightBig'     {$fadeOutRightBig:      true;}
+	@if $animation == 'bounceIn'            {$bounceIn:             true;}
+	@if $animation == 'bounceInDown'        {$bounceInDown:         true;}
+	@if $animation == 'bounceInUp'          {$bounceInUp:           true;}
+	@if $animation == 'bounceInRight'       {$bounceInRight:        true;}
+	@if $animation == 'bounceInLeft'        {$bounceInLeft:         true;}
+	@if $animation == 'bounceOut'           {$bounceOut:            true;}
+	@if $animation == 'bounceOutUp'         {$bounceOutUp:          true;}
+	@if $animation == 'bounceOutDown'       {$bounceOutDown:        true;}
+	@if $animation == 'bounceOutLeft'       {$bounceOutLeft:        true;}
+	@if $animation == 'bounceOutRight'      {$bounceOutRight:       true;}
+	@if $animation == 'flash'               {$flash:                true;}
+	@if $animation == 'bounce'              {$bounce:               true;}
+	@if $animation == 'shake'               {$shake:                true;}
+	@if $animation == 'rotateInDownLeft'    {$rotateInDownLeft:     true;}
+	@if $animation == 'rotateInUpLeft'      {$rotateInUpLeft:       true;}
+	@if $animation == 'rotateInUpRight'     {$rotateInUpRight:      true;}
+	@if $animation == 'rotateInDownRight'   {$rotateInDownRight:    true;}
+	@if $animation == 'rotateOutDownLeft'   {$rotateOutDownLeft:    true;}
+	@if $animation == 'rotateOutUpLeft'     {$rotateOutUpLeft:      true;}
+	@if $animation == 'rotateOutDownRight'  {$rotateOutDownRight:   true;}
+	@if $animation == 'rotateOutUpRight'    {$rotateOutUpRight:     true;}
+	@if $animation == 'rotateIn'            {$rotateIn:             true;}
+	@if $animation == 'rotateOut'           {$rotateOut:            true;}
+	@if $animation == 'tada'                {$tada:                 true;}
+}
+
+// Animate Mixin Plugin;
+@mixin animate($name, $duration: $animations-duration, $delay: $animations-delay, $function: $animations-function, $mode: $animations-mode) {
+	@include experimental(animation, $name $duration $delay $function $mode);
+}
+
+// Classi sileziose per le animazioni da usare con @extend;
+@if $animations-classes {
+	@each $animation in $animations {
+		%#{$animation} {
+			@include animate($animation);
+		}
+	}
+}
+
+
+// Keyframes
+@if $fadeIn == true {
+	@include keyframes(fadeIn) {
+		0% {    opacity: 0; }
+		100% {  opacity: 1; }
+	}
+}
+@if $fadeOut == true {
+	@include keyframes(fadeOut) {
+		0% {    opacity: 1; }
+		100% {  opacity: 0; }
+	}
+}
+@if $fadeInUp == true {
+	@include keyframes(fadeInUp) {
+		0% {
+			@include transform(translateY(20px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutUp == true {
+	@include keyframes(fadeOutUp) {
+		0% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateY(-20px));
+			opacity: 0;
+		}
+	}
+}
+@if $fadeInDown == true {
+	@include keyframes(fadeInDown) {
+		0% {
+			@include transform(translateY(-20px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutDown == true {
+	@include keyframes(fadeOutDown) {
+		0% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateY(20px));
+			opacity: 0;
+		}
+	}
+}
+@if $fadeInRight == true {
+	@include keyframes(fadeInRight) {
+		0% {
+			@include transform(translateX(20px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutLeft == true {
+	@include keyframes(fadeOutLeft) {
+		0% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateX(-20px));
+			opacity: 0;
+		}
+	}
+}
+@if $fadeInLeft == true {
+	@include keyframes(fadeInLeft) {
+		0% {
+			@include transform(translateX(-20px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutRight == true {
+	@include keyframes(fadeOutRight) {
+		0% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateX(20px));
+			opacity: 0;
+		}
+	}
+}
+@if $fadeInUpBig == true {
+	@include keyframes(fadeInUpBig) {
+		0% {
+			@include transform(translateY(2000px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutUpBig == true {
+	@include keyframes(fadeOutUpBig) {
+		0% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateY(-2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $fadeInDownBig == true {
+	@include keyframes(fadeInDownBig) {
+		0% {
+			@include transform(translateY(-2000px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutDownBig == true {
+	@include keyframes(fadeOutDownBig) {
+		0% {
+			@include transform(translateY(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateY(2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $fadeInRightBig == true {
+	@include keyframes(fadeInRightBig) {
+		0% {
+			@include transform(translateX(2000px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutLeftBig == true {
+	@include keyframes(fadeOutLeftBig) {
+		0% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateX(-2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $fadeInLeftBig == true {
+	@include keyframes(fadeInLeftBig) {
+		0% {
+			@include transform(translateX(-2000px));
+			opacity: 0;
+		}
+		100% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+	}
+}
+@if $fadeOutRightBig == true {
+	@include keyframes(fadeOutRightBig) {
+		0% {
+			@include transform(translateX(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateX(2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $bounceIn == true {
+	@include keyframes(bounceIn) {
+		0% {
+			@include transform(scale(0.3));
+			opacity: 0;
+		}
+		50% {
+			@include transform(scale(1.05));
+			opacity: 1;
+		}
+		70% {
+			@include transform(scale(0.9));
+		}
+		100% {
+			@include transform(scale(1));
+		}
+	}
+}
+@if $bounceInDown == true {
+	@include keyframes(bounceInDown) {
+		0% {
+			@include transform(translateY(-2000px));
+			opacity: 0;
+		}
+		60% {
+			@include transform(translateY(30px));
+			opacity: 1;
+		}
+		80% {
+			@include transform(translateY(-10px));
+		}
+		100% {
+			@include transform(translateY(0));
+		}
+	}
+}
+@if $bounceInUp == true {
+	@include keyframes(bounceInUp) {
+		0% {
+			@include transform(translateY(2000px));
+			opacity: 0;
+		}
+		60% {
+			@include transform(translateY(-30px));
+			opacity: 1;
+		}
+		80% {
+			@include transform(translateY(10px));
+		}
+		100% {
+			@include transform(translateY(0));
+		}
+	}
+}
+@if $bounceInRight == true {
+	@include keyframes(bounceInRight) {
+		0% {
+			@include transform(translateX(2000px));
+			opacity: 0;
+		}
+		60% {
+			@include transform(translateX(-30px));
+			opacity: 1;
+		}
+		80% {
+			@include transform(translateX(10px));
+		}
+		100% {
+			@include transform(translateX(0));
+		}
+	}
+}
+@if $bounceInLeft == true {
+	@include keyframes(bounceInLeft) {
+		0% {
+			@include transform(translateX(-2000px));
+			opacity: 0;
+		}
+		60% {
+			@include transform(translateX(30px));
+			opacity: 1;
+		}
+		80% {
+			@include transform(translateX(-10px));
+		}
+		100% {
+			@include transform(translateX(0));
+		}
+	}
+}
+@if $bounceOut == true {
+	@include keyframes(bounceOut) {
+		0% {
+			@include transform(scale(1));
+		}
+		25% {
+			@include transform(scale(0.95));
+		}
+		50% {
+			@include transform(scale(1.1));
+			opacity: 1;
+		}
+		100% {
+			@include transform(scale(0.3));
+			opacity: 0;
+		}
+	}
+}
+@if $bounceOutUp == true {
+	@include keyframes(bounceOutUp) {
+		0% {
+			@include transform(translateY(0));
+		}
+		20% {
+			@include transform(translateY(20px));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateY(-2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $bounceOutDown == true {
+	@include keyframes(bounceOutDown) {
+		0% {
+			@include transform(translateY(0));
+		}
+		20% {
+			@include transform(translateY(-20px));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateY(2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $bounceOutLeft == true {
+	@include keyframes(bounceOutLeft) {
+		0% {
+			@include transform(translateX(0));
+		}
+		20% {
+			@include transform(translateX(20px));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateX(-2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $bounceOutRight == true {
+	@include keyframes(bounceOutRight) {
+		0% {
+			@include transform(translateX(0));
+		}
+		20% {
+			@include transform(translateX(-20px));
+			opacity: 1;
+		}
+		100% {
+			@include transform(translateX(2000px));
+			opacity: 0;
+		}
+	}
+}
+@if $flash == true {
+	@include keyframes(flash) {
+		0% {    opacity: 1; }
+		25% {   opacity: 0; }
+		50% {   opacity: 1; }
+		75% {   opacity: 0; }
+		100% {  opacity: 1; }
+	}
+}
+@if $bounce == true {
+	@include keyframes(bounce) {
+		0% {    @include transform(translateY(0));        }
+		20% {   @include transform(translateY(0));        }
+		40% {   @include transform(translateY(-30px));    }
+		50% {   @include transform(translateY(0));        }
+		60% {   @include transform(translateY(-15px));    }
+		80% {   @include transform(translateY(0));        }
+		100% {  @include transform(translateY(0));        }
+	}
+}
+@if $shake == true {
+	@include keyframes(shake) {
+		0% {    @include transform(translateX(0));         }
+		10% {   @include transform(translateX(-10px));     }
+		20% {   @include transform(translateX(10px));      }
+		30% {   @include transform(translateX(-10px));     }
+		40% {   @include transform(translateX(10px));      }
+		50% {   @include transform(translateX(-10px));     }
+		60% {   @include transform(translateX(10px));      }
+		70% {   @include transform(translateX(-10px));     }
+		80% {   @include transform(translateX(10px));      }
+		90% {   @include transform(translateX(-10px));     }
+		100% {  @include transform(translateX(0));         }
+	}
+}
+@if $rotateInDownLeft == true {
+	@include keyframes(rotateInDownLeft) {
+		0% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(-90deg));
+			opacity: 0;
+		}
+		100% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+	}
+}
+@if $rotateInUpLeft == true {
+	@include keyframes(rotateInUpLeft) {
+		0% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(90deg));
+			opacity: 0;
+		}
+		100% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+	}
+}
+@if $rotateInUpRight == true {
+	@include keyframes(rotateInUpRight) {
+		0% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(-90deg));
+			opacity: 0;
+		}
+		100% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+	}
+}
+@if $rotateInDownRight == true {
+	@include keyframes(rotateInDownRight) {
+		0% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(90deg));
+			opacity: 0;
+		}
+		100% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+	}
+}
+@if $rotateOutDownLeft == true {
+	@include keyframes(rotateOutDownLeft) {
+		0% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(90deg));
+			opacity: 0;
+		}
+	}
+}
+@if $rotateOutUpLeft == true {
+	@include keyframes(rotateOutUpLeft) {
+		0% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform-origin(left, bottom);
+			@include transform(rotate(-90deg));
+			opacity: 0;
+		}
+	}
+}
+@if $rotateOutDownRight == true {
+	@include keyframes(rotateOutDownRight) {
+		0% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(-90deg));
+			opacity: 0;
+		}
+	}
+}
+@if $rotateOutUpRight == true {
+	@include keyframes(rotateOutUpRight) {
+		0% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform-origin(right, bottom);
+			@include transform(rotate(90deg));
+			opacity: 0;
+		}
+	}
+}
+@if $rotateIn == true {
+	@include keyframes(rotateIn) {
+		0% {
+			@include transform-origin(center, center);
+			@include transform(rotate(-200deg));
+			opacity: 0;
+		}
+		100% {
+			@include transform-origin(center, center);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+	}
+}
+@if $rotateOut == true {
+	@include keyframes(rotateOut) {
+		0% {
+			@include transform-origin(center, center);
+			@include transform(rotate(0));
+			opacity: 1;
+		}
+		100% {
+			@include transform-origin(center, center);
+			@include transform(rotate(200deg));
+			opacity: 0;
+		}
+	}
+}
+@if $tada == true {
+	@include keyframes(tada) {
+		0% {    @include transform(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));         }
+	}
+}

data/stylesheets/utilities/_debug.scss

@@ -0,0 +1,41 @@
+@if $debug-mode {
+
+	:empty { outline:5px solid yellow;}
+
+	img {outline: 5px solid red;}
+	img[alt] {outline: none;}
+	img[alt=""] {outline: 5px solid yellow;}
+
+	a {outline: 5px solid yellow;}
+
+	a[title] {outline: none;}
+	a[href="#"], a[href*="javascript"] {outline: 5px solid yellow;}
+
+
+	a[target] {outline: 5px solid yellow;}
+
+	ul,	ol {
+		> *:not(li){
+			outline:5px solid red;
+		}
+	}
+
+	th {outline: 5px solid yellow;}
+	th[scope] {outline: none;}
+	table > tr {outline: 5px solid yellow;}
+	tbody + tfoot {outline: 5px solid yellow;}
+
+
+	form {outline: 5px solid red;}
+	form[action] {outline: none;}
+
+	textarea, input {outline: 5px solid red;}
+	input[type] {outline: none;}
+	textarea[rows][cols] {outline: none;}
+	input[type=submit] {outline: 5px solid red;}
+	input[type=submit][value] {outline: none;}
+
+	[style] {outline: 5px solid yellow;}
+	[id] {outline: 5px solid yellow;}
+
+}