foundation-rails 6.1.1.1 → 6.1.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: dd443f4e1ba793e2319dc38153c0902decb48ba6
-  data.tar.gz: a7067499ad0b516977c2a07c34674fc45c962c8a
+  metadata.gz: 8d79edccd460fb3cf16526f278c2ebda7dca1918
+  data.tar.gz: 7c9cbe0bb4d31a3c828f42dcc0e1bc7f3dcbd5b9
 SHA512:
-  metadata.gz: b4618cc5d4da3fe059b93b500a0e7b8dbf26112e4c853362710a0a408937d555d3e522953bd714c50689b50a1a049b5e7c76deaaa7fb79d2ceb710919bb4bcc8
-  data.tar.gz: cd5982ef40eab86284abdd907900165a7509eb69c3d029a75e4ee7a7a18352ae2bac04e7eb393ee30777c2b1c3703820a8c3cfc5c6c7eb7a78cd67f23259bc13
+  metadata.gz: 59f23edecc5f15f85cf64cdd02815df79db64a4ad86675b01fcb44869d306c963da64c3be02ef57a0a8c1b93d180fb0d3d0c34c6e7f2cd81c270cd918f4f2dd9
+  data.tar.gz: 2b7292b15665471a1b58ea2112a07f5f78d6df9c24692294f959c80ff38b2e53333471cf0352d4ed79eb14e0d71e714174d350c7d1c2aec4500ac8fb33495912

data/README.md

@@ -24,6 +24,16 @@ You can run the following command to add Foundation:
 
     $ rails g foundation:install
 
+To generate Haml or Slim instead of erb, append the `--haml` or `--slim` options to the above command, respectively.
+
+### Motion-UI
+
+[Motion UI](https://github.com/zurb/motion-ui) is a Sass library for creating flexible UI transitions and animations, and it comes packaged with the `foundation-rails` gem. To use Motion UI, uncomment the following lines from `foundation_and_overrides.scss`:
+
+    // @import 'motion-ui/motion-ui';
+    // @include motion-ui-transitions;
+    // @include motion-ui-animations;
+
 ## Manual Installation
 
 ### Add Foundation to your CSS

data/Rakefile

@@ -13,10 +13,12 @@ namespace :assets do
     sh 'bower install'
     sh 'cp -R bower_components/foundation-sites/js/* vendor/assets/js/'
     sh 'cp -R bower_components/foundation-sites/scss/* vendor/assets/scss/'
+    sh 'cp -R bower_components/motion-ui/src/* vendor/assets/scss/motion-ui'
 
-    manifest = Dir['vendor/assets/js/*.js'].
-      map { |file| "//= require #{File.basename(file, '.js')}" }.
-      sort.join("\n")
+    js_files = Dir['vendor/assets/js/*.js'].sort
+    # Move foundation.core.js to beginning of js_files
+    js_files.insert(0, js_files.delete(js_files.find { |file| file[/foundation.core.js/] }))
+    manifest = js_files.map { |file| "//= require #{File.basename(file, '.js')}" }.join("\n")
     File.write('vendor/assets/js/foundation.js', manifest)
 
     puts 'Now update version.rb'
@@ -25,7 +27,7 @@ namespace :assets do
   desc 'Remove old Foundation for Sites assets'
   task :clean do
     sh 'rm -rf vendor'
-    sh 'mkdir -p vendor/assets/js/ vendor/assets/scss'
+    sh 'mkdir -p vendor/assets/js/ vendor/assets/scss vendor/assets/scss/motion-ui'
   end
 
 end

data/bower.json

@@ -2,6 +2,7 @@
   "name": "foundation-rails",
   "version": "6.1.1.0",
   "dependencies": {
-    "foundation-sites": "6.1.1"
+    "foundation-sites": "6.1.1",
+    "motion-ui": "1.1.1"
   }
 }

data/lib/foundation/rails/version.rb

@@ -1,5 +1,5 @@
 module Foundation
   module Rails
-    VERSION = "6.1.1.1"
+    VERSION = "6.1.1.2"
   end
 end

data/lib/generators/foundation/install_generator.rb

@@ -3,11 +3,12 @@ require 'rails/generators'
 module Foundation
   module Generators
     class InstallGenerator < ::Rails::Generators::Base
-      source_root File.join(File.dirname(__FILE__), 'templates')
-      argument :layout_name, :type => :string, :default => 'application', :banner => 'layout_name'
+      desc "Install Foundation within a Rails project"
+      source_root File.join(File.dirname(__FILE__), "templates")
+      argument :layout_name, :type => :string, :default => "application", :banner => "layout_name"
 
