wiskey 0.0.1

data/.gitignore

@@ -0,0 +1,28 @@
+.bundle/
+log/*.log
+pkg/
+test/dummy/db/*.sqlite3
+test/dummy/log/*.log
+test/dummy/tmp/
+test/dummy/.sass-cache/
+pkg
+Icon?
+.DS_Store
+.swp
+TAGS
+REVISION
+*.tmproj
+*~
+.autotest
+.settings
+.project
+.tasks-cache
+.svn
+/nbproject
+/.idea
+tmp/
+*DONOTVERSION*
+/coverage
+/coverage.data
+.loadpath
+.sass-cache

data/.rvmrc

@@ -0,0 +1 @@
+rvm use 1.9.2@wiskey

data/Gemfile

@@ -0,0 +1,10 @@
+source "http://rubygems.org"
+
+gem "rails", "3.1.0"
+gem 'sass'
+
+# gem "capybara", ">= 0.4.0"
+
+# To use debugger (ruby-debug for Ruby 1.8.7+, ruby-debug19 for Ruby 1.9.2+)
+# gem 'ruby-debug'
+# gem 'ruby-debug19'

data/Gemfile.lock

@@ -0,0 +1,89 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    actionmailer (3.1.0)
+      actionpack (= 3.1.0)
+      mail (~> 2.3.0)
+    actionpack (3.1.0)
+      activemodel (= 3.1.0)
+      activesupport (= 3.1.0)
+      builder (~> 3.0.0)
+      erubis (~> 2.7.0)
+      i18n (~> 0.6)
+      rack (~> 1.3.2)
+      rack-cache (~> 1.0.3)
+      rack-mount (~> 0.8.2)
+      rack-test (~> 0.6.1)
+      sprockets (~> 2.0.0)
+    activemodel (3.1.0)
+      activesupport (= 3.1.0)
+      bcrypt-ruby (~> 3.0.0)
+      builder (~> 3.0.0)
+      i18n (~> 0.6)
+    activerecord (3.1.0)
+      activemodel (= 3.1.0)
+      activesupport (= 3.1.0)
+      arel (~> 2.2.1)
+      tzinfo (~> 0.3.29)
+    activeresource (3.1.0)
+      activemodel (= 3.1.0)
+      activesupport (= 3.1.0)
+    activesupport (3.1.0)
+      multi_json (~> 1.0)
+    arel (2.2.1)
+    bcrypt-ruby (3.0.0)
+    builder (3.0.0)
+    erubis (2.7.0)
+    hike (1.2.1)
+    i18n (0.6.0)
+    mail (2.3.0)
+      i18n (>= 0.4.0)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.16)
+    multi_json (1.0.3)
+    polyglot (0.3.2)
+    rack (1.3.2)
+    rack-cache (1.0.3)
+      rack (>= 0.4)
+    rack-mount (0.8.3)
+      rack (>= 1.0.0)
+    rack-ssl (1.3.2)
+      rack
+    rack-test (0.6.1)
+      rack (>= 1.0)
+    rails (3.1.0)
+      actionmailer (= 3.1.0)
+      actionpack (= 3.1.0)
+      activerecord (= 3.1.0)
+      activeresource (= 3.1.0)
+      activesupport (= 3.1.0)
+      bundler (~> 1.0)
+      railties (= 3.1.0)
+    railties (3.1.0)
+      actionpack (= 3.1.0)
+      activesupport (= 3.1.0)
+      rack-ssl (~> 1.3.2)
+      rake (>= 0.8.7)
+      rdoc (~> 3.4)
+      thor (~> 0.14.6)
+    rake (0.9.2)
+    rdoc (3.9.4)
+    sass (3.1.7)
+    sprockets (2.0.0)
+      hike (~> 1.2)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    thor (0.14.6)
+    tilt (1.3.3)
+    treetop (1.4.10)
+      polyglot
+      polyglot (>= 0.3.1)
+    tzinfo (0.3.29)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  rails (= 3.1.0)
+  sass

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2011 Alexey Osipenko
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.rdoc

@@ -0,0 +1,3 @@
+= Wiskey
+
+This project rocks and uses MIT-LICENSE.

data/Rakefile

@@ -0,0 +1,29 @@
+# encoding: UTF-8
+require 'rubygems'
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rake'
+require 'rake/rdoctask'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task :default => :test
+
+Rake::RDocTask.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Wiskey'
+  rdoc.options << '--line-numbers' << '--inline-source'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end

data/app/assets/stylesheets/_wiskey.scss

@@ -0,0 +1,25 @@
+// Custom Functions
+@import "functions/experimental";
+@import "functions/linear-gradient";
+
+// CSS3 Mixins
+@import "css3/animation";
+@import "css3/background-clip";
+@import "css3/border-radius";
+@import "css3/box-shadow";
+@import "css3/box-sizing";
+@import "css3/flex-box";
+@import "css3/inline-block";
+@import "css3/linear-gradient";
+@import "css3/radial-gradient";
+@import "css3/transform";
+@import "css3/transition";
+@import "css3/opacity";
+@import "css3/text-shadow";
+@import "css3/text-overflow";
+
+// Addons & other mixins
+@import "addons/animation-keyframes";
+@import "addons/button";
+@import "addons/position";
+@import "addons/timing-functions";

data/app/assets/stylesheets/addons/_animation-keyframes.scss

@@ -0,0 +1,28 @@
+// Keyframes for Animations
+
+// Fade-In animation
+@mixin fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes fade-in { @include fade-in; }
+   @-moz-keyframes fade-in { @include fade-in; }
+        @keyframes fade-in { @include fade-in; }
+
+
+// Fade-out animation
+@mixin fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes fade-out { @include fade-out; }
+   @-moz-keyframes fade-out { @include fade-out; }
+        @keyframes fade-out { @include fade-out; }

data/app/assets/stylesheets/addons/_button.scss

@@ -0,0 +1,169 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+  @if type-of($style) == color {
+    $base-color: $style;
+    $style: simple;
+  }
+
+  @if $style == simple {
+    @include simple($base-color);
+  }
+
+  @else if $style == shiny {
+    @include shiny($base-color);
+  }
+
+  @else if $style == pill {
+    @include pill($base-color);
+  }
+}
+
+@mixin simple ($base-color) {
+  $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+  $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+  $color: hsl(0, 0, 100%);
+  $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+  $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+  @if lightness($base-color) > 70% {
+    $color: hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  border: 1px solid $border;
+  @include border-radius (3px);
+  @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
+  @include linear-gradient ($base-color, $stop-gradient);
+  padding: 6px 18px 7px;
+  text-shadow: 0 1px 0 $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+    $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+    $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+
+    @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+  }
+
+  &:active {
+    $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+    $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+    border: 1px solid $border-active;
+    @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+  }
+}
+
+@mixin shiny($base-color) {
+  $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+  $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+  $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+  $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+  $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
+  $color: hsl(0, 0, 100%);
+  $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+  $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
+
+  @if lightness($base-color) > 70% {
+    $color: hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+  border: 1px solid $border;
+  border-bottom: 1px solid $border-bottom;
+  @include border-radius(5px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow);
+  color: $color;
+  display: inline;
+  font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
+  padding: 7px 20px 8px;
+  text-decoration: none;
+  text-align: center;
+  text-shadow: 0 -1px 1px $text-shadow;
+
+  &:hover {
+    $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+    $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+    $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+    $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
+
+    @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
+    cursor: pointer;
+  }
+
+  &:active {
+    $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+    @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
+  }
+}
+
+@mixin pill($base-color) {
+  $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+  $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+  $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+  $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+  $color: hsl(0, 0, 100%);
+  $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+  $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+  @if lightness($base-color) > 70% {
+    $color: hsl(0, 0, 20%);
+    $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+  }
+
+  @include linear-gradient ($base-color, $stop-gradient);
+  border: 1px solid $border-top;
+  border-color: $border-top $border-sides $border-bottom;
+  @include border-radius(16px);
+  @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+  color: $color;
+  display: inline;
+  font-family: "lucida grande", sans-serif;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 1;
+  padding: 3px 16px 5px;
+  text-align: center;
+  text-shadow: 0 -1px 1px $text-shadow;
+  -webkit-background-clip: padding-box;
+
+  &:hover {
+    $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+    $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+    $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+    $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+    $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+    $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+    $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+    @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+    cursor: pointer;
+    text-shadow: 0 -1px 1px $text-shadow-hover;
+    -webkit-background-clip: padding-box;
+  }
+
+  &:active {
+    $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+    $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+    $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+    $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+    $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+    background: $active-color;
+    border: 1px solid $border-active;
+    border-bottom: 1px solid $border-bottom-active;
+    @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+    text-shadow: 0 -1px 1px $text-shadow-active;
+  }
+}

data/app/assets/stylesheets/addons/_position.scss

@@ -0,0 +1,30 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+
+  @if type-of($position) == list {
+    $coordinates: $position;
+    $position: relative;
+  }
+
+  $top: nth($coordinates, 1);
+  $right: nth($coordinates, 2);
+  $bottom: nth($coordinates, 3);
+  $left: nth($coordinates, 4);
+
+  position: $position;
+
+  @if not(unitless($top)) {
+    top: $top;
+  }
+
+  @if not(unitless($right)) {
+    right: $right;
+  }
+
+  @if not(unitless($bottom)) {
+    bottom: $bottom;
+  }
+
+  @if not(unitless($left)) {
+    left: $left;
+  }
+}

data/app/assets/stylesheets/addons/_timing-functions.scss

@@ -0,0 +1,29 @@
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455, 0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445, 0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000, 0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785, 0.135, 0.150, 0.860);

data/app/assets/stylesheets/css3/_animation.scss

@@ -0,0 +1,161 @@
+// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
+// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
+
+@mixin animation-name ($name-1,
+  $name-2: false, $name-3: false,
+  $name-4: false, $name-5: false,
+  $name-6: false, $name-7: false,
+  $name-8: false, $name-9: false)
+  {
+    $full:  compact($name-1, $name-2, $name-3, $name-4,
+                    $name-5, $name-6, $name-7, $name-8, $name-9);
+
+  -webkit-animation-name: $full;
+     -moz-animation-name: $full;
+          animation-name: $full;
+}
+
+
+@mixin animation-duration ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-duration: $full;
+     -moz-animation-duration: $full;
+          animation-duration: $full;
+}
+
+
+@mixin animation-timing-function ($motion-1: ease,
+//  ease | linear | ease-in | ease-out | ease-in-out
+  $motion-2: false, $motion-3: false,
+  $motion-4: false, $motion-5: false,
+  $motion-6: false, $motion-7: false,
+  $motion-8: false, $motion-9: false)
+  {
+    $full:  compact($motion-1, $motion-2, $motion-3, $motion-4,
+                    $motion-5, $motion-6, $motion-7, $motion-8, $motion-9);
+
+  -webkit-animation-timing-function: $full;
+     -moz-animation-timing-function: $full;
+          animation-timing-function: $full;
+}
+
+
+@mixin animation-iteration-count ($value-1: 1,
+//  infinite | <number>
+  $value-2: false, $value-3: false,
+  $value-4: false, $value-5: false,
+  $value-6: false, $value-7: false,
+  $value-8: false, $value-9: false)
+  {
+    $full:  compact($value-1, $value-2, $value-3, $value-4,
+                    $value-5, $value-6, $value-7, $value-8, $value-9);
+
+  -webkit-animation-iteration-count: $full;
+     -moz-animation-iteration-count: $full;
+          animation-iteration-count: $full;
+}
+
+
+@mixin animation-direction ($direction-1: normal,
+//  normal | alternate
+  $direction-2: false, $direction-3: false,
+  $direction-4: false, $direction-5: false,
+  $direction-6: false, $direction-7: false,
+  $direction-8: false, $direction-9: false)
+  {
+    $full:  compact($direction-1, $direction-2, $direction-3, $direction-4,
+                    $direction-5, $direction-6, $direction-7, $direction-8, $direction-9);
+
+  -webkit-animation-direction: $full;
+     -moz-animation-direction: $full;
+          animation-direction: $full;
+}
+
+
+@mixin animation-play-state ($state-1: running,
+//  running | paused
+  $state-2: false, $state-3: false,
+  $state-4: false, $state-5: false,
+  $state-6: false, $state-7: false,
+  $state-8: false, $state-9: false)
+  {
+    $full:  compact($state-1, $state-2, $state-3, $state-4,
+                    $state-5, $state-6, $state-7, $state-8, $state-9);
+
+  -webkit-animation-play-state: $full;
+     -moz-animation-play-state: $full;
+          animation-play-state: $full;
+}
+
+
+@mixin animation-delay ($time-1: 0,
+  $time-2: false, $time-3: false,
+  $time-4: false, $time-5: false,
+  $time-6: false, $time-7: false,
+  $time-8: false, $time-9: false)
+  {
+    $full:  compact($time-1, $time-2, $time-3, $time-4,
+                    $time-5, $time-6, $time-7, $time-8, $time-9);
+
+  -webkit-animation-delay: $full;
+     -moz-animation-delay: $full;
+          animation-delay: $full;
+}
+
+
+@mixin animation-fill-mode ($mode-1: none,
+//  http://goo.gl/l6ckm
+//  none | forwards | backwards | both
+  $mode-2: false, $mode-3: false,
+  $mode-4: false, $mode-5: false,
+  $mode-6: false, $mode-7: false,
+  $mode-8: false, $mode-9: false)
+  {
+    $full:  compact($mode-1, $mode-2, $mode-3, $mode-4,
+                    $mode-5, $mode-6, $mode-7, $mode-8, $mode-9);
+
+  -webkit-animation-fill-mode: $full;
+     -moz-animation-fill-mode: $full;
+          animation-fill-mode: $full;
+}
+
+
+// Shorthand for a basic animation. Supports multiple parentheses-deliminated values for each variable.
+// Example: @include animation-basic((slideup, fadein), (1.0s, 2.0s), ease-in);
+@mixin animation-basic ($name, $time: 0, $motion: ease) {
+    $length-of-name: length($name);
+    $length-of-time: length($time);
+  $length-of-motion: length($motion);
+
+  @if $length-of-name > 1 {
+    @include animation-name(zip($name));
+  } @else {
+    @include animation-name(    $name);
+  }
+
+  @if $length-of-time > 1 {
+    @include animation-duration(zip($time));
+  } @else {
+    @include animation-duration(    $time);
+  }
+
+  @if $length-of-motion > 1 {
+    @include animation-timing-function(zip($motion));
+  } @else {
+    @include animation-timing-function(    $motion);
+  }
+}
+
+// Official animation shorthand property. Needs more work to actually be useful.
+@mixin animation ($name, $duration, $timing-function, $delay, $iteration-count, $direction) {
+  -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction;
+     -moz-animation: $name $duration $timing-function $delay $iteration-count $direction;
+          animation: $name $duration $timing-function $delay $iteration-count $direction;
+}

data/app/assets/stylesheets/css3/_background-clip.scss

@@ -0,0 +1,25 @@
+@mixin background-clip($clip) {
+  $deprecated: $clip;
+  @if $clip == padding-box { $deprecated: padding; }
+  @if $clip == border-box { $deprecated: border; }
+
+  @include experimental(background-clip, $deprecated,
+    -moz,
+    -webkit,
+    not -o,
+    not -ms,
+    not -khtml,
+    not official
+  );
+  @include experimental(background-clip, $clip,
+    not -moz,
+    not -webkit,
+    -o,
+    -ms,
+    -khtml,
+    official
+  );
+}
+
+// @include background-clip(padding-box);
+// @include background-clip(border-box);