rapido-css 0.1.4 → 0.1.5

data/stylesheets/utilities/_mixins.scss

@@ -2,9 +2,10 @@
 
 Mixins
 
-Some of them are from Bootstrap, others are custom.
+Some of them are from Bootstrap, others are custom. The required arguments are
+marked in bold.
 
-Styleguide 23
+Styleguide 24
 
 */
 
@@ -17,7 +18,7 @@ Create a rectangle
 * `$height`: Height of the rectangle
 * `$width`: Width of the rectangle
 
-Styleguide 23.1
+Styleguide 24.1
 
 */
 
@@ -34,7 +35,7 @@ Create a square
 
 * `$size`: Dimension used both for width and height
 
-Styleguide 23.2
+Styleguide 24.2
 
 */
 
@@ -61,7 +62,7 @@ Become:
     right: 0px;
     bottom: 0px;
 
-Styleguide 23.3
+Styleguide 24.3
 
 */
 
@@ -122,7 +123,7 @@ Become:
     margin-left: auto;
     margin-right: auto;
 
-Styleguide 23.4
+Styleguide 24.4
 
 */
 
@@ -140,7 +141,7 @@ Vertical and horizontal centering with absolute positioning, using the position
 
     @include center();
 
-Styleguide 23.5
+Styleguide 24.5
 
 */
 
@@ -161,7 +162,7 @@ Abbrieviantion for extendingt normal class (.) or a placeholder class (%) when u
 * `$name`: Name of the class
 * `$silent`: Set to true if it's a placeholder class
 
-Styleguide 23.6
+Styleguide 24.6
 
 */
 
@@ -183,24 +184,31 @@ Placeholder
 
 * `$color`: Set color of the placeholder of an input.
 
-Styleguide 23.7
+Styleguide 24.7
 
 */
 
 @mixin placeholder($color: $gray) {
 
-    &:-moz-placeholder {
-        color: $color;
-    }
-    &::-moz-placeholder {
-        color: $color;
-    }
-    &:-ms-input-placeholder {
-        color: $color;
-    }
-    &::-webkit-input-placeholder {
-        color: $color;
-    }
+  ::-webkit-input-placeholder {
+    color: $color;
+  }
+
+  :-moz-placeholder {
+    color: $color;
+  }
+
+  ::-moz-placeholder {
+    color: $color;
+  }
+
+  :-ms-input-placeholder {
+    color: $color;
+  }
+
+  ::placeholder {
+    color: $color;
+  }
 
 }
 
@@ -219,7 +227,7 @@ Become
     text-overflow: ellipsis;
     white-space: nowrap;
 
-Styleguide 23.8
+Styleguide 24.8
 
 */
 
@@ -243,7 +251,7 @@ Create a css-only triangle.
 * `$color`: Color of the triangle
 * `$direction`: There are available up, up-right, right, down-right, down, down-left, left, up-left
 
-Styleguide 23.9
+Styleguide 24.9
 
 
 */
@@ -303,7 +311,7 @@ Add a css-only triangle width side borders, usefull for tooltips. For now only s
 * `$border-width`: Border width of the triangle
 * `$direction`: left or right
 
-Styleguide 23.10
+Styleguide 24.10
 
 */
 
@@ -352,7 +360,7 @@ Text inset shadow
 * `$textcolor`: Color of the text
 * `$contrast`: How much stronger the inset will be
 
-Styleguide 23.11
+Styleguide 24.11
 
 */
 
@@ -384,7 +392,7 @@ Become
     color: #000;
     color: rgba(0,0,0,.5);
 
-Styleguide 23.12
+Styleguide 24.12
 
 */
 
@@ -405,7 +413,7 @@ Used for creating custom animations.
 
 * `$name`: Name of the keyframe
 
-Styleguide 23.13
+Styleguide 24.13
 
 */
 
@@ -435,7 +443,7 @@ Nav divider
 * `$top`: Color of the top border
 * `$bottom`: Color of the bottom border
 
-Styleguide 23.14
+Styleguide 24.14
 
 */
 
@@ -464,7 +472,7 @@ Comicbook Shadow
 * `$size`: Size of the shadow
 * `$distance`: Distance of the shadow from the image
 
-Styleguide 23.15
+Styleguide 24.15
 
 */
 
@@ -515,7 +523,7 @@ Usefull for adding inset shadows to sidebars or large block where the shadow is
 * `$size`: Size of the shadow
 * `$color`: Color of the shadow
 
-Styleguide 23.16
+Styleguide 24.16
 
 */
 
