rapido-css 0.2.1 → 0.2.2

checksums.yaml

@@ -1,15 +1,7 @@
 ---
-!binary "U0hBMQ==":
-  metadata.gz: !binary |-
-    MDFmZDgxMTA4ZTBkYzEyY2RhZDc1ZGQ4ZDQ0N2RmMWUyZjQyOWZhMQ==
-  data.tar.gz: !binary |-
-    YWFkNjhlNjQwZmE4OGE3M2QyN2Q5OTMxMzNlYmU1ZDA5MGJkMDJiOA==
+SHA1:
+  metadata.gz: 7007fd03a575bbb9b5e82919b24e2f1f11eff809
+  data.tar.gz: 31f94c41ee91621e0db52daf4a5f4d6a1cdcc934
 SHA512:
-  metadata.gz: !binary |-
-    MjRmOTJiZTllOGYzODgzNWVmZjY5MGFhOGNhNjZkYjcwNjAzYThiMjI1NTBm
-    MTQ0YTMyZmJiODZmNjc4ZDFjODhiMTcyMGQ3ZGIwODRiMjQ0MGM3ZGVmZjg4
-    Y2JlODUyM2ExNmE5MDgzYTAyZWE4YTIwM2E3YmMyNTM4Yzc5MTE=
-  data.tar.gz: !binary |-
-    NzI0YzdhNGE1OTVlMWYyNzZhYmM1NTU1N2FlYmU3NmQwZjFkMDg0YjcyOGJm
-    Y2I2ODFhZWFhZjJmMWJiNWU1NGE4MWYyYzY5NDJhZWQzMjZiMTEyOWY3NzFh
-    YTllMTNlZTQ0Njc2M2VkNTA3Zjk5MmI3ZWRhYzFjZTdmZjliYzg=
+  metadata.gz: 6e0bf28308533fbf87b65d8f03314ffe8c1d32199a11cb2a4c463a4eb6c515b047288c09bd359b2cbaae3c36d0b8cb922a1bf42bde669d114b652d3889d2fc70
+  data.tar.gz: 162bd05bfd2f1b164d489c7a8b1a8c6a77f55f0f54810ff7b8d493d4d0027975d87982fd5eb1e691333d000c60ef2e41becf355fdafe13882faa2ab6d5edab44

data/lib/rapido-css.rb

@@ -1,6 +1,7 @@
 require 'compass'
 require 'susy'
 require 'sass-media_query_combiner'
+require 'sass-globbing'
 
 extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('rapido-css', :path => extension_path)

data/stylesheets/components/_captions.scss

@@ -42,9 +42,10 @@ Styleguide 5
 
   .caption {
     position: relative;
-    float: left;
     overflow: hidden;
     @include perspective(1000);
+    @include inline-block;
+
 
     &:nth-child(2n) {
       margin-right: 0;
@@ -71,11 +72,11 @@ Styleguide 5
       figcaption {
         bottom: 0;
         left: 0;
-        opacity: 0;
+        @include opacity(0);
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
-          opacity: 1;
+          @include opacity(1);
         }
       }
     }
@@ -86,12 +87,12 @@ Styleguide 5
       figcaption {
         bottom: 0;
         left: 0;
-        opacity: 0;
+        @include opacity(0);
         @include translateY(100%);
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
-          opacity: 1;
+          @include opacity(1);
           @include translateY(0);
         }
       }
@@ -103,12 +104,12 @@ Styleguide 5
       figcaption {
         left: 0;
         bottom: 0;
-        opacity: 0;
+        @include opacity(0);
         @include translateX(100%);
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
-          opacity: 1;
+          @include opacity(1);
           @include translateX(0);
         }
       }
@@ -121,11 +122,11 @@ Styleguide 5
         top: 0;
         left: 0;
         height: 100%;
-        opacity: 0;
+        @include opacity(0);
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
-          opacity: 1;
+          @include opacity(1);
         }
       }
     }
@@ -137,12 +138,12 @@ Styleguide 5
         top: 0;
         left: 0;
         @include simple-transform($rotate: 20deg, $trans-x:100%);
