compass-photoshop-drop-shadow 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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: []
|