ghbuttons-rails 0.0.2

data/README.md

@@ -0,0 +1,30 @@
+# ghbuttons-rails
+
+Github-style buttons for the Rails Asset Pipeline.
+
+Inspired by and ripped out of css3-gitgub-buttons
+
+http://nicolasgallagher.com/lab/css3-github-buttons/
+
+# Usage:
+
+ - include the stylesheet directly, or include it in your application.css with directives
+ - use the generated css wisely.
+ - use the mixins to make your own semantic css.
+
+# TODO:
+
+ - Finish sassification.  I'd like the colors to be variables you can override.
+ - I'd like danger and positive to be created by a mixin you can use with your own
+   colors, so you can have your own semantic classes for emphasis.
+ - I want to make some more things mixins - 'big' is presentational, not declarative.
+ - Making the 'button' a semantic mixin is going to be tough - the containers modify it,
+   and it is huge, so it will be inefficient to spit out everything multiple times.
+ - Since I wrote this I found the font-awesome project and released the font-awesome
+   rails bundle at https://github.com/bokmann/font-awesome-rails.
+   I'm considering removing all of the complexity in this ghbuttons project around the
+   sprites, and just making those two gems work seamlessly together.
+   
+# License:
+
+MIT license.

data/app/assets/stylesheets/_ghbuttons_mixins.scss

