particle 1.0

data/README.md

@@ -0,0 +1,53 @@
+Particle
+--------
+
+This is my Sass playground, enjoy! It's a compass plugin and has an assortment of handy tools and libraries.
+
+##Installation
+
+From the command line:
+
+```
+gem install particle
+```
+
+Add to your project:
+
+Rails: compass.config, config.rb
+
+```
+require 'particle'
+```
+
+Command line:
+
+```
+compass install particle
+```
+    
+Or create a new project:
+
+```
+compass -r particle -f particle project_directory
+```
+
+## Usage
+
+```
+@include particle;
+```
+
+## Contact
+
+Stephen Way
+
+- http://github.com/stephenway
+- http://twitter.com/stephencway
+- http://alpha.app.net/stephenway
+- stephencway@me.com
+
+## License
+
+Copyright (c) 2010-2012 Stephen Way
+All Rights Reserved.
+Released under a [slightly modified MIT License][license].

data/lib/particle.rb

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

data/stylesheets/_particle.scss

@@ -0,0 +1,2 @@
+@import "particle/css3";
+@import "particle/typography";

data/stylesheets/particle/_css3.scss

@@ -0,0 +1,5 @@
+@import "particle/css3/blend-modes";
+@import "particle/css3/drop-shadow";
+@import "particle/css3/gradient";
+@import "particle/css3/noise";
+@import "particle/css3/rotate";

data/stylesheets/particle/_layout.scss

@@ -0,0 +1,5 @@
+@import "particle/layout/apprise";
+@import "particle/layout/images";
+@import "particle/layout/jquery-ui";
+@import "particle/layout/slider";
+@import "particle/layout/ui";

data/stylesheets/particle/_typography.scss

@@ -0,0 +1,3 @@
+@import "particle/typography/render-fix";
+@import "particle/typography/legible-color-text";
+@import "particle/typography/text-replacement";

data/stylesheets/particle/css3/_blend-modes.scss