-      class_option :haml, :desc => 'Generate HAML layout instead of erb', :type => :boolean
-      class_option :slim, :desc => 'Generate Slim layout instead of erb', :type => :boolean
+      class_option :haml, :desc => "Generate Haml layout instead of erb", :type => :boolean
+      class_option :slim, :desc => "Generate Slim layout instead of erb", :type => :boolean
 
       def add_assets
         # rails_ujs breaks, need to incorporate rails-behavior plugin for this to work seamlessly
@@ -44,17 +45,17 @@ module Foundation
 
       def create_layout
         if options.haml? || (defined?(Haml) && options.haml?)
-          template 'application.html.haml', File.join(layouts_base_dir, "#{file_name}.html.haml")
+          template "application.html.haml", File.join(layouts_base_dir, "#{file_name}.html.haml")
         elsif options.slim? || (defined?(Slim) && options.slim?)
-          template 'application.html.slim', File.join(layouts_base_dir, "#{file_name}.html.slim")
+          template "application.html.slim", File.join(layouts_base_dir, "#{file_name}.html.slim")
         else
-          template 'application.html.erb', File.join(layouts_base_dir, "#{file_name}.html.erb")
+          template "application.html.erb", File.join(layouts_base_dir, "#{file_name}.html.erb")
         end
       end
 
       def create_app_scss
-        template 'foundation_and_overrides.scss', File.join(stylesheets_base_dir, "foundation_and_overrides.scss")
-        template '_settings.scss', File.join(stylesheets_base_dir, "_settings.scss")
+        template "foundation_and_overrides.scss", File.join(stylesheets_base_dir, "foundation_and_overrides.scss")
+        template "_settings.scss", File.join(stylesheets_base_dir, "_settings.scss")
       end
 
       private
@@ -64,15 +65,15 @@ module Foundation
       end
 
       def javascripts_base_dir
-        File.join('app', 'assets', 'javascripts')
+        File.join("app", "assets", "javascripts")
       end
 
       def stylesheets_base_dir
-        File.join('app', 'assets', 'stylesheets')
+        File.join("app", "assets", "stylesheets")
       end
 
       def layouts_base_dir
-        File.join('app', 'views', 'layouts')
+        File.join("app", "views", "layouts")
       end
     end
   end

data/lib/generators/foundation/templates/foundation_and_overrides.scss

@@ -5,7 +5,7 @@
 
 // If you'd like to include motion-ui, you need to install the motion-ui sass package.
 //
-//@import 'motion-ui';
+// @import 'motion-ui/motion-ui';
 
 // We include everything by default.  To slim your CSS, remove components you don't use.
 
@@ -47,5 +47,5 @@
 
 // If you'd like to include motion-ui, you need to install the motion-ui sass package.
 //
-//@include motion-ui-transitions;
-//@include motion-ui-animations;
+// @include motion-ui-transitions;
+// @include motion-ui-animations;

data/vendor/assets/js/foundation.js

@@ -25,4 +25,4 @@
 //= require foundation.util.nest
 //= require foundation.util.timerAndImageLoader
 //= require foundation.util.touch
-//= require foundation.util.triggers
+//= require foundation.util.triggers

data/vendor/assets/scss/motion-ui/_classes.scss