-        opacity: 0;
+        @include opacity(0);
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include simple-transform($rotate: 0deg, $trans-x:0);
-          opacity: 1;
+          @include opacity(1);
         }
       }
     }
@@ -154,17 +155,17 @@ Styleguide 5
         top: 0;
         left: 0;
         @include translateX(-100%);
-        opacity: 0;
+        @include opacity(0);
         z-index: 2;
       }
       .effect-figcaption-wrap {
         transition: $caption-animations-duration $caption-animations-duration/2;
         @include translateX(200%);
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include translateX(0);
-          opacity: 1;
+          @include opacity(1);
         }
         .effect-figcaption-wrap {
           @include translateX(0);
@@ -180,16 +181,16 @@ Styleguide 5
         left: 0;
         height: 100%;
         @include translateX(-100%);
-        opacity: 0;
+        @include opacity(0);
       }
       img {
         transition: $caption-animations-duration;
         @include translateX(0);
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include translateX(0);
-          opacity: 1;
+          @include opacity(1);
         }
         img {
           @include translateX(100%);
@@ -204,15 +205,15 @@ Styleguide 5
         left: 0;
         height: 100%;
         @include translateY(-100%);
-        opacity: 0;
+        @include opacity(0);
       }
       img {
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include translateY(0);
-          opacity: 1;
+          @include opacity(1);
         }
       }
     }
@@ -225,15 +226,15 @@ Styleguide 5
         left: 0;
         @include scale(2);
         text-align: center;
-        opacity: 0;
+        @include opacity(0);
       }
       img {
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include scale(1);
-          opacity: 1;
+          @include opacity(1);
         }
         img {
           @include scale(1.1);
@@ -257,7 +258,7 @@ Styleguide 5
 
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include rotateY(0deg);
         }
@@ -279,7 +280,7 @@ Styleguide 5
       img {
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
 
           @include rotateY(360deg);
@@ -303,7 +304,7 @@ Styleguide 5
 
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include rotateX(360deg);
         }
@@ -326,7 +327,7 @@ Styleguide 5
 
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include rotateX(0deg);
         }
@@ -343,16 +344,16 @@ Styleguide 5
         top: 0;
         left: 0;
         text-align: center;
-        opacity: 0;
+        @include opacity(0);
         height: 100%;
       }
       img {
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         figcaption {
           @include translate(15px, 15px);
-          opacity: 1;
+          @include opacity(1);
           z-index: 100; //prevent ovarslap
           overflow: hidden;
         }
@@ -373,7 +374,7 @@ Styleguide 5
         z-index:10;
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         img {
           @include translateY(-100%);
         }
@@ -393,7 +394,7 @@ Styleguide 5
         position:relative;
         transition: $caption-animations-duration;
       }
