icon-buttons 0.0.1

data/README.md

@@ -0,0 +1 @@
+This Compass plugin provides some easy to use mixins for creating buttons with icons.

data/lib/icon-buttons.rb

@@ -0,0 +1,3 @@
+require 'compass'
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('icon-buttons', :path => extension_path)

data/stylesheets/_icon-buttons.scss

@@ -0,0 +1,3 @@
+// Icon Buttons
+
+@import "icon-buttons/base";

data/stylesheets/icon-buttons/_base.scss

@@ -0,0 +1,146 @@
+@import "compass/utilities/general/clearfix";
+@import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+@import "compass/css3/images";
+
+// Some sane defaults
+$button-padding: 5px !default; // Space from border to icon and text to border
+$icon-right-margin: 5px !default; // Space between icon and text
+$gradient-percentage: 10% !default; // Difference between the gradient colors
+
+
+@mixin single-line-icon-button($icon-size : 16px, $font-size: 12px, $icon-class : ".icon",
+		$text-class : ".text", $gradient-base-color: #f7f7f7) {
+
+	@include default-button-styles($gradient-base-color);
+
+	// Instead of line-height: normal we'll set it to 1.2. This should be sufficient for most fonts.
+	// See this excellent piece from Eric Meyer for the reasons why line-height: normal is abnormal:
+	// http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
+	$line-height: 1.25;
+	$icon-margin: 0;
+
+	@if $icon-size > $font-size {
+		// Make the text height equal to the icon height for proper vertical alignment
+		$line-height: $icon-size;
+	} @else {
+		// Make the total icon height equal to the text height for proper vertical alignment
+		#{$icon-class} {
+			$icon-margin: (($line-height * $font-size) - $icon-size) / 2;
+			margin-top: $icon-margin;
+			margin-bottom: $icon-margin;
+		}
+	}
+
+	#{$icon-class} {
+		margin-right: $icon-right-margin;
+		height: $icon-size;
+		width: $icon-size;
+		display: block;
+		float: left;
+	}
+
+	#{$text-class} {
+		line-height: $line-height;
+		font-size: $font-size;
+		display: block;
+		float: left;
+	}
+}
+
+@mixin multi-line-icon-button($icon-size : 16px, $font-size-line1: 16px, $font-size-line2: 10px,
+		$icon-class : ".icon", $text-line1-class : ".line1", $text-line2-class : ".line2", $gradient-base-color: #f7f7f7) {
+
+	@include default-button-styles($gradient-base-color);
+
+	$margin-between-text: 5px !default;
+	$line-height-line1: 1.25;
+	$line-height-line2: 1.25;
+
+	$total-text-height: $line-height-line1 * $font-size-line1 + $line-height-line2 * $font-size-line2;
+	@if $icon-size > $total-text-height {
+		// Make the text height equal to the icon height for proper vertical alignment
+		$text-margin: ($icon-size - $total-text-height) / 2;
+		#{$text-line1-class} {
+			margin-top: $text-margin;
+		}
+		#{$text-line2-class} {
+			margin-bottom: $text-margin;
+		}
+	} @else {
+		// Make the total icon height equal to the total text height for proper vertical alignment
+		#{$icon-class} {
+			$icon-margin: ($total-text-height - $icon-size) / 2;
+			margin-top: $icon-margin;
+			margin-bottom: $icon-margin;
+		}
+	}
+
+	#{$icon-class} {
+		margin-right: $icon-right-margin;
+		line-height: $line-height-line1;
+		height: $icon-size;
+		width: $icon-size;
+		display: block;
+		float: left;
+	}
+
+	#{$text-line1-class} {
+		margin-left: $icon-size + $icon-right-margin;
+		margin-bottom: $margin-between-text;
+		font-size: $font-size-line1;
+		white-space: nowrap;
+		display: block;
+	}
+
+	#{$text-line2-class} {
+		margin-left: $icon-size + $icon-right-margin;
+		line-height: $line-height-line2;
+		font-size: $font-size-line2;
+		white-space: nowrap;
+		display: block;
+	}
+}
+
+@mixin default-button-styles($gradient-base-color: #f7f7f7, $border-color: #ccc, $text-color: #000) {
+
+	$normal-gradient-start-color: $gradient-base-color;
+	$normal-gradient-stop-color: darken($gradient-base-color, $gradient-percentage);
+	$hover-gradient-start-color: $gradient-base-color;
+	$hover-gradient-stop-color: darken($gradient-base-color, $gradient-percentage * 2);
+	$active-gradient-start-color: darken($gradient-base-color, $gradient-percentage * 2);
+	$active-gradient-stop-color: $gradient-base-color;
+
+	text-decoration: none;
+	padding: $button-padding;
+	-moz-box-sizing: border-box !important;
+	display: inline-block;
+
+	border: 1px solid $border-color;
+	@include border-radius(3px);
+
+	background: $normal-gradient-start-color;
+	@include filter-gradient($normal-gradient-start-color, $normal-gradient-stop-color);
+	@include background-image(linear-gradient($normal-gradient-start-color, $normal-gradient-stop-color));
+
+	@include box-shadow(inset rgba(255,255,255,0.5) 0 1px 0);
+
+	color: $text-color;
+	cursor: pointer;
+	outline: none !important;
+
+	&:hover,
+	&:focus {
+		border: 1px solid darken($gradient-base-color, $gradient-percentage * 3.025);;
+		background: darken($gradient-base-color, $gradient-percentage / 2);
+		@include filter-gradient($hover-gradient-start-color, $hover-gradient-stop-color);
+		@include background-image(linear-gradient($hover-gradient-start-color, $hover-gradient-stop-color));
+	}
+
+	&:active,
+	&.active {
+		background: darken($gradient-base-color, $gradient-percentage * 1.25);
+		@include filter-gradient($active-gradient-start-color, $active-gradient-stop-color);
+		@include background-image(linear-gradient($active-gradient-start-color, $active-gradient-stop-color));
+	}
+}

