update off-canvas overlay transition, add default gutter to container…

…, add rem to fluid-type

README.md

@@ -1,6 +1,6 @@
 # Rocket v3
 
-![Version](https://img.shields.io/badge/Version-3.4.10-blue.svg)  
+![Version](https://img.shields.io/badge/Version-3.4.11-blue.svg)  
 ![SASS](https://img.shields.io/badge/sass-3.3.4-ff69b4.svg)
 ![Libsass](https://img.shields.io/badge/Libsass-3.2.0-b6f07e.svg)
 Rocket is a powerful SASS library to help web developers handle layout, color and build components.   

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "rocket",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "main": [
     "./src/scss/rocket.scss",
     "./src/js/kit.js"

changelog.md

@@ -1,5 +1,10 @@
 # Changelog
 
+##### 3.4.11
+- Improved: `off-canvas` overlay transition.
+- Improved: add rem unit for `font-size` in `fluid-type`.
+- Fixed: `container` default gutter.
+
 ##### 3.4.10
 - Added: `fluid-type`. Thanks [Indrek Paas](http://www.sassmeister.com/gist/7f22e44ace49b5124eec).
 - Fixed: a `container` issue in IE bowsers due to a IE `calc` bug.

package.json

@@ -1,7 +1,7 @@
 {
   "title": "Rocket",
   "name": "Rocket",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "description": "a powerful tool to help web developers handle layout and other components",
   "directories": {
     "src": "src"

src/scss/_rocket.scss

@@ -1,4 +1,4 @@
-// Rocket v3.4.10
+// Rocket v3.4.11
 // Created by William Lin ([email protected])
 // Licensed under MIT Open Source
 // =============================================

src/scss/addons/_fluid-type.scss

@@ -14,17 +14,27 @@
 
     @each $property in $properties {
       #{$property}: $min-value;
+      @if $property == 'font-size' and unit($min-value) == 'px' {
+        #{$property}: rem($min-value);
+      }
     }
 
     @include bp('min' $min-vw) {
       @each $property in $properties {
-        #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
+        @if $property == 'font-size' and unit($min-value) == 'px' {
+          #{$property}: calc(#{rem($min-value)} + #{strip-unit($max-value - $min-value)} * (100vw - #{rem($min-vw)}) / #{strip-unit($max-vw - $min-vw)});
+        } else {
+          #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
+        }
       }
     }
 
     @include bp('min' $max-vw) {
       @each $property in $properties {
         #{$property}: $max-value;
+        @if $property == 'font-size' and unit($max-value) == 'px' {
+          #{$property}: rem($max-value);
+        }
       }
     }
   }

src/scss/components/_off-canvas.scss

@@ -330,7 +330,7 @@
       #{opposite($direction)}: auto;
       background: transparent;
       z-index: map-get($ro-off-canvas-z-index, 'page-overlay');
-      @include ro-transition(unquote("#{$direction} #{$duration}"));
+      @include ro-transition(all #{$duration});
       input:checked ~ & {
         // background
         background: $overlay-color;

src/scss/layout/_container.scss

@@ -1,7 +1,7 @@
 @mixin container($key: false){
   $container: false;
   $breakpoint: false;
-  $gutter: args-get-next($key, 'gutter');
+  $gutter: args-get-next($key, 'gutter', map-get($ro-layout, 'gutter'));
   $align: args-get($key, (left right center), center);
 
   // get container & gutter