rapido-css 0.0.3 → 0.0.4

data/stylesheets/utilities/_animations.scss

@@ -1,105 +1,126 @@
-// ====================================================================================================================
-// ANIMATIONS
-// ====================================================================================================================
+/* =================================================================================================================
+
+Animations
+
+All the animations in [theCSSguru](https://twitter.com/theCSSguru)'s [Animate mixin](http://thecssguru.freeiz.com/animate/) are available with the same mixin.
+
+#### Use
+
+By default are only available `fadeIn` and `fadeOut`. To enable more animations add them to the `$animations` variable in `_effects.scss`.
+
+#### Mixin
+
+	@include animate(fadeIn);
+
+#### Silent classes
+
+There are also available silent classes for all enabled animations to use with `@extend`
+
+	@extend %fadeIn;
+
+Styleguide 20.
+
+================================================================================================================= */
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Disable all animations by default
 // --------------------------------------------------------------------------------------------------------------------
-$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;
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+$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;
+
 // Enable animation from the settings
 // --------------------------------------------------------------------------------------------------------------------
+
 @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;}
+	@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);
 }
@@ -113,19 +134,19 @@ $tada:					false !default;
 	}
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Keyframes
 // --------------------------------------------------------------------------------------------------------------------
+
 @if $fadeIn == true {
 	@include keyframes(fadeIn) {
-		0% {    opacity: 0; }
-		100% {  opacity: 1; }
+		0% {		opacity: 0; }
+		100% {	opacity: 1; }
 	}
 }
 @if $fadeOut == true {
 	@include keyframes(fadeOut) {
-		0% {    opacity: 1; }
-		100% {  opacity: 0; }
+		0% {		opacity: 1; }
+		100% {	opacity: 0; }
 	}
 }
 @if $fadeInUp == true {
@@ -490,37 +511,37 @@ $tada:					false !default;
 }
 @if $flash == true {
 	@include keyframes(flash) {
-		0% {    opacity: 1; }
-		25% {   opacity: 0; }
-		50% {   opacity: 1; }
-		75% {   opacity: 0; }
-		100% {  opacity: 1; }
+		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));        }
+		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));         }
+		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 {
@@ -665,16 +686,16 @@ $tada:					false !default;
 }
 @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));         }
+		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

@@ -1,6 +1,15 @@
-// ====================================================================================================================
-// DEBUG MODE
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Debug mode
+
+Add different background colors and border for elements with different proprieties (has class, has id, has title, ect.),
+usefull for debugging code and finding errors. Taken form [Inuit](https://github.com/csswizardry/inuit.css).
+
+Enable it with `$debug-mode: true;`.
+
+Styleguide 21.
+
+==================================================================================================================== */
 
 @if $debug-mode {
 
@@ -42,4 +51,21 @@
 	[style] {outline: 5px solid yellow;}
 	[id] {outline: 5px solid yellow;}
 
+
+// btn-groups
+// --------------------------------------------------------------------------------------------------------------------
+	.btn-group > li:first-child .btn					{ background: YellowGreen	!important; }
+	.btn-group > li:last-child .btn						{ background: Wheat	!important; }
+	div.btn-group .btn									{ background: Tomato	!important; }
+
+	.form__controls--multi {
+		.btn-group:first-child > li:first-child .btn	{ background: red !important; }
+		.btn-group:first-child > li:last-child .btn		{ background: blue !important; }
+		div.btn-group:first-child .btn					{ background: green !important; }
+
+		.btn-group:last-child > li:first-child .btn		{ background: purple !important; }
+		.btn-group:last-child > li:last-child .btn		{ background: yellow !important; }
+		div.btn-group:last-child > .btn					{ background: teal !important; }
+	}
+
 }

data/stylesheets/utilities/_helper-classes.scss

@@ -1,6 +1,59 @@
-// ====================================================================================================================
-// HELPER CLASSES
-// ====================================================================================================================
+/* ====================================================================================================================
+
+Helper Classes
+
+There are provided some helper classes usually used with `@extend` for applying effects or common styles.
+
+Styleguide 22.
+
+==================================================================================================================== */
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Generic
+
+Add a a simple `transition all`, used as a generic extend for element that can accept transition on all attributes.
+    .transition
+Simple divider class used in some components (like dropdowns).␣␣
+    .divider
+
+Styleguide 22.1
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+.clearfix {
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+	}
+}
+
+.transition {
+	@include transition();
+}
+
+.divider {
+	@include nav-divider();
+}
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Wrappers
+
+Flexible wrapper to center the layout, max-width width `$desk-end`.
+
+    .wrapper
+    .w
+
+Same a `.wrapper` but with fixed width.
+
+    .fixed-wrapper
+    .fw
+
+Styleguide 22.2
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 .wrapper, .w {
 	@extend .clearfix;
@@ -16,32 +69,96 @@
 	width: $desk-end;
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Sizes
-// --------------------------------------------------------------------------------------------------------------------
+
+.left {float: left;}
+.right {float: right;}
+
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Elements width
+
+Add `data-width="n"` to any html element to set the width.
+
+    [data-width="n"]
+
+* **n**: Width in percentage in increments of 5 of the element.
+
+Example:
+
+	data-width="50"
+
+Corrispond to:
+
+	width: 50% !important;
+
+Styleguide 22.3
+
+-------------------------------------------------------------------------------------------------------------------- */
 
 $i: 100;
 @while $i > 0 {
 	%width-#{$i} { width: $i * 1% !important; }
-	[data-width="#{$i}"] { @extend %width-#{$i}; }
+	@if $width-helper-classes {
+		[data-width="#{$i}"] { @extend %width-#{$i}; }
+	}
 	$i: $i - 1;
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Transition class for @extend
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
 
-.transition {
-	@include transition();
-}
+Typography
 
-.divider {
-	@include nav-divider();
+Styleguide 22.4
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+.lead			{ @include adjust-font-size-to($h4-size); }
+.muted			{ color: $gray; }
+
+.pull-left		{ float: left; }
+.pull-right		{ float: right; }
+
+.text-left		{ text-align: left; }
+.text-right		{ text-align: right; }
+.text-center	{ text-align: center; }
+
+/* --------------------------------------------------------------------------------------------------------------------
+
+Sprites
+
+Styleguide 22.5
+
+-------------------------------------------------------------------------------------------------------------------- */
+
+.s {
+	content: "";
+	display: inline-block;
+	overflow:hidden;
+	vertical-align:middle;
+	text-align:center;
+	font-style:normal;
+	zoom:1;
+	text-indent:-9999px;
 }
 
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// Text replacement (from http://html5boilerplate.com/)
-// --------------------------------------------------------------------------------------------------------------------
+/* --------------------------------------------------------------------------------------------------------------------
+
+Text replacement
+
+All the text replacement classes from from [html5boilerplate](http://html5boilerplate.com/).
+
+    .ir
+    .ir
+    .hidden
+    .visuallyhidden
+    .visuallyhidden
+    .invisible
+
+Styleguide 22.6
+
+-------------------------------------------------------------------------------------------------------------------- */
+
 .ir{background-color:transparent;border:0;overflow:hidden;text-indent:-9999px;line-height:0;font-size:0;}
 .ir:before{content:"";display:block;width:0;height:150%}
 .hidden{display:none!important;visibility:hidden}