compass-helium 0.0.1

data/README.md

@@ -0,0 +1,47 @@
+# ![compass-helium](http://i.imgur.com/p9qAv.png)
+
+This scaffolding is meant to encourage rapid development with Compass Extensions. Customize everything, make it your own! Build and publishing instructions are in the gemspec file.
+
+## Contribute
+Please fork this repository, then submit a pull request with your changes in a new branch.
+
+## Installation
+
+### Bundler
+If you want to bundle into your app, install bundler.
+
+	$ gem install bundler
+
+With Bundler installed, add this to your Gemfile.
+
+	group :assets do
+		gem 'compass-helium'
+	end
+
+Run this in the command line:
+
+	$ bundle install
+	$ git add Gemfile Gemfile.lock
+
+### Manual
+If bundler isn't your thing, install this gem.
+
+	$ gem install compass-helium
+
+Next in your Compass project add this to your config.rb
+
+	require 'compass-helium'
+
+## Documentation
+
+To get started install into your project.
+
+	compass install compass-helium
+
+Then verify it's installed.
+
+	compass help compass-helium
+
+## Credits
+
+This Compass extension for [helium](https://github.com/cbrauckmuller/helium) was created by **[Stephen Way](https://twitter.com/stephencway)**

data/lib/compass-helium.rb

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

data/stylesheets/_compass-helium.scss

@@ -0,0 +1,17 @@
+// Compass files first
+@import "compass/css3";
+@import "compass/reset";
+
+// Import core files in this order
+@import "compass-helium/config";
+@import "compass-helium/utilities";
+@import "compass-helium/grid";
+@import "compass-helium/type";
+
+// Optional components
+@import "compass-helium/webfonts";
+@import "compass-helium/forms";
+@import "compass-helium/buttons";
+@import "compass-helium/navs";
+@import "compass-helium/dropdowns";
+@import "compass-helium/modals";

data/stylesheets/compass-helium/buttons.scss

@@ -0,0 +1,520 @@
+// Button sizing
+// -------------
+
+@mixin button-size($height, $font-size, $border-width, $border-color, $horizontal-padding) {
+	
+	height: $height;
+	padding: ($height - $font-size - ($border-width * 2)) / 2 $horizontal-padding;
+	font-size: $font-size;	
+}
+
+// Button border
+// -------------
+
+@mixin button-border($theme) {
+	@if $theme == "glossy" {
+		border-color: $button-border-color;
+	}
+	
+	@if $theme == "flat" {
+		border-color: $button-border-color;
+	}
+}
+
+// Button theme
+// ------------
+
+@mixin button-theme($theme) {
+	@if $theme == "glossy" {
+		@include background-image(
+			linear-gradient(
+				top, 
+				$button-highlight 1px, 
+				$button-shine 1px, 
+				$button-shine 2px, 
+				$button-highlight 2px, 
+				$button-lowlight 100%
+			)
+		);
+		@include box-shadow($button-box-shadow);
+		text-shadow: 0px 1px 0px $button-shine;
+	}
+	
+	@if $theme == "flat" {
+		background: $button-solid-background;
+	}	
+}
+
+// Custom colored buttons
+// ----------------------
+
+@mixin button-custom(
+	$theme, 
+	$background-color, 
+	$text-color, 
+	$reversed: false
+) {
+
+	@if $theme == "glossy" {
+		@include background-image(
+			linear-gradient(
+				top, 
+				lighten($background-color, 5%) 1px, 
+				lighten($background-color, 10%) 1px, 
+				lighten($background-color, 10%) 2px, 
+				lighten($background-color, 5%) 2px, 
+				darken($background-color, 5%) 100%
+			)
+		);	
+	}
+	
+	@if $theme == "flat" {
+		background: $background-color;
+	}
+	
+	@if $reversed == true {
+		text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+		@include box-shadow(0px 1px 0px rgba(0,0,0,0.2));
+	}
+	
+	@if $reversed == false {
+		text-shadow: 0px 1px 0px rgba(0,0,0,0.2);
+	}
+
+	color: $text-color;
+
+	&:hover {
+
+		@if $theme == "glossy" {
+			@include background-image(
+				linear-gradient(
+					top, 
+					lighten($background-color, 10%) 1px, 
+					lighten($background-color, 15%) 1px, 
+					lighten($background-color, 15%) 2px, 
+					lighten($background-color, 15%) 2px, 
+					darken($background-color, 0%) 100%
+				)
+			);
+		}
+
+		@if $theme == "flat" {
+			background: lighten($background-color, 5%);
+		}
+	}
+
+	&:active,
+	&.active {
+
+		@if $theme == "glossy" {	
+			@include background-image(
+				linear-gradient(
+					top, 
+					darken($background-color, 5%) 0%,
+					$background-color 100% 
+				)
+			);
+			@include box-shadow(inset 0px 1px 2px rgba(0,0,0,0.15));
+		}
+		
+		@if $theme == "flat" {
+			background: darken($background-color, 5%);
+		}
+	}
+}
+
+// Base button styles
+// ------------------
+
+.button {
+
+	@include clearfix();
+ 	@include background-origin(border-box);
+ 	@include background-clip(border-box);
+	@include border-radius($button-border-radius);
+  	@include button-size($button-height, $button-font-size, $button-border-width, $button-border-color, $button-horizontal-padding);
+  	@include button-border($button-theme);
+  	@include button-theme($button-theme);
+  	
+  	display: inline-block;
+	margin: 0 $base-font-size / 4 0 0;
+	border-width: $button-border-width;
+	border-style: solid;
+	cursor: pointer;
+	
+	color: $button-font-color;
+	font-family: $button-font-family;
+	font-weight: $button-font-weight;
+	line-height: 1;
+	text-align: center;
+  	text-decoration: none;
+	vertical-align: middle;
+
+	// Last child
+	// ----------
+	
+	&:last-child {
+		margin-right: 0;
+	}
+	
+	// Button icons
+	// ------------
+	
+	.icon {
+		position: relative;
+		vertical-align: top;
+		top: ($button-font-size - $button-icon-size) / 2;
+	}
+	
+	// Buttons with icon dividers
+	// --------------------------
+	
+	&.has-icon-divider {
+		position: relative;
+		
+		.icon.icon-prepend {
+			margin-right: ($button-font-size * 1.8);
+		}
+		
+		&:before {
+			@include pseudo();
+			width: 1px;
+			height: 100%;
+			background: $button-border-color;
+			left: $button-horizontal-padding + $button-icon-size + $button-font-size - 2;
+			top: 0px;
+		}
+	}
+	
+	// Hover state
+	// -----------
+	
+	&:hover {
+
+		@if $button-theme == "glossy" {
+
+  		@include background-image(
+  			linear-gradient(
+  				top, 
+  				$button-shine 0px, 
+  				lighten($button-highlight, 3%) 1px, 
+  				lighten($button-lowlight, 3%) 100%
+  			)
+  		);
+  		
+  		}
+  		
+  		@if $button-theme == "flat" {
+	  		background: lighten($button-solid-background, 5%);
+  		}
+		
+		color: $button-font-color;
+		text-decoration: none;		
+	}
+
+	// Active state
+	// ------------
+	
+	&:active,
+	&.active {
+
+		@if $button-theme == "glossy" {
+			@include background-image(
+				linear-gradient(
+					top, 
+					$button-lowlight 0px, 
+					$button-highlight 100%
+				)
+			);
+			@include box-shadow(inset 0px 1px 2px rgba(0,0,0,0.15));
+		}
+		
+		@if $button-theme == "flat" {
+			background: darken($button-solid-background, 5%);
+		}
+	}
+	
+	// Focus state 
+	// -----------
+	
+	&:focus {
+		outline: none;
+	}
+
+	// Large buttons
+	// -------------
+	
+	&.button-large {
+
+		$height: $button-large-height;
+		$font-size: $button-large-font-size;
+		$border-width: $button-border-width;
+		$border-color: $button-border-color;
+		$horizontal-padding: $button-large-horizontal-padding;
+
+		@include button-size($height, $font-size, $border-width, $border-color, $horizontal-padding);
+		
+		.icon {
+			top: ($font-size - $button-icon-size) / 2;
+		}
+
+		&.has-icon-divider {
+			
+			.icon.icon-prepend {
+				margin-right: $horizontal-padding * 2;
+			}
+			
+			&:before {
+				left: $horizontal-padding + $button-icon-size + $horizontal-padding - 2;
+			}
+		}
+	}
+	
+	// Small buttons
+	// -------------
+	
+	&.button-small {
+		
+		$height: $button-small-height;
+		$font-size: $button-small-font-size;
+		$border-width: $button-border-width;
+		$border-color: $button-border-color;
+		$horizontal-padding: $button-small-horizontal-padding;
+
+		@include button-size($height, $font-size, $border-width, $border-color, $horizontal-padding);
+
+		.icon {
+			top: ($font-size - $button-icon-size) / 2;
+		}
+		
+		&.has-icon-divider {
+			
+			.icon.icon-prepend {
+				margin-right: $horizontal-padding * 2;
+			}
+			
+			&:before {
+				left: $horizontal-padding + $button-icon-size + $horizontal-padding - 2;
+			}
+		}
+	}
+	
+	// Pill buttons
+	// ------------
+	
+	&.button-pill {
+		@include border-radius(100px);
+		padding-left: 1.5em;
+		padding-right: 1.5em;	
+	}
+	
+	// Custom buttons
+	// --------------
+	
+	&.button-facebook {
+		@include button-custom(
+			$theme: $button-theme, 
+			$background-color: $facebook-blue, 
+			$text-color: #fff, 
+			$reversed: true	
+		);
+	}
+
+	&.button-twitter {
+		@include button-custom(
+			$theme: $button-theme, 
+			$background-color: darken($twitter-blue, 5%), 
+			$text-color: #fff, 
+			$reversed: true	
+		);
+	}
+	
+	// Disabled buttons
+	// ----------------
+	
+	&.button-disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+}
+
+// Button dropdowns
+// ----------------
+
+.has-dropdown.button-dropdown {
+	display: inline-block;
+	margin-right: $base-font-size / 4; // Add back button right margin
+	
+	.button {
+		margin-right: 0; // Remove button right margin so button and container are coterminous
+		padding-right: ($button-horizontal-padding * 1.5) + ($button-caret-height * 2);
+
+		.caret {
+			display: block;
+			position: absolute;
+			top: 0;
+			right: $button-horizontal-padding;
+			width: $navbar-caret-height * 2;
+			height: $button-height;
+			
+			&:after {
+				@include css-triangle($navbar-caret-height, $button-font-color, top);
+				position: absolute;
+				top: ($button-height / 2) - ($navbar-caret-height / 2);
+				left: 0;
+			}
+		}
+	}
+	
+	.dropdown {
+		left: 0;
+		margin-top: -1px;
+		@include border-radius(0 $small-border-radius $small-border-radius $small-border-radius);
+		
+		&.right {
+			left: auto;
+			right: 0;
+			@include border-radius($small-border-radius 0 $small-border-radius $small-border-radius);
+
+		}
+		
+		> li {
+			> a {
+				padding-left: $button-horizontal-padding;
+				padding-right: $button-horizontal-padding;
+			}
+		}
+	}
+	
+	&.open {
+		
+		> .button {
+			
+			@if $button-theme == "glossy" {
+				@include box-shadow($dropdown-box-shadow);
+			}
+			
+			@if $button-theme == "flat" {
+				border-color: $button-border-color;
+			}
+					
+			@include border-radius($button-border-radius $button-border-radius 0 0);
+			
+			background: $dropdown-background;
+			color: $base-font-color;
+			text-shadow: none;
+		}
+	}
+}
+
+// Button groups
+// -------------
+
+.button-group {
+	
+	@include clearfix();
+	display: inline-block;
+	vertical-align: middle;
+	margin: 0 $base-font-size / 4 0 0;
+	
+	> * {
+		float: left;
+	}
+	
+	.button {
+		@include border-radius(0);
+		margin-right: 0;
+
+		@if $button-theme == "glossy" {
+			border-right: none;
+		}
+		
+		@if $button-theme == "flat" {
+			border-right-color: $button-border-color;
+		}
+	}
+	
+	> .button {
+		
+		&:first-child {
+			@include border-radius($button-border-radius 0 0 $button-border-radius);
+		}
+
+		&:last-child {
+			@include border-radius(0 $button-border-radius $button-border-radius 0);
+			@include button-border($button-theme);
+			border-right-style: solid;
+			border-right-width: $button-border-width;
+		}
+	}
+	
+	// Dropdowns in button groups
+	// --------------------------
+	
+	.has-dropdown.button-dropdown {
+
+		margin-right: 0;
+		
+		.dropdown {
+			@include border-radius(0 0 $small-border-radius $small-border-radius);
+		}
+		
+		&:first-child {
+			.button {
+				@include border-radius($button-border-radius 0 0 $button-border-radius);
+			}
+		}
+		
+		&:last-child {
+			.button {
+				@include border-radius(0 $button-border-radius $button-border-radius 0);
+				@include button-border($button-theme);
+				border-right-style: solid;
+				border-right-width: $button-border-width;
+
+				@if $button-theme == "flat" {
+					border-left: none;
+				}
+			}
+		}
+		
+		&.open {
+			.button {
+				@include border-radius(0);
+				
+				@if $button-theme == "flat" {
+					border-color: $button-border-color;
+				}
+			}
+			
+			&:first-child {
+				.button {
+					@include border-radius($button-border-radius 0 0 0);
+				}				
+			}
+			
+			&:last-child {
+				.button {
+					@include border-radius(0 $button-border-radius 0 0);
+				}				
+			}
+		}
+	}
+}
+
+// Button icons
+// ------------
+
+.icon {
+	font-family: "Entypo";
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	@include border-radius(100px);
+	background: rgba(0,0,0,0.2);
+	vertical-align: middle;
+	
+	&.icon-prepend {
+		margin-right: 0.8em;
+	}
+}