google-buttons-sass 0.1.0

data/LICENSE

@@ -0,0 +1,14 @@
+Copyright 2011 Twitter, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+

data/README.md

@@ -0,0 +1,91 @@
+# Google Buttons for Sass
+## Based on [Thomas McDonald's Bootstrap-sass](https://github.com/thomas-mcdonald/bootstrap-sass) and [CSS3 Google Buttons by Tim O'Donnell](https://github.com/todc/css3-google-buttons)
+
+`google-buttons-sass` is an Sass-powered version of [CSS3 Google Buttons by Tim O'Donnell](https://github.com/todc/css3-google-buttons), ready to drop right into your Sass powered applications.
+
+This project requires [Twitter Bootstra](http://twitter.github.com/bootstrap), which can be installed via gem `bootstrap-sass`
+
+Enjoy.
+
+## Usage
+
+### Rails
+
+In your Gemfile:
+
+    gem 'sass-rails', '~> 3.1'
+    gem 'bootstrap-sass', '~> 2.0.4.0'
+    gem 'google-butons-sass', '~> 1.0'
+
+#### CSS
+
+Import "google-buttons" in your SCSS file of choice to get all of the styles, mixins and variables! We recommend against using `//= require` directives, since none of your other stylesheets will be [able to use](https://github.com/thomas-mcdonald/bootstrap-sass/issues/79#issuecomment-4428595) the awesome mixins that Bootstrap has defined.
+
+    @import "google-buttons";
+
+#### Javascripts
+
+You can include the javascript through two methods. In this case, Sprocket's `//= require` directives are useful, since there is no better alternative.
+
+We have a helper that includes all available javascripts:
+
+    //= require google-buttons
+
+You can also load individual modules, provided you sort out any related dependencies.
+
+    //= require bootstrap-popover (overrides Twitter Bootstrap's popover)
+    //= require google-select-dropdown
+    //= require google-select
+
+### Compass
+
+`google-buttons-sass`, thanks to Thomas's work on bootstrap-sass, comes with support for Compass, meaning projects that don't use Rails can get in on the fun Bootstrap web.
+
+#### New project
+
+Install the gem and create a new project using the gem.
+
+    gem install google-buttons-sass
+    compass create compass-test -r google-buttons-sass --using google-buttons
+
+This will sort a few things out:
+
+* You'll get a starting `styles.scss` ready for your alterations
+* You'll get a compiled stylesheet compiled & ready to drop into your application
+* We'll also copy the javascripts & images into their respective folders for you, absolutely free of charge! How cool is that?
+
+#### Existing project
+
+Install the gem, add the require statement to the top of your configuration file, and install the extension.
+
+    gem install google-buttons-sass
+
+    # In config.rb
+    require 'google-buttons-sass'
+
+    compass install google-buttons
+
+You'll get the same benefits as those starting from scratch. Radical.
+
+## Configuration
+Need to configure a variable or two? Simply define the value of the variable you want to change *before* importing Google Buttons. Sass will respect your existing definition rather than overwriting it with the Bootstrap defaults. A list of customisable variables can be found in the [Bootstrap documentation](http://twitter.github.com/bootstrap/less.html#variables).
+
+    $btnPrimaryBackground: #f00;
+    @import "google-buttons";
+
+**Note**: It's important that the file you are importing is not named `google-buttons`, since this will cause an import loop. As a general rule, errors are something you should try to avoid.
+
+### Passing multiple values to mixins
+
+Some CSS3 properties take multiple values, such as `box-shadow` or `text-shadow`. To pass multiple values to the Bootstrap mixins, you must escape the values or else the Sass parser will choke on the commas. Here's how to escape the values in Sass:
+
+    .selector {
+      @include box-shadow(#{0 2px 5px rgba(0,0,0,.25) inset, 0 -2px 5px rgba(0,0,0,.25) inset});
+    }
+
+### Bundler?
+
+    gem 'google-buttons-sass', '~> 1'
+
+## Who
+bootstrap-sass is a project by [Thomas McDonald](https://twitter.com/#!/thomasmcdonald_), with support from [other awesome people](https://github.com/thomas-mcdonald/bootstrap-sass/graphs/contributors).

data/lib/google-buttons-sass/compass_functions.rb

@@ -0,0 +1,10 @@
+# This contains functions for use with a project *only* using Compass.
+
+module Sass::Script::Functions
+  # Define asset_url for Compass to allow use of sprites.
+  def asset_url(asset, type)
+    asset_sans_quotes = asset.value.gsub('"', '')
+    path = Sass::Script::String.new("/#{type}s/#{asset_sans_quotes}", :string)
+    Sass::Script::String.new("url(#{path})")
+  end
+end

data/lib/google-buttons-sass/engine.rb

@@ -0,0 +1,7 @@
+module Bootstrap
+  module Rails
+    class Engine < ::Rails::Engine
+      # Rails, will you please look in our vendor? kthx
+    end
+  end
+end

data/lib/google-buttons-sass/rails_functions.rb

@@ -0,0 +1,14 @@
+require 'sass'
+
+module Sass::Script::Functions
+  # LARS: Snatched from compass - 2011-11-29 - used for gradients in IE6-9
+  # returns an IE hex string for a color with an alpha channel
+  # suitable for passing to IE filters.
+  def ie_hex_str(color)
+    assert_type color, :Color
+    alpha = (color.alpha * 255).round
+    alphastr = alpha.to_s(16).rjust(2, '0')
+    Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
+  end
+  declare :ie_hex_str, [:color]
+end

data/lib/google-buttons-sass.rb

@@ -0,0 +1,43 @@
+module Bootstrap
+  class FrameworkNotFound < StandardError; end
+
+  # Inspired by Kaminari
+  def self.load!
+    if compass? && asset_pipeline?
+      register_compass_extension
+      register_rails_engine
+    elsif compass?
+      # Only require compass extension if a standalone project
+      require 'google-buttons-sass/compass_functions'
+      register_compass_extension
+    elsif asset_pipeline?
+      require 'sass-rails' # See: https://github.com/thomas-mcdonald/bootstrap-sass/pull/4
+      register_rails_engine
+      require 'google-buttons-sass/rails_functions'
+    else
+      raise Bootstrap::FrameworkNotFound, "google-button-sass requires either Rails > 3.1 or Compass, neither of which are loaded"
+    end
+  end
+
+  private
+  def self.asset_pipeline?
+    defined?(::Rails) && ::Rails.version >= '3.1.0'
+  end
+
+  def self.compass?
+    defined?(::Compass)
+  end
+
+  def self.register_compass_extension
+    base = File.join(File.dirname(__FILE__), '..')
+    styles = File.join(base, 'vendor', 'assets', 'stylesheets')
+    templates = File.join(base, 'templates')
+    ::Compass::Frameworks.register('google-buttons', :stylesheets_directory => styles, :templates_directory => templates)
+  end
+
+  def self.register_rails_engine
+    require 'google-buttons-sass/engine'
+  end
+end
+
+Bootstrap.load!

data/templates/project/manifest.rb

@@ -0,0 +1,17 @@
+description "Google Buttons for Sass"
+
+# Stylesheet importing Google Buttons
+stylesheet 'styles.scss'
+
+# Other Google Button assets
+basedir = '../../vendor/assets'
+
+# Images
+%w(checkmark.png grey-disclosure-arrow-up-down.png).each do |file|
+  image "#{basedir}/images/#{file}.png", :to => "#{file}.png"
+end
+
+# Javascripts
+%w(bootstrap-popover google-select-dropdown.js google-select.js).each do |file|
+  javascript "#{basedir}/javascripts/#{file}.js", :to => "#{file}.js"
+end

data/templates/project/styles.scss

@@ -0,0 +1,3 @@
+// Use this instead of application.css, asset pipeline can be finicky
+@import "google-buttons";
+

data/vendor/assets/javascripts/bootstrap-popover.js

@@ -0,0 +1,98 @@
+/* ===========================================================
+ * bootstrap-popover.js v2.0.4
+ * http://twitter.github.com/bootstrap/javascript.html#popovers
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* POPOVER PUBLIC CLASS DEFINITION
+  * =============================== */
+
+  var Popover = function ( element, options ) {
+    this.init('popover', element, options)
+  }
+
+
+  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
+     ========================================== */
+
+  Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
+
+    constructor: Popover
+
+  , setContent: function () {
+      var $tip = this.tip()
+        , title = this.getTitle()
+        , content = this.getContent()
+
+      $tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
+      $tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)
+
+      $tip.removeClass('fade top bottom left right in')
+    }
+
+  , hasContent: function () {
+      return this.getTitle() || this.getContent()
+    }
+
+  , getContent: function () {
+      var content
+        , $e = this.$element
+        , o = this.options
+
+      content = $e.attr('data-content')
+        || (typeof o.content == 'function' ? o.content.call($e[0]) :  o.content)
+
+      return content
+    }
+
+  , tip: function () {
+      if (!this.$tip) {
+        this.$tip = $(this.options.template)
+      }
+      return this.$tip
+    }
+
+  })
+
+
+ /* POPOVER PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.popover = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('popover')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('popover', (data = new Popover(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.popover.Constructor = Popover
+
+  $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
+    placement: 'right'
+  , content: ''
+  , template: '<div class="popover"><div class="arrowbefore"></div><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
+  })
+
+}(window.jQuery);

data/vendor/assets/javascripts/google-buttons.js

@@ -0,0 +1,3 @@
+//= require bootstrap-popover
+//= require google-select-dropdown
+//= require google-select

data/vendor/assets/javascripts/google-select-dropdown.js

@@ -0,0 +1,89 @@
+/* ============================================================
+ * google-select-dropdown.js v1.0.0
+ * ============================================================
+ * This is currently the same as bootstrap-dropdown.js but I'm
+ * using a separate definition because I suspect it'll need to
+ * change.
+ * ============================================================ */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* DROPDOWN CLASS DEFINITION
+  * ========================= */
+
+  var toggle = '[data-toggle="g-select-dropdown"]'
+    , GSelectDropdown = function (element) {
+        var $el = $(element).on('click.g-select-dropdown.data-api', this.toggle)
+        $('html').on('click.g-select-dropdown.data-api', function () {
+          $el.parent().removeClass('open')
+        })
+      }
+
+  GSelectDropdown.prototype = {
+
+    constructor: GSelectDropdown
+
+  , toggle: function (e) {
+      var $this = $(this)
+        , $parent
+        , selector
+        , isActive
+
+      if ($this.is('.disabled, :disabled')) return
+
+      selector = $this.attr('data-target')
+
+      if (!selector) {
+        selector = $this.attr('href')
+        selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+      }
+
+      $parent = $(selector)
+      $parent.length || ($parent = $this.parent())
+
+      isActive = $parent.hasClass('open')
+
+      clearMenus()
+
+      if (!isActive) $parent.toggleClass('open')
+
+      return false
+    }
+
+  }
+
+  function clearMenus() {
+    $(toggle).parent().removeClass('open')
+  }
+
+
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
+  $.fn.gSelectDropdown = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('g-select-dropdown')
+      if (!data) $this.data('g-select-dropdown', (data = new GSelectDropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.gSelectDropdown.Constructor = GSelectDropdown
+
+
+  /* APPLY TO STANDARD DROPDOWN ELEMENTS
+   * =================================== */
+
+  $(function () {
+    $('html').on('click.g-select-dropdown.data-api', clearMenus)
+    $('body')
+      .on('click.g-select-dropdown', '.g-select-dropdown form', function (e) { e.stopPropagation() })
+      .on('click.g-select-dropdown.data-api', toggle, GSelectDropdown.prototype.toggle)
+  })
+
+}(window.jQuery);

data/vendor/assets/javascripts/google-select.js

@@ -0,0 +1,84 @@
+/* ===========================================================
+ * google-select.js v1.0.0
+ * http://todc.github.com/google-bootstrap
+ * =========================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* CLASS DEFINITION
+  * ================ */
+
+  var GSelect = function (element) {
+    var $el = $(element);
+    $el.hide();
+
+    var $container = $('<div>').addClass('btn-group');
+    var $btn = $('<a>', { text: 'Select...'}).addClass('btn g-select');
+    var $menu = $('<ul>').addClass('g-select-dropdown scrollable');
+
+    $btn.addClass($el.attr('class'));
+
+    $.each(element.options, function(i, opt) {
+      var $menuItem = $('<li>', { text: opt.text });
+
+      $menuItem.data('val', opt.value ? opt.value : opt.text);
+
+      $menu.append( $menuItem );
+    });
+
+    $el.after($container);
+    $container.append($btn);
+    $btn.after($menu);
+
+    $.each($menu.children(), function(i, menuItem) {
+      $(menuItem).click(function() {
+        $btn.text($(this).text());
+        $el.val($(this).data('val')).change();
+      })
+    })
+
+    $btn.gSelectDropdown();
+  }
+
+  GSelect.prototype = {
+
+    constructor: GSelect
+
+  , toggle: function (e) {
+      
+    }
+
+  }
+
+
+  /* DROPDOWN PLUGIN DEFINITION
+   * ========================== */
+
+  $.fn.gSelect = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('gSelect')
+      if (!data) $this.data('gSelect', (data = new GSelect(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.gSelect.Constructor = GSelect
+
+
+  /* APPLY TO STANDARD DROPDOWN ELEMENTS
+   * =================================== */
+/*
+  $(function () {
+    $('html').on('click.dropdown.data-api', clearMenus)
+    $('body')
+      .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
+      .on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
+  })
+*/
+
+}(window.jQuery);

data/vendor/assets/stylesheets/alerts.scss

@@ -0,0 +1,21 @@
+// ALERTS
+// -----------
+
+.alert {
+  padding: 8px 35px 8px 10px;
+  text-shadow: none;
+  @include border-radius(2px);
+  @include box-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+.alert-success,
+.alert-danger,
+.alert-error,
+.alert-info {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+.alert-danger,
+.alert-error {
+  border-color: darken($errorBackground, 20%);
+  color: #b94a48;
+}