-      &:hover, &:active {
+      &:hover, &.hover, &:active {
         img {
           @include translateY(-50%);
         }

data/stylesheets/components/_forms.scss

@@ -444,15 +444,23 @@ Styleguide 8.6
   max-height: 0;
   overflow: hidden;
   position: absolute;
-  z-index: 5;
-  padding: $input-padding;
+  z-index: 999;
 
   &.open {
     max-height: $dropdowns-height;
   }
 
   a {
-    display: block
+    display: block;
+  }
+
+  > * {
+    padding: $input-padding;
+    display: block;
+  }
+
+  > * + * {
+    padding-top: 0;
   }
 
   ul {
@@ -622,7 +630,8 @@ Styleguide 8.10
     .form--grid {
         .form__group {
             min-height: $control-min-height;
-            margin: 0 0 em($control-margin-bottom) 0;
+            margin-top: 0;
+            margin-bottom: em($control-margin-bottom);
         }
 
         .form__multi,

data/stylesheets/components/_grids.scss

@@ -39,7 +39,8 @@ $media-queries: palm, lap, portable, lap-and-up, desk;
                 $nth: $total-columns / $i;
 
                 .#{$device}-#{$i} {
-                    @include span-columns($i);
+                    @include span($i);
+                    @include nth-omega(#{$i}n);
                 }
 
                 $i: $i - 1;

data/stylesheets/components/_navs.scss

@@ -44,6 +44,7 @@ Styleguide 12
         &, ul {
             @extend .clearfix;
             @extend .list-style-none;
+            margin-bottom: 0;
         }
 
         li {

data/stylesheets/components/_overlay.scss

@@ -45,9 +45,11 @@ Styleguide 18
     @include position(fixed, -100% 0em 0em 0em);
     height: 0;
     overflow: hidden;
+    visibility: hidden;
     &.open {
       @extend %overlay__content--open !optional;
       overflow: auto;
+      visibility: visible;
       z-index: $zindex-modal;
     }
     &.close {

data/stylesheets/components/_toggle.scss

@@ -19,7 +19,7 @@ Script required: **rapido.js**.
 
 Include this js after including rapido.js.
 
-    $('.toggle').rapido_Toggle();
+    $('.news').rapido_Toggle();
 
 You can also pass a delay between the removing and adding the class, usefull
 when you have two animation that you don't wont to start at the same time.
@@ -28,7 +28,8 @@ when you have two animation that you don't wont to start at the same time.
 
     titleClass:    [data-toggle-name]
     contentClass:  [data-toggle-content]
-    delay:         0
+    delay:         500
+    closable:      true        # Enable/disable the ability to close all panels
 
 Remeber to add closed and open state in the css, this module doesn't have
 default styling, es:

data/stylesheets/components/_type.scss

@@ -110,9 +110,9 @@ Styleguide 22.2
 */
 
 h1, h2, h3, h4, h5, h6 {
-    margin: 0 0 rhythm();
     text-rendering: optimizelegibility;
     font-family: $titles-font-family;
+    margin-top: 0;
 
     small {
         font-weight: normal;
@@ -124,31 +124,37 @@ h1, h2, h3, h4, h5, h6 {
 h1, .h1 {
     @include adjust-font-size-to($h1-size, $h1-line-height);
     @extend %h1 !optional;
+    margin-bottom: rhythm(1, $font-size: $h1-size);
 }
 
 h2, .h2 {
     @include adjust-font-size-to($h2-size, $h2-line-height);
     @extend %h2 !optional;
+    margin-bottom: rhythm(1, $font-size: $h2-size);
 }
 
 h3, .h3 {
     @include adjust-font-size-to($h3-size, $h3-line-height);
     @extend %h3 !optional;
+    margin-bottom: rhythm(1, $font-size: $h3-size);
 }
 
 h4, .h4 {
     @include adjust-font-size-to($h4-size, $h4-line-height);
     @extend %h4 !optional;
+    margin-bottom: rhythm(1, $font-size: $h4-size);
 }
 
 h5, .h5 {
     @include adjust-font-size-to($h5-size, $h5-line-height);
     @extend %h5 !optional;
+    margin-bottom: rhythm(1, $font-size: $h5-size);
 }
 
 h6, .h6 {
     @include adjust-font-size-to($h6-size, $h6-line-height);
     @extend %h6 !optional;
+    margin-bottom: rhythm(1, $font-size: $h6-size);
 }
 
 h1 small { @include adjust-font-size-to($h3-size); }

data/stylesheets/rapido.scss

@@ -28,6 +28,7 @@
 @import	"utilities/debug";
 @import	"utilities/animations";
 @import	"utilities/icon-fonts";
+@import	"utilities/susy-old-syntax";
 
 // Components
 

data/stylesheets/settings/_base.scss

@@ -69,33 +69,6 @@ $font-mono:                             Monaco, Menlo, Consolas, "Courier New",
 $base-font-family:                      $font-sans                                                          !default;
 $titles-font-family:                    $font-sans                                                          !default;
 
-/*
-
-Prefixes
-
-Enable or disable specific broweser prefixes used by Compass mixins.
-
-    $experimental-support-for-mozilla:      true
-    $experimental-support-for-webkit:       true
-    $support-for-original-webkit-gradients: false
-    $experimental-support-for-opera:        false
-    $experimental-support-for-microsoft:    true
-    $experimental-support-for-khtml:        false
-
-
-Styleguide 28.4
-
-*/
-
-$experimental-support-for-mozilla:      true                                                                !default;
-$experimental-support-for-webkit:       true                                                                !default;
-$support-for-original-webkit-gradients: false                                                               !default;
-$experimental-support-for-opera:        false                                                               !default;
-$experimental-support-for-microsoft:    true                                                                !default;
-$experimental-support-for-khtml:        false                                                               !default;
-
-
-
 /*
 
 em()

data/stylesheets/settings/_colors.scss

@@ -12,21 +12,6 @@ Used for scaffolding
     $grayLighter:                       lighten($black, 95)
     $white:                             #fff
 
-    # Better defaults from https://github.com/mrmrs/colors
-    $aqua:                              #7FDBFF
-    $blue:                              #0074D9
-    $navy:                              #001F3F
-    $teal:                              #39CCCC
-    $green:                             #2ECC40
-    $olive:                             #3D9970
-    $lime:                              #01FF70
-    $yellow:                            #FFDC00
-    $orange:                            #FF851B
-    $red:                               #FF4136
-    $fuchsia:                           #F012BE
-    $purple:                            #B10DC9
-    $maroon:                            #85144B
-
 Styleguide 29
 
 */
@@ -39,20 +24,6 @@ $grayLight:                             lighten($black, 85);
 $grayLighter:                           lighten($black, 95);
 $white:                                 lighten($black, 100);
 
-$aqua:                                  #7FDBFF;
-$blue:                                  #0074D9;
-$navy:                                  #001F3F;
-$teal:                                  #39CCCC;
-$green:                                 #2ECC40;
-$olive:                                 #3D9970;
-$lime:                                  #01FF70;
-$yellow:                                #FFDC00;
-$orange:                                #FF851B;
-$red:                                   #FF4136;
-$fuchsia:                               #F012BE;
-$purple:                                #B10DC9;
-$maroon:                                #85144B;
-
 /*
 
 Default colors
@@ -60,13 +31,13 @@ Default colors
     $body-color:                        #FFFFFF
     $text-color:                        #333
 
-    $link-color:                        #0066cc
+    $link-color:                        #0074D9
     $link-color-hover:                  darken($link-color, 10%)
 
     $placeholder-color:                 $gray
 
     $selection-color:                   $white
-    $selection-bacground:               $gray
+    $selection-bacground:               #39CCCC
 
     $tooltip-color:                     $white
     $tooltip-background:                rgba(0,0,0,.75)
@@ -78,13 +49,13 @@ Styleguide 29.1
 $body-color:                            $white                                                              !default;
 $text-color:                            $grayDarker                                                         !default;
 
-$link-color:                            $blue                                                               !default;
+$link-color:                            #0074D9                                                             !default;
 $link-color-hover:                      darken($link-color, 10)                                             !default;
 
 $placeholder-color:                     $gray                                                               !default;
 
 $selection-color:                       $white                                                              !default;
-$selection-background:                  $teal                                                               !default;
+$selection-background:                  #39CCCC                                                             !default;
 
 $tooltip-color:                         $white                                                              !default;
 $tooltip-background:                    rgba(0,0,0,.75)                                                     !default;

data/stylesheets/settings/_dimensions.scss

@@ -113,9 +113,9 @@ $input-padding-side:                10px
 $checkbox-padding-left:             20px                                                                    !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)          ;
+$input-padding:                     em($input-padding-top) em($input-padding-side)                          !default;
+$input-height:                      em($base-font-size + ($input-padding-top * 2) + ($input-border * 2))    !default;
+$control-min-height:                em($base-line-height + $label-margin-bottom) + $input-height - em(5px)  !default;
 
 
 /*

data/stylesheets/utilities/_animations.scss

@@ -64,48 +64,48 @@ $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 !global;}
+    @if $animation == 'fadeOut'              {$fadeOut            : true !global;}
+    @if $animation == 'fadeInUp'             {$fadeInUp           : true !global;}
+    @if $animation == 'fadeOutUp'            {$fadeOutUp          : true !global;}
+    @if $animation == 'fadeInDown'           {$fadeInDown         : true !global;}
+    @if $animation == 'fadeOutDown'          {$fadeOutDown        : true !global;}
+    @if $animation == 'fadeInRight'          {$fadeInRight        : true !global;}
+    @if $animation == 'fadeOutLeft'          {$fadeOutLeft        : true !global;}
+    @if $animation == 'fadeInLeft'           {$fadeInLeft         : true !global;}
+    @if $animation == 'fadeOutRight'         {$fadeOutRight       : true !global;}
+    @if $animation == 'fadeInUpBig'          {$fadeInUpBig        : true !global;}
+    @if $animation == 'fadeOutUpBig'         {$fadeOutUpBig       : true !global;}
+    @if $animation == 'fadeInDownBig'        {$fadeInDownBig      : true !global;}
+    @if $animation == 'fadeOutDownBig'       {$fadeOutDownBig     : true !global;}
+    @if $animation == 'fadeInRightBig'       {$fadeInRightBig     : true !global;}
+    @if $animation == 'fadeOutLeftBig'       {$fadeOutLeftBig     : true !global;}
+    @if $animation == 'fadeInLeftBig'        {$fadeInLeftBig      : true !global;}
+    @if $animation == 'fadeOutRightBig'      {$fadeOutRightBig    : true !global;}
+    @if $animation == 'bounceIn'             {$bounceIn           : true !global;}
+    @if $animation == 'bounceInDown'         {$bounceInDown       : true !global;}
+    @if $animation == 'bounceInUp'           {$bounceInUp         : true !global;}
+    @if $animation == 'bounceInRight'        {$bounceInRight      : true !global;}
+    @if $animation == 'bounceInLeft'         {$bounceInLeft       : true !global;}
+    @if $animation == 'bounceOut'            {$bounceOut          : true !global;}
+    @if $animation == 'bounceOutUp'          {$bounceOutUp        : true !global;}
+    @if $animation == 'bounceOutDown'        {$bounceOutDown      : true !global;}
+    @if $animation == 'bounceOutLeft'        {$bounceOutLeft      : true !global;}
+    @if $animation == 'bounceOutRight'       {$bounceOutRight     : true !global;}
+    @if $animation == 'flash'                {$flash              : true !global;}
+    @if $animation == 'bounce'               {$bounce             : true !global;}
+    @if $animation == 'shake'                {$shake              : true !global;}
+    @if $animation == 'rotateInDownLeft'     {$rotateInDownLeft   : true !global;}
+    @if $animation == 'rotateInUpLeft'       {$rotateInUpLeft     : true !global;}
+    @if $animation == 'rotateInUpRight'      {$rotateInUpRight    : true !global;}
+    @if $animation == 'rotateInDownRight'    {$rotateInDownRight  : true !global;}
+    @if $animation == 'rotateOutDownLeft'    {$rotateOutDownLeft  : true !global;}
+    @if $animation == 'rotateOutUpLeft'      {$rotateOutUpLeft    : true !global;}
+    @if $animation == 'rotateOutDownRight'   {$rotateOutDownRight : true !global;}
+    @if $animation == 'rotateOutUpRight'     {$rotateOutUpRight   : true !global;}
+    @if $animation == 'rotateIn'             {$rotateIn           : true !global;}
+    @if $animation == 'rotateOut'            {$rotateOut          : true !global;}
+    @if $animation == 'tada'                 {$tada               : true !global;}
 }
 
 
@@ -148,7 +148,7 @@ Styleguide 24.4
 */
 
 @if $animations-classes {
-    $delays: 0.25s, 0.50s, 0.75s, 1.00s, 1.25s, 1.50s, 1.75s, 2.00s;
+    $delays: 0s, 0.25s, 0.50s, 0.75s, 1.00s, 1.25s, 1.50s, 1.75s, 2.00s, 2.25s, 2.50s, 2.75s, 3.00s;
     @each $delay in $delays {
         $delays-class: strip_units($delay)*100;
         .delay-#{$delays-class} {

data/stylesheets/utilities/_helper-classes.scss

@@ -99,13 +99,12 @@ Styleguide 25.3
 
 */
 
-$i: 100;
-@while $i > 0 {
+
+@for $i from 1 through 100 {
     %width-#{$i} { width: $i * 1% !important; }
     @if $width-helper-classes {
         [data-width="#{$i}"] { @extend %width-#{$i}; }
     }
-    $i: $i - 1;
 }
 
 /*

data/stylesheets/utilities/_mixins.scss

@@ -711,10 +711,8 @@ Responsive grid
 * `$cols-container`: Columns of the container (default: $total-columns)
 * `$omega`: Bolean, us if is the last column
 * `$nth-omega`: If is a multi-row grid list use nth to apply omega to each element at the end of each row (example: `3n` to use omega every 3th element )
-* `$remove-omega`: Remove omega on previously applied omega (ignore it)
-* `$from`: Direction, left or right
+* `$from`: Direction, ltr or rtl
 * `$media`: Media query to to use, for responsive grids
-* `$highlight-omega`: Bolean, used for debugging nth
 
 Styleguide 26.21
 
@@ -725,25 +723,14 @@ Styleguide 26.21
     $cols-container: $total-columns,
     $omega: false,
     $nth-omega: false,
-    $remove-omega: false,
-    $from: left,
-    $media: null,
-    $highlight-omega: false
+    $from: ltr,
+    $media: null
     ) {
 
     @include media($media) {
-        $direction: left;
-
-        @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; }
-        @if $highlight-omega  {
-            @if $omega { background: blue; }
-            @if $nth-omega { &:nth-child(#{$nth-omega}) {background: blue;} }
-        }
+        @include span($cols of $cols-container $from);
+        @if $omega { @include omega; }
+        @if $nth-omega { @include nth-omega($nth-omega); }
     }
 }
 

data/stylesheets/utilities/_susy-old-syntax.scss

@@ -0,0 +1,15 @@
+@mixin nth-omega ($n) {
+    &:nth-child(#{$n}) {
+        @include omega;
+    }
+}
+
+@function space($columns, $context: 12) {
+  @return span($columns of $context wide)
+}
+
+@function columns($columns, $context: 12) {
+  @return span($columns of $context)
+}
+
+

metadata

@@ -1,43 +1,57 @@
 --- !ruby/object:Gem::Specification
 name: rapido-css
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Raffaele Rasini
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-02-23 00:00:00.000000000 Z
+date: 2014-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: susy
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ~>
       - !ruby/object:Gem::Version
-        version: 1.0.8
+        version: '2.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ~>
       - !ruby/object:Gem::Version
-        version: 1.0.8
+        version: '2.0'
 - !ruby/object:Gem::Dependency
   name: sass-media_query_combiner
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ~>
       - !ruby/object:Gem::Version
-        version: 0.0.6
+        version: '0.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ! '>='
+    - - ~>
       - !ruby/object:Gem::Version
-        version: 0.0.6
+        version: '0.0'
+- !ruby/object:Gem::Dependency
+  name: sass-globbing
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '1.1'
 description: An easy and quick Sass + Compass + Susy + OOCSS + BEM prototyping framework.
 email: raffaele.rasini@gmail.com
 executables: []
@@ -85,6 +99,7 @@ files:
 - stylesheets/utilities/_helper-classes.scss
 - stylesheets/utilities/_icon-fonts.scss
 - stylesheets/utilities/_mixins.scss
+- stylesheets/utilities/_susy-old-syntax.scss
 - templates/project/manifest.rb
 - templates/project/screen.scss
 homepage: https://github.com/raffone/rapido
@@ -97,17 +112,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>='
+  - - '>='
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.1
+rubygems_version: 2.0.14
 signing_key: 
 specification_version: 4
 summary: A quick css prototyping framework