@@ -0,0 +1,367 @@
+// Source: https://github.com/heygrady/scss-blend-modes
+
+//--------------------------------
+// Normal
+//--------------------------------
+@function blend-normal ($blend, $base) {
+	$opacity: opacity($blend);
+	$base-opacity: opacity($base);
+
+	// calculate opacity
+	$red: red($blend) * $opacity + red($base) * $base-opacity * (1 - $opacity);
+	$green: green($blend) * $opacity + green($base) * $base-opacity * (1 - $opacity);
+	$blue: blue($blend) * $opacity + blue($base) * $base-opacity * (1 - $opacity);
+	@return rgb($red, $green, $blue);
+}
+
+//--------------------------------
+// Multiply
+//--------------------------------
+@function blend-multiply ($blend, $base) {
+	$red: red($base) * red($blend) / 255;
+	$green: green($base) * green($blend) / 255;
+	$blue: blue($base) * blue($blend) / 255;
+	
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+//--------------------------------
+// Lighten
+//--------------------------------
+@function blend-lighten ($blend, $base) {
+  $red: blend-lighten-color(red($blend), red($base));
+  $green: blend-lighten-color(green($blend), green($base));
+  $blue: blend-lighten-color(blue($blend), blue($base));
+  
+  @return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-lighten-color($blend, $base) {
+  @if $base > $blend {
+    $blend: $base;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Darken
+//--------------------------------
+@function blend-darken ($blend, $base) {
+  $red: blend-darken-color(red($blend), red($base));
+  $green: blend-darken-color(green($blend), green($base));
+  $blue: blend-darken-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-darken-color($blend, $base) {
+  @if $base < $blend {
+    $blend: $base;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Darker Color
+//--------------------------------
+@function blend-darkercolor ($blend, $base) {
+	$red: red($blend);
+	$green: green($blend);
+	$blue: blue($blend);
+	$base-red: red($base);
+	$base-green: green($base);
+	$base-blue: blue($base);
+	
+	@if $base-red * 0.3 + $base-green * 0.59 + $base-blue * 0.11 <= $red * 0.3 + $green * 0.59 + $blue * 0.11 {
+		$red: $base-red;
+		$green: $base-green;
+		$blue: $base-blue;
+	}
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+//--------------------------------
+// Lighter Color
+//--------------------------------
+@function blend-lightercolor ($blend, $base) {
+	$red: red($blend);
+	$green: green($blend);
+	$blue: blue($blend);
+	$base-red: red($base);
+	$base-green: green($base);
+	$base-blue: blue($base);
+	
+	@if $base-red * 0.3 + $base-green * 0.59 + $base-blue * 0.11 > $red * 0.3 + $green * 0.59 + $blue * 0.11 {
+		$red: $base-red;
+		$green: $base-green;
+		$blue: $base-blue;
+	}
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+//--------------------------------
+// Linear Dodge
+//--------------------------------
+@function blend-lineardodge ($blend, $base) {
+  $red: blend-lineardodge-color(red($blend), red($base));
+  $green: blend-lineardodge-color(green($blend), green($base));
+  $blue: blend-lineardodge-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-lineardodge-color($blend, $base) {
+  @if $base + $blend > 255 {
+    $blend: 255;
+  }
+  @else {
+    $blend: $base + $blend;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Linear Burn
+//--------------------------------
+@function blend-linearburn ($blend, $base) {
+  $red: blend-linearburn-color(red($blend), red($base));
+  $green: blend-linearburn-color(green($blend), green($base));
+  $blue: blend-linearburn-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-linearburn-color($blend, $base) {
+  @if $base + $blend < 255 {
+    $blend: 0;
+  }
+  @else {
+    $blend: $base + $blend - 255;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Difference
+//--------------------------------
+@function blend-difference ($blend, $base) {
+	$red: abs(red($base) - red($blend));
+	$green: abs(green($base) - green($blend));
+	$blue: abs(blue($base) - blue($blend));
+	
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+//--------------------------------
+// Screen
+//--------------------------------
+@function blend-screen ($blend, $base) {
+	$red: red($blend);
+	$green: green($blend);
+	$blue: blue($blend);
+	$base-red: red($base);
+	$base-green: green($base);
+	$base-blue: blue($base);
+	
+
+	$red: (255 - ( ((255 - $red) * (255 - $base-red)) / 256));
+	$green: (255 - ( ((255 - $green) * (255 - $base-green)) / 256));
+	$blue: (255 - ( ((255 - $blue) * (255 - $base-blue)) / 256));
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+//--------------------------------
+// Exclusion
+//--------------------------------
+@function blend-exclusion ($blend, $base) {
+	$red: red($blend);
+	$green: green($blend);
+	$blue: blue($blend);
+	$base-red: red($base);
+	$base-green: green($base);
+	$base-blue: blue($base);
+	
+
+	$red: $base-red - ($base-red * $blend-div - 1) * $red;
+	$green: $base-green - ($base-green * $blend-div - 1) * $green;
+	$blue: $base-blue - ($base-blue * $blend-div - 1) * $blue;
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+//--------------------------------
+// Overlay
+//--------------------------------
+@function blend-overlay ($blend, $base) {
+  $red: blend-overlay-color(red($blend), red($base));
+  $green: blend-overlay-color(green($blend), green($base));
+  $blue: blend-overlay-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-overlay-color($blend, $base) {
+  @if $base <= 255 / 2 {
+    $blend: (2 * $base * $blend) / 255;
+  } @else {
+    $blend: 255 - (255 - 2 * ($base - (255 / 2))) * (255 - $blend) / 255;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Soft Light
+//--------------------------------
+@function blend-softlight ($blend, $base) {
+  $red: blend-softlight-color(red($blend), red($base));
+  $green: blend-softlight-color(green($blend), green($base));
+  $blue: blend-softlight-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-softlight-color($blend, $base) {
+  @if $base < 128 {
+    $blend: (($blend / 2) + 64) * $base * $blend-div;
+  } @else {
+    $blend: 255 - (191 - ($blend / 2)) * (255 - $base) * $blend-div;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Hard Light
+//--------------------------------
+@function blend-hardlight ($blend, $base) {
+  $red: blend-hardlight-color(red($blend), red($base));
+  $green: blend-hardlight-color(green($blend), green($base));
+  $blue: blend-hardlight-color(blue($blend), blue($base));
+  
+  @return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-hardlight-color($blend, $base) {
+  $tmp-blend: $blend;
+  @if $tmp-blend < 128 {
+    $blend: $base * $tmp-blend * $blend-div;
+  } @else {
+    $blend: 255 - (255-$base) * (255-$tmp-blend) * $blend-div;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Color Dodge
+//--------------------------------
+@function blend-colordodge ($blend, $base) {
+  $red: blend-colordodge-color(red($blend), red($base));
+  $green: blend-colordodge-color(green($blend), green($base));
+  $blue: blend-colordodge-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-colordodge-color($blend, $base) {
+  $tmp: $base * 256 / (255 - $blend);
+  @if $tmp > 255 or $blend == 255 {
+    $blend: 255;
+  } @else {
+    $blend: $tmp;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Color Burn
+//--------------------------------
+@function blend-colorburn ($blend, $base) {
+  $red: blend-colorburn-color(red($blend), red($base));
+  $green: blend-colorburn-color(green($blend), green($base));
+  $blue: blend-colorburn-color(blue($blend), blue($base));
+
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-colorburn-color($blend, $base) {
+  $tmp: (256 - ((255 - $base) * 256) / $blend);
+  
+  // TODO: hacked to replicate photoshop
+  @if $blend == 0 {
+    $blend: 255;
+  } @elseif $tmp < 0 {
+    $blend: 0;
+  } @else {
+    $blend: $tmp;
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Linear Light
+//--------------------------------
+@function blend-linearlight ($blend, $base) {
+	$red: blend-linearlight-color(red($blend), red($base));
+	$green: blend-linearlight-color(green($blend), green($base));
+	$blue: blend-linearlight-color(blue($blend), blue($base));
+
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+@function blend-linearlight-color($blend, $base) {
+  @if $blend < 128 {
+    $blend: blend-linearburn-color($base, 2 * $blend);
+  } @else {
+    $blend: blend-lineardodge-color($base, 2 * ($blend - 128));
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Vivid Light
+//--------------------------------
+@function blend-vividlight ($blend, $base) {
+	$red: blend-vividlight-color(red($blend), red($base));
+	$green: blend-vividlight-color(green($blend), green($base));
+	$blue: blend-vividlight-color(blue($blend), blue($base));
+	
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+@function blend-vividlight-color($blend, $base) {
+  @if $blend < 128 {
+    $blend: blend-colorburn-color(2 * $blend, $base);
+  } @else {
+    $blend: blend-colordodge-color(2 * ($blend - 128), $base);
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Pin Light
+//--------------------------------
+@function blend-pinlight ($blend, $base) {
+  $red:   blend-pinlight-color(red($blend), red($base));
+  $green: blend-pinlight-color(green($blend), green($base));
+  $blue:  blend-pinlight-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+@function blend-pinlight-color($blend, $base) {
+  @if $blend < 128 {
+    $blend: blend-darken-color($base, 2 * $blend);
+  } @else {
+    $blend: blend-lighten-color($base, 2 * ($blend - 128));
+  }
+  @return $blend;
+}
+
+//--------------------------------
+// Hard Mix
+//--------------------------------
+@function blend-hardmix ($blend, $base) {
+  $red: blend-hardmix-color(red($blend), red($base));
+  $green: blend-hardmix-color(green($blend), green($base));
+  $blue: blend-hardmix-color(blue($blend), blue($base));
+  
+	@return blend-normal(rgba($red, $green, $blue, opacity($blend)), $base);
+}
+
+@function blend-hardmix-color($blend, $base) {
+  $tmp: blend-vividlight-color($blend, $base);
+  @if $tmp < 128 {
+    $blend: 0;
+  } @else {
+    $blend: 255;
+  }
+  @return $blend;
+}

data/stylesheets/particle/css3/_drop-shadow.scss

@@ -0,0 +1,18 @@
+$default-drop-shadow-color:    #aaa !default;
+$default-drop-shadow-h-offset: 0px  !default;
+$default-drop-shadow-v-offset: 0px  !default;
+$default-drop-shadow-blur:     1px  !default;
+
+@mixin drop-shadow(
+	$color: $default-drop-shadow-color,
+	$offX: $default-drop-shadow-h-offset,
+	$offY: $default-drop-shadow-v-offset,
+	$blur: $default-drop-shadow-blur
+) {
+	@if $color == none {
+		text-shadow: none;
+	} @else {
+		text-shadow: $color $offX $offY $blur;
+		filter: dropshadow(color=#{$color}, offX=#{$offX}, offY=#{$offY});
+	}
+}

data/stylesheets/particle/css3/_gradient.scss

@@ -0,0 +1,41 @@
+@import "compass/css3/images";
+
+// Gradient Mixins
+@mixin gradient($start, $end, $direction: top) {
+	@include background(linear-gradient($direction, $start, $end));
+	@include filter-gradient($start, $end);
+	background-color: mix($start, $end);
+} //@mixin…
+
+// Credit Brandon Mathis
+@mixin gradient-bg($color, $top: 5, $bottom: $top) {
+	@if $top < 0 and $bottom < 0 {
+		$color1: darken($color, abs($top));
+		$color2: lighten($color, abs($bottom));
+		@include background(linear-gradient(top, $color1, $color2));
+		@include filter-gradient($color1, $color2);
+	} //@if…
+	@else {
+		$color1: lighten($color, abs($top));
+		$color2: darken($color, abs($bottom));
+		@include background(linear-gradient(top, $color1, $color2));
+		@include filter-gradient($color1, $color2);
+	} //@else…
+	background-color: $color !important;
+} //@mixin…
+
+@mixin gradient-inverse-bg($color, $top: 5, $bottom: $top) {
+	@if $top < 0 and $bottom < 0 {
+		$color1: darken($color, abs($top));
+		$color2: lighten($color, abs($bottom));
+		@include background(linear-gradient(top, $color2, $color1));
+		@include filter-gradient($color2, $color1);
+	} //@if…
+	@else {
+		$color1: lighten($color, abs($top));
+		$color2: darken($color, abs($bottom));
+		@include background(linear-gradient(top, $color2, $color1));
+		@include filter-gradient($color2, $color1);
+	} //@else…
+	background-color: $color;
+} //@mixin…

data/stylesheets/particle/css3/_noise.scss

@@ -0,0 +1,13 @@
+@import "compass/css3/images";
+
+// Noise Mixin
+@mixin noise($color: #fff, $color2: false, $intensity: 0.02, $image: "noise.jpg") {
+	background: $color;
+	$color: transparentize($color, $intensity);
+	@if $color2 == false {
+		$color2: $color;
+	} @else {
+		$color2: transparentize($color2, $intensity);
+	}
+	@include background(linear-gradient(top, $color, $color2), inline-image("#{$image}"));
+} //@mixin…

data/stylesheets/particle/css3/_rotate.scss

@@ -0,0 +1,12 @@
+//
+// Source: https://gist.github.com/3859980
+//
+
+@mixin ms-rotate($degrees) {
+  @if (not unitless($degrees)) { $degrees: $degrees / 1deg }
+  $deg2rad: pi() * 2 / 360;
+  $radians: $degrees * $deg2rad;
+  $costheta: cos($radians);
+  $sintheta: sin($radians);
+  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{$costheta}, M12=#{-$sintheta}, M21=#{$sintheta}, M22=#{$costheta});
+}

data/stylesheets/particle/layout/_apprise.scss

@@ -0,0 +1,66 @@
+/*
+ * Apprise has been depricated.
+ * http://thrivingkings.com/read/Apprise-The-attractive-alert-alternative-for-jQuery
+ * TODO: Find Alternative
+ */
+
+@mixin apprise {
+  .appriseOverlay {
+  	position: fixed;
+  	top: 0;
+  	left: 0;
+  	background: rgba(0, 0, 0, 0.3);
+  	display: none;
+  } //.appriseOverlay
+
+  .appriseOuter {
+  	background: #eee;
+  	border: white 1px solid;
+  	@include box-shadow(#333 0 3px 7px);
+  	@include border-radius(4px);
+  	position: absolute;
+  	z-index: 300;
+  	min-width: 200px;
+  	min-height: 50px;
+  	max-width: 75%;
+  	position: fixed;
+  	display: none;
+  } //.appriseOuter
+
+  .appriseInner {
+  	padding: 20px;
+  	color: #333;
+  	@include text-shadow(white 0 1px 0);
+    button {
+    	border: 1px solid #bbb;
+    	@include border-radius(3px);
+    	@include background(linear-gradient(top, #d5d5d5, #eee));
+    	color: #232d3d;
+    	font-size: 12px;
+    	font-weight: bold;
+    	padding: 4px 10px;
+    	margin: 0 3px;
+    	@include text-shadow(white 0 1px 0);
+    	cursor: pointer;
+    	@include box-shadow(#ccc 0 1px 2px);
+    	&:hover {
+      	color: #d85054;
+      } //&:hover
+  	} //button
+  } //.appriseInner
+
+  .aButtons, .aInput {
+  	margin: 20px 10px 0;
+  	text-align: center;
+  } //.aButtons, .aInput
+
+  .aTextbox {
+  	border: 1px solid #aaa;
+  	@include border-radius(4px);
+  	@include box-shadow(white 0 1px 0);
+  	width: 180px;
+  	font-size: 12px;
+  	font-weight: bold;
+  	padding: 5px 10px;
+  } //.aTextbox
+}

data/stylesheets/particle/layout/_images.scss

@@ -0,0 +1,25 @@
+@mixin image-2x($image, $width, $height) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+         (-o-min-device-pixel-ratio: 2.6/2),
+         (-webkit-min-device-pixel-ratio: 1.3),
+         (min-device-pixel-ratio: 1.3),
+         (min-resolution: 1.3dppx) {
+    /* on retina, use image that's scaled by 2 */
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}
+
+@mixin inline-image($image) {
+  background-image: inline-image("#{$image}");
+  *background-image: url("images/#{$image}");   
+}
+
+@mixin inline-sprite($sprite-image, $width, $height) {
+  background-image: inline-image("#{$sprite-image}");
+  background-repeat: no-repeat;
+  width: $width;
+  height: $height;
+  overflow: hidden;
+  *background-image: url("../images/#{$sprite-image}");
+}