rapido-css 0.0.1

data/stylesheets/settings/_colors.scss

@@ -0,0 +1,16 @@
+
+// ********************************************************************************************************************
+// COLORI BASE
+// ********************************************************************************************************************
+$black:                 							#000;
+$grayDarker:            							lighten($black, 15);
+$grayDark:              							lighten($black, 30);
+$gray:                  							lighten($black, 60);
+$grayLight:             							lighten($black, 85);
+$grayLighter:           							lighten($black, 95);
+$white:                 							lighten($black, 100);
+
+$text-color:         								#333 												!default;
+			
+$link-color: 										#0066cc 											!default;
+$link-color-hover: 									darken($link-color, 10%) 							!default;

data/stylesheets/settings/_components.scss

@@ -0,0 +1,45 @@
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Enable Components
+// --------------------------------------------------------------------------------------------------------------------
+
+$alerts: 							true 		!default;
+$breadcrumbs: 						true 		!default;
+$button-groups: 					true 		!default;
+$buttons: 							true 		!default;
+$captions: 							true 		!default;
+$close: 							true 		!default;
+$dropdowns: 						true 		!default;
+
+$forms: 							true 		!default;
+	$forms-append:					true 		!default;
+	$forms-inline: 					true 		!default;
+	$forms-horizontal:				true 		!default;
+	$forms-columns: 				true 		!default;
+
+$modals: 							true 		!default;
+$navs: 								true 		!default;
+$pager: 							true 		!default;
+$pagination: 						true 		!default;
+$pills: 							true 		!default;
+$responsive-navs: 					true 		!default;
+$tables: 							true 		!default;
+
+$tabs:								true 		!default;
+$slider:							true 		!default;
+$modal: 							true 		!default;
+	$modal-buttons: 				true 		!default;
+	$modal-thumbs: 					true 		!default;
+
+
+// Icon Fonts
+// --------------------------------------------------------------------------------------------------------------------
+$use-fontawesome: 					true 		!default;
+
+$use-brandico: 						false 		!default;
+$use-entypo: 						false 		!default;
+$use-fontelico: 					false 		!default;
+$use-maki: 							false 		!default;
+$use-openweb-icons: 				false 		!default;
+$use-typicons: 						false 		!default;
+$use-zocial: 						false 		!default;

data/stylesheets/settings/_dimensions.scss

@@ -0,0 +1,103 @@
+
+// ********************************************************************************************************************
+// 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;
+
+$h1-size:           				$base-font-size * 2.4													!default;
+$h2-size:           				$base-font-size * 2  													!default;
+$h3-size:           				$base-font-size * 1.8  													!default;
+$h4-size:           				$base-font-size * 1.4  													!default;
+$h5-size:           				$base-font-size * 1.2  													!default;
+$h6-size:           				$base-font-size * 1  													!default;
+
+$milli-size:        				$base-font-size * .85 													!default;
+$micro-size:        				$base-font-size * .7 													!default;
+
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// Forms
+// --------------------------------------------------------------------------------------------------------------------
+$control-margin-bottom:				$base-line-height 														!default;
+$label-margin-bottom: 				10px 																	!default;
+$input-border:						1px 																	!default;
+$input-padding-top: 				10px 																	!default;
+$input-padding-side:				10px 																	!default;
+
+// Do not edit
+$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
+// --------------------------------------------------------------------------------------------------------------------
+
+// Buttons
+$btn-padding: 						$input-padding															!default;
+$btn-large-padding: 				$input-padding															!default;
+$btn-small-padding: 				em($input-padding-top * .5) em($input-padding-side * .8)				!default;
+$btn-mini-padding:  				em($input-padding-top * .1) em($input-padding-side * .6)				!default;
+
+// Components
+$alerts-padding: 					$input-padding 															!default;
+$captions-padding: 					$input-padding 															!default;
+$dropdowns-padding:					$input-padding 															!default;
+$modals-error-padding:				$input-padding 															!default;
+$navs-padding:						$input-padding 															!default;
+$pager-padding: 					$input-padding 															!default;
+$pagination-padding: 				$input-padding 															!default;
+$pills-padding:						.15em .35em																!default;
+$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;
+
+$palm-end:             				$lap-start - 1px;
+$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;
+$responsive-nav-inside-wrapper: 	'.internal-wrapper' 													!default;
+$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;
+$zindex-slider:     				1040 																	!default;
+$zindex-modal:             			1050 																	!default;