@@ -0,0 +1,102 @@
+// scss-lint:disable ImportantRule, SpaceAfterComma, SingleLinePerProperty
+
+%mui-defaults {
+  transition-duration: map-get($motion-ui-speeds, default);
+  transition-timing-function: map-get($motion-ui-easings, default);
+}
+
+// Transitions
+// - - - - - - - - - - - - - - -
+@mixin motion-ui-transitions {
+  // Slide
+  .slide-in-down    { @include mui-slide(in,  down); }
+  .slide-in-left    { @include mui-slide(in,  right); }
+  .slide-in-up      { @include mui-slide(in,  bottom); }
+  .slide-in-right   { @include mui-slide(in,  left); }
+  .slide-out-down   { @include mui-slide(out, down); }
+  .slide-out-right  { @include mui-slide(out, right); }
+  .slide-out-up     { @include mui-slide(out, top); }
+  .slide-out-left   { @include mui-slide(out, left); }
+
+  // Fade
+  .fade-in  { @include mui-fade(in,  0, 1); }
+  .fade-out { @include mui-fade(out, 1, 0); }
+
+  // Hinge
+  .hinge-in-from-top      { @include mui-hinge(in,  top); }
+  .hinge-in-from-right    { @include mui-hinge(in,  right); }
+  .hinge-in-from-bottom   { @include mui-hinge(in,  bottom); }
+  .hinge-in-from-left     { @include mui-hinge(in,  left); }
+  .hinge-in-from-middle-x  { @include mui-hinge(in,  top,   center); }
+  .hinge-in-from-middle-y  { @include mui-hinge(in,  right, center); }
+  .hinge-out-from-top     { @include mui-hinge(out, top); }
+  .hinge-out-from-right   { @include mui-hinge(out, right); }
+  .hinge-out-from-bottom  { @include mui-hinge(out, bottom); }
+  .hinge-out-from-left    { @include mui-hinge(out, left); }
+  .hinge-out-from-middle-x { @include mui-hinge(out, top,   center); }
+  .hinge-out-from-middle-y { @include mui-hinge(out, right, center); }
+
+  // Scale
+  .scale-in-up    { @include mui-zoom(in,  0.5, 1); }
+  .scale-in-down  { @include mui-zoom(in,  1.5, 1); }
+  .scale-out-up   { @include mui-zoom(out, 1, 1.5); }
+  .scale-out-down { @include mui-zoom(out, 1, 0.5); }
+
+  // Spin
+  .spin-in     { @include mui-spin(in,  cw); }
+  .spin-out    { @include mui-spin(out, cw); }
+  .spin-in-ccw  { @include mui-spin(in,  ccw); }
+  .spin-out-ccw { @include mui-spin(out, ccw); }
+
+  // Transition Modifiers
+  // - - - - - - - - - - - - - - -
+
+  @each $name, $value in $motion-ui-speeds {
+    @if $name != default {
+      .#{$name} { transition-duration: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-easings {
+    @if $name != default {
+      .#{$name} { transition-timing-function: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-delays {
+    @if $name != default {
+      .#{$name}-delay { transition-delay: $value !important; }
+    }
+  }
+}
+
+// Animations
+// - - - - - - - - - - - - - - -
+@mixin motion-ui-animations {
+  .shake    { @include mui-animation(shake); }
+  .spin-cw  { @include mui-animation(spin); }
+  .spin-ccw { @include mui-animation(spin(ccw)); }
+  .wiggle   { @include mui-animation(wiggle); }
+
+  // Animation Modifiers
+  // - - - - - - - - - - - - - - -
+  .infinite { animation-iteration-count: infinite; }
+
+  @each $name, $value in $motion-ui-speeds {
+    @if $name != default {
+      .#{$name} { animation-duration: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-easings {
+    @if $name != default {
+      .#{$name} { animation-timing-function: $value !important; }
+    }
+  }
+
+  @each $name, $value in $motion-ui-delays {
+    @if $name != default {
+      .#{$name}-delay { animation-delay: $value !important; }
+    }
+  }
+}

data/vendor/assets/scss/motion-ui/_settings.scss

@@ -0,0 +1,61 @@
+/// Format for CSS classes created with Motion UI.
+/// @type Map
+/// @prop {Boolean} append [true] - Defines if selectors are chained to the selector (`.class.enter`), or appended as a new class (`.class-enter`).
+/// @prop {String} prefix ['mui-'] - Prefix to add before the state of a class. Enter an empty string to use no prefix.
+/// @prop {String} prefix ['-active'] - Suffix to add to the active state class.
+$motion-ui-classes: (
+  chain: true,
+  prefix: 'mui-',
+  active: '-active',
+) !default;
+
+/// State names to reference when writing motion classes. To use multiple class names for one state, enter a list of strings instead of one string.
+/// @type Map
+$motion-ui-states: (
+  in: 'enter',
+  out: 'leave',
+) !default;
+
+/// Default speed that transitions and animations play at, along with values for modifier classes to change the speed.
+/// @type Map
+$motion-ui-speeds: (
+  default: 500ms,
+  slow: 750ms,
+  fast: 250ms,
+) !default;
+
+/// Default delay to add before motion, along with values for modifier classes to change the delay.
+/// @type Map
+$motion-ui-delays: (
+  default: 0,
+  short: 300ms,
+  long: 700ms,
+) !default;
+
+/// Default easing for transitions and animations, along with values for modifier classes to change the easing.
+/// @type Map
+$motion-ui-easings: (
+  default: linear,
+  linear: linear,
+  ease: ease,
+  ease-in: ease-in,
+  ease-out: ease-out,
+  ease-in-out: ease-in-out,
+  bounce-in: cubic-bezier(0.485, 0.155, 0.24, 1.245),
+  bounce-out: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+  bounce-in-out: cubic-bezier(0.76, -0.245, 0.24, 1.245),
+) !default;
+
+/// Miscellaneous settings related to Motion UI.
+/// @type Map
+/// @prop {Boolean} slide-and-fade [false] - Defines if slide motions should also fade in/out.
+/// @prop {Boolean} slide-and-fade [true] - Defines if hinge motions should also fade in/out.
+/// @prop {Boolean} slide-and-fade [true] - Defines if scale motions should also fade in/out.
+/// @prop {Boolean} slide-and-fade [true] - Defines if spin motions should also fade in/out.
+$motion-ui-settings: (
+  slide-and-fade: false,
+  hinge-and-fade: true,
+  scale-and-fade: true,
+  spin-and-fade: true,
+  activate-queue-class: 'is-animating',
+) !default;

data/vendor/assets/scss/motion-ui/effects/_fade.scss

@@ -0,0 +1,29 @@
+/// Creates a fading animation.
+/// @param {Number} $from [0] - Opacity to start at.
+/// @param {Number} $to [1] - Opacity to end at.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function fade(
+  $from: 0,
+  $to: 1
+) {
+  $type: type-of($from);
+  $keyframes: ();
+
+  @if $type == 'string' {
+    @if $from == in {
+      $from: 0;
+      $to: 1;
+    } @else if $from == out {
+      $from: 1;
+      $to: 0;
+    }
+  }
+
+  $keyframes: (
+    name: 'fade-#{$from}-to-#{$to}',
+    0: (opacity: $from),
+    100: (opacity: $to),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/motion-ui/effects/_hinge.scss

@@ -0,0 +1,65 @@
+/// Creates a hinge effect by rotating the element.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
+/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
+/// @param {Number} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
+/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+@function hinge (
+  $state: in,
+  $from: left,
+  $axis: edge,
+  $perspective: 2000px,
+  $turn-origin: from-back
+) {
+  // Rotation directions when hinging from back vs. front
+  $rotation-amount: 90deg;
+  $rotations-back: (
+    top: rotateX($rotation-amount * -1),
+    right: rotateY($rotation-amount * -1),
+    bottom: rotateX($rotation-amount),
+    left: rotateY($rotation-amount),
+  );
+  $rotations-from: (
+    top: rotateX($rotation-amount),
+    right: rotateY($rotation-amount),
+    bottom: rotateX($rotation-amount * -1),
+    left: rotateY($rotation-amount * -1),
+  );
+
+  // Rotation origin
+  $rotation: '';
+  @if $turn-origin == from-front {
+    $rotation: map-get($rotations-from, $from);
+  } @else if $turn-origin == from-back {
+    $rotation: map-get($rotations-back, $from);
+  } @else {
+    @warn '$turn-origin must be either "from-back" or "from-front"';
+  }
+
+  // Start and end state
+  $start: '';
+  $end: '';
+  @if $state == in {
+    $start: perspective($perspective) $rotation;
+    $end: perspective($perspective) rotate(0deg);
+  } @else {
+    $start: perspective($perspective) rotate(0deg);
+    $end: perspective($perspective) $rotation;
+  }
+
+  // Turn axis
+  $origin: '';
+  @if $axis == edge {
+    $origin: $from;
+  } @else {
+    $origin: center;
+  }
+
+  $keyframes: (
+    name: 'hinge-#{$state}-#{$from}-#{$axis}-#{$turn-origin}',
+    0: (transform: $start, transform-origin: $origin),
+    100: (transform: $end),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/motion-ui/effects/_shake.scss

@@ -0,0 +1,15 @@
+/// Creates a shaking animation.
+/// @param {Percentage} $intensity [7%] - Intensity of the shake, as a percentage value.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function shake($intensity: 7%) {
+  $right: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90);
+  $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95);
+
+  $keyframes: (
+    name: 'shake-#{($intensity / 1%)}',
+    $right: (transform: translateX($intensity)),
+    $left: (transform: translateX(-$intensity)),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/motion-ui/effects/_slide.scss

@@ -0,0 +1,41 @@
+/// Creates a sliding animation.
+/// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position.
+/// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`.
+/// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function slide(
+  $state: in,
+  $direction: up,
+  $amount: 100%
+) {
+  $from: $amount;
+  $to: 0;
+  $func: 'translateY';
+
+  @if $direction == left or $direction == right {
+    $func: 'translateX';
+  }
+
+  @if $state == out {
+    $from: 0;
+    $to: $amount;
+  }
+
+  @if $direction == down or $direction == right {
+    @if $state == in {
+      $from: -$from;
+    }
+  } @else {
+    @if $state == out {
+      $to: -$to;
+    }
+  }
+
+  $keyframes: (
+    name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}',
+    0: (transform: '#{$func}(#{$from})'),
+    100: (transform: '#{$func}(#{$to})'),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/motion-ui/effects/_spin.scss

@@ -0,0 +1,28 @@
+/// Creates a spinning animation.
+/// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function spin(
+  $state: in,
+  $direction: cw,
+  $amount: 1turn
+) {
+  $start: 0;
+  $end: 0;
+
+  @if $state == in {
+    $start: if($direction == ccw, $amount, $amount * -1);
+    $end: 0;
+  } @else {
+    $start: 0;
+    $end: if($direction == ccw, $amount * -1, $amount);
+  }
+
+  $keyframes: (
+    name: 'spin-#{$direction}-#{$amount}',
+    0: (transform: rotate($start)),
+    100: (transform: rotate($end)),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/motion-ui/effects/_wiggle.scss

@@ -0,0 +1,13 @@
+/// Creates a wiggling animation.
+/// @param {Number} $intensity [7deg] - Intensity of the wiggle. Can be any CSS angle unit.
+/// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin.
+@function wiggle($intensity: 7deg) {
+  $keyframes: (
+    name: 'wiggle-#{$intensity}',
+    (40, 50, 60): (transform: rotate($intensity)),
+    (35, 45, 55, 65): (transform: rotate(-$intensity)),
+    (0, 30, 70, 100): (transform: rotate(0)),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/motion-ui/effects/_zoom.scss

@@ -0,0 +1,15 @@
+/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
+/// @param {Number} $from [1.5] - Size to start at.
+/// @param {Number} $from [1] - Size to end at.
+@function zoom(
+  $from: 0,
+  $to: 1
+) {
+  $keyframes: (
+    name: 'scale-#{$to}-to-#{$from}',
+    0: (transform: scale($from)),
+    100: (transform: scale($to)),
+  );
+
+  @return $keyframes;
+}

data/vendor/assets/scss/motion-ui/motion-ui.scss

@@ -0,0 +1,29 @@
+// Motion UI by ZURB
+// foundation.zurb.com/motion-ui
+// Licensed under MIT Open Source
+
+@import 'settings';
+
+@import 'util/animation';
+@import 'util/args';
+@import 'util/keyframe';
+@import 'util/selector';
+@import 'util/series';
+@import 'util/transition';
+@import 'util/unit';
+
+@import 'effects/fade';
+@import 'effects/hinge';
+@import 'effects/spin';
+@import 'effects/zoom';
+@import 'effects/shake';
+@import 'effects/slide';
+@import 'effects/wiggle';
+
+@import 'transitions/fade';
+@import 'transitions/hinge';
+@import 'transitions/zoom';
+@import 'transitions/slide';
+@import 'transitions/spin';
+
+@import 'classes';

data/vendor/assets/scss/motion-ui/transitions/_fade.scss

@@ -0,0 +1,28 @@
+/// Creates a fade transition by adjusting the opacity of the element.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1.
+/// @param {Number} $to [1] - Opacity to end on.
+/// @param {Keyword} $duration [null] - Length (speed) of the transition.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin mui-fade(
+  $state: in,
+  $from: 0,
+  $to: 1,
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $fade: fade($from, $to);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($fade, 0);
+
+    transition-property: opacity;
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($fade, 100);
+  }
+}

data/vendor/assets/scss/motion-ui/transitions/_hinge.scss

@@ -0,0 +1,43 @@
+/// Creates a hinge transition by rotating the element.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`.
+/// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`.
+/// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced.
+/// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`.
+/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
+/// @param {Duration} $duration [null] - Length (speed) of the transition.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin mui-hinge (
+  $state: in,
+  $from: left,
+  $axis: edge,
+  $perspective: 2000px,
+  $turn-origin: from-back,
+  $fade: map-get($motion-ui-settings, hinge-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $hinge: hinge($state, $from, $axis, $perspective, $turn-origin);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($hinge, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($hinge, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/vendor/assets/scss/motion-ui/transitions/_slide.scss

@@ -0,0 +1,42 @@
+/// Creates a sliding transition by translating the element horizontally or vertically.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`.
+/// @param {Length} $amount [100%] - Length of the slide as a percentage value.
+/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
+/// @param {Duration} $duration [null] - Length (speed) of the transition.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin mui-slide (
+  $state: in,
+  $direction: left,
+  $amount: 100%,
+  $fade: map-get($motion-ui-settings, slide-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $slide: slide($state, $direction, $amount);
+
+  // CSS Output
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($slide, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+
+    backface-visibility: hidden;
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($slide, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/vendor/assets/scss/motion-ui/transitions/_spin.scss

@@ -0,0 +1,39 @@
+/// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise).
+/// @param {Number} $amount [0.75turn] - Amount to element the element.
+/// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously.
+/// @param {Duration} $duration [null] - Length (speed) of the transition.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin mui-spin(
+  $state: in,
+  $direction: cw,
+  $amount: 0.75turn,
+  $fade: map-get($motion-ui-settings, spin-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $spin: spin($state, $direction, $amount);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($spin, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($spin, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/vendor/assets/scss/motion-ui/transitions/_zoom.scss

@@ -0,0 +1,39 @@
+/// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller.
+/// @param {Keyword} $state [in] - State to transition to.
+/// @param {Number} $from [1.5] - Size to start at.
+/// @param {Number} $from [1] - Size to end at.
+/// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously.
+/// @param {Duration} $duration [null] - Length (speed) of the transition.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin mui-zoom(
+  $state: in,
+  $from: 1.5,
+  $to: 1,
+  $fade: map-get($motion-ui-settings, scale-and-fade),
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  $scale: zoom($from, $to);
+
+  @include transition-start($state) {
+    @include transition-basics($duration, $timing, $delay);
+    @include -mui-keyframe-get($scale, 0);
+
+    @if $fade {
+      transition-property: transform, opacity;
+      opacity: if($state == in, 0, 1);
+    } @else {
+      transition-property: transform, opacity;
+    }
+  }
+
+  @include transition-end($state) {
+    @include -mui-keyframe-get($scale, 100);
+
+    @if $fade {
+      opacity: if($state == in, 1, 0);
+    }
+  }
+}

data/vendor/assets/scss/motion-ui/util/_animation.scss

@@ -0,0 +1,7 @@
+/// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property.
+/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
+@mixin mui-animation($args...) {
+  $name: map-get(-mui-process-args($args...), name);
+  @include mui-keyframes($name, $args...);
+  animation-name: unquote($name);
+}

data/vendor/assets/scss/motion-ui/util/_args.scss

@@ -0,0 +1,15 @@
+/// Processes a series of keyframe function arguments.
+/// @access private
+@function -mui-process-args($args...) {
+  @if length($args) == 1 {
+    $arg: nth($args, 1);
+
+    @if type-of($arg) == 'string' {
+      @return call($arg);
+    } @else if type-of($arg) == 'map' {
+      @return $arg;
+    }
+  }
+
+  @return -mui-keyframe-combine($args...);
+}

data/vendor/assets/scss/motion-ui/util/_keyframe.scss

@@ -0,0 +1,136 @@
+// Internal counter for creating unique keyframe names
+$-mui-custom: 0;
+
+/// Creates a keyframe from one or more effect functions. Use this function instead of `mui-animation` if you want to create a keyframe animation *without* automatically assigning it to the element.
+/// @param {String} $name - Name of the keyframe.
+/// @param {Function} $effects... - One or more effect functions to build the keyframe with.
+@mixin mui-keyframes($name, $effects...) {
+  $obj: -mui-process-args($effects...);
+  $obj: map-remove($obj, name);
+
+  @keyframes #{$name} {
+    // Now iterate through each keyframe percentage
+    @each $pct, $props in $obj {
+      #{-mui-keyframe-pct($pct)} {
+        // Lastly, iterate through each CSS property within a percentage and print it out
+        @each $prop, $value in $props {
+          #{$prop}: #{$value};
+        }
+      }
+    }
+  }
+}
+
+/// Creates a string for a CSS keyframe, by converting a list of numbers to a comma-separated list of percentage values.
+/// @param {Number|List} $input - List of numbers to use.
+/// @return {String} A set of comma-separated percentage values.
+/// @access private
+@function -mui-keyframe-pct($input) {
+  $output: ();
+
+  @if type-of($input) == 'number' {
+    $output: ($input * 1%);
+  } @else if type-of($input) == 'list' {
+    @each $i in $input {
+      $output: append($output, ($i * 1%), comma);
+    }
+  }
+
+  @return $output;
+}
+
+/// Prints the CSS properties from a specific key in a keyframes map. Used to borrow CSS from keyframe functions for use in transitions.
+/// @param {Map} $kf - Keyframe map to extract from.
+/// @param {Number} $key - Key in the map to print the CSS of.
+/// @access private
+@mixin -mui-keyframe-get($kf, $key) {
+  $map: map-get($kf, $key);
+
+  @each $prop, $value in $map or () {
+    // Some keyframe maps store transforms as quoted strings
+    @if type-of($value) == 'string' {
+      $value: unquote($value);
+    }
+    #{$prop}: $value;
+  }
+}
+
+/// Reformats a map containing keys with a list of values, so that each key is a single value.
+/// @param {Map} $map - Map to split up.
+/// @return {Map} A reformatted map.
+/// @access private
+@function -mui-keyframe-split($map) {
+  $new-map: ();
+
+  // Split keys with multiple values into individual keys
+  @each $key, $item in $map {
+    $key-type: type-of($key);
+
+    @if $key-type == 'number' {
+      $new-map: map-merge($new-map, ($key: $item));
+    } @else if $key-type == 'list' {
+      @each $k in $key {
+        $new-map: map-merge($new-map, ($k: $item));
+      }
+    }
+  }
+
+  @return $new-map;
+}
+
+/// Combines a series of keyframe objects into one.
+/// @param {Map} $maps... - A series of maps to merge, as individual parameters.
+/// @return {Map} A combined keyframe object.
+/// @access private
+@function -mui-keyframe-combine($maps...) {
+  $new-map: ();
+
+  // Iterate through each map passed in
+  @each $map in $maps {
+    @if type-of($map) == 'string' {
+      $map: call($map);
+    }
+
+    $map: -mui-keyframe-split($map);
+
+    // Iterate through each keyframe in the map
+    // $key is the keyframe percentage
+    // $value is a map of CSS properties
+    @each $key, $value in $map {
+      $new-value: ();
+
+      @if map-has-key($new-map, $key) {
+        // If the map already has the keyframe %, append the new property
+        $new-value: -mui-merge-properties(map-get($new-map, $key), $value);
+      } @else {
+        // Otherwise, create a new map with the new property
+        $new-value: $value;
+      }
+
+      // Finally, merge the modified keyframe value into the output map
+      $new-map: map-merge($new-map, ($key: $new-value));
+    }
+  }
+
+  // Make a name for the keyframes
+  $-mui-custom: $-mui-custom + 1 !global;
+  $map-name: (name: 'custom-#{$-mui-custom}');
+  $new-map: map-merge($new-map, $map-name);
+
+  @return $new-map;
+}
+
+/// Combines two maps of CSS properties into one map. If both maps have a transform property, the values from each will be combined into one property.
+/// @param {Map} $one - First map to merge.
+/// @param {Map} $two - Second map to merge.
+/// @return {Map} A combined map.
+/// @access private
+@function -mui-merge-properties($one, $two) {
+  @if map-has-key($one, transform) and map-has-key($two, transform) {
+    $transform: join(map-get($one, transform), map-get($two, transform));
+    $one: map-merge($one, (transform: $transform));
+    $two: map-remove($two, transform);
+  }
+
+  @return map-merge($one, $two);
+}

data/vendor/assets/scss/motion-ui/util/_selector.scss

@@ -0,0 +1,23 @@
+/// Builds a selector for a motion class, using the settings defined in the `$motion-ui-classes` and `$motion-ui-states` maps.
+/// @param {String|List} $states - One or more strings that correlate to a state.
+/// @param {Boolean} $active - Defines if the selector is for the setup or active class.
+/// @return {String} A selector that can be interpolated into your Sass code.
+/// @access private
+@function -mui-build-selector($states, $active: false) {
+  $return: '';
+  $chain: map-get($motion-ui-classes, chain);
+  $prefix: map-get($motion-ui-classes, prefix);
+  $suffix: map-get($motion-ui-classes, active);
+
+  @each $sel in $states {
+    $return: $return + if($chain, '&.', '#{&}-') + $prefix + $sel;
+
+    @if $active {
+      $return: $return + if($chain, '.', '#{&}-') + $prefix + $sel + $suffix;
+    }
+
+    $return: $return + ', ';
+  }
+
+  @return str-slice($return, 1, -3);
+}

data/vendor/assets/scss/motion-ui/util/_series.scss

@@ -0,0 +1,54 @@
+$-mui-queue: ();
+
+/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end.
+/// @access private
+%animated-element {
+  animation-play-state: paused;
+  animation-fill-mode: both;
+
+  .#{map-get($motion-ui-settings, activate-queue-class)} & {
+    animation-play-state: running;
+  }
+}
+
+/// Creates a new animation queue.
+/// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue.
+@mixin mui-series($delay: 0s) {
+  $-mui-queue: () !global;
+
+  @if $delay > 0 {
+    $item: ($delay, 0s);
+    $-mui-queue: append($-mui-queue, $item) !global;
+  }
+
+  @content;
+}
+
+/// Adds an animation to an animation queue. Only use this mixin inside of `mui-series()`.
+/// @param {Duration} $duration [1s] - Length of the animation.
+/// @param {Duration} $gap [0s] - Amount of time to pause before playing the animation after this one. Use a negative value to make the next effect overlap with the current one.
+/// @param {Function} $keyframes... - One or more effect functions to build the keyframe with.
+@mixin mui-queue(
+  $duration: 1s,
+  $gap: 0s,
+  $keyframes...
+) {
+  // Build the animation
+  $kf: -mui-process-args($keyframes...);
+
+  // Calculate the delay for this animation based on how long the previous ones take
+  $actual-delay: 0s;
+  @each $anim in $-mui-queue {
+    $actual-delay: $actual-delay + nth($anim, 1) + nth($anim, 2);
+  }
+
+  // Append this animation's length and gap to the end of the queue
+  $item: ($duration, $gap);
+  $-mui-queue: append($-mui-queue, $item) !global;
+
+  // CSS output
+  @extend %animated-element;
+  @include mui-animation($kf);
+  animation-duration: $duration;
+  animation-delay: $actual-delay;
+}

data/vendor/assets/scss/motion-ui/util/_transition.scss

@@ -0,0 +1,45 @@
+/// Applies basic transition settings to an element.
+/// @param {Duration} $duration [null] - Length (speed) of the transition.
+/// @param {Keyword|Function} $timing [null] - Easing of the transition.
+/// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts.
+@mixin transition-basics(
+  $duration: null,
+  $timing: null,
+  $delay: null
+) {
+  @extend %mui-defaults;
+  transition-duration: $duration;
+  transition-timing-function: $timing;
+  transition-delay: $delay;
+}
+
+/// Wraps the content in the setup class for a transition.
+/// @param {Keyword} $dir - State to setup for transition.
+@mixin transition-start($dir) {
+  $selector: -mui-build-selector(map-get($motion-ui-states, $dir));
+
+  @at-root {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
+/// Wraps the content in the active class for a transition.
+/// @param {Keyword} $dir - State to activate a transition on.
+@mixin transition-end($dir) {
+  $selector: -mui-build-selector(map-get($motion-ui-states, $dir), true);
+
+  @at-root {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
+/// Adds styles for a stagger animation, which can be used with Angular's `ng-repeat`.
+/// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item's animation.
+@mixin stagger($delay-amount) {
+  transition-delay: $delay-amount;
+  transition-duration: 0; // Prevent accidental CSS inheritance
+}

data/vendor/assets/scss/motion-ui/util/_unit.scss

@@ -0,0 +1,7 @@
+/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+/// @param {Number} $num - Number to strip unit from.
+/// @return {Number} The same number, sans unit.
+/// @access private
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: foundation-rails
 version: !ruby/object:Gem::Version
-  version: 6.1.1.1
+  version: 6.1.1.2
 platform: ruby
 authors:
 - ZURB
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-01-14 00:00:00.000000000 Z
+date: 2016-01-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -226,6 +226,28 @@ files:
 - vendor/assets/scss/grid/_position.scss
 - vendor/assets/scss/grid/_row.scss
 - vendor/assets/scss/grid/_size.scss
+- vendor/assets/scss/motion-ui/_classes.scss
+- vendor/assets/scss/motion-ui/_settings.scss
+- vendor/assets/scss/motion-ui/effects/_fade.scss
+- vendor/assets/scss/motion-ui/effects/_hinge.scss
+- vendor/assets/scss/motion-ui/effects/_shake.scss
+- vendor/assets/scss/motion-ui/effects/_slide.scss
+- vendor/assets/scss/motion-ui/effects/_spin.scss
+- vendor/assets/scss/motion-ui/effects/_wiggle.scss
+- vendor/assets/scss/motion-ui/effects/_zoom.scss
+- vendor/assets/scss/motion-ui/motion-ui.scss
+- vendor/assets/scss/motion-ui/transitions/_fade.scss
+- vendor/assets/scss/motion-ui/transitions/_hinge.scss
+- vendor/assets/scss/motion-ui/transitions/_slide.scss
+- vendor/assets/scss/motion-ui/transitions/_spin.scss
+- vendor/assets/scss/motion-ui/transitions/_zoom.scss
+- vendor/assets/scss/motion-ui/util/_animation.scss
+- vendor/assets/scss/motion-ui/util/_args.scss
+- vendor/assets/scss/motion-ui/util/_keyframe.scss
+- vendor/assets/scss/motion-ui/util/_selector.scss
+- vendor/assets/scss/motion-ui/util/_series.scss
+- vendor/assets/scss/motion-ui/util/_transition.scss
+- vendor/assets/scss/motion-ui/util/_unit.scss
 - vendor/assets/scss/settings/_settings.scss
 - vendor/assets/scss/typography/_alignment.scss
 - vendor/assets/scss/typography/_base.scss