nice-buttons 1.0.1 → 1.0.2

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Brandon Mathis
+
+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,61 @@
+# Nice-Buttons
+
+Nice Buttons makes it easy to create beautiful CSS3 buttons. This is an extension for the Compass framework.
+
+## Installation with Bundler
+
+If you have the Bundler gem installed, add this line to your application's Gemfile:
+
+    group :assets do
+      gem 'nice-buttons'
+    end
+
+Next, install this gem by running:
+
+    # command line
+    bundle
+
+Now you can begin using Nice Buttons in your Compass project.
+
+## Manual installation
+
+To install this gem without Bundler run:
+
+    # command line
+    gem install nice-buttons
+
+Next add the following to the top of your project's Compass configuration:
+
+    require "nice-buttons"
+
+## Usage
+
+To use Nice Buttons, import the Nice Buttons in a Sass file in your project, then style a button or a link with the `nice-button` mixin:
+
+``` scss
+@import "nice-buttons";
+
+button {
+  @include nice-button(#494e57);
+}
+```
+
+## Demo Project
+
+Nice buttons comes with a demo so you can see how it works and play around with it. To install the demo files, run the following:
+
+    #command line
+    bundle exec compass install nice-buttons
+
+Or if you aren't using bundler run this instead:
+
+   #command line
+   compass install nice-buttons
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/lib/nice-buttons.rb

@@ -0,0 +1,5 @@
+require 'compass'
+
+Compass::Frameworks.register('nice-buttons',
+  :stylesheets_directory => File.join(File.dirname(__FILE__), '..', 'stylesheets'),
+  :templates_directory => File.join(File.dirname(__FILE__), '..', 'templates'))

data/stylesheets/_color-helpers.scss

@@ -0,0 +1,14 @@
+// Returns true if the color is brighter than 50% lightness
+@function is-bright($color) {
+  @return (lightness($color) > 50%);
+}
+
+// Picks the color with the highest contrast
+@function if-bright($bg, $light: true, $dark: false) {
+  @return if(is-bright($bg), $light, $dark);
+}
+
+// Picks the color with the highest contrast
+@function text-contrast($bg, $dark-text: #000, $light-text: #fff) {
+  @return if-bright($bg, $dark-text, $light-text);
+}

data/stylesheets/nice-buttons.scss

@@ -0,0 +1,64 @@
+@import "compass/css3";
+@import "color-helpers";
+
+// Button style reset and basic styles
+@mixin nb-reset() {
+  font: normal 16px "Lucida Grande", Lucida, Arial, sans-serif;
+  margin: 0;
+  text-decoration: none;
+  margin-bottom: .3em;
+  cursor: pointer;
+  padding: .5em 1.2em;
+  display: inline-block;
+  border: { width: 1px; style: solid }
+  @include border-radius(.3em);
+  &:active, &:hover { outline: none }
+  @include transition(background-color,box-shadow .15s);
+}
+
+%nb-reset { @include nb-reset; }
+
+// Automate the gradient picking with simple color shifting
+
+@mixin nb-gradient($bg) {
+  // scale main color to pick
+  $top:      scale-color($bg, $lightness: if-bright($bg,80%,40%));
+  $middle-1: scale-color($bg, $lightness: if-bright($bg,20%,10%));
+  $middle-2: scale-color($bg, $lightness: if-bright($bg,-2%,-5%));
+  $bottom:   scale-color($bg, $lightness: if-bright($bg,-10%,-20%));
+
+  @include background-image(linear-gradient(
+    $top, $middle-1 50%, $middle-2 50%, $bottom));
+}
+
+
+@mixin nice-button($bg: #eee) {
+  @extend %nb-reset;
+
+  // Normal styles
+  background-color: $bg;
+  border-color: scale-color($bg, $lightness: -20%);
+  color: text-contrast($bg);
+  @include nb-gradient(rgba($bg, .7)); // alpha shows color transitions
+
+  text-shadow: scale-color($bg, $lightness: 
+    if-bright($bg,25%,-25%)) 0 1px 1px;
+  @include box-shadow(rgba(#fff, 
+    if-bright($bg,.6,.2)) 0 0 1px 1px inset);
+
+  // State styles
+  &:hover, &:focus {
+    background-color: scale-color($bg, $lightness: if-bright($bg, 85%, 25%));
+  }
+
+  &:active {
+    background: scale-color($bg,
+      $lightness: if-bright($bg, 25%, 10%));
+    border-color: rgba(#000, if-bright($bg, .4, .8)); 
+    @include box-shadow(
+      if-bright($bg,
+        rgba(mix($bg, #000, 25%), .4), rgba(mix($bg, #000), .9)
+      ) 0 2px 12px inset
+    );
+  }
+}

data/templates/project/demo.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html><html><head>
+<title>Nice Buttons - Demo</title>
+<link href="stylesheets/demo.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  <h1>Button Test</h1>
+  <button>Click Me!</button>
+  <a class="button" href="#">Click Me!</a>
+</body>
+</html>

data/templates/project/demo.scss

@@ -0,0 +1,17 @@
+@import 'nice-buttons';
+
+html {
+  text-align: center;
+  font-family: Helvetica, Arial, sans;
+  background: #f4f4f4;
+}
+body {
+  position: absolute;
+  top: 30px; left: 30px; bottom: 30px; right: 30px;
+  padding-top: 20px;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+} 
+
+button  { @include nice-button }
+.button { @include nice-button(#494e57) }

data/templates/project/manifest.rb

@@ -0,0 +1,11 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'demo.scss', :media => 'screen, projection'
+html 'demo.html'
+
+description "Create beautiful CSS3 buttons from a single color"
+help "This will install a demo (HTML and Scss) to show you how to use nice-buttons"
+welcome_message %Q{
+Example usage: button { @include nice-buttons(#444) }
+See demo.html and demo.scss for some examples.
+Enjoy!
+}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nice-buttons
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-10-16 00:00:00.000000000 Z
+date: 2012-11-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -49,15 +49,22 @@ email:
 executables: []
 extensions: []
 extra_rdoc_files: []
-files: []
+files:
+- README.md
+- LICENSE
+- lib/nice-buttons.rb
+- stylesheets/_color-helpers.scss
+- stylesheets/nice-buttons.scss
+- templates/project/demo.html
+- templates/project/demo.scss
+- templates/project/manifest.rb
+- templates/project/screenshot.png
 homepage: http://github.com/imathis/nice-buttons
 licenses: []
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
-- stylesheets
-- templates
 required_ruby_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -72,7 +79,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.24
+rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
 summary: Nice and easy CSS3 buttons for Compass users