data/stylesheets/settings/_effects.scss

@@ -0,0 +1,15 @@
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+// ANIMAZIONI  @include animate(...)
+// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
+$animations: 										fadeIn, fadeOut										!default;
+$animations-classes:								true 												!default;
+
+$animations-duration: 								.15s 												!default;
+$animations-delay: 									0s 													!default;
+$animations-function: 								ease-out 											!default;
+$animations-mode:									both 												!default;
+
+// Transizioni @include transition(...)
+// ------------------------------------------------------------------------------------------------------------------------
+$default-transition-duration:  						$animations-duration								!default;
+$default-transition-function: 						toBezier($animations-function) 						!default;

data/stylesheets/susy/_susy_background.scss

@@ -0,0 +1,18 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+@import "compass/layout/grid-background";
+@import "compass/css3/background-origin";
+@import "compass/css3/background-clip";
+
+// ---------------------------------------------------------------------------
+// Susy Grid Background
+//
+// A wrapper for the compass "column-grid-background" mixin
+// Uses all your settings to create a grid background for a container element.
+// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
+@mixin susy-grid-background(){
+  @include column-grid-background($total-columns, column(), gutter(), 0);
+  @include background-origin(content-box);
+  @include background-clip(content-box);
+}

data/stylesheets/susy/_susy_functions.scss

