sass-buttons 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c606f0919131828592fb0b5ea2926470ccb9c353
+  data.tar.gz: 1a9ba34995c45d023a6201e0706d7bfb90e2df71
+SHA512:
+  metadata.gz: cd48da8de3b9abbb2069aad08b30902afd938441d203258375de6a5583e1f5ed16fa4641e9d362a0f430fe65fbc871f17b79890d67b27556eecadc4a2dfa04d0
+  data.tar.gz: 9cf5a625377fb2806042eaffabec59ae7c806234a154f3304b3a92a0e61b73cb1d2ed9702a34f3b360d97c634d461b16d084eb8fed3d34d42ec86cba47c51cf3

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in Sass-Buttons.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Jared Hardy
+
+MIT License
+
+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.md

@@ -0,0 +1,20 @@
+Compass CSS Sass Buttons
+=========================
+
+
+Installation
+============
+
+
+Installing Sass Buttons on Rails 4.0.x
+-------------------------------------
+
+Using Sass Buttons
+===================
+
+
+
+
+
+
+

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/sass-buttons/version.rb

@@ -0,0 +1,5 @@
+module Sass
+  module Buttons
+    VERSION = "0.1.1"
+  end
+end

data/lib/sass-buttons.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('sass-buttons', :path => extension_path)

data/sache.json

@@ -0,0 +1,5 @@
+{
+  "name": "Sass Buttons",
+  "description": "Sass CSS buttons",
+  "tags": ["sass","buttons"]
+}

data/sass-buttons.gemspec