@@ -553,7 +561,7 @@ Add Side Shadows to multi-line padded text for consistend side padding (Fabien D
 * `$size`: Size of the shadow
 * `$color`: Color of the shadow
 
-Styleguide 23.17
+Styleguide 24.17
 
 */
 
@@ -579,7 +587,7 @@ Use the unicode character from an icon font to insert it wherever you want.
 ‡ Fonts available: Fontawesome, Brandico, Entypo, Fontelico, Maki, Openweb-icons, Typicons, Zocial
 
 
-Styleguide 23.18
+Styleguide 24.18
 
 */
 
@@ -606,7 +614,7 @@ You can set the start/and with of each step from usins the variables `$lap-start
     * `portable`: Lap + Palm
     * `desk`: Only Desktop
 
-Styleguide 23.19
+Styleguide 24.19
 
 */
 
@@ -685,7 +693,7 @@ Or via `@include` from the scss:
 
 The result is the same.
 
-Styleguide 23.20
+Styleguide 24.20
 
 */
 
@@ -709,7 +717,7 @@ Responsive grid
 * `$media`: Media query to to use, for responsive grids
 * `$highlight-omega`: Bolean, used for debugging nth
 
-Styleguide 23.21
+Styleguide 24.21
 
 */
 
@@ -752,7 +760,7 @@ Animations
 * `$function`: Easing, see 20.2 for a list of all easing options available
 * `$mode`: animation-fill-mode (http://mzl.la/1g6ixCc), default to *both*
 
-Styleguide 23.22
+Styleguide 24.22
 
 */
 
@@ -766,3 +774,65 @@ Styleguide 23.22
     @include experimental(animation, $name $duration $delay toBezier($function) $mode);
 }
 
+/*
+
+Animation sequences
+
+    @include animate-sequence($selector, $name, $iterations, $delay, $duration, $delay-offset, $function, $mode)
+
+* `$selector`: Selector to use for the sequence
+* `$name`: Name of the animations to use, it must be enabled first. For more information see the Animations section.
+* `$iterations`: How many elements to iterate
+* `$delay`: Time between each animation
+* `$duration`: Duration of the animation
+* `$delay-offset`: From what value start iterating using the `$delay` value
+* `$function`: Easing, see 20.2 for a list of all easing options available
+* `$mode`: animation-fill-mode (http://mzl.la/1g6ixCc), default to *both*
+
+Example:
+
+    .animation-iterations {
+      @include animate-sequence('img', fadeIn, 4, .5s)
+    }
+
+Will be compiled to:
+
+    .animation-iterations img:nth-child(1) {
+      animation: fadeIn 0.5s 0.5s ease-out both;
+    }
+    .animation-iterations img:nth-child(2) {
+      animation: fadeIn 0.5s 1s ease-out both;
+    }
+    .animation-iterations img:nth-child(3) {
+      animation: fadeIn 0.5s 1.5s ease-out both;
+    }
+    .animation-iterations img:nth-child(4) {
+      animation: fadeIn 0.5s 2s ease-out both;
+    }
+
+Styleguide 24.23
+
+*/
+
+@mixin animate-sequence(
+  $selector,
+  $name,
+  $iterations,
+  $delay,
+  $duration: $animations-duration,
+  $delay-offset: $animations-delay,
+  $function: $animations-function,
+  $mode: $animations-mode
+) {
+    @if $delay-offset == null {
+      $delay-offset: 0;
+    }
+    @for $i from 1 through $iterations {
+      $delay-seq: ( $delay * $i ) + $delay-offset;
+      #{$selector}:nth-child(#{$i}) {
+        @include animate($name, $duration, $delay-seq, $function, $mode);
+      }
+    }
+}
+
+

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rapido-css
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.5
   prerelease: 
 platform: ruby
 authors:
@@ -27,8 +27,7 @@ dependencies:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: 1.0.8
-description: An easy and quick sass+compass+susy prototyping framework based on Bootstrap
-  without all the default styles.
+description: An easy and quick Sass + Compass + Susy + OOCSS + BEM prototyping framework.
 email: raffaele.rasini@gmail.com
 executables: []
 extensions: []
@@ -57,6 +56,7 @@ files:
 - stylesheets/components/_sliders.scss
 - stylesheets/components/_tables.scss
 - stylesheets/components/_tabs.scss
+- stylesheets/components/_toggle.scss
 - stylesheets/components/_type.scss
 - stylesheets/rapido.min.scss
 - stylesheets/rapido.scss
@@ -75,7 +75,7 @@ files:
 - templates/project/screen.scss
 homepage: https://github.com/raffone/rapido
 licenses:
-- Apache License Version 2.0
+- MIT
 post_install_message: 
 rdoc_options: []
 require_paths:
@@ -97,5 +97,5 @@ rubyforge_project:
 rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
-summary: a quick bootstrap prototyping framework
+summary: A quick css prototyping framework
 test_files: []