compass-photoshop-gradient-overlay 1.1.2 → 2.0.0

data/stylesheets/_photoshop-gradient-overlay.scss

@@ -1,26 +1,33 @@
 @import "photoshop-blend-modes";
 
-// Photoshop Gradient Overlay
+$gradient-overlay-blend-mode: normal !default;
+$gradient-overlay-opacity: 100% !default;
+$gradient-overlay-angle: 90deg !default;
+$gradient-overlay-scale: 100% !default;
+$gradient-overlay-color-stops: (#000 0%, #fff 100%) !default;
+
+// Compass Extension Installation
 // --------------------------
 @function photoshop-gradient-overlay(
-                            $bg-color,
-                            $blend: normal,
-                            $opacity: 100%,
-                            $angle: 90deg,
-                            $scale: 100%,
-                            $gradient-colors: (#000, #fff),
-                            $gradient-stops: (0%, 100%)
-                          ) {
-
-    $css-angle: convert-angle($angle);
-    $color-stops: ();
-
-    @for $i from 1 through length($gradient-colors) {
-        $blended-color: photoshop-blend($blend, $bg-color, nth($gradient-colors, $i), percentage-to-decimal($opacity));
-        $stop: join($blended-color, stop-scale(nth($gradient-stops, $i), $scale), space);
-        $color-stops: append($color-stops, $stop, comma);
+    $bg-color,
+    $blend: $gradient-overlay-blend-mode,
+    $opacity: $gradient-overlay-opacity,
+    $angle: $gradient-overlay-angle,
+    $scale: $gradient-overlay-scale,
+    $color-stops: $gradient-overlay-color-stops
+) {
+
+    // 0deg = north in CSS; 0deg = east in Photoshop.
+    $css-angle: $angle - 90deg;
+    $css-color-stops: ();
+
+    @for $i from 1 through length($color-stops) {
+        $blended-color: photoshop-blend($blend, $bg-color, nth( nth( $color-stops, $i ), 1 ), percentage-to-decimal($opacity));
+        $stop: join( $blended-color, stop-scale( nth( nth( $color-stops, $i ), 2 ), $scale ), space );
+        $css-color-stops: append($css-color-stops, $stop, comma);
     }
-    @return linear-gradient($css-angle, $color-stops);
+
+    @return linear-gradient($css-angle, $css-color-stops);
 }
 
 // Adjust the color-stops based on the scale value
@@ -37,20 +44,4 @@
         $percentage: $percentage/100%;
     }
     @return $percentage;
-}
-
-// Attempt to convert a Photoshop angle to a CSS keyword.
-// If a valid keyword isn't available, convert to a CSS angle (0deg = north in CSS; east in Photoshop)
-@function convert-angle($angle) {
-    @if $angle == 0 {
-        @return left;
-    } @else if $angle == 90 {
-        @return bottom;
-    } @else if $angle == 180 {
-        @return right;
-    } @else if $angle == -90 {
-        @return top;
-    } @else {
-        @return $angle - 90deg;
-    }
 }

data/templates/example/compass-photoshop-gradient-overlay.scss

@@ -73,20 +73,20 @@ body {
 
 .gradient--stops--3{
   @extend %gradient-example;
-  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $gradient-colors: ( red, green, blue ), $gradient-stops: ( 0%, 50%, 100% )));
+  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $color-stops: ( red 0%, green 50%, blue 100% )));
 }
 
 .gradient--stops--4{
   @extend %gradient-example;
-  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $gradient-colors: ( red, yellow, green, blue ), $gradient-stops: ( 0%, 33.3333%, 66.6666%, 100% )));
+  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $color-stops: ( red 0%, yellow 33.3333%, green 66.6666%, blue 100% )));
 }
 
 .gradient--stops--5{
   @extend %gradient-example;
-  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $gradient-colors: ( red, orange, yellow, green, blue ), $gradient-stops: ( 0%, 25%, 50%, 75%, 100% )));
+  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $color-stops: ( red 0%, orange 25%, yellow 50%, green 75%, blue 100% )));
 }
 
 .gradient--stops--6{
   @extend %gradient-example;
-  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $gradient-colors: ( red, orange, yellow, green, blue, violet ), $gradient-stops: ( 0%, 20%, 40%, 60%, 80%, 100% )));
+  @include background-image(photoshop-gradient-overlay($bg-color: #fff, $color-stops: ( red 0%, orange 20%, yellow 40%, green 60%, blue 80%, violet 100% )));
 }

metadata

@@ -1,60 +1,56 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: compass-photoshop-gradient-overlay
-version: !ruby/object:Gem::Version 
-  hash: 23
+version: !ruby/object:Gem::Version
+  version: 2.0.0
   prerelease: 
-  segments: 
-  - 1
-  - 1
-  - 2
-  version: 1.1.2
 platform: ruby
-authors: 
+authors:
 - Tim Hettler
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2013-05-24 00:00:00 Z
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2013-10-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: sass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
+  requirement: !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
   type: :runtime
-  version_requirements: *id001
-- !ruby/object:Gem::Dependency 
-  name: compass
   prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.13'
   type: :runtime
-  version_requirements: *id002
-description: A compass extension to translate between Photoshop gradient overlays and CSS linear-gradients
-email: 
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.13'
+description: A compass extension to translate between Photoshop gradient overlays
+  and CSS linear-gradients
+email:
 - me+github@timhettler.com
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - lib/compass-photoshop-gradient-overlay.rb
 - stylesheets/_photoshop-blend-modes.scss
 - stylesheets/_photoshop-gradient-overlay.scss
@@ -63,38 +59,27 @@ files:
 - templates/example/manifest.rb
 homepage: https://github.com/timhettler/compass-photoshop-gradient-overlay
 licenses: []
-
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
+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 
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 23
-      segments: 
-      - 1
-      - 3
-      - 6
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
       version: 1.3.6
 requirements: []
-
 rubyforge_project: 
-rubygems_version: 1.8.25
+rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
-summary: A compass extension to translate between Photoshop gradient overlays and CSS linear-gradients
+summary: A compass extension to translate between Photoshop gradient overlays and
+  CSS linear-gradients
 test_files: []
-