uberbutton 0.1

data/README.mkdn

@@ -0,0 +1,45 @@
+Uberbutton - Compass Plugin
+================================
+
+A class and a mixin to generate nifty buttons.
+
+
+Installation
+==================================
+
+    gem install uberbutton
+
+Add the following line to config/compass.rb
+    require 'uberbutton'
+    
+Install the framework  
+    compass install uberbutton
+
+Usage
+==================================
+
+The class "uberbutton" includes common base styles for each button.
+The mixin "uberbutton" lets you create classes for different styled buttons.
+
+Use "uberbutton" in conjunction with a style class you create.
+(This isolates the common code and is for DRY).
+
+Example:
+
+Create the style class in scss
+.main-cta {
+  @include uberbutton(start-color, end-color, "path_to_background_pattern");
+}
+
+Use both style class and uberbutton to construct button.
+<a class="uberbutton main-cta">
+  Hello world.
+</a>
+
+
+
+
+Author
+====================
+
+[Cemre Gungor](http://cem,re/) started this project while drinking Four Loko.

data/lib/uberbutton.rb

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

data/stylesheets/uberbutton.scss

@@ -0,0 +1 @@
+@import "uberbutton/_uberbutton.scss";

data/stylesheets/uberbutton/_uberbutton.scss

@@ -0,0 +1,124 @@
+
+/*
+  Uberbutton
+  The one button you'll ever need.
+  
+  Cemre Gungor http://cem.re
+
+*/
+
+@import "compass/css3";
+
+$uberbutton-base-class: "uberbutton" !default;
+$uberbutton-csspie-location: "/css3pie/PIE.htc" !default;
+
+// mixin used to create different colored buttons.
+@mixin uberbutton($color1, $color2, $pattern: "") {
+  $text-color: white;
+  $shadow-color: rgba(0, 0, 0, 0.5);
+  $shadow-position: -1px;
+  
+  @if lightness(mix($color1, $color2, 50%)) > 50% {
+    $text-color: #333333;
+    $text-color: rgba(0, 0, 0, 0.7);
+    $shadow-color: rgba(255, 255, 255, 0.7);
+    $shadow-position: 1px;
+  }
+  
+  @include uberbutton-base($color1, $color2, $text-color, $shadow-color, $shadow-position, $pattern); }
+
+
+.#{$uberbutton-base-class} {  
+  behavior: url($uberbutton-csspie-location);
+  @include transition(all, 0.1s, ease-in-out);	
+	
+  
+  // border
+  @include border-radius(4px);
+  -webkit-background-clip: padding-box;
+  
+  // type
+  line-height: 150%;
+  font-weight: 500;
+  text-decoration: none;
+  
+  // box structure
+  display: inline-block;
+  height: auto;
+  padding: 4px 10px;
+  cursor: pointer;
+  @include box-shadow(rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px);
+  
+  &:hover {
+    text-decoration: none;
+  }
+  
+  &:link, &:visited {
+    margin-right: 10px;
+    line-height: 150%;
+  }
+  
+  &:active {
+    @include box-shadow(rgba(0, 0, 0, 0.1) 0px 1px 5px 0px);
+    @include translate(0, 2px);
+  }
+  
+  img {
+    position: relative;
+    top: 3px;
+    margin-right: 5px;
+  }
+}
+
+@mixin uberbutton-base($color1, $color2, $text-color, $shadow-color, $shadow-position, $pattern: "") {
+  $lighten_amount: 4%;
+  background-color: mix($color1, $color2, 50%); //fallback color
+  -pie-background: linear-gradient($color1, $color2);
+  
+  // background
+  @if $pattern != "" {
+    @include linear-gradient(color_stops($color1, $color2), top, image-url($pattern));
+  }
+  @else {
+    @include linear-gradient(color_stops($color1, $color2), top);
+  }
+    
+  // border
+  border: 1px solid darken($color2, 12%);
+  
+  // text
+  @include text-shadow($shadow-color, 0, $shadow-position, 0);
+  color: $text-color;
+  
+  &:link, &:visited {
+    color: $text-color;
+    border: 1px solid darken($color2, 20%);
+  }
+  
+  &:hover {
+    background-color: mix(lighten($color1, $lighten_amount), lighten($color2, $lighten_amount), 50%);
+    -pie-background: linear-gradient(lighten($color1, $lighten_amount), lighten($color2, $lighten_amount));
+    
+    @if $pattern != "" {
+      @include linear-gradient(color_stops(lighten($color1, $lighten_amount), lighten($color2, $lighten_amount)), top, image-url($pattern));
+    }
+    @else {
+      @include linear-gradient(color_stops(lighten($color1, $lighten_amount), lighten($color2, $lighten_amount)), top);
+    }
+    
+    color: $text-color;
+    border: 1px solid darken($color2, 20%);
+  }
+  
+  &:active {
+    background-color: mix(darken($color1, $lighten_amount), darken($color2, $lighten_amount), 50%);
+    -pie-background: linear-gradient(darken($color1, $lighten_amount), darken($color2, $lighten_amount));
+    @include linear-gradient(color_stops($color2, $color1), top);
+    @include text-shadow($shadow-color, 0, $shadow-position * -1, 0);
+    color: $text-color;
+  }
+  
+  &:focus {
+    @include box-shadow(opacify($color1, 0.5) 0 0 10px 0);
+  }
+}

