rapido-css 0.0.1 → 0.0.2.1

data/stylesheets/settings/_dimensions.scss

@@ -1,13 +1,14 @@
-
-// ********************************************************************************************************************
+// ====================================================================================================================
 // DIMENSIONS
-// ********************************************************************************************************************
+// ====================================================================================================================
+
 $base-border-radius:  				4px 																	!default;
 $horizontal-offset:       			180px		 															!default;
 
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Text
 // --------------------------------------------------------------------------------------------------------------------
+
 $giga-size:         				$base-font-size * 7 													!default;
 $mega-size:         				$base-font-size * 5 													!default;
 $kilo-size:         				$base-font-size * 3.4 													!default;
@@ -25,6 +26,7 @@ $micro-size:        				$base-font-size * .7 													!default;
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Forms
 // --------------------------------------------------------------------------------------------------------------------
+
 $control-margin-bottom:				$base-line-height 														!default;
 $label-margin-bottom: 				10px 																	!default;
 $input-border:						1px 																	!default;
@@ -36,7 +38,6 @@ $input-padding:						em($input-padding-top) em($input-padding-side)									;
 $input-height: 						em($base-font-size + ($input-padding-top * 2) + ($input-border * 2))			;
 $control-min-height: 				em($base-line-height + $label-margin-bottom) + $input-height - em(5px)  		;
 
-
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Paddings
 // --------------------------------------------------------------------------------------------------------------------
@@ -60,10 +61,10 @@ $tables-padding: 					$input-padding 															!default;
 $tabs-content-padding: 				$input-padding 															!default;
 $tabs-tab-padding: 					$input-padding 															!default;
 
-
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Media Queries
 // --------------------------------------------------------------------------------------------------------------------
+
 $lap-start:         				481px 																	!default;
 $desk-start:        				768px 																	!default;
 $desk-end:        					1080px 																	!default;
@@ -74,16 +75,17 @@ $lap-end:               			$desk-start - 1px;
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Grid (Susy)
 // --------------------------------------------------------------------------------------------------------------------
+
 $total-columns: 					12 																		!default;
 $column-width: 						50px 																	!default;
 $gutter-width: 						30px 																	!default;
 $grid-padding: 						10px 																	!default;
 $container-style: 					fluid 																	!default;
 
-
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Nav (resposnive-nav)
 // --------------------------------------------------------------------------------------------------------------------
+
 $responsive-nav-breakpoint:			palm																	!default;
 $responsive-nav-type: 				slide 																	!default;
 $responsive-nav-outside-wrapper: 	'body'																	!default;
@@ -92,10 +94,10 @@ $responsive-nav-offset: 			70% 																	!default;
 $responsive-nav-dropdown-pos: 		right 																	!default;
 $responsive-nav-toggle-size: 		30px 																	!default;
 
-
 // ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Z-INDEX order
 // --------------------------------------------------------------------------------------------------------------------
+
 $zindex-dropdown:          			1000 																	!default;
 $zindex-popover:           			1010 																	!default;
 $zindex-tooltip:           			1030 																	!default;

data/stylesheets/settings/_effects.scss

@@ -1,6 +1,7 @@
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
-// ANIMAZIONI  @include animate(...)
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// ====================================================================================================================
+// ANIMATIONS w/ @include animate(...)
+// --------------------------------------------------------------------------------------------------------------------
+
 $animations: 										fadeIn, fadeOut										!default;
 $animations-classes:								true 												!default;
 
@@ -9,7 +10,9 @@ $animations-delay: 									0s 													!default;
 $animations-function: 								ease-out 											!default;
 $animations-mode:									both 												!default;
 
-// Transizioni @include transition(...)
-// ------------------------------------------------------------------------------------------------------------------------
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Transitions w/ @include transition(...)
+// --------------------------------------------------------------------------------------------------------------------
+
 $default-transition-duration:  						$animations-duration								!default;
 $default-transition-function: 						toBezier($animations-function) 						!default;

data/stylesheets/utilities/_animations.scss