@@ -0,0 +1,42 @@
+@mixin ghbutton-highlight($text-color, $alt-text-color, $background1, $background2) {
+  $highlight-1: mix($background1, $background2);
+  $highlight-2: mix($background1, $background2, 75%);
+  $highlight-3: mix($background1, $background2, 85%);
+
+  color: $text-color;
+  &:hover, &:focus {
+    border-color: $highlight-3;
+    border-bottom-color: $background1;
+    color: $alt-text-color;
+    background-color: $background2;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($background2), to($highlight-2));
+    background-image: -moz-linear-gradient($background2, $highlight-2);
+    background-image: -o-linear-gradient($background2, $highlight-2);
+    background-image: linear-gradient($background2, $highlight-2);
+    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+  }
+  &:active, &.active {
+    color: $alt-text-color;
+    border-color: $background1;
+    border-bottom-color: $highlight-1;
+    background-color: $highlight-2;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from($highlight-2), to($background2));
+    background-image: -moz-linear-gradient($highlight-2, $background2);
+    background-image: -o-linear-gradient($highlight-2, $background2);
+    background-image: linear-gradient($highlight-2, $background2);
+    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+  }
+}
+
+@mixin ghbutton-pill($radius) {
+	-webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin ghbutton-big($font-size) {
+	font-size: $font-size;
+  &.icon:before {
+    top: 0;
+  }
+}

data/app/assets/stylesheets/_ghbuttons_variables.scss

@@ -0,0 +1,30 @@
+$ghbutton-pill-radius: 1em !default;
+$ghbutton-default-big-size: 14px !default;
+$ghbutton-text-color: #333 !default;
+$ghbutton-text-alt-color: #fff !default;
+$ghbutton-background-color1: #f4f4f4 !default;
+$ghbutton-background-color2: #ececec !default;
+$ghbutton-highlight-color1: #3072b3 !default;
+$ghbutton-highlight-color2: #599bdc !default;
+$ghbutton-border-color: #d4d4d4 !default;
+
+$ghbuttons-sprites: aperture, arrow_down, arrow_left, arrow_right, arrow_up, article, bars,
+                    bars_alt, bolt, book, book_alt, book_alt2, box, brush, brush_alt, calendar,
+                    calendar_alt_fill, calendar_alt_stroke, camera, cd, chart, chart_alt, chat,
+                    chat_alt_fill, chat_alt_stroke, check, check_alt, clock, cog, comment_alt1_fill,
+                    comment_alt1_stroke, comment_alt2_fill, comment_alt2_stroke, comment_fill,
+                    comment_stroke, compass, cursor, curved_arrow, denied, dial, document_alt_fill,
+                    document_alt_stroke, document_fill, document_stroke, download, eject, equalizer,
+                    eye, first, folder_fill, folder_stroke, fork, fullscreen, fullscreen_alt,
+                    fullscreen_exit, fullscreen_exit_alt, hash, headphones, heart_fill, heart_stroke,
+                    home, image, info, key_stroke, last, layers, layers_alt, left_quote, link, list,
+                    list_nested, lock_stroke, loop, magnifying_glass, mail, map_pin_fill,
+                    map_pin_stroke, mic, minus, moon_fill, moon_stroke, move, move_alt1,
+                    move_horizontal, move_horizontal_alt1, move_vertical, move_vertical_alt1,
+                    new_window, pause, pen, pen_alt2, pilcrow, pin, play, plus, rain, read_more,
+                    reload, right_quote, rss, rss_alt, share, spin, star, steering_wheel, stop,
+                    sun_fill, sun_stroke, tag_fill, tag_stroke, target, transfer, trash_fill,
+                    trash_stroke, umbrella, undo, unlock_stroke, upload, user, volume, volume_mute,
+                    wrench, x;
+
+

data/app/assets/stylesheets/ghbuttons.scss

@@ -0,0 +1,171 @@
+/* ------------------------------------------
+ghbuttons-rails
+(Original CSS by Nicolas Gallagher, Sassified by David Bock)
+*/
+
+@import "ghbuttons_variables";
+@import "ghbuttons_mixins";
+									
+.button {
+  position: relative;
+  overflow: visible;
+  display: inline-block;
+  padding: 0.5em 1em;
+  border: 1px solid $ghbutton-border-color;
+  margin: 0;
+  text-decoration: none;
+  text-shadow: 1px 1px 0 #fff;
+  font: 11px / normal sans-serif;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+
+  background-color: $ghbutton-background-color2;
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($ghbutton-background-color1), to($ghbutton-background-color2));
+  background-image: -moz-linear-gradient($ghbutton-background-color1, $ghbutton-background-color2);
+  background-image: -o-linear-gradient($ghbutton-background-color1, $ghbutton-background-color2);
+  background-image: linear-gradient($ghbutton-background-color1, $ghbutton-background-color2);
+
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  -o-background-clip: padding-box;
+  /*background-clip: padding-box;*/
+  /* commented out due to Opera 11.10 bug */
+  -webkit-border-radius: 0.2em;
+  -moz-border-radius: 0.2em;
+  border-radius: 0.2em;
+  /* IE hacks */
+  zoom: 1;
+  *display: inline;
+
+  @include ghbutton-highlight($ghbutton-text-color, $ghbutton-text-alt-color, $ghbutton-highlight-color1, $ghbutton-highlight-color2);
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0; }
+
+  &.icon:before {
+    content: "";
+    position: relative;
+    top: -1px;
+    float: left;
+    width: 12px;
+    height: 12px;
+    margin: 0 0.75em 0 -0.25em;
+    background: url(ghbuttons-sprite.png) 0 99px no-repeat;
+  }
+
+  $i: 0;
+  @each $sprite in $ghbuttons-sprites {
+    &.#{$sprite}.icon {
+	    &:before {
+	      background-position: 0 $i*-12px;
+	    }
+	    &:hover:before, &:focus:before, &:active:before {
+	      background-position: -12px $i*-12px;
+	    }
+	  }
+	  $i: $i + 1;
+  }
+
+  // special case button.  right arrow on the right side.
+  &.arrow_right.icon:before {
+	  float: right;
+	  margin: 0 -0.25em 0 0.5em;
+	}
+	
+  &.primary {
+    font-weight: bold;
+  }
+
+  &.danger {
+	  @include ghbutton-highlight(#900, #fff, #a0302a, #dc5f59);
+	}
+	
+  &.positive {
+	  @include ghbutton-highlight(#090, #fff, #45bf55, #96ed89);
+  }
+
+  &.pill {
+	  @include ghbutton-pill($ghbutton-pill-radius);
+  }
+
+  &.disable {
+    opacity: 0.5;
+  }
+
+  &.big {
+    @include ghbutton-big($ghbutton-default-big-size);
+  }
+}
+
+.button-group {
+  display: inline-block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  /* IE hacks */
+  zoom: 1;
+  *display: inline; }
+
+.button + {
+  .button, .button-group {
+    margin-left: 15px;
+  }
+}
+
+.button-group {
+  + {
+    .button, .button-group {
+      margin-left: 15px;
+    }
+  }
+  li {
+    float: left;
+    padding: 0;
+    margin: 0;
+  }
+  .button {
+    float: left;
+    margin-left: -1px;
+  }
+  > .button:not(:first-child):not(:last-child), li:not(:first-child):not(:last-child) .button {
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0; }
+  > .button:first-child, li:first-child .button {
+    margin-left: 0;
+    -webkit-border-top-right-radius: 0;
+    -webkit-border-bottom-right-radius: 0;
+    -moz-border-radius-topright: 0;
+    -moz-border-radius-bottomright: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0; }
+  > .button:last-child, li:last-child > .button {
+    -webkit-border-top-left-radius: 0;
+    -webkit-border-bottom-left-radius: 0;
+    -moz-border-radius-topleft: 0;
+    -moz-border-radius-bottomleft: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  &.minor-group .button {
+    border: 1px solid $ghbutton-border-color;
+    text-shadow: none;
+    background-image: none;
+    background-color: #fff;
+    &:hover, &:focus {
+      background-color: $ghbutton-highlight-color2; }
+    &:active, &.active {
+      background-color: $ghbutton-highlight-color1; }
+    &.icon:before {
+      opacity: 0.8;
+    }
+  }
+}
+
+
+.button-container {
+  .button, .button-group {
+    vertical-align: top;
+  }
+}

data/ghbuttons-rails.gemspec

@@ -0,0 +1,22 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "ghbuttons-rails/version"
+
+Gem::Specification.new do |s|
+  s.name        = "ghbuttons-rails"
+  s.version     = Ghbuttons::Rails::VERSION
+  s.authors     = ["bokmann"]
+  s.email       = ["dbock@codesherpas.com"]
+  s.homepage    = ""
+  s.summary     = %q{a sassified and gem packaged version if css3 github buttons}
+  s.description = %q{a sassified and gem packaged version if css3 github buttons}
+
+  s.rubyforge_project = "ghbuttons-rails"
+
+  s.files         = Dir["{lib,app}/**/*"] + ["ghbuttons-rails.gemspec", "LICENSE", "README.md"]
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_dependency "railties", "~> 3.1"
+end

data/lib/ghbuttons-rails.rb

@@ -0,0 +1,8 @@
+require "ghbuttons-rails/version"
+
+module Ghbuttons
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/ghbuttons-rails/version.rb

@@ -0,0 +1,5 @@
+module Ghbuttons
+  module Rails
+    VERSION = "0.0.2"
+  end
+end

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification 
+name: ghbuttons-rails
+version: !ruby/object:Gem::Version 
+  hash: 27
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 2
+  version: 0.0.2
+platform: ruby
+authors: 
+- bokmann
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2012-03-14 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  type: :runtime
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ~>
+      - !ruby/object:Gem::Version 
+        hash: 5
+        segments: 
+        - 3
+        - 1
+        version: "3.1"
+  name: railties
+  version_requirements: *id001
+  prerelease: false
+description: a sassified and gem packaged version if css3 github buttons
+email: 
+- dbock@codesherpas.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- lib/ghbuttons-rails/version.rb
+- lib/ghbuttons-rails.rb
+- app/assets/images/ghbuttons-sprite.png
+- app/assets/stylesheets/_ghbuttons_mixins.scss
+- app/assets/stylesheets/_ghbuttons_variables.scss
+- app/assets/stylesheets/ghbuttons.scss
+- ghbuttons-rails.gemspec
+- LICENSE
+- README.md
+homepage: ""
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: ghbuttons-rails
+rubygems_version: 1.8.10
+signing_key: 
+specification_version: 3
+summary: a sassified and gem packaged version if css3 github buttons
+test_files: []
+