data/templates/project/button.scss

@@ -0,0 +1,26 @@
+// 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 "compass/reset";
+@import "uberbutton/uberbutton";
+
+.button1 {
+  @include uberbutton(#2386b9, #154b7f)
+}
+
+.button2 {
+  @include uberbutton(#FFE497, #F2BF2F)
+}
+
+.button3 {
+  @include uberbutton(#C8E66E, #A5D207)
+}
+
+.button4 {
+  @include uberbutton(#CC0400, #890001)
+}
+
+.button5 {
+	@include uberbutton(#99CC00, #669900);
+  font-weight: bold;
+}

data/templates/project/manifest.rb

@@ -0,0 +1,44 @@
+description "The one button you will ever need."
+
+stylesheet 'button.scss'
+image 'noise.png'
+
+help %Q{
+  The class "uberbutton" includes common base styles for each button.
+  The mixin "uberbutton" lets you create classes for different styled buttons.
+
+  Use "uberbutton" in conjunction with a style class you create.
+  (This is to abstract the common code and to save loading times).
+  
+  Example:
+  
+  Create the style class in scss
+  .main-cta {
+    @include uberbutton(start-color, end-color, "path_to_background_pattern");
+  }
+  
+  Use both style class and uberbutton to construct button.
+  <a class="uberbutton main-cta">
+    Hello world.
+  </a>
+}
+
+welcome_message %Q{
+  The class "uberbutton" includes common base styles for each button.
+  The mixin "uberbutton" lets you create classes for different styled buttons.
+
+  Use "uberbutton" in conjunction with a style class you create.
+  (This is to abstract the common code and to save loading times).
+  
+  Example:
+  
+  Create the style class in scss
+  .main-cta {
+    @include uberbutton(start-color, end-color, "path_to_background_pattern");
+  }
+  
+  Use both style class and uberbutton to construct button.
+  <a class="uberbutton main-cta">
+    Hello world.
+  </a>
+}

data/uberbutton.gemspec

@@ -0,0 +1,32 @@
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{uberbutton}
+  s.version = "0.1"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
+  s.authors = ["Cemre Gungor"]
+  s.date = %q{2011-05-05}
+  s.description = %q{a class and mixin for nifty buttons}
+  s.summary = %q{a class and mixin for nifty buttons}
+  s.email = "cg@iki.fi"
+
+  s.has_rdoc = false
+  s.files = [
+    "uberbutton.gemspec",
+    "README.mkdn",
+    "lib/uberbutton.rb",
+    "stylesheets/uberbutton.scss",
+    "stylesheets/uberbutton/_uberbutton.scss",
+    "templates/project/button.scss",
+    "templates/project/noise.png",
+    "templates/project/manifest.rb"
+  ]
+  
+  s.homepage = %q{http://github.com/cemregr/uberubtton}
+  s.require_paths = ["lib"]
+  s.rubyforge_project = %q{uberbutton}
+  s.rubygems_version = %q{1.3.6}
+
+  s.add_dependency(%q<compass>, [">= 0.10.0"])
+end

metadata

@@ -0,0 +1,86 @@
+--- !ruby/object:Gem::Specification 
+name: uberbutton
+version: !ruby/object:Gem::Version 
+  prerelease: false
+  segments: 
+  - 0
+  - 1
+  version: "0.1"
+platform: ruby
+authors: 
+- Cemre Gungor
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-05-05 00:00:00 -04:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 0
+        - 10
+        - 0
+        version: 0.10.0
+  type: :runtime
+  version_requirements: *id001
+description: a class and mixin for nifty buttons
+email: cg@iki.fi
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- uberbutton.gemspec
+- README.mkdn
+- lib/uberbutton.rb
+- stylesheets/uberbutton.scss
+- stylesheets/uberbutton/_uberbutton.scss
+- templates/project/button.scss
+- templates/project/noise.png
+- templates/project/manifest.rb
+has_rdoc: true
+homepage: http://github.com/cemregr/uberubtton
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      segments: 
+      - 1
+      - 3
+      - 5
+      version: 1.3.5
+requirements: []
+
+rubyforge_project: uberbutton
+rubygems_version: 1.3.7
+signing_key: 
+specification_version: 3
+summary: a class and mixin for nifty buttons
+test_files: []
+