data/templates/project/_buttons.scss

@@ -0,0 +1,44 @@
+@import "icon-buttons";
+
+/*
+ * This is where you combine compass-icon-buttons with the spriting magic of Compass
+ *
+ * See http://compass-style.org/help/tutorials/spriting/ for more info on spriting
+ *
+ * We're using the famous famfamfam silk icons here. See http://www.famfamfam.com/lab/icons/silk/
+ */
+@import "silk/*.png";
+@include all-silk-sprites;
+
+/*
+ * Here we'll mix it with our own styles
+ *
+ * First up: the single line buttons
+ */
+.single-button-default {
+	@include single-line-icon-button();
+}
+.single-button-huge {
+	// Font-size larger than icon-size
+	// Calling the mixin with just values (1st is icon-size, 2nd is font-size)
+	@include single-line-icon-button(16px, 24px);
+
+	// Define custom styles to override the defaults
+	padding-left: 10px;
+	padding-right: 10px;
+}
+/*
+ * Then, some multi line buttons
+ */
+.multi-button-default {
+	@include multi-line-icon-button();
+}
+.multi-button-huge {
+	@include multi-line-icon-button(16px, 24px, 15px);
+	// Define custom styles to override the defaults for this instance
+	padding-left: 10px;
+	padding-right: 10px;
+	.icon {
+		margin-right: 10px;
+	}
+}

data/templates/project/buttons.html

@@ -0,0 +1,18 @@
+<a href="#" class="single-button-default" title="accept">
+	<span class="icon silk-accept"></span>
+	<span class="text">Accept</span>
+</a>
+<a href="#" class="single-button-huge" title="accept">
+	<span class="icon silk-accept"></span>
+	<span class="text">Accept</span>
+</a>
+<a href="#" class="multi-button-default" title="accept">
+	<span class="icon silk-accept"></span>
+	<span class="line1">Order now!</span>
+	<span class="line2">and save 25%</span>
+</a>
+<a href="#" class="multi-button-huge" title="accept">
+	<span class="icon silk-accept"></span>
+	<span class="line1">Order now!</span>
+	<span class="line2">and save 25%</span>
+</a>

data/templates/project/manifest.rb

@@ -0,0 +1,16 @@
+description "buttons with sprited icons, create single line or multi line buttons with ease."
+
+stylesheet '_buttons.scss', :media => 'screen, projection'
+html 'buttons.html'
+image 'silk/accept.png'
+image 'silk/add.png'
+
+help %Q{
+Installs some html, a stylesheet partial and some images that
+you can use directly or refer to as an example.
+}
+
+welcome_message %Q{
+In buttons.html you will find some example markup for the icon buttons. In the stylesheet partial you can see how to
+use the library and apply it to your markup.
+}

metadata

@@ -0,0 +1,87 @@
+--- !ruby/object:Gem::Specification 
+name: icon-buttons
+version: !ruby/object:Gem::Version 
+  hash: 29
+  prerelease: 
+  segments: 
+  - 0
+  - 0
+  - 1
+  version: 0.0.1
+platform: ruby
+authors: 
+- Leon de Rijke
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-12-07 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 29
+        segments: 
+        - 0
+        - 11
+        version: "0.11"
+  type: :runtime
+  version_requirements: *id001
+description: icon buttons for compass
+email: leon@leonderijke.nl
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- lib/icon-buttons.rb
+- stylesheets/_icon-buttons.scss
+- stylesheets/icon-buttons/_base.scss
+- templates/project/_buttons.scss
+- templates/project/buttons.html
+- templates/project/manifest.rb
+- templates/project/silk/accept.png
+- templates/project/silk/add.png
+homepage: http://www.leonderijke.nl/
+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: 
+rubygems_version: 1.8.11
+signing_key: 
+specification_version: 3
+summary: icon buttons for compass
+test_files: []
+