@@ -1,6 +1,10 @@
+// ====================================================================================================================
+// ANIMATIONS
+// ====================================================================================================================
 
-// FALSE per tutte le animazione
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Disable all animations by default
+// --------------------------------------------------------------------------------------------------------------------
 $fadeIn:				false !default;
 $fadeOut:				false !default;
 $fadeInUp:				false !default;
@@ -44,9 +48,9 @@ $rotateIn:				false !default;
 $rotateOut:				false !default;
 $tada:					false !default;
 
-
-// ATTIVA ANIMAZIONI
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Enable animation from the settings
+// --------------------------------------------------------------------------------------------------------------------
 @each $animation in $animations {
 	@if $animation == 'fadeIn'              {$fadeIn:               true;}
 	@if $animation == 'fadeOut'             {$fadeOut:              true;}
@@ -92,12 +96,15 @@ $tada:					false !default;
 	@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;
+// Classes that can be used with @extend;
 @if $animations-classes {
 	@each $animation in $animations {
 		%#{$animation} {
@@ -106,8 +113,9 @@ $tada:					false !default;
 	}
 }
 
-
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Keyframes
+// --------------------------------------------------------------------------------------------------------------------
 @if $fadeIn == true {
 	@include keyframes(fadeIn) {
 		0% {    opacity: 0; }

data/stylesheets/utilities/_debug.scss

@@ -1,3 +1,7 @@
+// ====================================================================================================================
+// DEBUG MODE
+// ====================================================================================================================
+
 @if $debug-mode {
 
 	:empty { outline:5px solid yellow;}

data/stylesheets/utilities/_helper-classes.scss

@@ -1,3 +1,7 @@
+// ====================================================================================================================
+// HELPER CLASSES
+// ====================================================================================================================
+
 .wrapper, .w {
 	@extend .clearfix;
 	margin: 0 auto;
@@ -12,18 +16,27 @@
 	width: $desk-end;
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Sizes
+// --------------------------------------------------------------------------------------------------------------------
+
 $i: 100;
 @while $i > 0 {
 	.width-#{$i} { width: $i * 1% !important; }
 	$i: $i - 5;
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Transition class for @extend
+// --------------------------------------------------------------------------------------------------------------------
+
 .transition {
 	@include transition();
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Text replacement
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// --------------------------------------------------------------------------------------------------------------------
 .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}

data/stylesheets/utilities/_icon-fonts.scss

@@ -1,3 +1,10 @@
+// ====================================================================================================================
+// ICON FONTS
+// ====================================================================================================================
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Brandico
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-brandico {
 	@font-face {
 	  font-family: 'brandico';
@@ -11,6 +18,10 @@
 	}
 }
 
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Entypo
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-entypo {
 	@font-face {
 	  font-family: 'entypo';
@@ -24,6 +35,10 @@
 	}
 }
 
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Fontawesome
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-fontawesome {
 	@font-face {
 	  font-family: 'FontAwesome';
@@ -37,6 +52,10 @@
 	}
 }
 
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Fontelico
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-fontelico {
 	@font-face {
 	  font-family: 'fontelico';
@@ -50,6 +69,10 @@
 	}
 }
 
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Maki
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-maki {
 	@font-face {
 	  font-family: 'maki';
@@ -63,6 +86,9 @@
 	}
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Openweb Icons
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-openweb-icons {
 	@font-face {
 	  font-family: 'OpenWeb Icons';
@@ -76,6 +102,9 @@
 	}
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Typicons
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-typicons {
 	@font-face {
 	  font-family: 'Typicons';
@@ -89,6 +118,10 @@
 	}
 }
 
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Zocial
+// --------------------------------------------------------------------------------------------------------------------
 @if $use-zocial {
 	@font-face {
 	  font-family: 'zocial';
@@ -100,12 +133,4 @@
 	  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.ttf') format('truetype'),
 	  url('http://weloveiconfonts.com/api/fonts/zocial/zocial-regular-webfont.svg#zocialregular') format('svg');
 	}
-}
-
-
-
-@mixin icon-font($char: '\f013', $font: 'FontAwesome') {
-	display: inline-block;
-	font-family: $font;
-	content: "#{$char}";
 }

data/stylesheets/utilities/_media-queries.scss

@@ -1,3 +1,8 @@
+// ====================================================================================================================
+// MEDIA QUERY
+// ====================================================================================================================
+
+
 @mixin media($media-query){
 
     @if $media-query == palm{

data/stylesheets/utilities/_mixins.scss

@@ -1,22 +1,16 @@
-//
-// Mixins
-// --------------------------------------------------
+// ====================================================================================================================
+// MIXINS
+// ====================================================================================================================
 
-
-// UTILITY MIXINS
-// --------------------------------------------------
-
-// Clearfix
-// --------
-// For clearing floats like a boss h5bp.com/q
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Base
+// --------------------------------------------------------------------------------------------------------------------
 @mixin clearfix {
 	*zoom: 1;
 	&:before,
 	&:after {
 		display: table;
 		content: "";
-		// Fixes Opera/contenteditable bug:
-		// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
 		line-height: 0;
 	}
 	&:after {
@@ -24,21 +18,12 @@
 	}
 }
 
-// Webkit-style focus
-// ------------------
-@mixin tab-focus() {}
 
-// Center-align a block level element
-// ----------------------------------
-@mixin center-block() {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-}
 
 
-// Sizing shortcuts
-// -------------------------
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Shortcuts
+// --------------------------------------------------------------------------------------------------------------------
 @mixin size($height, $width) {
 	width: $width;
 	height: $height;
@@ -47,41 +32,6 @@
 	@include size($size, $size);
 }
 
-// Placeholder text
-// -------------------------
-@mixin placeholder($color: $gray) {
-	&:-moz-placeholder {
-		color: $color;
-	}
-	&:-ms-input-placeholder {
-		color: $color;
-	}
-	&::-webkit-input-placeholder {
-		color: $color;
-	}
-}
-
-// Text overflow
-// -------------------------
-// Requires inline-block or block for proper styling
-@mixin text-overflow() {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-
-@mixin hide-text {
-	color:            transparent;
-	font:             0/0 a;
-	text-shadow:      none;
-}
-
-// @mixin reset-filter() {
-//   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-// }
-
-
 @mixin position ($position: relative, $coordinates: 0 0 0 0) {
 
 	@if type-of($position) == list {
@@ -125,6 +75,11 @@
 	}
 }
 
+@mixin center-block() {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+}
 
 @mixin center ($width, $height: null) {
 	@include position(absolute, 50% 0 0 50%);
@@ -133,7 +88,42 @@
 	@else { margin-top: -($width / 2);  }
 }
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Forms
+// --------------------------------------------------------------------------------------------------------------------
+@mixin placeholder($color: $gray) {
+	&:-moz-placeholder {
+		color: $color;
+	}
+	&:-ms-input-placeholder {
+		color: $color;
+	}
+	&::-webkit-input-placeholder {
+		color: $color;
+	}
+}
+
+@mixin tab-focus() {}
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Text overflow
+// --------------------------------------------------------------------------------------------------------------------
+@mixin text-overflow() {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
 
+
+@mixin hide-text {
+	color:            transparent;
+	font:             0/0 a;
+	text-shadow:      none;
+}
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Pseudo Elements
+// --------------------------------------------------------------------------------------------------------------------
 @mixin triangle ($size, $color, $direction) {
 	height: 0;
 	width: 0;
@@ -183,7 +173,6 @@
 // For now only side triangles with border
 @mixin triangle_border($size, $color, $border-color, $border-width, $direction) {
 
-	// $border-width-fix: '';
 	$border-width-fix: '';
 
 	@if $border-width == 1px {
@@ -218,16 +207,14 @@
 }
 
 
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Colors
+// --------------------------------------------------------------------------------------------------------------------
 @mixin text-inset-shadow($bg: #fff, $textcolor: #054d4a, $contrast:  #f43059) {
 	$shadow: darken($textcolor, 30%);
 
 	color: rgba($textcolor, 0.8);
 	text-shadow: 1px 5px 7px $bg, 0 0 0 rgba($shadow,.8);
-	// ::-moz-selection, ::selection {
-	// 	background: $contrast;
-	// 	color: $bg;
-	// 	text-shadow: none;
-	// }
 }
 
 @mixin alpha-color($color: #fff, $alpha: .5, $attribute: background) {
@@ -240,51 +227,31 @@
 	}
 }
 
-
-// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Keyframes support
+// --------------------------------------------------------------------------------------------------------------------
 @mixin keyframes($name) {
-	// $original-prefix-for-webkit:    $prefix-for-webkit;
-	// $original-prefix-for-mozilla:   $prefix-for-mozilla;
-	// $original-prefix-for-opera:     $prefix-for-opera;
-	// $original-prefix-for-spec:      $prefix-for-spec;
-
-	// @if $original-prefix-for-webkit {
-	//   @include disable-prefix-for-all();
-	//   $prefix-for-webkit: true;
 	@-webkit-keyframes #{$name} {
 		@content;
 	}
-	// }
-	// @if $original-prefix-for-mozilla {
-	//   @include disable-prefix-for-all();
-	//   $prefix-for-mozilla: true;
+
 	@-moz-keyframes #{$name} {
 		@content;
 	}
-	// }
-	// @if $original-prefix-for-opera {
-	//   @include disable-prefix-for-all();
-	//   $prefix-for-opera: true;
+
 	@-o-keyframes #{$name} {
 		@content;
 	}
-	// }
-	// @if $original-prefix-for-spec {
-	//   @include disable-prefix-for-all();
-	//   $prefix-for-spec: true;
 	@keyframes #{$name} {
 		@content;
 	}
-	// }
-
 }
 
-// COMPONENT MIXINS
-// --------------------------------------------------
 
-// Horizontal dividers
-// -------------------------
-// Dividers (basically an hr) within dropdowns and nav lists
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Components
+// --------------------------------------------------------------------------------------------------------------------
+
 @mixin nav-divider($top: #e5e5e5, $bottom: false) {
 	*width: 100%;
 
@@ -293,16 +260,15 @@
 	} @else {
 		height: 1px;
 	}
-	// margin: (($base-line-height / 2) - 1) 0; // 8px 1px
-	// *margin: -5px 0 5px;
+
 	overflow: hidden;
 	background-color: $top;
 	@if $bottom { border-bottom: 1px solid $bottom; }
 }
 
-
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // Images
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// --------------------------------------------------------------------------------------------------------------------
 @mixin shadow-comicbook($padding: 5px, $color: #bbb, $size: 15px, $distance: 10px) {
 
 	$lightColor: lighten($color, 8);
@@ -337,8 +303,20 @@
 	}
 }
 
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Icon Fonts
+// --------------------------------------------------------------------------------------------------------------------
+@mixin icon-font($char: '\f013', $font: 'FontAwesome') {
+	display: inline-block;
+	font-family: $font;
+	content: "#{$char}";
+}
+
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 // GRID
-// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// --------------------------------------------------------------------------------------------------------------------
 // @include columns( $cols, $cols-container: $total-columns, $omega: false,  $nth-omega: false, $remove-omega: false, $from: left, $media: all, $highlight-omega: false );
 
 @mixin columns (
@@ -355,15 +333,12 @@
 	@include media($media) {
 		$direction: left;
 
-		@if $from != left {
-			$direction: right;
-		}
+		@if $from != left { $direction: right; }
 
 		@include span-columns($cols, $cols-container, $from: $direction);
 		@if $omega { @include omega($from: $direction); }
 		@if $nth-omega { @include nth-omega($nth-omega, $from: $direction); }
 		@if $remove-omega { @include remove-omega; }
-		// background: red;
 		@if $highlight-omega  {
 			@if $omega { background: blue; }
 			@if $nth-omega { &:nth-child(#{$nth-omega}) {background: blue;} }