@@ -0,0 +1,25 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'sass-buttons/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "sass-buttons"
+  spec.version       = Sass::Buttons::VERSION
+  spec.authors       = ["Lester Zhao"]
+  spec.email         = ["zm.backer@gmail.com"]
+  spec.description   = %q{Awesome CSS buttons using compass and sass }
+  spec.summary       = %q{Easily create Awesome CSS buttons}
+  spec.homepage      = "https://github.com/zmbacker/sass-buttons"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files`.split($/)
+  spec.executables   = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r{^(test|spec|features)/})
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.3"
+  spec.add_development_dependency "rake"
+
+  spec.add_dependency("compass",   [">= 0.12.2"])
+end

data/stylesheets/_sass-buttons.scss

@@ -0,0 +1,2 @@
+@import 'sass-buttons/buttons'
+

data/stylesheets/sass-buttons/_buttons.scss

@@ -0,0 +1,497 @@
+@import 'compass';
+@import 'options'; // EDIT STYLES AND OPTIONS IN _options.scss
+@import 'danger';
+@import 'glow';
+
+
+//////////////////////////////////////////////////////////
+// "INHERIT-SAFE" FONT SIZES /////////////////////////////
+//////////////////////////////////////////////////////////
+// If user elects to use font-size: inherit in _options
+// leave out calcs which result in inherit2 etc.
+$unicorn-btn-smallfs: inherit;
+$unicorn-btn-tinyfs: inherit;
+$unicorn-btn-largefs: inherit;
+@if $unicorn-btn-font-size != inherit {
+    $unicorn-btn-largefs: $unicorn-btn-font-size + 5;
+    $unicorn-btn-tinyfs: $unicorn-btn-font-size - 2;
+    $unicorn-btn-smallfs: $unicorn-btn-font-size + 1;
+}
+
+//////////////////////////////////////////////////////////
+// BUTTON BASE STYLES ////////////////////////////////////
+//////////////////////////////////////////////////////////
+#{$unicorn-btn-namespace} {
+    @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .15));
+    background-color: $unicorn-btn-bgcolor;
+    @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 5%), darken($unicorn-btn-bgcolor, 5%)));
+    @include inline-block(middle);
+    border: 1px solid darken($unicorn-btn-bgcolor, 10%);
+    height: $unicorn-btn-height;
+    line-height: $unicorn-btn-height;
+    padding: 0px ($unicorn-btn-height * .8);
+    font-weight: $unicorn-btn-font-weight;
+    font-size: $unicorn-btn-font-size;
+    font-family: $unicorn-btn-font-family;
+    color:  $unicorn-btn-font-color;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
+    margin: 0;
+    text-decoration: none;
+    text-align: center;
+
+    &:hover {
+        background-color: $unicorn-btn-bgcolor;
+        @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 10%), darken($unicorn-btn-bgcolor, 7%)));
+    }
+    &:active {
+        @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, .3), 0px 1px 0px rgba(255, 255, 255, 1));
+        text-shadow: 0px 1px 0px rgba(255, 255, 255, .4);
+        background: desaturate($unicorn-btn-bgcolor, 20%);
+        color: darken($unicorn-btn-bgcolor, 20%);
+    }
+    &:focus {
+        outline: none;
+    }
+}
+
+//HEIGHT NEEDED FOR FORM ELEMENTS
+input#{$unicorn-btn-namespace}, button#{$unicorn-btn-namespace} {
+    height: $unicorn-btn-height + 2;
+    cursor: pointer;
+    -webkit-appearance: none;
+}
+
+// BLOCK BUTTON
+#{$unicorn-btn-namespace}-block {
+    display: block;
+}
+
+// DISABLED STATE
+#{$unicorn-btn-namespace}.disabled,
+#{$unicorn-btn-namespace}.disabled:hover,
+#{$unicorn-btn-namespace}.disabled:active,
+input#{$unicorn-btn-namespace}:disabled,
+button#{$unicorn-btn-namespace}:disabled {
+    @include box-shadow(0px 1px 2px rgba(0, 0, 0, .10));
+    @include opacity(.8);
+    background: #EEE;
+    border: 1px solid #DDD;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
+    color: #CCC;
+    cursor: default;
+    -webkit-appearance: none;
+}
+
+// WRAPPER EFFECT
+#{$unicorn-btn-namespace}-wrap {
+    @include background(linear-gradient(top,  #e3e3e3, #f2f2f2));
+    @include border-radius(200px);
+    @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, 0.04));
+    padding: 10px;
+    display: inline-block;
+}
+
+// FLAT BUTTON BASE
+@if $unicorn-btn-build-flat {
+    #{$unicorn-btn-namespace}-flat {
+        $unicorn-btn-background: $unicorn-btn-bgcolor;
+        @include box-shadow(none);
+        @include transition-property(background);
+        @include transition-duration(.3s);
+        background: $unicorn-btn-background;
+        border: none;
+        text-shadow: none;
+
+        &:hover {
+            background: lighten($unicorn-btn-background, 5%);
+        }
+        &:active {
+            @include transition-duration(0s);
+            background: desaturate($unicorn-btn-background, 20%);
+            color: darken($unicorn-btn-background, 20%);
+        }
+        &.disabled {
+            @include box-shadow(none);
+            -webkit-appearance: none;
+        }
+    }
+}
+
+
+// BORDER BUTTON BASE
+@if $unicorn-btn-build-flat {
+    #{$unicorn-btn-namespace}-border {
+        @include box-shadow(none);
+        @include transition-property(all);
+        @include transition-duration(.3s);
+        color: $unicorn-btn-font-color;
+        border: 2px solid $unicorn-btn-font-color;
+        background: none;
+        text-shadow: none;
+
+        &:hover {
+            background: none;
+            color: lighten($unicorn-btn-font-color, 10%);
+            border: 2px solid lighten($unicorn-btn-font-color, 10%);
+        }
+        &:active {
+            @include transition-duration(0s);
+            background: none;
+            color: darken($unicorn-btn-font-color, 10%);
+            border: 2px solid darken($unicorn-btn-font-color, 10%);
+        }
+        &.disabled {
+            @include box-shadow(none);
+            -webkit-appearance: none;
+        }
+    }
+}
+
+
+// 3D BUTTON BASE
+@if $unicorn-btn-build-3d {
+    #{$unicorn-btn-namespace}-3d {
+        @include transition-property(all);
+        @include transition-duration(.3s);
+        @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-bgcolor, 20%), 0px 8px 3px rgba(0, 0, 0, .2));
+        @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 2%), darken($unicorn-btn-bgcolor, 2%)));
+        background-color: $unicorn-btn-bgcolor;
+        color: $unicorn-btn-font-color;
+        border: 1px solid darken($unicorn-btn-bgcolor, 5%);
+        text-shadow: none;
+        position: relative;
+        top: 0px;
+
+        &:hover {
+            @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-bgcolor, 20%), 0px 8px 3px rgba(0, 0, 0, .2));
+            @include background(linear-gradient(top,  lighten($unicorn-btn-bgcolor, 8%), darken($unicorn-btn-bgcolor, 1%)));
+            background-color: lighten($unicorn-btn-bgcolor, 10%);
+        }
+        &:active {
+            @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken($unicorn-btn-bgcolor, 20%), 0px 3px 3px rgba(0, 0, 0, .2));
+            @include background(linear-gradient(top,  darken($unicorn-btn-bgcolor, 2%), lighten($unicorn-btn-bgcolor, 2%)));
+            background-color: desaturate($unicorn-btn-bgcolor, 20%);
+            color: darken($unicorn-btn-bgcolor, 20%);
+            border: 1px solid darken($unicorn-btn-bgcolor, 5%);
+            top: 5px;
+        }
+        &.disabled {
+            @include box-shadow(none);
+            -webkit-appearance: none;
+        }
+    }
+}
+
+
+//////////////////////////////////////////////////////////
+// SHAPES ////////////////////////////////////////////////
+//////////////////////////////////////////////////////////
+@each $unicorn-btn-style in $unicorn-btn-types {
+
+    // .button-rounded .button-pill button-circle
+    #{$unicorn-btn-namespace}-#{$unicorn-btn-style} {
+
+        @if $unicorn-btn-style == 'rounded' {
+            @include border-radius(3px);
+        }
+
+        @else if $unicorn-btn-style == 'pill' {
+            @include border-radius(50px);
+        }
+
+        @else if $unicorn-btn-style == 'circle' {
+            @include border-radius($unicorn-btn-circle-size * 2);
+            @include box-shadow(inset 0px 1px 1px rgba(255, 255, 255, .5), 0px 1px 2px rgba(0, 0, 0, .20));
+            width: $unicorn-btn-circle-size;
+            line-height: $unicorn-btn-circle-size;
+            height: $unicorn-btn-circle-size;
+            padding: 0px;
+            border-width: 4px;
+            font-size: $unicorn-btn-largefs;
+        }
+    }
+}
+
+
+//////////////////////////////////////////////////////////
+// ACTION STYLES /////////////////////////////////////////
+//////////////////////////////////////////////////////////
+@each $unicorn-btn-action in $unicorn-btn-actions {
+    //GET NAME & COLOR
+    $unicorn-btn-name: nth($unicorn-btn-action, 1);
+    $unicorn-btn-background: nth($unicorn-btn-action, 2);
+    $unicorn-btn-color: nth($unicorn-btn-action, 3);
+
+    // .button-primary .button-action etc.
+    #{$unicorn-btn-namespace}-#{$unicorn-btn-name} {
+        @include background(linear-gradient(top,  lighten($unicorn-btn-background, 5%), darken($unicorn-btn-background, 5%)));
+        background-color: $unicorn-btn-background;
+        border-color: darken($unicorn-btn-background, 10%);
+        color: $unicorn-btn-color;
+        text-shadow: 0 -1px 1px rgba(darken($unicorn-btn-background, 30%), 0.35);
+
+        &:hover {
+            background-color: $unicorn-btn-background;
+            @include background(linear-gradient(top,  lighten($unicorn-btn-background, 10%), darken($unicorn-btn-background, 5%)));
+        }
+        &:active {
+            background: desaturate($unicorn-btn-background, 20%);
+            color: darken($unicorn-btn-background, 20%);
+        }
+    }
+
+
+    /////////////////////////////
+    //3D BUTTON STYLES //////////
+    ////////////////////////////
+    @if $unicorn-btn-build-3d {
+
+        // .button-border-primary .button-border-action etc.
+        #{$unicorn-btn-namespace}-3d-#{$unicorn-btn-name} {
+            @include transition-property(all);
+            @include transition-duration(.3s);
+            @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 10%), 0px 8px 3px rgba(0, 0, 0, .30));
+            @include background(linear-gradient(top,  lighten($unicorn-btn-background, 2%), darken($unicorn-btn-background, 2%)));
+            background-color: $unicorn-btn-background;
+            color: $unicorn-btn-color;
+            border: 1px solid darken($unicorn-btn-background, 10%);
+            text-shadow: none;
+            position: relative;
+            top: 0px;
+
+            &:hover {
+                @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 7px 0px darken($unicorn-btn-background, 12%), 0px 8px 3px rgba(0, 0, 0, .30));
+                @include background(linear-gradient(top,  lighten($unicorn-btn-background, 8%), darken($unicorn-btn-background, 1%)));
+                background-color: lighten($unicorn-btn-background, 10%);
+            }
+            &:active {
+                @include box-shadow(inset 0px 1px 0px rgba(255, 255, 255, .3), inset 0px -1px 1px rgba(255, 255, 255, .15), 0px 2px 0px darken($unicorn-btn-background, 10%), 0px 3px 3px rgba(0, 0, 0, .30));
+                @include background(linear-gradient(top,  darken($unicorn-btn-background, 2%), lighten($unicorn-btn-background, 2%)));
+                background-color: desaturate($unicorn-btn-background, 20%);
+                color: darken($unicorn-btn-background, 20%);
+                border: 1px solid darken($unicorn-btn-background, 5%);
+                top: 5px;
+            }
+            &.disabled {
+                @include box-shadow(none);
+                -webkit-appearance: none;
+            }
+        }
+    }
+
+
+    /////////////////////////////
+    //BORDER BUTTON STYLES //////
+    ////////////////////////////
+    @if $unicorn-btn-build-border {
+
+        // .button-border-primary .button-border-action etc.
+        #{$unicorn-btn-namespace}-border-#{$unicorn-btn-name} {
+            @include box-shadow(none);
+            @include transition-property(all);
+            @include transition-duration(.3s);
+            color: $unicorn-btn-background;
+            border: 2px solid $unicorn-btn-background;
+            background: none;
+            text-shadow: none;
+
+            &:hover {
+                background: none;
+                color: lighten($unicorn-btn-background, 10%);
+                border: 2px solid lighten($unicorn-btn-background, 10%);
+            }
+            &:active {
+                @include transition-duration(0s);
+                background: none;
+                color: darken($unicorn-btn-background, 10%);
+                border: 2px solid darken($unicorn-btn-background, 10%);
+            }
+            &.disabled {
+                @include box-shadow(none);
+                -webkit-appearance: none;
+            }
+        }
+    }
+
+    //////////////////////////
+    //FLAT BUTTON STYLES /////
+    //////////////////////////
+    @if $unicorn-btn-build-flat {
+        // .button-flat-primary .button-flat-action etc.
+        #{$unicorn-btn-namespace}-flat-#{$unicorn-btn-name} {
+            @include box-shadow(none);
+            @include transition-property(background);
+            @include transition-duration(.3s);
+            background: $unicorn-btn-background;
+            color: $unicorn-btn-color;
+            text-shadow: none;
+            border: none;
+
+            &:hover {
+                background: lighten($unicorn-btn-background, 5%);
+            }
+            &:active {
+                @include transition-duration(0s);
+                background: desaturate($unicorn-btn-background, 20%);
+                color: darken($unicorn-btn-background, 15%);
+            }
+            &.disabled {
+                @include box-shadow(none);
+                -webkit-appearance: none;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+//////////////////////////////////////////////////////////
+// SIZES /////////////////////////////////////////////////
+//////////////////////////////////////////////////////////
+
+@each $unicorn-btn-size in $unicorn-btn-sizes {
+
+    // .button-large .button-small .button-tiny
+    #{$unicorn-btn-namespace}-#{$unicorn-btn-size} {
+        @if $unicorn-btn-size == 'jumbo' {
+            font-size: $unicorn-btn-largefs + 5;
+            height: $unicorn-btn-height * 1.6;
+            line-height: $unicorn-btn-height * 1.6;
+            padding: 0px ($unicorn-btn-height * 1.6) * .8;
+        }
+
+        @if $unicorn-btn-size == 'large' {
+            font-size: $unicorn-btn-largefs;
+            height: $unicorn-btn-height * 1.2;
+            line-height: $unicorn-btn-height * 1.2;
+            padding: 0px ($unicorn-btn-height * 1.2) * .8;
+        }
+
+        @if $unicorn-btn-size == 'small' {
+            font-size: $unicorn-btn-smallfs;
+            height: $unicorn-btn-height * .8;
+            line-height: $unicorn-btn-height * .8;
+            padding: 0px ($unicorn-btn-height * .8) * .8;
+        }
+
+        @if $unicorn-btn-size == 'tiny' {
+            font-size: $unicorn-btn-tinyfs;
+            height: $unicorn-btn-height * .7;
+            line-height: $unicorn-btn-height * .7;
+            padding: 0px ($unicorn-btn-height * .7) * .8;
+        }
+    }
+
+    //HEIGHT NEEDED FOR FORM ELEMENTS +2px on height
+    input#{$unicorn-btn-namespace}-#{$unicorn-btn-size}, button#{$unicorn-btn-namespace}-#{$unicorn-btn-size} {
+        @if $unicorn-btn-size == 'large' {
+            height: ($unicorn-btn-height * 1.2) + 2;
+        }
+
+        @if $unicorn-btn-size == 'small' {
+            height: ($unicorn-btn-height * .8) + 2;
+        }
+
+        @if $unicorn-btn-size == 'tiny' {
+            height: ($unicorn-btn-height * .7) + 2;
+        }
+    }
+}
+
+
+//////////////////////////////////////////////////////////
+// GLOWING BUTTON STYLES /////////////////////////////////
+//////////////////////////////////////////////////////////
+@if $unicorn-btn-build-glow {
+    #{$unicorn-btn-namespace} {
+        &#{$unicorn-btn-glow-namespace} {
+            @include glow;
+        }
+        &#{$unicorn-btn-glow-namespace}:active {
+            @include no_animation;
+            @include box-shadow(inset 0px 1px 3px rgba(0, 0, 0, .3), 0px 1px 0px rgba(255, 255, 255, 1));
+        }
+    }
+}
+
+
+//////////////////////////////////////////////////////////
+// DROPDOWN //////////////////////////////////////////////
+//////////////////////////////////////////////////////////
+@if $unicorn-btn-build-dropdown {
+    #{$unicorn-btn-namespace}-dropdown {
+        position: relative;
+        overflow: visible;
+        display: inline-block;
+
+        //EXTRA STYLES FOR CARET
+        .button {
+            .icon-caret-down {
+                font-size: 90%;
+                margin: 0px 0px 0px 3px;
+                vertical-align: middle;
+            }
+        }
+
+        ul#{$unicorn-btn-namespace}-dropdown-menu-below {
+            top: 115%;
+        }
+        ul#{$unicorn-btn-namespace}-dropdown-menu-above {
+            bottom: 115%;
+            top: auto;
+        }
+
+        //DROPDOWN MENU STYLES
+        ul {
+            @include box-shadow(0px 3px 6px rgba(0, 0, 0, 0.6));
+            @include border-radius(3px);
+            display: none;
+            position: absolute;
+            background: $unicorn-btn-dropdown-background;
+            top: -2px;
+            left: -2px;
+            z-index: 1000;
+            padding: 0px;
+            margin: 0px;
+            list-style-type: none;
+            min-width: 102%;
+
+            li {
+                padding: 0px;
+                margin: 0px;
+                display: block;
+
+                &:first-child a {
+                     @include border-top-radius(3px);
+                }
+                &:last-child a {
+                     @include border-bottom-radius(3px);
+                }
+            }
+
+            //DROPDOWN MENU DIVIDER
+            #{$unicorn-btn-namespace}-dropdown-divider {
+                @include box-shadow(inset 0px 1px 0px #FFF);
+                border-top: 1px solid #e4e4e4;
+            }
+
+            a {
+                display: block;
+                padding: 0px 20px;
+                text-decoration: none;
+                font-size: $unicorn-btn-tinyfs;
+                color: $unicorn-btn-dropdown-link-color;
+                line-height: 30px;
+                white-space: nowrap;
+
+                &:hover {
+                    background-color: $unicorn-btn-dropdown-link-hover-background;
+                    color: $unicorn-btn-dropdown-link-hover;
+                }
+            }
+        }
+    }
+}

data/stylesheets/sass-buttons/_danger.scss

@@ -0,0 +1,42 @@
+//////////////////////////////////////////////////////////
+// BUILD TYPES (don't edit this!)  ///////////////////////
+//////////////////////////////////////////////////////////
+// Purpose of this file is to set global flags for which
+// types we'll include in our final css build or not.
+$unicorn-btn-build-glow: false;
+$unicorn-btn-build-dropdown: false;
+$unicorn-btn-build-rounded: false;
+$unicorn-btn-build-pill: false;
+$unicorn-btn-build-circle: false;
+$unicorn-btn-build-flat: false;
+$unicorn-btn-build-3d: false;
+$unicorn-btn-build-border: false;
+
+// For all types provided by user we mark true
+@each $unicorn-btn-type in $unicorn-btn-types {
+    @if $unicorn-btn-type == 'glow' {
+        $unicorn-btn-build-glow: true;
+    }
+    @else if $unicorn-btn-type == 'dropdown' {
+        $unicorn-btn-build-dropdown: true;
+    }
+    @else if $unicorn-btn-type == 'rounded' {
+        $unicorn-btn-build-rounded: true;
+    }
+    @else if $unicorn-btn-type == 'pill' {
+        $unicorn-btn-build-pill: true;
+    }
+    @else if $unicorn-btn-type == 'circle' {
+        $unicorn-btn-build-circle: true;
+    }
+    @else if $unicorn-btn-type == 'flat' {
+        $unicorn-btn-build-flat: true;
+    }
+    @else if $unicorn-btn-type == 'border' {
+        $unicorn-btn-build-border: true;
+    }
+    @else if $unicorn-btn-type == '3d' {
+        $unicorn-btn-build-3d: true;
+    }
+}
+//@debug "$unicorn-btn-build-glow is #{$unicorn-btn-build-glow}";

data/stylesheets/sass-buttons/_glow.scss

@@ -0,0 +1,61 @@
+@import 'options';
+
+// Only include all this junk if $unicorn-btn-build-types list had 'glow'
+// We looked in to conditional imports but no go in Sass today
+@if $unicorn-btn-build-glow {
+    //////////////////////////////////////////////////////////
+    // GLOWING BUTTON STYLES ////////////////////////////////////////
+    //////////////////////////////////////////////////////////
+    @-webkit-keyframes glowing,
+     {
+        from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+        50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
+        to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+    }
+    @-moz-keyframes glowing,
+     {
+        from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+        50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
+        to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+    }
+    @-o-keyframes glowing,
+     {
+        from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+        50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
+        to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+    }
+    @keyframes glowing,
+     {
+        from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+        50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
+        to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
+    }
+}
+
+@mixin glow {
+    -webkit-animation-duration: 3s;
+    -moz-animation-duration: 3s;
+    -ms-animation-duration: 3s;
+    -o-animation-duration: 3s;
+    animation-duration: 3s;
+    -webkit-animation-iteration-count: infinite;
+    -khtml-animation-iteration-count: infinite;
+    -moz-animation-iteration-count: infinite;
+    -ms-animation-iteration-count: infinite;
+    -o-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: glowing;
+    -khtml-animation-name: glowing;
+    -moz-animation-name: glowing;
+    -ms-animation-name: glowing;
+    -o-animation-name: glowing;
+    animation-name: glowing;
+}
+
+@mixin no_animation {
+    -webkit-animation-name: none;
+    -moz-animation-name: none;
+    -ms-animation-name: none;
+    -o-animation-name: none;
+    animation-name: none;
+}

data/stylesheets/sass-buttons/_options.scss

@@ -0,0 +1,38 @@
+
+//////////////////////////////////////////////////////////
+// BASE DEFAULTS /////////////////////////////////////////
+//////////////////////////////////////////////////////////
+$unicorn-btn-namespace: '.button'; //prefix for all classes
+$unicorn-btn-glow-namespace: '.glow';
+$unicorn-btn-glow-color: #2c9adb;
+$unicorn-btn-bgcolor: #EEE;
+$unicorn-btn-height: 32px;
+
+
+//////////////////////////////////////////////////////////
+// TYPOGRAPHY ////////////////////////////////////////////
+//////////////////////////////////////////////////////////
+$unicorn-btn-font-color: #666;
+$unicorn-btn-font-size: 14px;
+$unicorn-btn-font-weight: 300;
+$unicorn-btn-font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
+//////////////////////////////////////////////////////////
+// BUTTON OPTIONS ////////////////////////////////////////
+//////////////////////////////////////////////////////////
+
+// (name background-color font-color) add as many as you like.
+$unicorn-btn-actions: ('primary' #00A1CB #FFF) ('secondary' #FFF #FFF) ('action' #7db500 #FFF) ('highlight' #F18D05 #FFF)('caution' #E54028 #FFF) ('royal' #87318C #FFF);
+// Remove any type to omit from final CSS build
+$unicorn-btn-types: 'rounded' 'pill' 'circle' 'dropdown' 'glow' 'flat' 'border' '3d';
+$unicorn-btn-sizes: 'jumbo' 'large' 'small' 'tiny';
+$unicorn-btn-circle-size: 120px; //radius for circle buttons, circles only have one size
+
+
+//////////////////////////////////////////////////////////
+// DROPDOWN OPTIONS //////////////////////////////////////
+//////////////////////////////////////////////////////////
+$unicorn-btn-dropdown-background: #fcfcfc;
+$unicorn-btn-dropdown-link-color: #333;
+$unicorn-btn-dropdown-link-hover: #FFF;
+$unicorn-btn-dropdown-link-hover-background: #3c6ab9;

metadata

@@ -0,0 +1,99 @@
+--- !ruby/object:Gem::Specification
+name: sass-buttons
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- Lester Zhao
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-02-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.2
+description: 'Awesome CSS buttons using compass and sass '
+email:
+- zm.backer@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/sass-buttons.rb
+- lib/sass-buttons/version.rb
+- sache.json
+- sass-buttons.gemspec
+- stylesheets/_sass-buttons.scss
+- stylesheets/sass-buttons/_buttons.scss
+- stylesheets/sass-buttons/_danger.scss
+- stylesheets/sass-buttons/_glow.scss
+- stylesheets/sass-buttons/_options.scss
+homepage: https://github.com/zmbacker/sass-buttons
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+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
+signing_key: 
+specification_version: 4
+summary: Easily create Awesome CSS buttons
+test_files: []