slick-buttons 0.0.2

data/README.mkdn

@@ -0,0 +1 @@
+This is a super simple button style pattern for use with compass.

data/lib/slick_buttons.rb

@@ -0,0 +1,2 @@
+require 'compass'
+Compass::Frameworks.register("slick_buttons", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_slick_buttons.scss

@@ -0,0 +1,4 @@
+// Slick Buttons requires compass css3
+@import "compass/css3";
+
+@import "slick_buttons/slick_buttons";

data/stylesheets/slick_buttons/_slick_buttons.scss

@@ -0,0 +1,38 @@
+// Use $app-color as a configurable var in your host project :-)
+// will be working on a contrasting color scheme for bg and color settings within buttons to detect color conflicts
+
+$btn-color: $app-color; // this will default to the applications base color
+
+// Slick Button Style - creates a base button style for all buttons
+@mixin slick-buttons($btn-color, $hover: true) {
+  background-color:darken($btn-color, 30%);
+  border:1px solid darken($btn-color, 40%);
+  color:darken($btn-color, 5%);
+  display:block;
+  font-size:1.38em;
+  // margin:0 .5em;
+  margin:0;
+  padding:.25em .5em;
+  text-decoration:none;
+  @include border-radius(.2em);
+  @include box-shadow(darken($btn-color, 60%) 0px 1px 2px, darken($app-grey, 10%) 0px 1px 0px inset);
+  @include background-image(linear-gradient(darken($btn-color, 20%), darken($btn-color, 40%)));
+  @include text-shadow(darken($btn-color, 50%) 0px -1px 0px);
+  @include transition(all .25s ease);
+
+  // hover state
+  @if $hover {
+    &:hover {
+      background-color:darken($btn-color, 50%);
+      border:1px solid darken($btn-color, 60%);
+      color:lighten($btn-color, 100%);
+      @include box-shadow(darken($btn-color, 40%) 0px 1px 2px, lighten($btn-color, 10%) 0px 1px 0px inset);
+      @include background-image(linear-gradient($btn-color, darken($btn-color, 15%)));
+    }
+    &:active {
+      background-color:darken($btn-color, 60%);
+      @include box-shadow(darken($btn-color, 30%) 0px 1px 5px inset, $btn-color 0px -1px 0px inset);
+      @include background-image(linear-gradient(darken($btn-color, 15%), $btn-color));
+    }
+  }
+}

data/templates/project/_slick_buttons.scss

@@ -0,0 +1,7 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.
+
+@import "slick_buttons";
+
+// Configurable Variables
+$app-color: #444 !default; // this will default to the applications base color if you declare it...

data/templates/project/manifest.rb

@@ -0,0 +1,16 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet '_slick_buttons.sass', :media => 'screen, projection'
+
+description "Slick Buttons"
+
+help %Q{
+
+  Documentation to follow
+
+}
+
+welcome_message %Q{
+
+  You've just installed Slick Buttons. Sweet!
+
+}

metadata

@@ -0,0 +1,61 @@
+--- !ruby/object:Gem::Specification
+name: slick-buttons
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+  prerelease: 
+platform: ruby
+authors:
+- Mike Farnham
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-12-07 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &2168700800 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
+  type: :runtime
+  prerelease: false
+  version_requirements: *2168700800
+description: Slick css3 buttons using compass and sass
+email: mike@mikefarnham.info
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.mkdn
+- lib/slick_buttons.rb
+- stylesheets/_slick_buttons.scss
+- stylesheets/slick_buttons/_slick_buttons.scss
+- templates/project/_slick_buttons.scss
+- templates/project/manifest.rb
+homepage: http://www.mikefarnham.info
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.6
+signing_key: 
+specification_version: 3
+summary: css only buttons extension for compass
+test_files: []