compass-photoshop-drop-shadow 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. data/.gitignore +3 -0
  2. data/README.md +91 -0
  3. data/compass-photoshop-drop-shadow.gemspec +21 -0
  4. data/example/config.rb +27 -0
  5. data/example/example.html +30 -0
  6. data/example/sass/example.scss +43 -0
  7. data/example/stylesheets/example.css +74 -0
  8. data/lib/compass-photoshop-drop-shadow.rb +2 -0
  9. data/lib/compass/photoshop-drop-shadow.rb +7 -0
  10. data/lib/compass/photoshop-drop-shadow/version.rb +5 -0
  11. data/stylesheets/_photoshop-drop-shadow.scss +88 -0
  12. data/templates/project/manifest.rb +2 -0
  13. data/templates/project/screen.scss +33 -0
  14. metadata +75 -0
data/.gitignore ADDED
@@ -0,0 +1,3 @@
1
+
2
+ *.sublime-workspace
3
+ *.sublime-project
data/README.md ADDED
@@ -0,0 +1,91 @@
1
+ Compass plugin to make it easier to work with Photoshop Drop Shadows. You can check out the oginal blog post on [Recreating Photoshop Drop Shadows in CSS3 and Compass](http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/).
2
+
3
+ - [Original Gist](https://gist.github.com/1039282)
4
+
5
+ ## Installation
6
+ #### Install the Ruby Gem.
7
+ ```
8
+ gem install compass-photoshop-drop-shadow
9
+ ```
10
+
11
+ ####Existing Compass Projects
12
+ You can include it in any existing Compass project by including the plugin in your config.rb file.
13
+
14
+ ```ruby
15
+ # Require any additional compass plugins here.
16
+ require 'compass-photoshop-drop-shadow'
17
+ ```
18
+
19
+ #### New Compass Projects
20
+ You can install the plugin as part of a new Compass project.
21
+
22
+ ```
23
+ compass create my_project -r compass-photoshop-drop-shadow
24
+ ```
25
+
26
+ ## Usage
27
+
28
+ ```scss
29
+ @import 'photoshop-drop-shadow';
30
+ ```
31
+
32
+ ### Examples
33
+
34
+ ```scss
35
+ // make sure the mixins are imported
36
+ @import 'photoshop-drop-shadow';
37
+
38
+ // Simple shadow
39
+ div.box-shadow {
40
+ @include photoshop-drop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
41
+ }
42
+
43
+ // Inner shadow
44
+ div.inner-box-shadow {
45
+ @include photoshop-inner-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
46
+ }
47
+
48
+ // Supporting multiple shadows
49
+ div.multiple-box-shadow {
50
+ @include box-shadow(
51
+ photoshop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75)),
52
+ photoshop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75), inset)
53
+ );
54
+ }
55
+
56
+ // Text Shadow
57
+ h1 {
58
+ // NOTE: $spread has no effect for text shadows
59
+ @include photoshop-text-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
60
+ }
61
+
62
+ // Multiple Text Shadow
63
+ h2 {
64
+ @include text-shadow(
65
+ photoshop-text-shadow(120, 5px, 0, 5px, rgba(#000, 0.75)),
66
+ photoshop-text-shadow(-60, 5px, 0, 5px, rgba(#300, 0.75))
67
+ );
68
+ }
69
+ ```
70
+
71
+ ### Variables
72
+ - **$photoshop-global-light:** *120deg* - Used for the default angle on all shadows. Glow does not use global light.
73
+
74
+ ### Functions
75
+
76
+ - **photoshop-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]*, *[$inner: false]* **)** - Replicates a PhotoShop Drop Shadow. This function is used by all of the mixins and can also be used for multiple shadows.
77
+ - **photoshop-text-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow when applied to text. This function is used by the `photoshop-text-shadow` mixin and can also be used for applying multiple shadows. This function is also useful for use with plugins such as the [textshadow jQuery plugin](https://github.com/heygrady/textshadow). Please note that `$spread` has no effect for CSS `text-shadow`.
78
+ - **photoshop-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]*, [$inner: false] **)** - *Expirimental* Replicates a PhotoShop Glow. This is used by the experimental glow mixins. Please note that noise, technique, source: center, and quality are not supported.
79
+
80
+ ### Mixins
81
+
82
+ - **photoshop-drop-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow. Please note that blend mode and quality are not supported.
83
+ - `$angle` - Degrees, unit is optional. Units other than `deg` are not supported.
84
+ - `$distance` - Length in pixels, unit required.
85
+ - `$spread` - Percentage, unit optional, can be expresses as a decimal.
86
+ - `$size` - Length in pixels, unit required.
87
+ - `$color` - Color, can be hex, rgb, rgba or hsla. Blend mode is not supported. CSS Opacity is essentially equivalent to "Blend Mode: Normal." "Blend Mode: Multiply" is the same as "normal" when placed over a white background. For an appriximation of blend modes in CSS (using the dominant background color), you might try to the experimental [blend modes plugin](https://github.com/heygrady/scss-blend-modes). Dynamic blend modes are not possible in CSS because they require per-pixel color blending.
88
+ - **photoshop-inner-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Inner Shadow. Please note that blend mode and quality are not supported.
89
+ - **photoshop-text-shadow (** *[$angle: $photoshop-global-light]*, *[$distance: 0]*, *[$spread: 0]*, *[$size: 0]*, *[$color: #000]* **)** - Replicates a PhotoShop Drop Shadow when applied to a text layer. Please note that `$spread` has no effect for CSS `text-shadow`. There is an open task in [Firefox to support the spread radius for text shadow](https://bugzilla.mozilla.org/show_bug.cgi?id=655590). In Photoshop, `text-shadow` is applied by adding a Drop Shadow to a text layer. Inner Shadow or `inset` is not supported on `text-shadow`. For text-shadow support in IE9 and below, consider the [textshadow jQuery plugin](https://github.com/heygrady/textshadow). Please note that blend mode and quality are not supported.
90
+ - **photoshop-outer-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]* **)** - *Expirimental* Replicates a Photoshop Outer Glow. Please note that noise, gradient, technique, and quality are not supported.
91
+ - **photoshop-inner-glow (** *[$choke: 0]*, *[$size: 0]*, *[$color: #fff]* **)** - *Expirimental* Replicates a Photoshop Inner Glow. Please note that noise, gradient, technique, source: center, and quality are not supported.
data/compass-photoshop-drop-shadow.gemspec ADDED
@@ -0,0 +1,21 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require "compass/photoshop-drop-shadow/version"
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = 'compass-photoshop-drop-shadow'
7
+ s.version = Compass::PhotoshopDropShadow::VERSION
8
+ s.platform = Gem::Platform::RUBY
9
+ s.summary = "Compass mixin for using the Drop Shadow values that Photoshop uses."
10
+ s.description = "Compass mixin for using the Drop Shadow values that Photoshop uses to create CSS3 box-shadow. Making it easier to convert PSD files to CSS."
11
+ s.homepage = 'https://github.com/heygrady/compass-photoshop-drop-shadow'
12
+ s.authors = ["Grady Kuhnline"]
13
+ s.email = ["github@heygrady.net"]
14
+
15
+ s.files = `git ls-files`.split("\n")
16
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
17
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
18
+ s.require_paths = ["lib"]
19
+
20
+ s.add_dependency("compass")
21
+ end
data/example/config.rb ADDED
@@ -0,0 +1,27 @@
1
+ require 'compass-photoshop-drop-shadow'
2
+ # Require any additional compass plugins here.
3
+
4
+
5
+ # Set this to the root of your project when deployed:
6
+ http_path = "/"
7
+ css_dir = "stylesheets"
8
+ sass_dir = "sass"
9
+ images_dir = "images"
10
+ javascripts_dir = "javascripts"
11
+
12
+ # You can select your preferred output style here (can be overridden via the command line):
13
+ # output_style = :expanded or :nested or :compact or :compressed
14
+ output_style = :compact
15
+
16
+ # To enable relative paths to assets via compass helper functions. Uncomment:
17
+ # relative_assets = true
18
+
19
+ # To disable debugging comments that display the original location of your selectors. Uncomment:
20
+ line_comments = false
21
+
22
+
23
+ # If you prefer the indented syntax, you might want to regenerate this
24
+ # project again passing --syntax sass, or you can uncomment this:
25
+ # preferred_syntax = :sass
26
+ # and then run:
27
+ # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
data/example/example.html ADDED
@@ -0,0 +1,30 @@
1
+ <!doctype html>
2
+ <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
+ <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
+ <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
5
+ <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6
+ <head>
7
+ <meta charset="utf-8">
8
+
9
+ <title>Photoshop Drop Shadow</title>
10
+ <meta name="description" content="">
11
+ <meta name="author" content="">
12
+ <meta name="viewport" content="width=device-width,initial-scale=1">
13
+
14
+ <link rel="stylesheet" href="stylesheets/example.css">
15
+ </head>
16
+
17
+ <body>
18
+ <h1>This text has a shadow on it.</h1>
19
+ <h2>This text has a two shadows on it.</h2>
20
+ <div class="box-shadow">
21
+ This box has a drop shadow on it.
22
+ </div>
23
+ <div class="inner-box-shadow">
24
+ This box has an inner shadow on it.
25
+ </div>
26
+ <div class="multiple-box-shadow">
27
+ This box has a drop shadow <em>and</em> an inner shadow on it.
28
+ </div>
29
+ </body>
30
+ </html>
data/example/sass/example.scss ADDED
@@ -0,0 +1,43 @@
1
+ @import 'photoshop-drop-shadow';
2
+
3
+ // Simple shadow
4
+ div.box-shadow {
5
+ @include photoshop-drop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
6
+ }
7
+
8
+ // Inner shadow
9
+ div.inner-box-shadow {
10
+ @include photoshop-inner-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
11
+ }
12
+
13
+ // Supporting multiple shadows
14
+ div.multiple-box-shadow {
15
+ @include box-shadow(
16
+ photoshop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75)),
17
+ photoshop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75), inset)
18
+ );
19
+ }
20
+
21
+ // Text Shadow
22
+ h1 {
23
+ // NOTE: $spread has no effect for text shadows
24
+ @include photoshop-text-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
25
+ }
26
+
27
+ // Multiple Text Shadow
28
+ h2 {
29
+ @include text-shadow(
30
+ photoshop-text-shadow(120, 5px, 0, 5px, rgba(#000, 0.75)),
31
+ photoshop-text-shadow(-60, 5px, 0, 5px, rgba(#300, 0.75))
32
+ );
33
+ }
34
+
35
+ // just to make it look better
36
+ div {
37
+ float: left;
38
+ background-color: #ccc;
39
+ height: 100px;
40
+ width: 100px;
41
+ padding: 20px;
42
+ margin: 20px;
43
+ }
data/example/stylesheets/example.css ADDED
@@ -0,0 +1,74 @@
1
+ /*
2
+ Syntax error: Invalid CSS after "...-light: 120deg ": expected selector or at-rule, was "!defailt;"
3
+ on line 4 of C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-photoshop-drop-shadow-0.0.1/stylesheets/_photoshop-drop-shadow.scss
4
+ from line 1 of D:/Projects/Compass/compass-photoshop-drop-shadow/example/sass/example.scss
5
+
6
+ 1: D:/Projects/Compass/compass-photoshop-drop-shadow/example/sass/example.scss
7
+
8
+ Backtrace:
9
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-photoshop-drop-shadow-0.0.1/stylesheets/_photoshop-drop-shadow.scss:4
10
+ D:/Projects/Compass/compass-photoshop-drop-shadow/example/sass/example.scss:1
11
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/scss/parser.rb:1014:in `expected'
12
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/scss/parser.rb:960:in `expected'
13
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/scss/parser.rb:28:in `parse'
14
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/engine.rb:326:in `_to_tree'
15
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/engine.rb:258:in `to_tree'
16
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:144:in `visit_import'
17
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/base.rb:37:in `visit'
18
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:18:in `visit'
19
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
20
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/base.rb:53:in `map'
21
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/base.rb:53:in `visit_children'
22
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:27:in `block in visit_children'
23
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:39:in `with_environment'
24
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:26:in `visit_children'
25
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/base.rb:37:in `block in visit'
26
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:47:in `visit_root'
27
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/base.rb:37:in `visit'
28
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:18:in `visit'
29
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/visitors/perform.rb:7:in `visit'
30
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/tree/root_node.rb:20:in `render'
31
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/engine.rb:299:in `_render'
32
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/sass-3.1.16/lib/sass/engine.rb:246:in `render'
33
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:140:in `block (2 levels) in compile'
34
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:126:in `timed'
35
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:139:in `block in compile'
36
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/logger.rb:45:in `red'
37
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:138:in `compile'
38
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:118:in `compile_if_required'
39
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:103:in `block (2 levels) in run'
40
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:101:in `each'
41
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:101:in `block in run'
42
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:126:in `timed'
43
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/compiler.rb:100:in `run'
44
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/commands/watch_project.rb:147:in `recompile'
45
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/path.rb:73:in `call'
46
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/path.rb:73:in `run_callback'
47
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/path.rb:55:in `callback_action'
48
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/path.rb:35:in `update'
49
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/state/directory.rb:39:in `block in modified'
50
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/state/directory.rb:37:in `each'
51
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/state/directory.rb:37:in `modified'
52
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/state/directory.rb:18:in `refresh'
53
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `block (2 levels) in run'
54
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `each'
55
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `block in run'
56
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:15:in `loop'
57
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:15:in `run'
58
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm/monitor.rb:26:in `run'
59
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/fssm-0.2.9/lib/fssm.rb:70:in `monitor'
60
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/commands/watch_project.rb:87:in `perform'
61
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/commands/base.rb:18:in `execute'
62
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/commands/project_base.rb:19:in `execute'
63
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
64
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/lib/compass/exec/sub_command_ui.rb:15:in `run!'
65
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/bin/compass:29:in `block in <top (required)>'
66
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/bin/compass:43:in `call'
67
+ C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-0.12.1/bin/compass:43:in `<top (required)>'
68
+ C:/Ruby192/bin/compass:23:in `load'
69
+ C:/Ruby192/bin/compass:23:in `<main>'
70
+ */
71
+ body:before {
72
+ white-space: pre;
73
+ font-family: monospace;
74
+ content: "Syntax error: Invalid CSS after \"...-light: 120deg \": expected selector or at-rule, was \"!defailt;\"\A on line 4 of C:/Ruby192/lib/ruby/gems/1.9.1/gems/compass-photoshop-drop-shadow-0.0.1/stylesheets/_photoshop-drop-shadow.scss\A from line 1 of D:/Projects/Compass/compass-photoshop-drop-shadow/example/sass/example.scss\A \A 1: D:/Projects/Compass/compass-photoshop-drop-shadow/example/sass/example.scss"; }
data/lib/compass-photoshop-drop-shadow.rb ADDED
@@ -0,0 +1,2 @@
1
+ require 'compass' # Ensure Compass
2
+ require 'compass/photoshop-drop-shadow'
data/lib/compass/photoshop-drop-shadow.rb ADDED
@@ -0,0 +1,7 @@
1
+ require 'compass/photoshop-drop-shadow/version'
2
+
3
+ module Compass
4
+ module PhotoshopDropShadow
5
+ Compass::Frameworks.register('photoshop-drop-shadow', :path => "#{File.dirname(__FILE__)}/../..")
6
+ end
7
+ end
data/lib/compass/photoshop-drop-shadow/version.rb ADDED
@@ -0,0 +1,5 @@
1
+ module Compass
2
+ module PhotoshopDropShadow
3
+ VERSION = '0.0.1'
4
+ end
5
+ end
data/stylesheets/_photoshop-drop-shadow.scss ADDED
@@ -0,0 +1,88 @@
1
+ @import "compass/css3/box-shadow";
2
+ @import "compass/css3/text-shadow";
3
+
4
+ $photoshop-global-light: 120deg !default;
5
+
6
+ //--------------------------------
7
+ // Photoshop Shadow Function
8
+ //--------------------------------
9
+ @function photoshop-shadow( $angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000, $inner: false ) {
10
+ // default to degrees, same as photoshop
11
+ @if unitless($angle) {
12
+ $angle: $angle * 1deg;
13
+ }
14
+
15
+ // compass has a bug converting degrees (fixed in Compass 0.12)
16
+ // https://github.com/chriseppstein/compass/pull/666
17
+ @if unit($angle) == 'deg' {
18
+ // convert to radians to avoid issues
19
+ $angle: ((180 - ($angle/1deg)) * pi() / 180);
20
+ }
21
+ //TODO: other angle units, including rad, will cause issues
22
+
23
+ // SASS doesn't do percentages cleanly
24
+ @if not(unitless($spread)) and unit($spread) == '%' {
25
+ // remove the percentage unit
26
+ $spread: $spread/1%;
27
+ } @else if $spread < 0 {
28
+ // correct for passing the spread as a decimal
29
+ $spread: $spread * 100;
30
+ }
31
+
32
+ $h-shadow: round(cos($angle) * $distance);
33
+ $v-shadow: round(sin($angle) * $distance);
34
+ $css-spread: $size * ($spread/100);
35
+ $blur: $size - $css-spread;
36
+ $inset: if($inner != false, 'inset', '');
37
+
38
+ @return ( $h-shadow $v-shadow $blur $css-spread $color unquote($inset) );
39
+ }
40
+
41
+ @function photoshop-text-shadow( $angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000 ) {
42
+ $shadow: photoshop-shadow($angle, $distance, $spread, $size, $color);
43
+ @return (nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) nth($shadow, 5));
44
+ }
45
+
46
+ @function photoshop-glow($choke: 0, $size: 0, $color: #fff, $inner: false) {
47
+ @return photoshop-shadow(0, 0, $choke, $size, $color, $inner);
48
+ }
49
+
50
+ //--------------------------------
51
+ // Photoshop Drop Shadow
52
+ //--------------------------------
53
+ @mixin photoshop-drop-shadow ($angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000) {
54
+ @include box-shadow(photoshop-shadow($angle, $distance, $spread, $size, $color));
55
+ }
56
+
57
+ //--------------------------------
58
+ // Photoshop Inner Shadow
59
+ //--------------------------------
60
+ @mixin photoshop-inner-shadow ($angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000) {
61
+ @include box-shadow(photoshop-shadow($angle, $distance, $spread, $size, $color, true));
62
+ }
63
+
64
+ //--------------------------------
65
+ // Photoshop Text Shadow
66
+ //--------------------------------
67
+ @mixin photoshop-text-shadow ($angle: $photoshop-global-light, $distance: 0, $spread: 0, $size: 0, $color: #000) {
68
+ // NOTE: $spread has no effect for text shadows
69
+ @include text-shadow(photoshop-text-shadow($angle, $distance, $spread, $size, $color));
70
+ }
71
+
72
+ //--------------------------------
73
+ // Photoshop Outer Glow
74
+ //--------------------------------
75
+ @mixin photoshop-outer-glow ($choke: 0, $size: 0, $color: #fff) {
76
+ // experimantal
77
+ // noise, technique, source: center, and quality are not supported
78
+ @include box-shadow(photoshop-glow($choke, $size, $color, false));
79
+ }
80
+
81
+ //--------------------------------
82
+ // Photoshop Inner Glow
83
+ //--------------------------------
84
+ @mixin photoshop-inner-glow ($choke: 0, $size: 0, $color: #fff) {
85
+ // experimantal
86
+ // noise, technique, source: center, and quality are not supported
87
+ @include box-shadow(photoshop-glow($choke, $size, $color, true));
88
+ }
data/templates/project/manifest.rb ADDED
@@ -0,0 +1,2 @@
1
+ # Make sure you list all the project template files here in the manifest.
2
+ stylesheet 'screen.sass', :media => 'screen, projection'
data/templates/project/screen.scss ADDED
@@ -0,0 +1,33 @@
1
+ @import 'photoshop-drop-shadow';
2
+
3
+ // Simple shadow
4
+ div.box-shadow {
5
+ @include photoshop-drop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
6
+ }
7
+
8
+ // Inner shadow
9
+ div.inner-box-shadow {
10
+ @include photoshop-inner-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
11
+ }
12
+
13
+ // Supporting multiple shadows
14
+ div.multiple-box-shadow {
15
+ @include box-shadow(
16
+ photoshop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75)),
17
+ photoshop-shadow(120, 5px, 0, 5px, rgba(#000, 0.75), inset)
18
+ );
19
+ }
20
+
21
+ // Text Shadow
22
+ h1 {
23
+ // NOTE: $spread has no effect for text shadows
24
+ @include photoshop-text-shadow(120, 5px, 0, 5px, rgba(#000, 0.75));
25
+ }
26
+
27
+ // Multiple Text Shadow
28
+ h2 {
29
+ @include text-shadow(
30
+ photoshop-text-shadow(120, 5px, 0, 5px, rgba(#000, 0.75)),
31
+ photoshop-text-shadow(-60, 5px, 0, 5px, rgba(#300, 0.75))
32
+ );
33
+ }
metadata ADDED
@@ -0,0 +1,75 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: compass-photoshop-drop-shadow
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Grady Kuhnline
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2012-04-28 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: compass
16
+ requirement: !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: '0'
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: '0'
30
+ description: Compass mixin for using the Drop Shadow values that Photoshop uses to
31
+ create CSS3 box-shadow. Making it easier to convert PSD files to CSS.
32
+ email:
33
+ - github@heygrady.net
34
+ executables: []
35
+ extensions: []
36
+ extra_rdoc_files: []
37
+ files:
38
+ - .gitignore
39
+ - README.md
40
+ - compass-photoshop-drop-shadow.gemspec
41
+ - example/config.rb
42
+ - example/example.html
43
+ - example/sass/example.scss
44
+ - example/stylesheets/example.css
45
+ - lib/compass-photoshop-drop-shadow.rb
46
+ - lib/compass/photoshop-drop-shadow.rb
47
+ - lib/compass/photoshop-drop-shadow/version.rb
48
+ - stylesheets/_photoshop-drop-shadow.scss
49
+ - templates/project/manifest.rb
50
+ - templates/project/screen.scss
51
+ homepage: https://github.com/heygrady/compass-photoshop-drop-shadow
52
+ licenses: []
53
+ post_install_message:
54
+ rdoc_options: []
55
+ require_paths:
56
+ - lib
57
+ required_ruby_version: !ruby/object:Gem::Requirement
58
+ none: false
59
+ requirements:
60
+ - - ! '>='
61
+ - !ruby/object:Gem::Version
62
+ version: '0'
63
+ required_rubygems_version: !ruby/object:Gem::Requirement
64
+ none: false
65
+ requirements:
66
+ - - ! '>='
67
+ - !ruby/object:Gem::Version
68
+ version: '0'
69
+ requirements: []
70
+ rubyforge_project:
71
+ rubygems_version: 1.8.23
72
+ signing_key:
73
+ specification_version: 3
74
+ summary: Compass mixin for using the Drop Shadow values that Photoshop uses.
75
+ test_files: []