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.
- data/.gitignore +3 -0
- data/README.md +91 -0
- data/compass-photoshop-drop-shadow.gemspec +21 -0
- data/example/config.rb +27 -0
- data/example/example.html +30 -0
- data/example/sass/example.scss +43 -0
- data/example/stylesheets/example.css +74 -0
- data/lib/compass-photoshop-drop-shadow.rb +2 -0
- data/lib/compass/photoshop-drop-shadow.rb +7 -0
- data/lib/compass/photoshop-drop-shadow/version.rb +5 -0
- data/stylesheets/_photoshop-drop-shadow.scss +88 -0
- data/templates/project/manifest.rb +2 -0
- data/templates/project/screen.scss +33 -0
- metadata +75 -0
data/.gitignore
ADDED
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.
|
|
@@ -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
|
|
@@ -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>
|
|
@@ -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
|
+
}
|
|
@@ -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"; }
|
|
@@ -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
|
+
}
|
|
@@ -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: []
|