@@ -0,0 +1,376 @@
+// ---------------------------------------------------------------------------
+// Imports
+
+// We need access to some basic font settings for handling media-queries.
+@import "compass/typography/vertical_rhythm";
+
+// For now, we also need this...
+$browser-default-font-size-px       : 16px;
+$browser-default-font-size-percent  : 100%;
+$browser-default-font-size-pt       : 12pt;
+
+$rem-with-px-fallback               : true !default;
+
+// ---------------------------------------------------------------------------
+// Sass list Functions
+
+// Return a list with specific items removed
+//
+// filter($list, $target)
+// - $list    : The list to filter.
+// - $target  : An item to be removed from the list.
+@function filter($list, $target) {
+  $clean: compact();
+  @if index($list, $target) {
+    @each $item in $list {
+      $clean: if($item == $target, $clean, append($clean, $item));
+    }
+  } @else { $clean: $list; }
+  @return $clean;
+}
+
+// ---------------------------------------------------------------------------
+// Don't use static output when it will break things
+
+// Switch element-level output to fluid, when container-width is wrong for static
+//
+// fix-static-misalignment([$style, $width])
+// - $style: $container-style.
+// - $width: $container-width.
+@function fix-static-misalignment(
+  $style: $container-style,
+  $width: $container-width
+) {
+  @if $container-width and $container-width != container-outer-width($width: false) {
+    $style: fluid;
+  }
+  @return $style;
+}
+
+// ---------------------------------------------------------------------------
+// Grid Functions
+
+// Returns the full width of a grid based on your grid settings.
+//
+//  $columns  : The number of columns to get width for.
+@function columns-width(
+  $columns  : $total-columns
+) {
+  @if round($columns) != $columns {
+    @warn "Susy works best with integer column-spans.
+    For partial-columns, you may need to finesse the math by hand using functions directly.";
+  }
+  @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
+}
+
+// Return the grid width after adding or subtracting grid padding
+//
+// $width     : the width of the grid without padding;
+// $operation : ( add | subtract ) if padding should be added or subtracted;
+@function handle-grid-padding(
+  $width,
+  $operation : subtract
+) {
+  $pad: $grid-padding*2;
+
+  @if comparable($width, $grid-padding) {
+    $width: if($operation == subtract, $width - $pad, $width + $pad);
+  } @else {
+    @warn "$grid-padding must be set in units comparable to the container width.";
+  }
+
+  @return $width;
+}
+
+// Return the full outer width of a Container element.
+//
+//  $columns  : The number of columns in the Grid Layout.
+@function container-outer-width(
+  $columns  : $total-columns,
+  $width    : $container-width
+) {
+  $outerwidth: if($width, $width, columns-width($columns));
+
+  @if $width {
+    @if not $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, subtract); }
+  } @else {
+    @if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
+  }
+
+  @return $outerwidth;
+}
+
+// Return the percentage width of a single column in a given 'context'.
+//
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function column(
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return if($style == static, $column-width, relative-width($column-width, $context));
+}
+
+// Return the percentage width of multiple 'columns' in a given 'context'.
+//
+//  $columns  : The number of columns to get relative width for.
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function columns(
+  $columns,
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
+}
+
+// Return the percentage width of a single gutter in a given 'context'.
+//
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function gutter(
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return if($style == static, $gutter-width, relative-width($gutter-width, $context));
+}
+
+// Return the percentage width of a given value in a given 'context'.
+//
+//  $width    : Any given width value.
+//  $context  : The grid context in columns, if nested.
+@function relative-width(
+  $width,
+  $context : $total-columns
+) {
+  @return percentage($width / columns-width($context));
+}
+
+// Return the total space occupied by multiple columns and associated gutters.
+// Useful for adding padding or margins (prefix, suffix, push, pull, etc.)
+//
+//  $columns  : The number of columns to get relative space for.
+//  $context  : The grid context in columns, if nested.
+//  $style    : The container style to use.
+@function space(
+  $columns,
+  $context  : $total-columns,
+  $style    : fix-static-misalignment()
+) {
+  @return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0);
+}
+
+// Accept a list including column-count and (optional) position.
+// Return either the column count or the position alone.
+//
+//  $columns  : the list to split and interprate.
+//  $request  : The value to return, either 'columns' or 'position'.
+@function split-columns-value(
+  $columns,
+  $request : columns
+) {
+  $pos  : false;
+  $cols : false;
+
+  @each $var in $columns {
+    @if (type-of($var) == 'string') {
+      $pos: $var;
+    } @else {
+      @if (type-of($var) == 'number') and (unitless($var)) {
+        $cols: $var;
+      } @else {
+        @warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
+      }
+    }
+  }
+
+  @if $request == 'columns' {
+    @return $cols;
+  } @else {
+    @if $request == 'position' {
+      @return $pos;
+    } @else {
+      @warn '"#{$request}"" is not a valid value for $request';
+    }
+  }
+}
+
+// Accept nth-selector variables, and format them as a valid CSS3 selector.
+//
+// $n         : [first | only | last | <equation>]
+// $selector  : [child | last-child | of-type | last-of-type ]
+@function format-nth(
+  $n        : last,
+  $selector : child
+) {
+  @if ($n == 'last') or ($n =='first') or ($n =='only') {
+    $selector: '#{$n}-#{$selector}';
+  } @else {
+    $selector: 'nth-#{$selector}(#{$n})';
+  }
+  @return $selector;
+}
+
+// ---------------------------------------------------------------------------
+// Media Functions
+
+// Return an em value adjusted to match the browser default font size.
+// Note: This only works if actual sizes are set relative to browser defaults.
+//
+// $ems         : The initial value to be converted.
+// $font-size   : The current font-size in.
+@function base-ems(
+  $ems,
+  $font-size: $base-font-size
+){
+  $font-size  : if(unit($ems) == 'rem', $base-font-size, $font-size);
+  $unit       : unit($font-size);
+  $mult       : $ems / ($ems * 0 + 1);
+
+  @if $unit == 'px' {
+    @return $font-size / $browser-default-font-size-px * $mult * 1em;
+  }
+  @else if $unit == '%' {
+    @return $font-size / $browser-default-font-size-percent * $mult * 1em;
+  }
+  @else if $unit == 'em' {
+    @return $font-size / 1em * $mult * 1em;
+  }
+  @else if $unit == 'pt' {
+    @return $font-size / $browser-default-font-size-pt * $mult * 1em;
+  }
+  @else {
+    @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
+  }
+}
+
+// This name will be deprecated...
+@function absolute-ems($ems, $font-size: $base-font-size){ @return base-ems($ems, $font-size); }
+
+// Return a length, after any em-values have been sent through absolute-ems().
+//
+// $length      : The length value to be checked and adjusted if necessary.
+// $font-size   : The current font-size in px.
+@function fix-ems(
+  $length,
+  $font-size: $base-font-size
+){
+  @if $length {
+    @if (unit($length) == 'em') or (unit($length) == 'rem') {
+      $length: absolute-ems($length,$font-size);
+    }
+  }
+  @return $length;
+}
+
+// Sort a list of arguments into "$min $layout $max $ie" order, and return the list.
+//
+// $media-layout  : a list of values [$min $layout $max $ie] including...
+//                : - one unitless number (columns in a layout)
+//                : - two optional lengths (min and max-width media-query breakpoints).
+//                : - one optional boolean or string to trigger fallback support for IE.
+// $font-size     : [optional] The base font-size of your layout, if you are using ems.
+//                : - defaults to $base-font-size
+@function medialayout(
+  $media-layout,
+  $font-size: $base-font-size
+) {
+  $media        : false;
+  $min          : false;
+  $layout       : false;
+  $max          : false;
+  $ie           : false;
+  $has-layout   : false;
+
+  @each $val in $media-layout {
+    @if (type-of($val) == "number") {
+      @if unitless($val) {
+        $layout     : $val;
+        $has-layout : true;
+      } @else {
+        @if ($has-layout) and (not $media) {
+          $max: $val;
+        } @else {
+          @if $media {
+            $media: join($media,$val);
+          } @else {
+            $media: $val;
+          }
+        }
+      }
+    } @else {
+      $ie: $val;
+    }
+  }
+  @if (length($media) > 0) {
+    @if (length($media) == 1) {
+      $min: nth($media,1);
+    } @else {
+      $min: nth($media,1);
+      $max: nth($media,2);
+      @if comparable($min, $max) {
+        @if ($min > $max) {
+          $max: nth($media,1);
+          $min: nth($media,2);
+        }
+      } @else {
+        @warn "Can't compare incompatible units.
+         Using #{$min} for min-width, and #{$max} for max-width";
+      }
+      @if (length($media) > 2) {
+        @warn "You can only send two lengths: a min-width and an (optional) max-width.
+         You sent #{length($media)}: #{$media}";
+      }
+    }
+  }
+
+  // media-queries must be set in ems relative to the browser default
+  // rather than the font-size set in CSS.
+  $min: fix-ems($min,$font-size);
+  $max: fix-ems($max,$font-size);
+
+  @return $min $layout $max $ie;
+}
+
+// Return the nearest layout (column-count) above a given breakpoint.
+//
+// $min : The min-width media-query breakpoint above which to establish a new layout.
+@function get-layout (
+  $min
+) {
+  $columns        : 1;
+  $layout-width   : container-outer-width($columns);
+  $return         : false;
+  $min            : fix-ems($min);
+
+  @if comparable($min, $layout-width) {
+    @while $min >= $layout-width {
+      $columns        : $columns + 1;
+      $layout-width   : container-outer-width($columns);
+    }
+    $return : $columns;
+  }
+
+  @return $return;
+}
+
+// Check to see if a given $media-layout list is simply the default.
+//
+// $media-layout  : a list of values including -
+//                : One unitless number (columns in a layout)
+//                : Two optional lengths (min and max-width media-query breakpoints).
+//                : One optional boolean or string to trigger fallback support for IE.
+@function is-default-layout(
+  $media-layout
+) {
+  $media-layout : medialayout($media-layout);
+  $min          : nth($media-layout,1);
+  $layout-cols  : nth($media-layout,2);
+  $max          : nth($media-layout,3);
+
+  @if $min or $max {
+    @return false;
+  } @else {
+    @return if($layout-cols == $total-columns,true,false);
+  }
+}