Compare commits
No commits in common. "master" and "stable" have entirely different histories.
14
Gemfile
14
Gemfile
@ -7,17 +7,23 @@ gem "rspec", "~>2.0.0"
|
||||
gem "rails", "~>3.0.0.rc"
|
||||
gem "compass-validator", "3.0.1"
|
||||
gem "css_parser", "~> 1.0.1"
|
||||
gem "sass", "~> 3.1"
|
||||
gem "sass", "~>3.1"
|
||||
gem "haml", "~> 3.1"
|
||||
gem "rcov", :platform => :mri_18
|
||||
gem "rcov", :platform => :mri
|
||||
gem "rubyzip"
|
||||
gem "livereload"
|
||||
gem "ruby-prof", :platform => :mri_18
|
||||
gem "ruby-prof", :platform => :mri
|
||||
|
||||
gem 'autotest'
|
||||
gem 'autotest-fsevent' if RUBY_PLATFORM =~ /darwin/
|
||||
gem 'fakefs', :git => 'git://github.com/johnbintz/fakefs.git'
|
||||
gem 'mocha'
|
||||
gem 'timecop'
|
||||
gem 'diff-lcs', '~> 1.1.2'
|
||||
|
||||
gem 'rake', '0.8.7'
|
||||
|
||||
#Warning becarful adding OS dependant gems to this file it will cause issues on the CI server
|
||||
group :mac do
|
||||
gem "rb-fsevent"
|
||||
end
|
||||
|
||||
|
||||
141
Gemfile.lock
141
Gemfile.lock
@ -1,141 +0,0 @@
|
||||
PATH
|
||||
remote: .
|
||||
specs:
|
||||
compass (0.12.0.alpha.0.91a748a)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
specs:
|
||||
abstract (1.0.0)
|
||||
actionmailer (3.0.10)
|
||||
actionpack (= 3.0.10)
|
||||
mail (~> 2.2.19)
|
||||
actionpack (3.0.10)
|
||||
activemodel (= 3.0.10)
|
||||
activesupport (= 3.0.10)
|
||||
builder (~> 2.1.2)
|
||||
erubis (~> 2.6.6)
|
||||
i18n (~> 0.5.0)
|
||||
rack (~> 1.2.1)
|
||||
rack-mount (~> 0.6.14)
|
||||
rack-test (~> 0.5.7)
|
||||
tzinfo (~> 0.3.23)
|
||||
activemodel (3.0.10)
|
||||
activesupport (= 3.0.10)
|
||||
builder (~> 2.1.2)
|
||||
i18n (~> 0.5.0)
|
||||
activerecord (3.0.10)
|
||||
activemodel (= 3.0.10)
|
||||
activesupport (= 3.0.10)
|
||||
arel (~> 2.0.10)
|
||||
tzinfo (~> 0.3.23)
|
||||
activeresource (3.0.10)
|
||||
activemodel (= 3.0.10)
|
||||
activesupport (= 3.0.10)
|
||||
activesupport (3.0.10)
|
||||
addressable (2.2.6)
|
||||
arel (2.0.10)
|
||||
builder (2.1.2)
|
||||
chunky_png (1.2.1)
|
||||
compass-validator (3.0.1)
|
||||
css_parser (1.0.1)
|
||||
cucumber (0.9.4)
|
||||
builder (~> 2.1.2)
|
||||
diff-lcs (~> 1.1.2)
|
||||
gherkin (~> 2.2.9)
|
||||
json (~> 1.4.6)
|
||||
term-ansicolor (~> 1.0.5)
|
||||
diff-lcs (1.1.2)
|
||||
em-dir-watcher (0.9.4)
|
||||
em-websocket (0.3.1)
|
||||
addressable (>= 2.1.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
erubis (2.6.6)
|
||||
abstract (>= 1.0.0)
|
||||
eventmachine (0.12.10)
|
||||
fssm (0.2.7)
|
||||
gherkin (2.2.9)
|
||||
json (~> 1.4.6)
|
||||
term-ansicolor (~> 1.0.5)
|
||||
haml (3.1.2)
|
||||
i18n (0.5.0)
|
||||
json (1.4.6)
|
||||
livereload (1.6)
|
||||
em-dir-watcher (>= 0.1)
|
||||
em-websocket (>= 0.1.2)
|
||||
ruby-json (>= 1.1.2)
|
||||
mail (2.2.19)
|
||||
activesupport (>= 2.3.6)
|
||||
i18n (>= 0.4.0)
|
||||
mime-types (~> 1.16)
|
||||
treetop (~> 1.4.8)
|
||||
mime-types (1.16)
|
||||
mocha (0.9.12)
|
||||
polyglot (0.3.2)
|
||||
rack (1.2.3)
|
||||
rack-mount (0.6.14)
|
||||
rack (>= 1.0.0)
|
||||
rack-test (0.5.7)
|
||||
rack (>= 1.0)
|
||||
rails (3.0.10)
|
||||
actionmailer (= 3.0.10)
|
||||
actionpack (= 3.0.10)
|
||||
activerecord (= 3.0.10)
|
||||
activeresource (= 3.0.10)
|
||||
activesupport (= 3.0.10)
|
||||
bundler (~> 1.0)
|
||||
railties (= 3.0.10)
|
||||
railties (3.0.10)
|
||||
actionpack (= 3.0.10)
|
||||
activesupport (= 3.0.10)
|
||||
rake (>= 0.8.7)
|
||||
rdoc (~> 3.4)
|
||||
thor (~> 0.14.4)
|
||||
rake (0.8.7)
|
||||
rcov (0.9.10)
|
||||
rdoc (3.9.2)
|
||||
rspec (2.0.1)
|
||||
rspec-core (~> 2.0.1)
|
||||
rspec-expectations (~> 2.0.1)
|
||||
rspec-mocks (~> 2.0.1)
|
||||
rspec-core (2.0.1)
|
||||
rspec-expectations (2.0.1)
|
||||
diff-lcs (>= 1.1.2)
|
||||
rspec-mocks (2.0.1)
|
||||
rspec-core (~> 2.0.1)
|
||||
rspec-expectations (~> 2.0.1)
|
||||
ruby-json (1.1.2)
|
||||
ruby-prof (0.10.8)
|
||||
rubyzip (0.9.4)
|
||||
sass (3.1.7)
|
||||
term-ansicolor (1.0.6)
|
||||
thor (0.14.6)
|
||||
timecop (0.3.5)
|
||||
treetop (1.4.10)
|
||||
polyglot
|
||||
polyglot (>= 0.3.1)
|
||||
tzinfo (0.3.29)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
compass!
|
||||
compass-validator (= 3.0.1)
|
||||
css_parser (~> 1.0.1)
|
||||
cucumber (~> 0.9.2)
|
||||
diff-lcs (~> 1.1.2)
|
||||
haml (~> 3.1)
|
||||
livereload
|
||||
mocha
|
||||
rails (~> 3.0.0.rc)
|
||||
rake (= 0.8.7)
|
||||
rcov
|
||||
rspec (~> 2.0.0)
|
||||
ruby-prof
|
||||
rubyzip
|
||||
sass (~> 3.1)
|
||||
timecop
|
||||
10
Rakefile
10
Rakefile
@ -29,16 +29,6 @@ To run with an alternate version of Rails, make test/rails a symlink to that ver
|
||||
To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
|
||||
END
|
||||
|
||||
Rake::TestTask.new :units do |t|
|
||||
t.libs << 'lib'
|
||||
t.libs << 'test'
|
||||
test_files = FileList['test/units/**/*_test.rb']
|
||||
test_files.exclude('test/rails/*', 'test/haml/*')
|
||||
t.test_files = test_files
|
||||
t.verbose = true
|
||||
end
|
||||
|
||||
|
||||
desc "Compile Examples into HTML and CSS"
|
||||
task :examples do
|
||||
linked_haml = "tests/haml"
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
:major: 0
|
||||
:minor: 12
|
||||
:state: alpha
|
||||
:build: 0
|
||||
:name: Alnilam
|
||||
:minor: 11
|
||||
:patch: 5
|
||||
:name: Antares
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Require any additional compass plugins here.
|
||||
require 'susy'
|
||||
require 'css-slideshow'
|
||||
require 'compass-theme'
|
||||
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
source :gemcutter
|
||||
|
||||
#gem 'cri', '~> 1.0.1'
|
||||
gem 'adsf'
|
||||
gem 'nanoc3' #, :git => "git://github.com/chriseppstein/nanoc.git"
|
||||
gem 'nanoc3', :git => "git://github.com/chriseppstein/nanoc.git"
|
||||
gem 'rdiscount'
|
||||
gem 'thor'
|
||||
gem 'rack'
|
||||
@ -10,13 +8,12 @@ gem 'mime-types'
|
||||
gem 'serve', "1.0.0"
|
||||
gem 'nokogiri'
|
||||
gem 'coderay'
|
||||
gem 'haml'
|
||||
gem 'sass', ">= 3.1"
|
||||
gem 'haml', ">= 3.1"
|
||||
gem 'rake'
|
||||
gem 'activesupport', '~> 3.0.10', :require => 'active_support/inflector'
|
||||
gem 'compass', :path => ".."
|
||||
gem 'compass-theme', :path => '../../compass-theme' #:git => 'git://github.com/Compass/compass-theme.git'
|
||||
# gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
# gem 'css-slideshow', "0.2.0"
|
||||
gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
gem 'css-slideshow', "0.2.0"
|
||||
gem 'json'
|
||||
gem 'css_parser', "1.0.1"
|
||||
gem 'ruby-prof'
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
GIT
|
||||
remote: git://github.com/chriseppstein/nanoc.git
|
||||
revision: 4eee0e60c5121b90498caa88605d416521553378
|
||||
specs:
|
||||
nanoc3 (3.2.0a3)
|
||||
cri (>= 1.0.0)
|
||||
|
||||
PATH
|
||||
remote: ..
|
||||
specs:
|
||||
compass (0.12.alpha.0.374aed6)
|
||||
chunky_png (~> 1.2)
|
||||
compass (0.11.1.93b89a2)
|
||||
chunky_png (~> 1.1)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
specs:
|
||||
activesupport (3.0.10)
|
||||
adsf (1.0.1)
|
||||
rack (>= 1.0.0)
|
||||
builder (3.0.0)
|
||||
chunky_png (1.2.1)
|
||||
coderay (0.9.8)
|
||||
compass-susy-plugin (0.9)
|
||||
compass (>= 0.11.1)
|
||||
compass-theme (0.0.1)
|
||||
compass (~> 0.11)
|
||||
compass-susy-plugin (>= 0.7.0.pre8)
|
||||
css-slideshow (= 0.2.0)
|
||||
cri (2.0.2)
|
||||
activesupport (3.0.7)
|
||||
builder (2.1.2)
|
||||
chunky_png (1.2.0)
|
||||
coderay (0.9.7)
|
||||
compass-susy-plugin (0.9.beta.3)
|
||||
compass (>= 0.11.beta.3)
|
||||
cri (1.0.1)
|
||||
css-slideshow (0.2.0)
|
||||
compass (>= 0.10.0.rc3)
|
||||
css_parser (1.0.1)
|
||||
fssm (0.2.7)
|
||||
haml (3.1.2)
|
||||
haml (3.1.0)
|
||||
i18n (0.4.2)
|
||||
json (1.5.4)
|
||||
json (1.5.1)
|
||||
mime-types (1.16)
|
||||
nanoc3 (3.2.1)
|
||||
cri (~> 2.0)
|
||||
nokogiri (1.5.0)
|
||||
rack (1.2.3)
|
||||
rake (0.9.2)
|
||||
rb-fsevent (0.4.3.1)
|
||||
nokogiri (1.4.4)
|
||||
rack (1.2.2)
|
||||
rake (0.8.7)
|
||||
rb-fsevent (0.4.0)
|
||||
rdiscount (1.6.8)
|
||||
ruby-prof (0.10.8)
|
||||
sass (3.1.7)
|
||||
ruby-prof (0.9.2)
|
||||
sass (3.1.0)
|
||||
serve (1.0.0)
|
||||
activesupport (~> 3.0.1)
|
||||
i18n (~> 0.4.1)
|
||||
rack (~> 1.2.1)
|
||||
tzinfo (~> 0.3.23)
|
||||
thor (0.14.6)
|
||||
tzinfo (0.3.29)
|
||||
tzinfo (0.3.26)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
adsf
|
||||
builder
|
||||
coderay
|
||||
compass!
|
||||
compass-theme (~> 0.0.1)
|
||||
compass-susy-plugin (>= 0.7.0.pre8)
|
||||
css-slideshow (= 0.2.0)
|
||||
css_parser (= 1.0.1)
|
||||
haml
|
||||
haml (>= 3.1)
|
||||
json
|
||||
mime-types
|
||||
nanoc3
|
||||
nanoc3!
|
||||
nokogiri
|
||||
rack
|
||||
rake
|
||||
rb-fsevent
|
||||
rdiscount
|
||||
ruby-prof
|
||||
sass (>= 3.1)
|
||||
serve (= 1.0.0)
|
||||
thor
|
||||
|
||||
@ -63,7 +63,6 @@ end
|
||||
|
||||
compile '*' do
|
||||
if item[:extension] == "markdown"
|
||||
filter :erb
|
||||
filter :rdiscount
|
||||
elsif item[:extension] == "haml"
|
||||
filter :haml, :ugly => true
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
@ -14,36 +14,10 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/
|
||||
|
||||
The Documentation for the [latest preview release](http://beta.compass-style.org/)
|
||||
|
||||
0.12.alpha.1 (UNRELEASED)
|
||||
-------------------------
|
||||
|
||||
* font-files helper: Stop requiring font type when the type can be guessed from URL
|
||||
* inline-font-files: actually works now
|
||||
* Upgrade CSS3 Pie to 1.0beta5
|
||||
|
||||
|
||||
0.12.alpha.0 (8/30/2011)
|
||||
------------------------
|
||||
* Support for the rails 3.1 asset pipeline
|
||||
* Added support for diagonal, horizontal, and smart sprite layout
|
||||
* Fixed a bug with spacing in horizontal layout
|
||||
* Changed the descriptions of the sin, cos, and tan to be more descriptive
|
||||
* Fixed trig functions via issue #498
|
||||
* Fixed the default `http_path` in rails
|
||||
* Sprites can now have a `sprite_search_path` that is an array of directories that
|
||||
contain source images for sprites handy for using sprites in extensions or gems
|
||||
* Added a new set of configuration properties for generated images.
|
||||
`generated_images_dir`, `generated_images_path`, `http_generated_images_dir`,
|
||||
and `http_generated_images_path` can now be set to control where generated
|
||||
images are written and how they are served. Added a corresponding
|
||||
`generated-image-url()` helper function. These should rarely be needed and
|
||||
will default to your corresponding image directories and paths.
|
||||
|
||||
0.11.6 (UNRELEASED)
|
||||
-------------------
|
||||
|
||||
* Added `user-select` mixin to control the selection model and granularity of an element.
|
||||
It accepts one argument (`$select`) from the following options: `none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
|
||||
* Added `user-select` mixin to control the selection model and granularity of an element. It accepts one argument (`$select`) from the following options: `none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
|
||||
|
||||
0.11.5 (07/10/2011)
|
||||
-------------------
|
||||
@ -1186,4 +1160,4 @@ Almost definitely. Please let me know if you encounter any problems and I'll get
|
||||
[html5-reset]: http://compass-style.org/reference/compass/reset/utilities/#mixin-reset-html5
|
||||
[blueprint_10_change]: https://github.com/chriseppstein/compass/compare/a05e1ee7c0a1e4c0f0595a8bb812daa47872e476...864780969d872a93b1fd3b4f39f29dd9f0c3fe75
|
||||
[brandon]: http://brandonmathis.com/
|
||||
[lemonade]: http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html
|
||||
[lemonade]: http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html
|
||||
@ -170,33 +170,11 @@ later on.
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>http_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
<td style="vertical-align:top;">The full http path to images on the web server.
|
||||
Defaults to <code>http_path + "/" + images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>generated_images_dir</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The directory where generated images are kept.
|
||||
It is relative to the <code>project_path</code>.
|
||||
Defaults to the value of <code>images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>generated_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The full path to where generated images are kept.
|
||||
Defaults to the value of <code><project_path>/<generated_images_dir></code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>http_generated_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The full http path to generated images on
|
||||
the web server. Defaults to <code>http_path + "/" + generated_images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>javascripts_dir</code> </td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
|
||||
@ -13,7 +13,7 @@ as we can for you to contribute changes to compass -- So if there's something he
|
||||
seems harder than it aught to be, please let us know.
|
||||
|
||||
If you find a bug **in this document**, you are bound to contribute a fix. Stop reading now
|
||||
if you do not wish to abide by this rule.
|
||||
if you do not wish to abide by this rool.
|
||||
|
||||
**Step 1**: If you do not have a github account, create one.
|
||||
|
||||
|
||||
@ -5,16 +5,12 @@ crumb: Spriting
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
# Spriting with Compass
|
||||
|
||||
Spriting has never been easier with Compass. You place the sprite images in a folder,
|
||||
import them into your stylesheet, and then you can use the sprite in your selectors in one
|
||||
of several convenient ways.
|
||||
|
||||
## Sprite Tutorial Contents
|
||||
<%= sprite_tutorial_links(true) %>
|
||||
|
||||
## Setup
|
||||
|
||||
For this tutorial, let's imagine that in your project's image folder there are four icons:
|
||||
@ -27,9 +23,6 @@ For this tutorial, let's imagine that in your project's image folder there are f
|
||||
Each is an icon that is 32px square.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
|
||||
|
||||
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
|
||||
|
||||
@import "icon/*.png";
|
||||
@ -52,13 +45,13 @@ You can now apply the `icon-XXX` classes to your markup as needed.
|
||||
|
||||
Let's go over what happened there. The import statement told compass to [generate a
|
||||
stylesheet that is customized for your sprites](https://gist.github.com/729507). This
|
||||
stylesheet is [magic](/help/tutorials/spriting/magic-imports), it is not written to disk, and it can be customized
|
||||
stylesheet is [magic](#magic-imports), it is not written to disk, and it can be customized
|
||||
by setting configuration variables before you import it. See the section below on
|
||||
[Customization Options](/help/tutorials/spriting/customization). The goal of this stylesheet is to provide a
|
||||
[Customization Options](#customization-options). The goal of this stylesheet is to provide a
|
||||
simple naming convention for your sprites so that you they are easy to remember and use. You
|
||||
should never have to care what the is name of the generated sprite map, nor where a sprite
|
||||
is located within it.
|
||||
|
||||
|
||||
<a name="selector-control"></a>
|
||||
## Selector Control
|
||||
|
||||
@ -108,6 +101,102 @@ might want to avoid it. For instance, if your sprite map has more than about 20
|
||||
sprites, you may find that hand crafting the import will speed up compilation times. See
|
||||
the section on [performance considerations](#performance) for more details.
|
||||
|
||||
<a name="magic-selectors"></a>
|
||||
## Magic Selectors
|
||||
|
||||
If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
|
||||
|
||||
* `selectors/ten-by-ten.png`
|
||||
* `selectors/ten-by-ten_hover.png`
|
||||
* `selectors/ten-by-ten_active.png`
|
||||
* `selectors/ten-by-ten_target.png`
|
||||
|
||||
Now in our sass file we add:
|
||||
|
||||
@import "selectors/*.png";
|
||||
|
||||
a {
|
||||
@include selectors-sprite(ten-by-ten)
|
||||
}
|
||||
|
||||
And your stylesheet will compile to:
|
||||
|
||||
.selectors-sprite, a {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
a {
|
||||
background-position: 0 0;
|
||||
}
|
||||
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
|
||||
|
||||
.selectors-sprite, .selectors-ten-by-ten {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
.selectors-ten-by-ten {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
<a name="customization-options"></a>
|
||||
## Customization Options
|
||||
|
||||
### Options per Sprite Map
|
||||
|
||||
When constructing the sprite map, the entire sprite map and it's associated stylesheet
|
||||
can be configured in the following ways. Each option is specified by setting a [configuration
|
||||
variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
|
||||
are named according to the name of the folder containing the sprites. In the examples below
|
||||
the sprites were contained within a folder called `icon`.
|
||||
|
||||
* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
|
||||
Defaults to `0px`. E.g. `$icon-spacing: 20px`.
|
||||
* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
|
||||
to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
|
||||
* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
|
||||
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
|
||||
sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
|
||||
E.g. `$icon-position: 100%`.
|
||||
* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
|
||||
included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
|
||||
* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
|
||||
E.g. `$icon-sprite-base-class: ".action-icon"`
|
||||
* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
|
||||
|
||||
### Options per Sprite
|
||||
|
||||
When constructing the sprite map, each sprite can be configured in the following ways:
|
||||
|
||||
* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
|
||||
to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
|
||||
* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
|
||||
to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
|
||||
* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
|
||||
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
|
||||
sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
|
||||
position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.
|
||||
|
||||
<a name="performance"></a>
|
||||
## Performance Considerations
|
||||
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
---
|
||||
title: Sprite Customization
|
||||
layout: tutorial
|
||||
crumb: Customization
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
#Sprite Tutorial
|
||||
<%= sprite_tutorial_links %>
|
||||
## Customization Options
|
||||
|
||||
### Options per Sprite Map
|
||||
|
||||
When constructing the sprite map, the entire sprite map and it's associated stylesheet
|
||||
can be configured in the following ways. Each option is specified by setting a [configuration
|
||||
variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
|
||||
are named according to the name of the folder containing the sprites. In the examples below
|
||||
the sprites were contained within a folder called `icon`.
|
||||
|
||||
* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
|
||||
Defaults to `0px`. E.g. `$icon-spacing: 20px`.
|
||||
* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
|
||||
to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
|
||||
* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
|
||||
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
|
||||
sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
|
||||
E.g. `$icon-position: 100%`.
|
||||
* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
|
||||
included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
|
||||
* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
|
||||
E.g. `$icon-sprite-base-class: ".action-icon"`
|
||||
* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
|
||||
|
||||
### Options per Sprite
|
||||
|
||||
When constructing the sprite map, each sprite can be configured in the following ways:
|
||||
|
||||
* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
|
||||
to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
|
||||
* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
|
||||
to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
|
||||
* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
|
||||
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
|
||||
sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
|
||||
position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
title: Sprite Magic Selectors
|
||||
layout: tutorial
|
||||
crumb: Magic Selectors
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
#Sprite Tutorial
|
||||
<%= sprite_tutorial_links %>
|
||||
|
||||
## Magic Selectors
|
||||
|
||||
If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
|
||||
|
||||
* `selectors/ten-by-ten.png`
|
||||
* `selectors/ten-by-ten_hover.png`
|
||||
* `selectors/ten-by-ten_active.png`
|
||||
* `selectors/ten-by-ten_target.png`
|
||||
|
||||
Now in our sass file we add:
|
||||
|
||||
@import "selectors/*.png";
|
||||
|
||||
a {
|
||||
@include selectors-sprite(ten-by-ten)
|
||||
}
|
||||
|
||||
And your stylesheet will compile to:
|
||||
|
||||
.selectors-sprite, a {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
a {
|
||||
background-position: 0 0;
|
||||
}
|
||||
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
|
||||
|
||||
.selectors-sprite, .selectors-ten-by-ten {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
.selectors-ten-by-ten {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
## Disabling
|
||||
To disable this feature set `$disable-magic-sprite-selectors` to true before calling the sprite mixin
|
||||
|
||||
a {
|
||||
$disable-magic-sprite-selectors:true;
|
||||
@include selectors-sprite(ten-by-ten)
|
||||
}
|
||||
|
||||
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
title: Sprite layouts
|
||||
layout: tutorial
|
||||
crumb: Sprite layouts
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
# Sprite Tutorial
|
||||
<%= sprite_tutorial_links %>
|
||||
|
||||
## Sprite Layouts
|
||||
|
||||
Example:
|
||||
|
||||
$icon-layout:horizontal;
|
||||
@import "icon/*.png";
|
||||
|
||||
$dropcap-layout:diagonal
|
||||
@import "dropcap/*.png";
|
||||
|
||||
## Vertical
|
||||
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
## Horizontal
|
||||
|
||||
$mysprite-layout:horizontal;
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
|
||||
Notes:
|
||||
|
||||
* Responds to the same configuration options that vertical has.
|
||||
|
||||
## Diagonal
|
||||
|
||||
$mysprite-layout:diagonal;
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
|
||||
Notes:
|
||||
|
||||
* Configuration options do not effect the layout
|
||||
* This is incredibly resource intensive on the browser
|
||||
|
||||
## Smart
|
||||
|
||||
$mysprite-layout:smart;
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
|
||||
Notes:
|
||||
|
||||
* Configuration options do not effect the layout
|
||||
* Most efficient use of browser memory
|
||||
|
||||
Example icons from [Open Icon Library](http://openiconlibrary.sourceforge.net/) and are released under public domain
|
||||
@ -12,7 +12,7 @@ layout: homepage
|
||||
%ol
|
||||
%li Experience cleaner markup without presentational classes.
|
||||
%li It’s chock full of the web’s best reusable patterns.
|
||||
%li It makes creating <a href="/help/tutorials/spriting/">sprites</a> a breeze.
|
||||
%li Developing a personal framework is simple.
|
||||
%li Compass mixins make CSS3 easy.
|
||||
%li Download and create extensions with ease.
|
||||
.sass
|
||||
|
||||
@ -35,9 +35,8 @@ documented_functions:
|
||||
sin($number)
|
||||
.details
|
||||
%p
|
||||
Returns the sine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
|
||||
will be evaluated as radians. Degrees will first be converted to radians.
|
||||
Takes the sine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Degrees will first be converted to radians.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
and the number will be treated as radians.
|
||||
|
||||
@ -47,9 +46,8 @@ documented_functions:
|
||||
cos($number)
|
||||
.details
|
||||
%p
|
||||
Returns the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
|
||||
will be evaluated as radians. Degrees will first be converted to radians.
|
||||
Takes the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Degrees will first be converted to radians.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
and the number will be treated as radians.
|
||||
#tan.helper
|
||||
@ -58,8 +56,7 @@ documented_functions:
|
||||
tan($number)
|
||||
.details
|
||||
%p
|
||||
Returns the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
|
||||
will be evaluated as radians. Degrees will first be converted to radians.
|
||||
Takes the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Degrees will first be converted to radians.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
and the number will be treated as radians.
|
||||
|
||||
@ -12,7 +12,6 @@ documented_functions:
|
||||
- "stylesheet-url"
|
||||
- "font-url"
|
||||
- "image-url"
|
||||
- "generated-image-url"
|
||||
---
|
||||
%h1 Compass URL Helpers
|
||||
|
||||
@ -32,7 +31,7 @@ documented_functions:
|
||||
Generates a path to an asset found relative to the project's css directory.
|
||||
%br
|
||||
Passing a true value as the second argument will cause the only the path to be returned
|
||||
instead of a <code>url()</code> function
|
||||
instead of a `url()` function
|
||||
|
||||
#font-url.helper
|
||||
%h3
|
||||
@ -43,7 +42,7 @@ documented_functions:
|
||||
Generates a path to an asset found relative to the project's font directory.
|
||||
%br
|
||||
Passing a true value as the second argument will cause the only the path to be returned
|
||||
instead of a <code>url()</code> function
|
||||
instead of a `url()` function
|
||||
|
||||
#image-url.helper
|
||||
%h3
|
||||
@ -54,27 +53,9 @@ documented_functions:
|
||||
Generates a path to an asset found relative to the project's images directory.
|
||||
%p
|
||||
Passing a true value as the second argument will cause the only the path to be returned
|
||||
instead of a <code>url()</code> function
|
||||
instead of a `url()` function
|
||||
%p
|
||||
The third argument is used to control the cache buster on a per-use basis.
|
||||
When set to <code>false</code> no cache buster will be used. When a string, that
|
||||
When set to `false` no cache buster will be used. When a string, that
|
||||
value will be used as the cache buster.
|
||||
|
||||
#generated-image-url.helper
|
||||
%h3
|
||||
%a(href="#generated-image-url")
|
||||
generated-image-url($path, $cache-buster: false)
|
||||
.details
|
||||
%p
|
||||
Generates a path to an image generated during compilation using the
|
||||
<code>generated_image</code> related configuration properties.
|
||||
%p
|
||||
Most users will never call this helper directly, it is primarily provided
|
||||
for use by plugins that need to generate paths to images they create. E.g.
|
||||
The <code>sprite-url()</code> helper calls this helper.
|
||||
%p
|
||||
The second argument is used to control the cache buster on a per-use basis.
|
||||
Defaults to <code>false</code>, meaning that no cache buster will be used.
|
||||
When a string, that value will be used as the cache buster, when <code>true</code>
|
||||
Compass will generate a cache-buster based on the image's modification time.
|
||||
|
||||
|
||||
70
doc-src/content/stylesheets/core/_base-classes.sass
Normal file
70
doc-src/content/stylesheets/core/_base-classes.sass
Normal file
@ -0,0 +1,70 @@
|
||||
$default-rounded-corner: 4
|
||||
|
||||
.group
|
||||
+pie-clearfix
|
||||
|
||||
.truncate
|
||||
+ellipsis
|
||||
|
||||
.border-box
|
||||
+box-sizing(border-box)
|
||||
|
||||
.round-corners-4
|
||||
+border-radius(4px)
|
||||
|
||||
.round-corners-em
|
||||
+border-radius(1em)
|
||||
|
||||
=round-corners($num: $default-rounded-corner)
|
||||
@extend .round-corners-#{$num}
|
||||
|
||||
=round-top-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-left-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
=round-right-corners($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=round-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
=round-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-bottom-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
=round-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
@extend .clear-top-left-corner
|
||||
@extend .clear-bottom-left-corner
|
||||
|
||||
=square-top-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-left-corner
|
||||
=square-top-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-top-right-corner
|
||||
=square-bottom-left-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-left-corner
|
||||
=square-bottom-right-corner($num: $default-rounded-corner)
|
||||
+round-corners($num)
|
||||
@extend .clear-bottom-right-corner
|
||||
17
doc-src/content/stylesheets/core/_clearing-classes.sass
Normal file
17
doc-src/content/stylesheets/core/_clearing-classes.sass
Normal file
@ -0,0 +1,17 @@
|
||||
.clear-top-left-corner
|
||||
+border-top-left-radius(0)
|
||||
.clear-top-right-corner
|
||||
+border-top-right-radius(0)
|
||||
.clear-bottom-left-corner
|
||||
+border-bottom-left-radius(0)
|
||||
.clear-bottom-right-corner
|
||||
+border-bottom-right-radius(0)
|
||||
|
||||
.hide
|
||||
display: none
|
||||
.clear-box-shadow
|
||||
+box-shadow(none)
|
||||
.clear-border-radius
|
||||
@extend .clear-rounded-corners
|
||||
.clear-rounded-corners
|
||||
+border-radius(0)
|
||||
10
doc-src/content/stylesheets/core/_extensions.scss
Normal file
10
doc-src/content/stylesheets/core/_extensions.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@mixin reset($reset-type: false){
|
||||
@if($reset-type){
|
||||
@if($reset-type == global){
|
||||
@include global-reset;
|
||||
}
|
||||
@if($reset-type == html5){
|
||||
@include reset-html5;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
doc-src/content/stylesheets/partials/_blog.scss
Normal file
6
doc-src/content/stylesheets/partials/_blog.scss
Normal file
@ -0,0 +1,6 @@
|
||||
body#blog-archive {
|
||||
.timestamp {
|
||||
margin-right: 1em;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
113
doc-src/content/stylesheets/partials/_code.scss
Normal file
113
doc-src/content/stylesheets/partials/_code.scss
Normal file
@ -0,0 +1,113 @@
|
||||
//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
|
||||
.mixin-source, .example-source, .function-source {
|
||||
position: relative; @extend .fixed-font;
|
||||
.syntaxhighlighter, pre {
|
||||
&.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
|
||||
|
||||
html.sass { .mixin-source, .example-source, .function-source { .syntaxhighlighter.sass { display: block; } } }
|
||||
html.scss { .mixin-source, .example-source, .function-source { .syntaxhighlighter.scss { display: block; } } }
|
||||
html.css .example-source .syntaxhighlighter.css { display: block; }
|
||||
html.html .example-source .syntaxhighlighter.html { display: block; }
|
||||
html.haml .example-source .syntaxhighlighter.haml { display: block; }
|
||||
|
||||
|
||||
|
||||
.mixin-source, .function-source { display: none; }
|
||||
|
||||
html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
|
||||
margin: 0 0 2px;
|
||||
code { padding: 0; }
|
||||
//font-size: 1.1em;
|
||||
text-shadow: none;
|
||||
.code-block { background: none; @extend .clear-box-shadow; }
|
||||
table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
|
||||
.toolbar { display: none; }
|
||||
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
|
||||
}
|
||||
|
||||
a[rel="github-source"] {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 1.1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1.5em 0;
|
||||
overflow: auto;
|
||||
.code-block:first-child { padding: .6em; display: block; }
|
||||
.code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
|
||||
}
|
||||
|
||||
.code-block { @extend .round-corners-4; @extend .fixed-font;
|
||||
display: inline-block;
|
||||
font-size: .95em;
|
||||
padding: 0 .4em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.source-documentation {
|
||||
@extend .round-corners-4;
|
||||
padding: 10px 15px;
|
||||
@include round-bottom-corners
|
||||
}
|
||||
|
||||
h3 { @include round-corners;
|
||||
padding: 10px 15px;
|
||||
margin: 20px 0 20px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
a { text-decoration: none;}
|
||||
code, .arg { font-weight: normal; }
|
||||
}
|
||||
h3.mixin, h3.function { @include round-top-corners; margin-bottom: 2px;}
|
||||
.arg {
|
||||
display: inline-block;
|
||||
padding: 0 2px;
|
||||
&[data-default-value] {
|
||||
font-style: italic;
|
||||
&:before { content: "[" ; }
|
||||
&:after { content: "]" ; }}
|
||||
}
|
||||
|
||||
a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
|
||||
h2 + a[rel="view source"]{ margin-top: 6px;}
|
||||
|
||||
.syntaxhighlighter {
|
||||
a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
|
||||
background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
|
||||
padding: 0; margin: 0; outline: 0;
|
||||
overflow: visible; position: static; right: auto;
|
||||
text-align: left; top: auto; vertical-align: baseline;
|
||||
width: auto;
|
||||
font: { weight: normal; style: normal;
|
||||
size: 1em;
|
||||
}
|
||||
min: { height: inherit; }
|
||||
}
|
||||
}
|
||||
|
||||
.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
|
||||
|
||||
// set up bold and italic
|
||||
.bold { font-weight: bold; }
|
||||
.italic { font-style: italic; }
|
||||
.line { white-space: pre; }
|
||||
|
||||
// main table and columns
|
||||
table { width: 100%;
|
||||
td.code { width: 100%;
|
||||
.line { padding: 0 .6em; } }
|
||||
td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
|
||||
|
||||
// Styles for the toolbar
|
||||
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
|
||||
span.title { display: inline; }
|
||||
a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
|
||||
.container { position: relative; }
|
||||
textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
|
||||
}
|
||||
.syntaxhighlighter, pre .code-block:first-child, pre {
|
||||
&::-webkit-scrollbar { height: 12px; }
|
||||
&::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
|
||||
&::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
|
||||
}
|
||||
29
doc-src/content/stylesheets/partials/_example.scss
Normal file
29
doc-src/content/stylesheets/partials/_example.scss
Normal file
@ -0,0 +1,29 @@
|
||||
html.light #demo, html.dark #demo {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#demo {
|
||||
@include round-corners;
|
||||
@extend .group;
|
||||
background: #fff;
|
||||
margin-bottom: 1.2em;
|
||||
padding: 40px;
|
||||
code {
|
||||
@include box-shadow(rgba(#000, .3) 0 1px 3px, rgba(#000, .15) 0 1px 0 0 inset);
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#how {
|
||||
section { width: 49%; float: left; }
|
||||
section + section { float: right; }
|
||||
|
||||
.example-source { clear: both; }
|
||||
}
|
||||
|
||||
#reference {
|
||||
float: right;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
99
doc-src/content/stylesheets/partials/_home.scss
Normal file
99
doc-src/content/stylesheets/partials/_home.scss
Normal file
@ -0,0 +1,99 @@
|
||||
body#home {
|
||||
width: 810px;
|
||||
#page { padding-top: 31px;}
|
||||
h1#logo {
|
||||
$logo: 'compass-logo.png';
|
||||
background: image-url($logo) no-repeat;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
width: image-width($logo);
|
||||
height: image-height($logo)/2;
|
||||
padding: 0;
|
||||
margin: 0 auto 18px;
|
||||
}
|
||||
#{headings()}{ @extend .heading-font; }
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
h3 {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
h4 { font-size: 1.5em; }
|
||||
.overview {
|
||||
@extend .group;
|
||||
.compass { width: 406px; float: left;
|
||||
h4:before { content: "k"; } }
|
||||
.sass { width: 275px; float: right;
|
||||
h4:before { content: "2"; } }
|
||||
div {
|
||||
padding: 20px;
|
||||
h4 {
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
&:before {
|
||||
@extend .pictos;
|
||||
color: #fb292d;
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol { padding-left: 0; list-style: inside decimal; margin-bottom: 0; }
|
||||
p { margin-bottom: 0; }
|
||||
ol, p { line-height: 1.8em; font-size: .95em;}
|
||||
}
|
||||
}
|
||||
ul#featured_sites {
|
||||
@extend .group;
|
||||
overflow: visible;
|
||||
margin-top: 30px;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
li {
|
||||
float: left;
|
||||
text-shadow: none;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
&:nth-child(3n+2){ margin: 0 7px; }
|
||||
&:nth-child(1n+4){ margin-top: 7px; }
|
||||
&:nth-child(3n+4){ clear: left; }
|
||||
padding: 6px;
|
||||
a { text-decoration: none; }
|
||||
img { float: left; width: 240px; }
|
||||
span { display: none;}
|
||||
&:hover { z-index: 100;
|
||||
padding: 3px 2px;
|
||||
img { width: 248px; }
|
||||
span { display: block; position: absolute; text-shadow: none;}
|
||||
}
|
||||
.url {
|
||||
bottom: 2px; left: 2px; right: 2px; background: #000; background: rgba(#000, .8); z-index: 102; padding: 2.2em 10px 6px;
|
||||
font-size: .8em; border-top: 1px solid rgba(#fff, .2); }
|
||||
.title { bottom: 1.7em; left: 0; z-index: 103; text-decoration: none; padding: 0 11px; color: #fff; }
|
||||
}
|
||||
}
|
||||
section.book, section.gui {
|
||||
width: 48%;
|
||||
float: left;
|
||||
@extend .group;
|
||||
h3 { margin-bottom: 1em; height: 2em; text-align: left; }
|
||||
}
|
||||
section.book {
|
||||
margin-right: 2%;
|
||||
img { float: left; margin-right: 1em; margin-bottom: 1em; }
|
||||
}
|
||||
section.gui {
|
||||
text-align: center;
|
||||
.note {
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
html.light body#home { h1#logo { background-position: bottom;} }
|
||||
10
doc-src/content/stylesheets/partials/_install.scss
Normal file
10
doc-src/content/stylesheets/partials/_install.scss
Normal file
@ -0,0 +1,10 @@
|
||||
body#install {
|
||||
#steps, p.madlib, p.note, h4 { margin-top: 1em; }
|
||||
p.note { font-size: smaller; font-style: italic; }
|
||||
p.warning { color: #c00; }
|
||||
.customization { display: none; }
|
||||
.customizable .customization { display: inline; }
|
||||
blockquote { border-left: 2px solid #ccc;
|
||||
text-indent: 0; padding-left: 0.5em; }
|
||||
.customization input { width: 8em; }
|
||||
}
|
||||
21
doc-src/content/stylesheets/partials/_layout.scss
Normal file
21
doc-src/content/stylesheets/partials/_layout.scss
Normal file
@ -0,0 +1,21 @@
|
||||
$min-width: 700px;
|
||||
$side-nav-width: 160px;
|
||||
$main-min-width: $min-width - $side-nav-width;
|
||||
|
||||
body {
|
||||
max-width: 1500px;
|
||||
min-width: $min-width;
|
||||
margin: 0 auto;
|
||||
@extend .sans-font;
|
||||
line-height: 1.45em;
|
||||
}
|
||||
|
||||
#wrap { @extend .group; padding: 0 20px 20px; }
|
||||
#page { @extend .group; padding-bottom: 30px; }
|
||||
footer { @extend .group; clear: both; padding-top: 20px;}
|
||||
header { padding: 22px 0 0; position: relative; }
|
||||
#page aside + article { margin-left: $side-nav-width + 22px; padding-left: 23px; }
|
||||
aside { float: left; width: $side-nav-width; position: relative; z-index: 2;}
|
||||
|
||||
body#home #page article { padding-left: 0;}
|
||||
body.site, body#changelog, body.default { max-width: 1024px; }
|
||||
63
doc-src/content/stylesheets/partials/_main.scss
Normal file
63
doc-src/content/stylesheets/partials/_main.scss
Normal file
@ -0,0 +1,63 @@
|
||||
body.get-involved h1 + p { font-size: 1.2em; line-height: 1.45em; }
|
||||
|
||||
#page {
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
& > article { padding-top: 10px; font-size: 15px;
|
||||
img { max-width: 100%; } } }
|
||||
|
||||
#theme_pref {
|
||||
a { display: block; font-size: 18px; width: .9em; position: relative; text-decoration: none; @extend .pictos; } }
|
||||
|
||||
#docs_panel {
|
||||
position: absolute; top: 0; right: 0;
|
||||
width: 100%;
|
||||
& > div { float: right; margin-left: 10px; @include round-bottom-corners; border: 1px solid; border-top: 0;}
|
||||
a { text-decoration: none; }
|
||||
#theme_pref { padding: 3px 12px 6px; a { position: relative; top: 2px;} }
|
||||
#version { font-size: .75em; padding: 4px 0 5px; background: none; border: none; position: absolute; left: 0; a { @include hover-link; } }
|
||||
|
||||
}
|
||||
|
||||
#syntax_pref, .syntax_pref { padding: 4px 8px 5px; a { font-size: .9em; padding: 0px 6px 1px; display: inline-block; line-height: 1.45em;} }
|
||||
|
||||
.syntax_pref {
|
||||
float: left; @include round-top-corners; border: 1px solid; border-bottom: 0;
|
||||
a { text-decoration: none; }
|
||||
}
|
||||
|
||||
footer {
|
||||
.links { float: left; font-size: .9em;
|
||||
img { vertical-align: middle; padding-right: 5px; position: relative; top: -2px;}
|
||||
span { position: relative; top: -1px; }
|
||||
ul { @include horizontal-list(15px); overflow: visible;
|
||||
li { padding-top: 3px; }
|
||||
li:last-child {border: 0; @include box-shadow(none); } } }
|
||||
}
|
||||
#page article h2 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
h2 a.help {
|
||||
text-indent: -9999px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
@include opacity(.3);
|
||||
&:hover { @include opacity(.7); }
|
||||
&:before {
|
||||
@extend .pictos;
|
||||
content: "?";
|
||||
text-indent: 0;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
font-size: .85em;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
height: 0px;
|
||||
border: 0;
|
||||
border-bottom-width: 4px;
|
||||
margin: 3em 0;
|
||||
background: transparent;
|
||||
}
|
||||
96
doc-src/content/stylesheets/partials/_nav.scss
Normal file
96
doc-src/content/stylesheets/partials/_nav.scss
Normal file
@ -0,0 +1,96 @@
|
||||
.triangle-marker {
|
||||
border-color: transparent transparent;
|
||||
content: "\00a0";
|
||||
height: 0; width: 0;
|
||||
position: absolute;
|
||||
border-style: solid; }
|
||||
|
||||
nav a { @include hover-link; }
|
||||
nav .selected a:hover { text-decoration: none;}
|
||||
|
||||
header { @extend .group;
|
||||
font-size: 1.3em; @extend .heading-font; border-width: 4px;}
|
||||
#main-nav {
|
||||
display: inline-block;
|
||||
padding-bottom: 10px;
|
||||
ul {
|
||||
@include horizontal-list(10px);
|
||||
line-height: 2em; }}
|
||||
|
||||
#sub-nav {
|
||||
@extend .group;
|
||||
padding: 8px 0; }
|
||||
|
||||
#docs-nav, #module-nav {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
a {
|
||||
padding: 2px 10px;
|
||||
display: inline-block; }}
|
||||
|
||||
#docs-nav { padding-right: 30px;
|
||||
& + #module-nav {
|
||||
padding-left: 20px;
|
||||
}}
|
||||
|
||||
#module-nav {
|
||||
display: inline-block;
|
||||
ul { @include horizontal-list(false); }}
|
||||
|
||||
body.getting-started #module-nav li.getting-started,
|
||||
body.tutorial #module-nav li.tutorials,
|
||||
body.support #module-nav li.support,
|
||||
#module-nav li.selected {
|
||||
position: relative;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:before{ @extend .triangle-marker;
|
||||
border-width: 0 8px 8px;
|
||||
z-index: 2;
|
||||
bottom: -9px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
border-bottom-color: #121212;
|
||||
}
|
||||
&:before { @extend .triangle-marker;
|
||||
border-bottom-color: #414141;
|
||||
border-width: 0 6px 6px;
|
||||
z-index: 3;
|
||||
bottom: -9px;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
&:after { @extend .triangle-marker;
|
||||
border-bottom-color: #343434;
|
||||
border-width: 0 5px 5px;
|
||||
z-index: 3;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-docs {
|
||||
width: 170px;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: .3em;
|
||||
//position: absolute; top: 29px; right: 0;
|
||||
&:before {
|
||||
content: "s";
|
||||
display: block;
|
||||
@extend .pictos;
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 4px;
|
||||
font-size: .8em;
|
||||
z-index: 20;
|
||||
@include opacity(.8)
|
||||
}
|
||||
input { @extend .sans-font; @include round-corners;
|
||||
@include box-sizing(border-box);
|
||||
width: 170px; border: 0; margin: 0; padding: 5px 8px 5px 26px;
|
||||
font-size: .8em;
|
||||
float: right;
|
||||
position: relative; } }
|
||||
31
doc-src/content/stylesheets/partials/_sidebar.scss
Normal file
31
doc-src/content/stylesheets/partials/_sidebar.scss
Normal file
@ -0,0 +1,31 @@
|
||||
aside {
|
||||
padding-top: 15px;
|
||||
text-align: right;
|
||||
padding-right: 22px;
|
||||
h2, h3 {
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45em;
|
||||
padding-bottom: .2em;
|
||||
margin-bottom: .4em;
|
||||
@extend .clear-border-radius;
|
||||
}
|
||||
h3 {
|
||||
padding: 0 0 .5em; line-height: 1.1em;
|
||||
}
|
||||
a {
|
||||
font-size: .85em;
|
||||
}
|
||||
ul ul a {
|
||||
&.selected, &.selected:hover {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.deprecated {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.beta span:after {
|
||||
content: " (\3B2)";
|
||||
}
|
||||
}
|
||||
275
doc-src/content/stylesheets/partials/_theme.scss
Normal file
275
doc-src/content/stylesheets/partials/_theme.scss
Normal file
@ -0,0 +1,275 @@
|
||||
@mixin site-theme($theme, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg){
|
||||
background: $page-bg;
|
||||
body { background: $page-bg; color: $text;
|
||||
a { color: $link; } }
|
||||
|
||||
#page { @extend .horizontal-rule-#{$theme}; }
|
||||
header { @extend .horizontal-rule-#{$theme}; border-width: 4px; }
|
||||
|
||||
nav a { color: $nav-link; }
|
||||
#main-nav a { color: $main-nav;}
|
||||
|
||||
body#home #main-nav a[rel=home],
|
||||
body#help #main-nav a[rel=help],
|
||||
body.tutorial #main-nav a[rel=help],
|
||||
body.reference #main-nav a[rel=documentation],
|
||||
body#changelog #main-nav a[rel=documentation],
|
||||
body.demo #main-nav a[rel=documentation],
|
||||
body#get-involved #main-nav a[rel=get-involved]{ color: $main-nav-selected; }
|
||||
|
||||
#search-docs input {
|
||||
@extend .inset-panel-#{$theme}; color: $search;
|
||||
&::-webkit-input-placeholder { color: $search; } }
|
||||
#{headings()}{ color: $heading;
|
||||
strong { color: $main-nav-selected; }
|
||||
em { color: $code; } }
|
||||
|
||||
#page > article h2 { @extend .horizontal-rule-top-#{$theme}; }
|
||||
hr { @extend .horizontal-rule-#{$theme};
|
||||
border-bottom-width: 8px}
|
||||
body#home h2 { @extend .horizontal-rule-#{$theme}; }
|
||||
|
||||
#page aside + article { @extend .vertical-rule-left-#{$theme}; }
|
||||
|
||||
aside {
|
||||
h2 a { color: $strong-text; }
|
||||
h2, h3 { @extend .horizontal-rule-#{$theme}; }}
|
||||
|
||||
footer .links li { @extend .vertical-rule-#{$theme}; }
|
||||
code { @extend .code-block-#{$theme}; color: $code; }
|
||||
|
||||
#theme_pref { @extend .theme-switch-#{$theme}; }
|
||||
#docs_panel div, .syntax_pref { background: $option-panel-bg; border-color: $option-panel-border; }
|
||||
|
||||
body#home .overview div { @extend .inset-panel-#{$theme};
|
||||
h4 { @extend .horizontal-rule-#{$theme}; } }
|
||||
#featured_sites li { @extend .inset-panel-#{$theme}; }
|
||||
|
||||
}
|
||||
@mixin docs-theme($theme, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected){
|
||||
|
||||
#page > article {
|
||||
h1 { @extend .horizontal-rule-#{$theme}; }
|
||||
h2 { @extend .horizontal-rule-top-#{$theme}; }
|
||||
h3 { @extend .heading-panel-#{$theme}; }
|
||||
h1 + h2, hr + h2 {
|
||||
@extend .clear-box-shadow; border-top: 0;
|
||||
margin-top: 0;}
|
||||
}
|
||||
|
||||
#sub-nav { @extend .horizontal-rule-#{$theme}; }
|
||||
#docs-nav { @extend .vertical-rule-#{$theme}; }
|
||||
body.core a[rel=core], body.blueprint a[rel=blueprint]{ @extend .inset-panel-#{$theme}; color: $docs-nav-selected; @extend .round-corners-4;}
|
||||
#main-nav a[rel=home] { @include replace-text-with-dimensions("compass-logo-small-#{$theme}.png"); display: inline-block; float: left; }
|
||||
|
||||
#module-nav {
|
||||
ul { overflow: visible; }}
|
||||
body.getting-started #module-nav li.getting-started,
|
||||
body.tutorial #module-nav li.tutorials,
|
||||
body.support #module-nav li.support,
|
||||
#module-nav li.selected { @extend .selected-marker-#{$theme};
|
||||
a { color: $module-nav-selected; } }
|
||||
|
||||
a[rel=sass], a[rel=scss], a[rel=css], a[rel=html], a[rel=haml] { @extend .syntax-switch-#{$theme}; }
|
||||
&.sass a[rel=sass], &.scss a[rel=scss], &.css a[rel=css], &.html a[rel=html], &.haml a[rel=haml] { color: $heading; color: rgba($heading, .7); @extend .round-corners-em; @extend .inset-panel-#{$theme}; }
|
||||
|
||||
#version { color: rgba($heading, .3); a { color: rgba($nav-link, .7); } }
|
||||
.mixin-source, .example-source, .function-source { @extend .mixin-panel-#{$theme};
|
||||
.container textarea { color: $code; }
|
||||
}
|
||||
h2 a.help { color: $heading;}
|
||||
|
||||
.source-documentation { @extend .doc-panel-#{$theme}; }
|
||||
|
||||
#demo { @extend .demo-#{$theme}; }
|
||||
|
||||
.arg { color: $code; }
|
||||
.arg[data-default-value] { color: rgba($code, .7); }
|
||||
a[rel="view source"]{ color: rgba($heading, .5); &:hover{ color: rgba($heading, .8);} }
|
||||
|
||||
}
|
||||
|
||||
// Dark theme
|
||||
.inset-panel-dark {
|
||||
@include box-shadow(rgba(#fff, .1) 0 1px 0, rgba(#000, .8) 0 1px 7px 0px inset);
|
||||
background: darken(#2f2f2f, 6); background-color: rgba(#000, .3); }
|
||||
|
||||
.horizontal-rule-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 0 1px 0);
|
||||
border-bottom: 1px solid #121212; }
|
||||
|
||||
.horizontal-rule-top-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 0 1px 0 inset);
|
||||
border-top: 1px solid #121212; }
|
||||
|
||||
.vertical-rule-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 1px 0 0);
|
||||
border-right: 1px solid #121212; }
|
||||
|
||||
.vertical-rule-left-dark {
|
||||
@include box-shadow(rgba(#fff, .07) 1px 0 0 inset);
|
||||
border-left: 1px solid #121212; }
|
||||
|
||||
.code-block-dark { @extend .code-block; @extend .inset-panel-dark; }
|
||||
|
||||
.demo-dark {
|
||||
@include box-shadow(rgba(#000, .5) 0 2px 10px inset, rgba(#fff, .3) 0 1px 2px 0px, rgba(#000, .8) 0 0 0 1px inset); }
|
||||
|
||||
.heading-panel-dark {
|
||||
background: darken(#2f2f2f, 6);
|
||||
background: rgba(#000, .2);
|
||||
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
||||
a:hover { color: #fff;
|
||||
.arg { color: rgba(#fff, .6);}
|
||||
}
|
||||
}
|
||||
.doc-panel-dark {
|
||||
background: darken(#2f2f2f, 4);
|
||||
background: rgba(#000, .1);
|
||||
@include box-shadow(rgba(#000, .2) 0 0 0 1px inset);
|
||||
}
|
||||
|
||||
.syntax-switch-dark {
|
||||
color: #000; text-shadow: rgba(#fff, .08) 0 1px 0;
|
||||
&:hover { color: #fff; text-shadow: #000 0 1px 0; } }
|
||||
|
||||
.theme-switch-dark {
|
||||
cursor: pointer;
|
||||
a { color: #000; color: rgba(#000, .8); text-shadow: rgba(#fff, .08) 0 1px 0; }
|
||||
&:hover a { color: #eee; text-shadow: #000 0 1px 0; } }
|
||||
|
||||
.selected-marker-dark {
|
||||
a:before{ border-bottom-color: #121212; }
|
||||
&:before { border-bottom-color: #414141; }
|
||||
&:after { border-bottom-color: #323232; }
|
||||
}
|
||||
.mixin-panel-dark {
|
||||
@extend .inset-panel-dark;
|
||||
td.gutter { background: rgba(#fff, .05); .line { border-right: 2px solid rgba(#fff, .15); color: rgba(#fff, .5); }}
|
||||
.container textarea { background: darken(#2f2f2f, 6); }
|
||||
}
|
||||
|
||||
@mixin dark-theme($docs: false) {
|
||||
$page-bg: #2f2f2f;
|
||||
|
||||
$text: #c6c6c6;
|
||||
$heading: white;
|
||||
$strong-text: #dbdbdb;
|
||||
|
||||
$search: #6e6e6e;
|
||||
|
||||
$code: #dadbb1;
|
||||
$nav-link: #bfbfbf;
|
||||
$link: saturate(lighten(#85AFC9, 4), 19);
|
||||
|
||||
$main-nav: white;
|
||||
$main-nav-selected: #fb292d;
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
||||
$option-panel-border: rgba(#000, .5);
|
||||
$option-panel-bg: rgba(#fff, .06);
|
||||
|
||||
@include site-theme(dark, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
|
||||
|
||||
@if($docs){
|
||||
@include docs-theme(dark, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
|
||||
.syntaxhighlighter, pre, pre .code-block:first-child {
|
||||
&::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .5) 0 0 3px 1px inset; background: rgba(#000, .2); }
|
||||
}
|
||||
.syntaxhighlighter, pre, pre .code-block:first-child {
|
||||
&::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#fff, .3), rgba(#fff, 0))) #000; -webkit-box-shadow: rgba(black, 0.8) 0px 0 0 1px inset; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light Theme
|
||||
.inset-panel-light {
|
||||
@include box-shadow(rgba(#fff, 1) 0 1px 0, rgba(#000, .5) 0 1px 3px 0px inset);
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
background: darken(#fff, .04); background-color: rgba(#000, .04); }
|
||||
|
||||
.horizontal-rule-light {
|
||||
@include box-shadow(#fff 0 1px 0);
|
||||
border-bottom: 1px solid #bbb; }
|
||||
|
||||
.horizontal-rule-top-light {
|
||||
@include box-shadow(#fff 0 1px 0 inset);
|
||||
border-top: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0);
|
||||
border-right: 1px solid #bbb; }
|
||||
|
||||
.vertical-rule-left-light {
|
||||
@include single-box-shadow(rgba(#fff, 1), 1px, 0, 0 inset);
|
||||
border-left: 1px solid #bbb; }
|
||||
|
||||
.code-block-light { @extend .code-block; @extend .inset-panel-light; background: rgba(#fff, .5); }
|
||||
|
||||
.demo-light { @include box-shadow(rgba(#000, .3) 0 2px 10px inset, #fff 0 1px 2px 0px, rgba(#000, .05) 0 0 0 1px inset); }
|
||||
|
||||
.syntax-switch-light {
|
||||
color: rgba(#000, .3); text-shadow: rgba(#fff, .08) 0 1px 0;
|
||||
&:hover { color: #000; text-shadow: #fff 0 1px 0; }}
|
||||
|
||||
.theme-switch-light {
|
||||
cursor: pointer;
|
||||
a {color: rgba(#000, .2); text-shadow: rgba(#fff, 1) 0 1px 0;}
|
||||
&:hover a { color: #000; } }
|
||||
|
||||
.heading-panel-light {
|
||||
background: rgba(#fff, .5);
|
||||
@include box-shadow(rgba(#000, .13) 0 0 0 1px inset);
|
||||
a:hover { color: #000;
|
||||
.arg { color: rgba(#000, .6); } }
|
||||
}
|
||||
|
||||
.selected-marker-light {
|
||||
a:before{ border-bottom-color: #bbbbbb; }
|
||||
&:before { border-bottom-color: #fff; }
|
||||
&:after { border-bottom-color: #e5e5e5; }
|
||||
}
|
||||
|
||||
.doc-panel-light {
|
||||
background: rgba(#000, .03);
|
||||
text-shadow: rgba(#fff, .9) 0 1px 1px;
|
||||
@include box-shadow(rgba(#000, .15) 0 0 0 1px inset);
|
||||
}
|
||||
|
||||
.mixin-panel-light {
|
||||
@extend .inset-panel-light;
|
||||
background: rgba(#fff, .8);
|
||||
td.gutter { background: rgba(#000, .08); .line { border-right: 2px solid rgba(#000, .2); color: rgba(#000, .4); } }
|
||||
.container textarea { background: darken(#fff, .04); }
|
||||
}
|
||||
|
||||
@mixin light-theme($docs: false) {
|
||||
$page-bg: #ececec; // image-url('bg-light.jpg');
|
||||
|
||||
$text: #111;
|
||||
$heading: #222;
|
||||
$strong-text: #000;
|
||||
|
||||
$search: #666;
|
||||
|
||||
$link: #307eb6;
|
||||
$nav-link: #444;
|
||||
$code: #222;
|
||||
|
||||
$main-nav: #000;
|
||||
$main-nav-selected: darken(#fb292d, 15);
|
||||
$docs-nav-selected: $strong-text;
|
||||
$module-nav-selected: $link;
|
||||
|
||||
$option-panel-border: rgba(#000, .2);
|
||||
$option-panel-bg: #fff;
|
||||
|
||||
@include site-theme(light, $page-bg, $text, $strong-text, $heading, $link, $code, $search, $nav-link, $main-nav, $main-nav-selected, $option-panel-border, $option-panel-bg);
|
||||
|
||||
@if($docs){
|
||||
@include docs-theme(light, $heading, $code, $nav-link, $docs-nav-selected, $module-nav-selected);
|
||||
.syntaxhighlighter::-webkit-scrollbar-track-piece { -webkit-box-shadow: rgba(#000, .3) 0 0 3px 1px inset; background: rgba(#ddd, .8); }
|
||||
.syntaxhighlighter::-webkit-scrollbar-thumb:horizontal { background: -webkit(linear-gradient(rgba(#000, 0) 40%, rgba(#000, .2))) #fff; -webkit-box-shadow: rgba(black, 0.2) 0px 0 0 1px inset; }
|
||||
}
|
||||
}
|
||||
47
doc-src/content/stylesheets/partials/_typography.scss
Normal file
47
doc-src/content/stylesheets/partials/_typography.scss
Normal file
@ -0,0 +1,47 @@
|
||||
@font-face {
|
||||
font-family: "pictos-web";
|
||||
src: url('/otherfonts/pictos-web.eot');
|
||||
src: local("?"), url('/otherfonts/pictos-web.woff') format('woff'), url('/otherfonts/pictos-web.ttf') format('truetype'), url('/otherfonts/pictos-web.svg#webfontIyfZbseF') format('svg');}
|
||||
|
||||
@include font-face("museosans-web", font-files("museosans-web.woff", woff, "museosans-web.ttf", truetype, "museosans-web.svg#webfontJHBEijmD", svg), 'museosans-web.eot');
|
||||
|
||||
|
||||
.sans-font { font-family: 'Lucida Grande', Arial, sans-serif; }
|
||||
.heading-font { font-family: 'Museo Sans', "museosans-web", 'serif'; }
|
||||
.pictos { font-family: pictos, pictos-web; font-weight: normal; font-style: normal;}
|
||||
.fixed-font { font-family: menlo, monaco, "andale mono", "courier new", fixed;}
|
||||
|
||||
#page {
|
||||
line-height: 1.45em;
|
||||
ol { list-style: outside decimal; padding-left: 2.5em; }
|
||||
ol ol { list-style: outside lower-alpha; padding-left: 2.5em; }
|
||||
ul, ol, dl { margin-bottom: 1.5em;}
|
||||
p { margin-bottom: 1.2em;}
|
||||
#{headings(1,2)}{ @extend .heading-font; line-height: 1.2em; }
|
||||
h1 { font-size: 35px; margin-bottom: 15px; padding-bottom: 6px; }
|
||||
h2 { font-size: 26px; margin: 1em 0 15px; padding-bottom: 6px; }
|
||||
h3 { font-size: 18px; }
|
||||
h4 { font-size: 18px; margin: .4em 0; }
|
||||
ul { list-style: inside disc; }
|
||||
dt { font-weight: bold; }
|
||||
}
|
||||
#page aside {
|
||||
ul { list-style: none; margin-bottom: 1em;}
|
||||
h2 { line-height: 1.3em; margin-top: 0; padding-top: 3px;}
|
||||
}
|
||||
em { font-style: italic; }
|
||||
strong { font-weight: bold; }
|
||||
|
||||
#page > article {
|
||||
ul ul { padding-left: 1em; }
|
||||
position: relative;
|
||||
h2 { font-size: 26px; margin: .5em 0 .6em;
|
||||
padding: 1em 0 6px;}
|
||||
hr + h2 { padding-top: 0; }
|
||||
hr + h3, h4, h5 { margin-top: 0; }
|
||||
}
|
||||
|
||||
dl.table dt, dl.table dd { display: inline-block; }
|
||||
dg { display: block; margin-bottom: 1.5em; }
|
||||
|
||||
.warning { color: #c00; }
|
||||
@ -25,4 +25,4 @@
|
||||
|
||||
|
||||
html.dark { @include dark-theme(true); }
|
||||
html.light { @include light-theme(true); }
|
||||
html.light { @include light-theme(true); }
|
||||
|
||||
216
doc-src/content/stylesheets/syntax/_shCore.scss
Normal file
216
doc-src/content/stylesheets/syntax/_shCore.scss
Normal file
@ -0,0 +1,216 @@
|
||||
@mixin round_corners_custom($top, $right, $bottom, $left) {
|
||||
-moz-border-radius: $top $right $bottom $left !important;
|
||||
-webkit-border-radius: $top $right $bottom $left !important;
|
||||
}
|
||||
|
||||
@mixin round_corners($radius) {
|
||||
@include round_corners_custom($radius, $radius, $radius, $radius);
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
a,
|
||||
div,
|
||||
code,
|
||||
table,
|
||||
table td,
|
||||
table tr,
|
||||
table tbody,
|
||||
table thead,
|
||||
table caption,
|
||||
textarea {
|
||||
@include round_corners(0);
|
||||
|
||||
background: none !important;
|
||||
border: 0 !important;
|
||||
bottom: auto !important;
|
||||
float: none !important;
|
||||
height: auto !important;
|
||||
left: auto !important;
|
||||
line-height: 1.1em !important;
|
||||
margin: 0 !important;
|
||||
outline: 0 !important;
|
||||
overflow: visible !important;
|
||||
padding: 0 !important;
|
||||
position: static !important;
|
||||
right: auto !important;
|
||||
text-align: left !important;
|
||||
top: auto !important;
|
||||
vertical-align: baseline !important;
|
||||
width: auto !important;
|
||||
box-sizing: content-box !important;
|
||||
font: {
|
||||
family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
|
||||
weight: normal !important;
|
||||
style: normal !important;
|
||||
size: 1em !important;
|
||||
}
|
||||
min: {
|
||||
// For IE8, FF & WebKit
|
||||
height: inherit !important;
|
||||
// For IE7
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
width: 100% !important;
|
||||
margin: 1em 0 1em 0 !important;
|
||||
|
||||
position: relative !important;
|
||||
overflow: auto !important;
|
||||
font-size: 1em !important;
|
||||
|
||||
&.source { overflow: hidden !important; }
|
||||
|
||||
// set up bold and italic
|
||||
.bold { font-weight: bold !important; }
|
||||
.italic { font-style: italic !important; }
|
||||
|
||||
.line { white-space: pre !important; }
|
||||
|
||||
// main table and columns
|
||||
table {
|
||||
width: 100% !important;
|
||||
caption {
|
||||
text-align: left !important;
|
||||
padding: .5em 0 0.5em 1em !important;
|
||||
}
|
||||
|
||||
td.code {
|
||||
width: 100% !important;
|
||||
|
||||
.container {
|
||||
position: relative !important;
|
||||
|
||||
textarea {
|
||||
box-sizing: border-box !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: none !important;
|
||||
background: white !important;
|
||||
padding-left: 1em !important;
|
||||
overflow: hidden !important;
|
||||
white-space: pre !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// middle spacing between line numbers and lines
|
||||
td.gutter .line {
|
||||
text-align: right !important;
|
||||
padding: 0 0.5em 0 1em !important;
|
||||
}
|
||||
|
||||
td.code .line {
|
||||
padding: 0 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.nogutter {
|
||||
td.code {
|
||||
.container textarea, .line { padding-left: 0em !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&.show { display: block !important; }
|
||||
|
||||
// Adjust some properties when collapsed
|
||||
&.collapsed {
|
||||
table { display: none !important; }
|
||||
|
||||
.toolbar {
|
||||
padding: 0.1em 0.8em 0em 0.8em !important;
|
||||
font-size: 1em !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
span {
|
||||
display: inline !important;
|
||||
margin-right: 1em !important;
|
||||
|
||||
a {
|
||||
padding: 0 !important;
|
||||
display: none !important;
|
||||
&.expandSource { display: inline !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles for the toolbar
|
||||
.toolbar {
|
||||
position: absolute !important;
|
||||
right: 1px !important;
|
||||
top: 1px !important;
|
||||
width: 11px !important;
|
||||
height: 11px !important;
|
||||
font-size: 10px !important;
|
||||
z-index: 10 !important;
|
||||
|
||||
span.title { display: inline !important; }
|
||||
|
||||
a {
|
||||
display: block !important;
|
||||
text-align: center !important;
|
||||
text-decoration: none !important;
|
||||
padding-top: 1px !important;
|
||||
|
||||
&.expandSource { display: none !important; }
|
||||
}
|
||||
}
|
||||
|
||||
&.ie {
|
||||
font-size: .9em !important;
|
||||
padding: 1px 0 1px 0 !important;
|
||||
|
||||
.toolbar {
|
||||
line-height: 8px !important;
|
||||
a {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Print view.
|
||||
// Colors are based on the default theme without background.
|
||||
&.printing {
|
||||
.line.alt1 .content,
|
||||
.line.alt2 .content,
|
||||
.line.highlighted .number,
|
||||
.line.highlighted.alt1 .content,
|
||||
.line.highlighted.alt2 .content { background: none !important; }
|
||||
|
||||
// Gutter line numbers
|
||||
.line {
|
||||
.number { color: #bbbbbb !important; }
|
||||
// Add border to the lines
|
||||
.content { color: black !important; }
|
||||
}
|
||||
|
||||
// Toolbar when visible
|
||||
.toolbar { display: none !important; }
|
||||
a { text-decoration: none !important; }
|
||||
.plain, .plain a { color: black !important; }
|
||||
.comments, .comments a { color: #008200 !important; }
|
||||
.string, .string a { color: blue !important; }
|
||||
.keyword {
|
||||
color: #006699 !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.preprocessor { color: gray !important; }
|
||||
.variable { color: #aa7700 !important; }
|
||||
.value { color: #009900 !important; }
|
||||
.functions { color: #ff1493 !important; }
|
||||
.constants { color: #0066cc !important; }
|
||||
.script { font-weight: bold !important; }
|
||||
.color1, .color1 a { color: gray !important; }
|
||||
.color2, .color2 a { color: #ff1493 !important; }
|
||||
.color3, .color3 a { color: red !important; }
|
||||
.break, .break a { color: black !important; }
|
||||
}
|
||||
}
|
||||
113
doc-src/content/stylesheets/syntax/_shThemeRDark.scss
Normal file
113
doc-src/content/stylesheets/syntax/_shThemeRDark.scss
Normal file
@ -0,0 +1,113 @@
|
||||
|
||||
// Dark Theme
|
||||
|
||||
$background: none;
|
||||
|
||||
$line_highlighted_background: #323E41;
|
||||
$line_highlighted_number: #b9bdb6;
|
||||
|
||||
$gutter_text: #afafaf;
|
||||
$gutter_border_color: rgba(#fff, .15);
|
||||
|
||||
$toolbar_collapsed_a: #5ba1cf;
|
||||
$toolbar_collapsed_a_hover: #5ce638;
|
||||
$toolbar_collapsed_background: #000;
|
||||
|
||||
$toolbar_a: #fff;
|
||||
$toolbar_a_hover: #e0e8ff;
|
||||
|
||||
$code_plain: #dadbb1;
|
||||
$code_comments: #878a85;
|
||||
$code_string: #64b041;
|
||||
$code_keyword: #6cc7eb;
|
||||
$code_preprocessor: #cd5c57;
|
||||
$code_variable: $code_keyword;
|
||||
$code_value: #ffa0a0;
|
||||
$code_functions: #3d95e6;
|
||||
$code_constants: #e0e8ff;
|
||||
$code_script: $code_keyword;
|
||||
$code_script_background: none;
|
||||
$code_color1: #b0b76b;
|
||||
$code_color2: #98f77a;
|
||||
$code_color3: #ffaa3e;
|
||||
$code_color4: $code_plain;
|
||||
|
||||
//@import "theme_template.scss";
|
||||
|
||||
// Interface elements.
|
||||
html.dark .syntaxhighlighter {
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain; }
|
||||
.comments, .comments a { color: $code_comments; }
|
||||
.string, .string a { color: $code_string; }
|
||||
.keyword { color: $code_keyword; }
|
||||
.preprocessor { color: $code_preprocessor; }
|
||||
.variable { color: $code_variable; }
|
||||
.value { color: $code_value; }
|
||||
.functions { color: $code_functions; }
|
||||
.constants { color: $code_constants; }
|
||||
.script {
|
||||
font-weight: bold;
|
||||
color: $code_script;
|
||||
background-color: $code_script_background;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1; }
|
||||
.color2, .color2 a { color: $code_color2; }
|
||||
.color3, .color3 a { color: $code_color3; }
|
||||
.color4, .color4 a { color: $code_color4; }
|
||||
}
|
||||
|
||||
// Light Theme
|
||||
|
||||
$background: none;
|
||||
|
||||
$line_highlighted_background: #c3defe;
|
||||
$line_highlighted_number: #fff;
|
||||
|
||||
$gutter_text: #787878;
|
||||
$gutter_border_color: #d4d0c8;
|
||||
|
||||
$toolbar_collapsed_a: #3f5fbf;
|
||||
$toolbar_collapsed_a_hover: #aa7700;
|
||||
$toolbar_collapsed_background: #fff;
|
||||
|
||||
$toolbar_a: #a0a0a0;
|
||||
$toolbar_a_hover: red;
|
||||
|
||||
$code_plain: black;
|
||||
$code_comments: #3f5fbf;
|
||||
$code_string: #4fa33f;
|
||||
$code_keyword: #7f0055;
|
||||
$code_preprocessor: #006699;
|
||||
$code_variable: #aa7700;
|
||||
$code_value: #4fa33f;
|
||||
$code_functions: #b553ba;
|
||||
$code_constants: #0066cc;
|
||||
$code_color1: gray;
|
||||
$code_color2: #ca6436;
|
||||
$code_color3: red;
|
||||
$code_color4: $code_plain;
|
||||
|
||||
// Interface elements.
|
||||
html.light .syntaxhighlighter {
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain; }
|
||||
.comments, .comments a { color: $code_comments; }
|
||||
.string, .string a { color: $code_string; }
|
||||
.keyword { color: $code_keyword; }
|
||||
.preprocessor { color: $code_preprocessor; }
|
||||
.variable { color: $code_variable; }
|
||||
.value { color: $code_value; }
|
||||
.functions { color: $code_functions; }
|
||||
.constants { color: $code_constants; }
|
||||
.script {
|
||||
font-weight: bold;
|
||||
color: $code_script;
|
||||
background-color: $code_script_background;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1; }
|
||||
.color2, .color2 a { color: $code_color2; }
|
||||
.color3, .color3 a { color: $code_color3; }
|
||||
.color4, .color4 a { color: $code_color4; }
|
||||
}
|
||||
|
||||
8
doc-src/content/stylesheets/syntax/_syntax-theme.scss
Normal file
8
doc-src/content/stylesheets/syntax/_syntax-theme.scss
Normal file
@ -0,0 +1,8 @@
|
||||
// Default Syntax Highlighter theme.
|
||||
//@import "shCore.scss";
|
||||
|
||||
@import "shThemeRDark.scss";
|
||||
|
||||
/*.syntaxhighlighter {
|
||||
.keyword { font-weight: bold !important; }
|
||||
}*/
|
||||
120
doc-src/content/stylesheets/syntax/_theme_template.scss
Normal file
120
doc-src/content/stylesheets/syntax/_theme_template.scss
Normal file
@ -0,0 +1,120 @@
|
||||
$background: white !default;
|
||||
|
||||
$line_alt1_background: $background !default;
|
||||
$line_alt2_background: $background !default;
|
||||
|
||||
$line_highlighted_background: #e0e0e0 !default;
|
||||
$line_highlighted_number: black !default;
|
||||
|
||||
$gutter_text: #afafaf !default;
|
||||
$gutter_border_color: #6ce26c !default;
|
||||
$gutter_border: 3px solid $gutter_border_color !default;
|
||||
|
||||
$toolbar_collapsed_a: #00f !default;
|
||||
$toolbar_collapsed_a_hover: #f00 !default;
|
||||
$toolbar_collapsed_background: #fff !default;
|
||||
$toolbar_collapsed_border: 1px solid $gutter_border_color !default;
|
||||
|
||||
$toolbar_a: #fff !default;
|
||||
$toolbar_a_hover: #000 !default;
|
||||
$toolbar_background: $gutter_border_color !default;
|
||||
$toolbar_border: none !default;
|
||||
|
||||
$code_plain: black !default;
|
||||
$code_comments: #008200 !default;
|
||||
$code_string: blue !default;
|
||||
$code_keyword: #006699 !default;
|
||||
$code_preprocessor: gray !default;
|
||||
$code_variable: #aa7700 !default;
|
||||
$code_value: #009900 !default;
|
||||
$code_functions: #ff1493 !default;
|
||||
$code_constants: #0066cc !default;
|
||||
$code_script: $code_keyword !default;
|
||||
$code_script_background: none !default;
|
||||
$code_color1: gray !default;
|
||||
$code_color2: #ff1493 !default;
|
||||
$code_color3: red !default;
|
||||
|
||||
$caption_color: $code_plain !default;
|
||||
|
||||
// Interface elements.
|
||||
.syntaxhighlighter {
|
||||
background-color: $background !important;
|
||||
|
||||
// Highlighed line number
|
||||
.line {
|
||||
&.alt1 { background-color: $line_alt1_background !important; }
|
||||
&.alt2 { background-color: $line_alt2_background !important; }
|
||||
|
||||
// Highlighed line
|
||||
&.highlighted {
|
||||
&.alt1, &.alt2 { background-color: $line_highlighted_background !important; }
|
||||
&.number { color: $line_highlighted_number !important; }
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
caption {
|
||||
color: $caption_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Add border to the lines
|
||||
.gutter {
|
||||
color: $gutter_text !important;
|
||||
.line {
|
||||
border-right: $gutter_border !important;
|
||||
|
||||
&.highlighted {
|
||||
background-color: $gutter_border_color !important;
|
||||
color: $background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.printing .line .content { border: none !important; }
|
||||
|
||||
&.collapsed {
|
||||
overflow: visible !important;
|
||||
|
||||
.toolbar {
|
||||
color: $toolbar_collapsed_a !important;
|
||||
background: $toolbar_collapsed_background !important;
|
||||
border: $toolbar_collapsed_border !important;
|
||||
|
||||
a {
|
||||
color: $toolbar_collapsed_a !important;
|
||||
&:hover { color: $toolbar_collapsed_a_hover !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
color: $toolbar_a !important;
|
||||
background: $toolbar_background !important;
|
||||
border: $toolbar_border !important;
|
||||
a {
|
||||
color: $toolbar_a !important;
|
||||
&:hover { color: $toolbar_a_hover !important; }
|
||||
}
|
||||
}
|
||||
|
||||
// Actual syntax highlighter colors.
|
||||
.plain, .plain a { color: $code_plain !important; }
|
||||
.comments, .comments a { color: $code_comments !important; }
|
||||
.string, .string a { color: $code_string !important; }
|
||||
.keyword { color: $code_keyword !important; }
|
||||
.preprocessor { color: $code_preprocessor !important; }
|
||||
.variable { color: $code_variable !important; }
|
||||
.value { color: $code_value !important; }
|
||||
.functions { color: $code_functions !important; }
|
||||
.constants { color: $code_constants !important; }
|
||||
.script {
|
||||
font-weight: bold !important;
|
||||
color: $code_script !important;
|
||||
background-color: $code_script_background !important;
|
||||
}
|
||||
.color1, .color1 a { color: $code_color1 !important; }
|
||||
.color2, .color2 a { color: $code_color2 !important; }
|
||||
.color3, .color3 a { color: $code_color3 !important; }
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
%h1 Demo: #{@item[:title]}
|
||||
#demo= example_html
|
||||
|
||||
= yield if block_given?
|
||||
= yield
|
||||
|
||||
#how
|
||||
%section#markup
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
%p.beta
|
||||
This module is fairly new and is currently in BETA (β).
|
||||
|
||||
= yield if block_given?
|
||||
= yield
|
||||
|
||||
%p
|
||||
This file can be imported using:
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
# All files in the 'lib' directory will be loaded
|
||||
# before nanoc starts compiling.
|
||||
require 'erb'
|
||||
require 'active_support/inflector'
|
||||
|
||||
include Nanoc3::Helpers::LinkTo
|
||||
include Nanoc3::Helpers::Capturing
|
||||
include Nanoc3::Helpers::Rendering
|
||||
@ -137,17 +136,4 @@ end
|
||||
def long_compass_version
|
||||
require 'compass/commands'
|
||||
Compass::Commands::PrintVersion.long_output_string
|
||||
end
|
||||
|
||||
|
||||
def sprite_tutorial_links(index=false)
|
||||
string = <<-ERB
|
||||
<% unless index %>
|
||||
* [Sprite Tutorial Index](/help/tutorials/spriting/)
|
||||
<% end %>
|
||||
<% Dir["./content/help/tutorials/spriting/**/*.markdown"].sort.each do |file| %>
|
||||
* [<%= File.basename(file, '.markdown').gsub('-', ' ').titleize %>](/help/tutorials/spriting/<%= File.basename(file, '.markdown') %>)
|
||||
<% end %>
|
||||
ERB
|
||||
::ERB.new(string).result(binding)
|
||||
end
|
||||
end
|
||||
@ -9,9 +9,8 @@ def fetch(uri_str, limit = 10)
|
||||
|
||||
url = URI.parse(uri_str)
|
||||
http = Net::HTTP.new(url.host, url.port)
|
||||
http.open_timeout = 10
|
||||
http.open_timeout = 2
|
||||
http.read_timeout = 30
|
||||
http.use_ssl = true
|
||||
response = http.start do |http|
|
||||
puts "getting #{url.path}"
|
||||
http.request_get(url.path)
|
||||
@ -26,7 +25,7 @@ def fetch(uri_str, limit = 10)
|
||||
end
|
||||
|
||||
def install_from_github(user, project, ext_name, branch = "master", working_directory = Dir.pwd)
|
||||
download_link = "https://github.com/#{user}/#{project}/zipball/#{branch}"
|
||||
download_link = "http://github.com/#{user}/#{project}/zipball/#{branch}"
|
||||
extdir = File.join(working_directory,'extensions')
|
||||
|
||||
if !File.exists?("#{extdir}/#{ext_name}")
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
require File.join(File.dirname(__FILE__), '..', 'downloader')
|
||||
|
||||
install_from_github('nextmat', 'compass-960-plugin', 'ninesixty')
|
||||
install_from_github('chriseppstein', 'compass-960-plugin', 'ninesixty')
|
||||
|
||||
|
||||
@ -200,7 +200,7 @@ Feature: Command Line
|
||||
| tmp/box_shadow.css |
|
||||
| tmp/columns.css |
|
||||
| tmp/fonts.css |
|
||||
| images/flag-s8c3c755a68.png |
|
||||
| images/flag-s03c3b29b35.png |
|
||||
And the following files are removed:
|
||||
| .sass-cache/ |
|
||||
| tmp/border_radius.css |
|
||||
@ -208,7 +208,7 @@ Feature: Command Line
|
||||
| tmp/box_shadow.css |
|
||||
| tmp/columns.css |
|
||||
| tmp/fonts.css |
|
||||
| images/flag-s8c3c755a68.png |
|
||||
| images/flag-s03c3b29b35.png |
|
||||
|
||||
Scenario: Watching a project for changes
|
||||
Given ruby supports fork
|
||||
|
||||
@ -133,7 +133,6 @@ end
|
||||
|
||||
Then "the following files are reported removed:" do |table|
|
||||
table.rows.each do |css_file|
|
||||
#need to find a better way but this works for now
|
||||
Then %Q{a css file #{css_file.first} is reported removed}
|
||||
end
|
||||
end
|
||||
|
||||
@ -6,8 +6,6 @@
|
||||
// * $font-files is required using font-files('relative/location', 'format').
|
||||
// for best results use this order: woff, opentype/truetype, svg
|
||||
// * $eot is required by IE, and is a relative location of the eot file.
|
||||
// * $weight shows if the font is bold, defaults to normal
|
||||
// * $style defaults to normal, might be also italic
|
||||
// * For android 2.2 Compatiblity, please ensure that your web page has
|
||||
// a meta viewport tag.
|
||||
// * To support iOS < 4.2, an SVG file must be provided
|
||||
@ -15,20 +13,13 @@
|
||||
// If you need to generate other formats check out the Font Squirrel
|
||||
// [font generator](http://www.fontsquirrel.com/fontface/generator)
|
||||
//
|
||||
|
||||
// In order to refer to a specific style of the font in your stylesheets as
|
||||
// e.g. "font-style: italic;", you may add a couple of @font-face includes
|
||||
// containing the respective font files for each style and specying
|
||||
// respective the $style parameter.
|
||||
|
||||
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
|
||||
|
||||
// Example:
|
||||
//
|
||||
// @include font-face("this name", font-files("this.woff", woff, "this.otf", opentype), "this.eot")
|
||||
@mixin font-face(
|
||||
$name,
|
||||
$font-files,
|
||||
$eot: false,
|
||||
$weight: false,
|
||||
$style: false
|
||||
$eot: false
|
||||
) {
|
||||
$iefont: unquote("#{$eot}?iefix");
|
||||
@font-face {
|
||||
@ -37,27 +28,6 @@
|
||||
src: font-url($eot);
|
||||
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
|
||||
}
|
||||
src: $font-files;
|
||||
@if $weight {
|
||||
font-weight: $weight;
|
||||
}
|
||||
@if $style {
|
||||
font-style: $style;
|
||||
}
|
||||
src: $font-files;
|
||||
}
|
||||
}
|
||||
|
||||
// EXAMPLE
|
||||
// +font-face("this name", font-files("this.woff", "woff", "this.otf", "opentype"), "this.eot", bold, italic)
|
||||
//
|
||||
// will generate:
|
||||
//
|
||||
// @font-face {
|
||||
// font-family: 'this name';
|
||||
// src: url('fonts/this.eot');
|
||||
// src: local("☺"),
|
||||
// url('fonts/this.otf') format('woff'),
|
||||
// url('fonts/this.woff') format('opentype');
|
||||
// font-weight: bold;
|
||||
// font-style: italic;
|
||||
// }
|
||||
|
||||
@ -30,18 +30,18 @@ $disable-magic-sprite-selectors:false !default;
|
||||
@include sprite-dimensions($map, $sprite);
|
||||
}
|
||||
@if not $disable-magic-sprite-selectors {
|
||||
@include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);
|
||||
@include sprite-selectors($map, $sprite, $sprite);
|
||||
}
|
||||
}
|
||||
|
||||
// Include the selectors for the `$sprite` given the `$map` and the
|
||||
// `$full-sprite-name`
|
||||
// @private
|
||||
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) {
|
||||
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name) {
|
||||
@each $selector in $sprite-selectors {
|
||||
@if sprite_has_selector($map, $sprite-name, $selector) {
|
||||
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {
|
||||
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y);
|
||||
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -53,13 +53,13 @@ $disable-magic-sprite-selectors:false !default;
|
||||
// If a base class is provided, then each class will extend it.
|
||||
//
|
||||
// If `$dimensions` is `true`, the sprite dimensions will specified.
|
||||
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) {
|
||||
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map)) {
|
||||
@each $sprite-name in $sprite-names {
|
||||
@if sprite_does_not_have_parent($map, $sprite-name) {
|
||||
$full-sprite-name: "#{$prefix}-#{$sprite-name}";
|
||||
.#{$full-sprite-name} {
|
||||
@if $base-class { @extend #{$base-class}; }
|
||||
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y);
|
||||
@include sprite($map, $sprite-name, $dimensions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,7 +65,6 @@ module Compass
|
||||
end
|
||||
|
||||
def remove(file_name)
|
||||
file_name ||= ''
|
||||
if File.directory?(file_name)
|
||||
FileUtils.rm_rf file_name
|
||||
log_action :remove, basename(file_name)+"/", options
|
||||
|
||||
@ -24,10 +24,8 @@ module Compass
|
||||
end
|
||||
|
||||
def configuration
|
||||
config = Compass::Configuration::Data.new('rails')
|
||||
config.extend(ConfigurationDefaults)
|
||||
config.extend(ConfigurationDefaultsWithAssetPipeline) if Sass::Util.ap_geq?('3.1.0') || Sass::Util.ap_geq?('3.1.0.rc') || Sass::Util.ap_geq?('3.1.0.beta')
|
||||
config
|
||||
Compass::Configuration::Data.new('rails').
|
||||
extend(ConfigurationDefaults)
|
||||
end
|
||||
|
||||
def env
|
||||
@ -50,32 +48,17 @@ module Compass
|
||||
end
|
||||
end
|
||||
|
||||
def check_for_double_boot!
|
||||
def initialize!(config = nil)
|
||||
if booted?
|
||||
Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your initializer.")
|
||||
Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your intializer.")
|
||||
else
|
||||
booted!
|
||||
end
|
||||
end
|
||||
|
||||
def sass_plugin_enabled?
|
||||
unless Sass::Util.ap_geq?('3.1.0.beta')
|
||||
defined?(Sass::Plugin) && !Sass::Plugin.options[:never_update]
|
||||
end
|
||||
end
|
||||
|
||||
def rails_compilation_enabled?
|
||||
Sass::Util.ap_geq?('3.1.0.beta') && defined?(Sass::Rails) # XXX check if there's some other way(s) to disable the asset pipeline.
|
||||
end
|
||||
|
||||
# Rails 2.x projects use this in their compass initializer.
|
||||
def initialize!(config = nil)
|
||||
check_for_double_boot!
|
||||
config ||= Compass.detect_configuration_file(root)
|
||||
Compass.add_project_configuration(config, :project_type => :rails)
|
||||
Compass.discover_extensions!
|
||||
Compass.configure_sass_plugin!
|
||||
Compass.handle_configuration_change! if sass_plugin_enabled? || rails_compilation_enabled?
|
||||
Compass.handle_configuration_change!
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
%w(action_controller sass_plugin urls).each do |lib|
|
||||
require "compass/app_integration/rails/actionpack2x/#{lib}"
|
||||
end
|
||||
|
||||
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
||||
class Sass::Script::Functions::EvaluationContext
|
||||
include Sass::Script::Functions
|
||||
private
|
||||
include ActionView::Helpers::AssetTagHelper
|
||||
end
|
||||
@ -1,11 +0,0 @@
|
||||
# TODO figure something out so image_path works with rails integration
|
||||
%w(railtie).each do |lib|
|
||||
require "compass/app_integration/rails/actionpack30/#{lib}"
|
||||
end
|
||||
|
||||
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
||||
class Sass::Script::Functions::EvaluationContext
|
||||
include Sass::Script::Functions
|
||||
private
|
||||
include ActionView::Helpers::AssetTagHelper
|
||||
end
|
||||
@ -1,5 +0,0 @@
|
||||
# TODO figure something out so image_path works with rails integration
|
||||
%w(railtie helpers).each do |lib|
|
||||
require "compass/app_integration/rails/actionpack31/#{lib}"
|
||||
end
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
module Sass::Script::Functions
|
||||
def generated_image_url(path, only_path = nil)
|
||||
asset_url(path, Sass::Script::String.new("image"))
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
module Compass::RailsImageFunctionPatch
|
||||
private
|
||||
|
||||
def image_path(image_file)
|
||||
if file = ::Rails.application.assets.find_asset(image_file)
|
||||
return file
|
||||
end
|
||||
super(image_file)
|
||||
end
|
||||
end
|
||||
|
||||
module Sass::Script::Functions
|
||||
include Compass::RailsImageFunctionPatch
|
||||
end
|
||||
|
||||
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
||||
class Sass::Script::Functions::EvaluationContext
|
||||
include Sass::Script::Functions
|
||||
end
|
||||
@ -1,89 +0,0 @@
|
||||
require 'compass'
|
||||
require 'rails'
|
||||
|
||||
class Rails::Railtie::Configuration
|
||||
# Adds compass configuration accessor to the application configuration.
|
||||
#
|
||||
# If a configuration file for compass exists, it will be read in and
|
||||
# the project's configuration values will already be set on the config
|
||||
# object.
|
||||
#
|
||||
# For example:
|
||||
#
|
||||
# module MyApp
|
||||
# class Application < Rails::Application
|
||||
# config.compass.line_comments = !Rails.env.production?
|
||||
# config.compass.fonts_dir = "app/assets/fonts"
|
||||
# end
|
||||
# end
|
||||
#
|
||||
# It is suggested that you create a compass configuration file if you
|
||||
# want a quicker boot time when using the compass command line tool.
|
||||
#
|
||||
# For more information on available configuration options see:
|
||||
# http://compass-style.org/help/tutorials/configuration-reference/
|
||||
def compass
|
||||
@compass ||= begin
|
||||
data = if (config_file = Compass.detect_configuration_file) && (config_data = Compass.configuration_for(config_file))
|
||||
config_data
|
||||
else
|
||||
Compass::Configuration::Data.new("rails_config")
|
||||
end
|
||||
data.project_type = :rails # Forcing this makes sure all the rails defaults will be loaded.
|
||||
Compass.add_project_configuration(data)
|
||||
Compass.configuration.on_sprite_saved do |filename|
|
||||
# This is a huge hack based on reading through the sprockets internals.
|
||||
# Sprockets needs an API for adding assets during precompilation.
|
||||
# At a minimum sprockets should provide this API:
|
||||
#
|
||||
# #filename is a path in the asset source directory
|
||||
# Rails.application.assets.new_asset!(filename)
|
||||
#
|
||||
# # logical_path is how devs refer to it, data is the contents of it.
|
||||
# Rails.application.assets.new_asset!(logical_path, data)
|
||||
#
|
||||
# I would also like to select one of the above calls based on whether
|
||||
# the user is precompiling or not:
|
||||
#
|
||||
# Rails.application.assets.precompiling? #=> true or false
|
||||
#
|
||||
# But even the above is not an ideal API. The issue is that compass sprites need to
|
||||
# avoid generation if the sprite file is already generated (which can be quite time
|
||||
# consuming). To do this, compass has it's own uniqueness hash based on the user's
|
||||
# inputs instead of being based on the file contents. So if we could provide our own
|
||||
# hash or some metadata that is opaque to sprockets that could be read from the
|
||||
# asset's attributes, we could avoid cluttering the assets directory with generated
|
||||
# sprites and always just use the logical_path + data version of the api.
|
||||
if Rails.application.config.action_controller.perform_caching
|
||||
asset = Rails.application.assets.find_asset(filename)
|
||||
pathname = Pathname.new(filename)
|
||||
logical_path = filename[(Compass.configuration.generated_images_path.length+1)..-1]
|
||||
# Force the asset into the cache so find_asset will find it.
|
||||
cached_assets = Rails.application.assets.instance_variable_get("@assets")
|
||||
cached_assets[logical_path] = cached_assets[filename] = asset
|
||||
if File.directory?(Rails.application.assets.static_root)
|
||||
# Copy the asset into the static root so the browsers will find it.
|
||||
asset_attributes = Rails.application.assets.attributes_for(logical_path)
|
||||
digest_path = asset_attributes.path_with_fingerprint(asset.digest)
|
||||
static_path = Rails.application.assets.static_root.join(digest_path)
|
||||
asset.write_to(static_path)
|
||||
end
|
||||
end
|
||||
end
|
||||
data
|
||||
end
|
||||
@compass
|
||||
end
|
||||
end
|
||||
|
||||
module Compass
|
||||
class Railtie < Rails::Railtie
|
||||
initializer "compass.initialize_rails" do |app|
|
||||
# Configure compass for use within rails, and provide the project configuration
|
||||
# that came via the rails boot process.
|
||||
Compass::AppIntegration::Rails.check_for_double_boot!
|
||||
Compass.discover_extensions!
|
||||
Compass.configure_rails!(app)
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -1,52 +1,6 @@
|
||||
module Compass
|
||||
module AppIntegration
|
||||
module Rails
|
||||
|
||||
module ConfigurationDefaultsWithAssetPipeline
|
||||
# These methods overwrite the old rails defaults
|
||||
# when rails 3.1 is detected.
|
||||
|
||||
def default_sass_dir
|
||||
File.join("app", "assets", "stylesheets")
|
||||
end
|
||||
|
||||
def default_images_dir
|
||||
File.join("app", "assets", "images")
|
||||
end
|
||||
|
||||
def default_fonts_dir
|
||||
File.join("app", "assets", "fonts")
|
||||
end
|
||||
|
||||
def default_javascripts_dir
|
||||
File.join("app", "assets", "javascripts")
|
||||
end
|
||||
|
||||
def default_http_path
|
||||
::Rails.application.config.assets.prefix
|
||||
end
|
||||
|
||||
def default_http_images_path
|
||||
"#{top_level.http_path}"
|
||||
end
|
||||
|
||||
def default_http_generated_images_path
|
||||
"#{top_level.http_path}"
|
||||
end
|
||||
|
||||
def default_http_javascripts_path
|
||||
"#{top_level.http_path}"
|
||||
end
|
||||
|
||||
def default_http_fonts_path
|
||||
"#{top_level.http_path}"
|
||||
end
|
||||
|
||||
def default_http_stylesheets_path
|
||||
"#{top_level.http_path}"
|
||||
end
|
||||
end
|
||||
|
||||
module ConfigurationDefaults
|
||||
|
||||
def project_type_without_default
|
||||
@ -54,7 +8,11 @@ module Compass
|
||||
end
|
||||
|
||||
def default_sass_dir
|
||||
File.join("app", "stylesheets")
|
||||
if Sass::Util.ap_geq?('3.1.0.beta')
|
||||
File.join("app", "assets", "stylesheets")
|
||||
else
|
||||
File.join("app", "stylesheets")
|
||||
end
|
||||
end
|
||||
|
||||
def default_css_dir
|
||||
@ -70,25 +28,27 @@ module Compass
|
||||
end
|
||||
|
||||
def default_javascripts_dir
|
||||
File.join("public", "javascripts")
|
||||
if Sass::Util.ap_geq?('3.1.0.beta')
|
||||
File.join("app", "assets", "javascripts")
|
||||
else
|
||||
File.join("public", "javascripts")
|
||||
end
|
||||
end
|
||||
|
||||
def default_http_images_path
|
||||
# Relies on the fact that this will be loaded after the "normal"
|
||||
# defaults, so that method_missing finds http_root_relative
|
||||
http_root_relative "images"
|
||||
"#{top_level.http_path}images"
|
||||
end
|
||||
|
||||
def default_http_javascripts_path
|
||||
http_root_relative "javascripts"
|
||||
"#{top_level.http_path}javascripts"
|
||||
end
|
||||
|
||||
def default_http_fonts_path
|
||||
http_root_relative "fonts"
|
||||
"#{top_level.http_path}fonts"
|
||||
end
|
||||
|
||||
def default_http_stylesheets_path
|
||||
http_root_relative "stylesheets"
|
||||
"#{top_level.http_path}stylesheets"
|
||||
end
|
||||
|
||||
def default_extensions_dir
|
||||
|
||||
@ -3,15 +3,25 @@ unless defined?(Compass::RAILS_LOADED)
|
||||
begin
|
||||
require 'action_pack/version'
|
||||
if ActionPack::VERSION::MAJOR >= 3
|
||||
if ActionPack::VERSION::MINOR < 1
|
||||
require 'compass/app_integration/rails/actionpack30'
|
||||
else
|
||||
require 'compass/app_integration/rails/actionpack31'
|
||||
# TODO figure something out so image_path works with rails integration
|
||||
%w(railtie).each do |lib|
|
||||
require "compass/app_integration/rails/actionpack3/#{lib}"
|
||||
end
|
||||
else
|
||||
require 'compass/app_integration/rails/actionpack2x'
|
||||
%w(action_controller sass_plugin urls).each do |lib|
|
||||
require "compass/app_integration/rails/actionpack2/#{lib}"
|
||||
end
|
||||
end
|
||||
rescue LoadError, NameError
|
||||
rescue LoadError => e
|
||||
$stderr.puts "Compass could not access the rails environment."
|
||||
rescue NameError => e
|
||||
$stderr.puts "Compass could not access the rails environment."
|
||||
end
|
||||
|
||||
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
||||
class Sass::Script::Functions::EvaluationContext
|
||||
include Sass::Script::Functions
|
||||
private
|
||||
include ActionView::Helpers::AssetTagHelper
|
||||
end
|
||||
end
|
||||
|
||||
@ -30,7 +30,7 @@ module Compass
|
||||
def perform
|
||||
compiler = new_compiler_instance
|
||||
compiler.clean!
|
||||
Compass::SpriteImporter.find_all_sprite_map_files(Compass.configuration.generated_images_path).each do |sprite|
|
||||
Compass::SpriteImporter.find_all_sprite_map_files(Compass.configuration.images_path).each do |sprite|
|
||||
remove sprite
|
||||
end
|
||||
end
|
||||
|
||||
@ -39,11 +39,10 @@ module Compass
|
||||
|
||||
def perform
|
||||
relative_uri = options[:uri].gsub(/^#{Compass.configuration.images_dir}\//, '')
|
||||
name = Compass::SpriteImporter.sprite_name(relative_uri)
|
||||
sprites = Compass::SpriteImporter.new
|
||||
options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{name}.#{Compass.configuration.preferred_syntax}")
|
||||
sprites = Compass::SpriteImporter.new(:uri => relative_uri, :options => Compass.sass_engine_options)
|
||||
options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{sprites.name}.#{Compass.configuration.preferred_syntax}")
|
||||
options[:skip_overrides] ||= false
|
||||
contents = Compass::SpriteImporter.content_for_images(relative_uri, name, options[:skip_overrides])
|
||||
contents = sprites.content_for_images(options[:skip_overrides])
|
||||
if options[:output_file][-4..-1] != "scss"
|
||||
contents = Sass::Engine.new(contents, Compass.sass_engine_options.merge(:syntax => :scss)).to_tree.to_sass
|
||||
end
|
||||
|
||||
@ -138,7 +138,7 @@ module Compass
|
||||
end
|
||||
duration = options[:time] ? "(#{(css_content.__duration * 1000).round / 1000.0}s)" : ""
|
||||
write_file(css_filename, css_content, options.merge(:force => true, :extra => duration))
|
||||
Compass.configuration.run_stylesheet_saved(css_filename)
|
||||
Compass.configuration.run_callback(:stylesheet_saved, css_filename)
|
||||
end
|
||||
|
||||
def should_compile?(sass_filename, css_filename)
|
||||
@ -159,7 +159,7 @@ module Compass
|
||||
formatted_error = "(Line #{e.sass_line}: #{e.message})"
|
||||
file = basename(sass_filename)
|
||||
logger.record :error, file, formatted_error
|
||||
Compass.configuration.run_stylesheet_error(sass_filename, formatted_error)
|
||||
Compass.configuration.run_callback(:stylesheet_error, sass_filename, formatted_error)
|
||||
write_file css_filename, error_contents(e, sass_filename), options.merge(:force => true)
|
||||
end
|
||||
|
||||
|
||||
@ -20,12 +20,10 @@ module Compass
|
||||
attributes_for_directory(:css, :stylesheets),
|
||||
attributes_for_directory(:sass, nil),
|
||||
attributes_for_directory(:images),
|
||||
attributes_for_directory(:generated_images),
|
||||
attributes_for_directory(:javascripts),
|
||||
attributes_for_directory(:fonts),
|
||||
attributes_for_directory(:extensions, nil),
|
||||
# Compilation options
|
||||
:sprite_load_path,
|
||||
:output_style,
|
||||
:environment,
|
||||
:relative_assets,
|
||||
|
||||
@ -4,11 +4,7 @@ module Compass
|
||||
module Comments
|
||||
|
||||
def comment_for_http_path
|
||||
unless top_level.http_path_without_default
|
||||
"# Set this to the root of your project when deployed:\nhttp_path = #{top_level.http_path.to_s.inspect}\n"
|
||||
else
|
||||
""
|
||||
end
|
||||
"# Set this to the root of your project when deployed:\n"
|
||||
end
|
||||
|
||||
def comment_for_relative_assets
|
||||
|
||||
@ -18,38 +18,12 @@ module Compass
|
||||
class Data
|
||||
|
||||
attr_reader :name
|
||||
extend Sass::Callbacks
|
||||
|
||||
|
||||
include Compass::Configuration::Inheritance
|
||||
include Compass::Configuration::Serialization
|
||||
include Compass::Configuration::Adapters
|
||||
extend Compass::Configuration::Paths
|
||||
|
||||
# on_sprite_saved
|
||||
# yields the filename
|
||||
# usage: on_sprite_saved {|filename| do_something(filename) }
|
||||
define_callback :sprite_saved
|
||||
chained_method :run_sprite_saved
|
||||
|
||||
# on_sprite_generated
|
||||
# yields 'ChunkyPNG::Image'
|
||||
# usage: on_sprite_generated {|sprite_data| do_something(sprite_data) }
|
||||
define_callback :sprite_generated
|
||||
chained_method :run_sprite_generated
|
||||
|
||||
# on_stylesheet_saved
|
||||
# yields the filename
|
||||
# usage: on_stylesheet_saved {|filename| do_something(filename) }
|
||||
define_callback :stylesheet_saved
|
||||
chained_method :run_stylesheet_saved
|
||||
|
||||
# on_stylesheet_error
|
||||
# yields the filename & message
|
||||
# usage: on_stylesheet_error {|filename, message| do_something(filename, message) }
|
||||
define_callback :stylesheet_error
|
||||
chained_method :run_stylesheet_error
|
||||
|
||||
inherited_accessor *ATTRIBUTES
|
||||
inherited_accessor :required_libraries, :loaded_frameworks, :framework_path #XXX we should make these arrays add up cumulatively.
|
||||
|
||||
@ -164,6 +138,16 @@ module Compass
|
||||
relative_assets || http_images_path == :relative
|
||||
end
|
||||
|
||||
def run_callback(event, *args)
|
||||
begin
|
||||
send(:"run_#{event}", *args)
|
||||
rescue NoMethodError => e
|
||||
unless e.message =~ /run_#{event}/
|
||||
raise
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def assert_valid_keys!(attr_hash)
|
||||
|
||||
@ -10,7 +10,7 @@ module Compass
|
||||
:stand_alone
|
||||
end
|
||||
|
||||
def default_http_path
|
||||
def http_path_without_default
|
||||
"/"
|
||||
end
|
||||
|
||||
@ -60,14 +60,6 @@ module Compass
|
||||
end
|
||||
end
|
||||
|
||||
def default_generated_images_path
|
||||
if (pp = top_level.project_path) && (dir = top_level.generated_images_dir)
|
||||
Compass.projectize(dir, pp)
|
||||
else
|
||||
top_level.images_path
|
||||
end
|
||||
end
|
||||
|
||||
def default_javascripts_path
|
||||
if (pp = top_level.project_path) && (dir = top_level.javascripts_dir)
|
||||
Compass.projectize(dir, pp)
|
||||
@ -92,21 +84,10 @@ module Compass
|
||||
end
|
||||
end
|
||||
|
||||
def default_generated_images_dir
|
||||
top_level.images_dir
|
||||
end
|
||||
|
||||
def default_http_generated_images_dir
|
||||
top_level.http_images_dir
|
||||
end
|
||||
|
||||
def default_http_images_dir
|
||||
top_level.images_dir
|
||||
end
|
||||
|
||||
def default_sprite_load_path
|
||||
[top_level.images_path]
|
||||
end
|
||||
|
||||
def default_http_images_path
|
||||
http_root_relative top_level.http_images_dir
|
||||
@ -120,10 +101,6 @@ module Compass
|
||||
http_root_relative top_level.http_stylesheets_dir
|
||||
end
|
||||
|
||||
def default_http_generated_images_path
|
||||
http_root_relative top_level.http_generated_images_dir
|
||||
end
|
||||
|
||||
def default_http_fonts_dir
|
||||
if fd = top_level.fonts_dir_without_default
|
||||
fd
|
||||
|
||||
@ -1,6 +1,28 @@
|
||||
module Compass
|
||||
module Configuration
|
||||
class FileData < Data
|
||||
extend Sass::Callbacks
|
||||
|
||||
# on_sprite_generated
|
||||
# yields the filename
|
||||
# usage: on_sprite_save {|filename| do_somethign(filename) }
|
||||
define_callback :sprite_saved
|
||||
|
||||
# on_sprite_generated
|
||||
# yields 'ChunkyPNG::Image'
|
||||
# usage: on_sprite_generated {|sprite_data| do_something(sprite_data) }
|
||||
define_callback :sprite_generated
|
||||
|
||||
# on_stylesheet_saved
|
||||
# yields the filename
|
||||
# usage: on_stylesheet_saved {|filename| do_something(filename) }
|
||||
define_callback :stylesheet_saved
|
||||
|
||||
# on_stylesheet_error
|
||||
# yields the filename & message
|
||||
# usage: on_stylesheet_error {|filename, message| do_something(filename, message) }
|
||||
define_callback :stylesheet_error
|
||||
|
||||
def self.new_from_file(config_file, defaults = nil)
|
||||
data = new(config_file)
|
||||
data.with_defaults(defaults) do
|
||||
|
||||
@ -68,22 +68,15 @@ module Compass
|
||||
end
|
||||
unless @callbacks_loaded
|
||||
Sass::Plugin.on_updating_stylesheet do |sass_file, css_file|
|
||||
Compass.configuration.run_stylesheet_saved(css_file)
|
||||
Compass.configuration.run_callback(:stylesheet_saved, css_file)
|
||||
end
|
||||
Sass::Plugin.on_compilation_error do |e, filename, css|
|
||||
Compass.configuration.run_stylesheet_error(filename, e.message)
|
||||
Compass.configuration.run_callback(:stylesheet_error, filename, e.message)
|
||||
end
|
||||
@callbacks_loaded = true
|
||||
end
|
||||
end
|
||||
|
||||
def configure_rails!(app)
|
||||
return unless app.config.respond_to?(:sass)
|
||||
app.config.compass.to_sass_engine_options.each do |key, value|
|
||||
app.config.sass.send(:"#{key}=", value)
|
||||
end
|
||||
end
|
||||
|
||||
def sass_engine_options
|
||||
configuration.to_sass_engine_options
|
||||
end
|
||||
|
||||
@ -61,19 +61,6 @@ module Compass
|
||||
inherited_writer(*attributes)
|
||||
end
|
||||
|
||||
def chained_method(method)
|
||||
line = __LINE__ + 1
|
||||
class_eval %Q{
|
||||
alias_method :_chained_#{method}, method
|
||||
def #{method}(*args, &block)
|
||||
_chained_#{method}(*args, &block)
|
||||
if inherited_data
|
||||
inherited_data.#{method}(*args, &block)
|
||||
end
|
||||
end
|
||||
}, __FILE__, line
|
||||
end
|
||||
|
||||
|
||||
end
|
||||
|
||||
|
||||
@ -27,7 +27,6 @@ module Compass
|
||||
if @added_import_paths
|
||||
self.additional_import_paths ||= []
|
||||
self.additional_import_paths += @added_import_paths
|
||||
self.additional_import_paths.uniq!
|
||||
end
|
||||
issue_deprecation_warnings
|
||||
end
|
||||
|
||||
@ -1,39 +1,10 @@
|
||||
module Compass::SassExtensions::Functions::FontFiles
|
||||
FONT_TYPES = {
|
||||
:woff => 'woff',
|
||||
:otf => 'opentype',
|
||||
:opentype => 'opentype',
|
||||
:ttf => 'truetype',
|
||||
:truetype => 'truetype',
|
||||
:svg => 'svg'
|
||||
}
|
||||
|
||||
def font_files(*args)
|
||||
raise Sass::SyntaxError, "An even number of arguments must be passed to font_files()" unless args.size % 2 == 0
|
||||
files = []
|
||||
args_length = args.length
|
||||
skip_next = false
|
||||
|
||||
args.each_with_index do |arg, index|
|
||||
if skip_next
|
||||
skip_next = false
|
||||
next
|
||||
end
|
||||
|
||||
type = (args_length > (index + 1)) ? args[index + 1].value.to_sym : :wrong
|
||||
|
||||
if FONT_TYPES.key? type
|
||||
skip_next = true
|
||||
else
|
||||
type = arg.to_s.split('.').last.gsub('"', '').to_sym
|
||||
end
|
||||
|
||||
if FONT_TYPES.key? type
|
||||
files << "#{font_url(arg)} format('#{FONT_TYPES[type]}')"
|
||||
else
|
||||
raise Sass::SyntaxError, "Could not determine font type for #{arg}"
|
||||
end
|
||||
while args.size > 0
|
||||
files << "#{font_url(args.shift)} format('#{args.shift}')"
|
||||
end
|
||||
|
||||
Sass::Script::String.new(files.join(", "))
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
module Compass::SassExtensions::Functions::ImageSize
|
||||
# Returns the width of the image relative to the images directory
|
||||
def image_width(image_file)
|
||||
width, _ = image_demensions(image_file)
|
||||
image_path = real_path(image_file)
|
||||
width = ImageProperties.new(image_path).size.first
|
||||
Sass::Script::Number.new(width,["px"])
|
||||
end
|
||||
|
||||
|
||||
# Returns the height of the image relative to the images directory
|
||||
def image_height(image_file)
|
||||
_, height = image_demensions(image_file)
|
||||
image_path = real_path(image_file)
|
||||
height = ImageProperties.new(image_path).size.last
|
||||
Sass::Script::Number.new(height, ["px"])
|
||||
end
|
||||
|
||||
@ -43,26 +45,13 @@ module Compass::SassExtensions::Functions::ImageSize
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def image_demensions(image_file)
|
||||
options[:compass] ||= {}
|
||||
options[:compass][:image_dimensions] ||= {}
|
||||
options[:compass][:image_dimensions][image_file.value] = ImageProperties.new(image_path_for_size(image_file.value)).size
|
||||
end
|
||||
|
||||
def image_path_for_size(image_file)
|
||||
if File.exists?(image_file)
|
||||
return image_file
|
||||
end
|
||||
real_path(image_file)
|
||||
end
|
||||
|
||||
def real_path(image_file)
|
||||
path = image_file.value
|
||||
# Compute the real path to the image on the file stystem if the images_dir is set.
|
||||
if Compass.configuration.images_path
|
||||
File.join(Compass.configuration.images_path, image_file)
|
||||
File.join(Compass.configuration.images_path, path)
|
||||
else
|
||||
File.join(Compass.configuration.project_path, image_file)
|
||||
File.join(Compass.configuration.project_path, path)
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ module Compass::SassExtensions::Functions::InlineImage
|
||||
while args.size > 0
|
||||
path = args.shift.value
|
||||
real_path = File.join(Compass.configuration.fonts_path, path)
|
||||
url = inline_image_string(data(real_path), compute_mime_type(path))
|
||||
url = "url('data:#{compute_mime_type(path)};base64,#{data(real_path)}')"
|
||||
files << "#{url} format('#{args.shift}')"
|
||||
end
|
||||
Sass::Script::String.new(files.join(", "))
|
||||
|
||||
@ -22,7 +22,7 @@ module Compass::SassExtensions::Functions::Sprites
|
||||
def sprite_map(glob, kwargs = {})
|
||||
kwargs.extend VariableReader
|
||||
Compass::SassExtensions::Sprites::SpriteMap.from_uri(glob, self, kwargs)
|
||||
end
|
||||
end
|
||||
Sass::Script::Functions.declare :sprite_map, [:glob], :var_kwargs => true
|
||||
|
||||
# Returns the image and background position for use in a single shorthand property:
|
||||
@ -34,7 +34,7 @@ module Compass::SassExtensions::Functions::Sprites
|
||||
#
|
||||
# background: url('/images/icons.png?12345678') 0 -24px no-repeat;
|
||||
def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO)
|
||||
sprite = convert_sprite_name(sprite)
|
||||
sprite = convert_sprite_name(sprite)
|
||||
verify_map(map)
|
||||
unless sprite.is_a?(Sass::Script::String)
|
||||
raise Sass::SyntaxError, %Q(The second argument to sprite() must be a sprite name. See http://beta.compass-style.org/help/tutorials/spriting/ for more information.)
|
||||
@ -61,7 +61,7 @@ module Compass::SassExtensions::Functions::Sprites
|
||||
verify_map(map, "sprite")
|
||||
verify_sprite(sprite)
|
||||
if image = map.image_for(sprite.value)
|
||||
Sass::Script::String.new(image.file)
|
||||
Sass::Script::String.new(image.relative_file)
|
||||
else
|
||||
missing_image!(map, sprite)
|
||||
end
|
||||
@ -96,7 +96,9 @@ module Compass::SassExtensions::Functions::Sprites
|
||||
def sprite_url(map)
|
||||
verify_map(map, "sprite-url")
|
||||
map.generate
|
||||
generated_image_url(Sass::Script::String.new("#{map.path}-s#{map.uniqueness_hash}.png"))
|
||||
image_url(Sass::Script::String.new("#{map.path}-s#{map.uniqueness_hash}.png"),
|
||||
Sass::Script::Bool.new(false),
|
||||
Sass::Script::Bool.new(false))
|
||||
end
|
||||
Sass::Script::Functions.declare :sprite_url, [:map]
|
||||
|
||||
@ -145,7 +147,7 @@ module Compass::SassExtensions::Functions::Sprites
|
||||
Sass::Script::Functions.declare :sprite_position, [:map, :sprite, :offset_x, :offset_y]
|
||||
|
||||
def sprite_image(*args)
|
||||
raise Sass::SyntaxError, %Q(The sprite-image() function has been replaced by sprite(). See http://compass-style.org/help/tutorials/spriting/ for more information.)
|
||||
raise Sass::SyntaxError, %Q(The sprite-image() function has been replaced by sprite(). See http://beta.compass-style.org/help/tutorials/spriting/ for more information.)
|
||||
end
|
||||
|
||||
protected
|
||||
|
||||
@ -19,10 +19,9 @@ module Compass::SassExtensions::Functions::Trig
|
||||
private
|
||||
def trig(operation, number)
|
||||
if number.numerator_units == ["deg"] && number.denominator_units == []
|
||||
Sass::Script::Number.new(Math.send(operation, (number.value * Math::PI / 180)))
|
||||
Sass::Script::Number.new(Math.send(operation, Math::PI * number.value / 360))
|
||||
else
|
||||
Sass::Script::Number.new(Math.send(operation, number.value), number.numerator_units, number.denominator_units)
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
@ -1,203 +1,112 @@
|
||||
module Compass::SassExtensions::Functions::Urls
|
||||
|
||||
|
||||
def self.has?(base, instance_method)
|
||||
Sass::Util.has?(:instance_method, base, instance_method)
|
||||
end
|
||||
|
||||
def self.included(base)
|
||||
base.send(:include, StylesheetUrl) unless has?(base, :stylesheet_url)
|
||||
base.send(:include, FontUrl) unless has?(base, :font_url)
|
||||
base.send(:include, ImageUrl) unless has?(base, :image_url)
|
||||
base.send(:include, GeneratedImageUrl) unless has?(base, :generated_image_url)
|
||||
end
|
||||
|
||||
module StylesheetUrl
|
||||
def self.included(base)
|
||||
if base.respond_to?(:declare)
|
||||
base.declare :stylesheet_url, [:path]
|
||||
base.declare :stylesheet_url, [:path, :only_path]
|
||||
end
|
||||
def stylesheet_url(path, only_path = Sass::Script::Bool.new(false))
|
||||
# Compute the path to the stylesheet, either root relative or stylesheet relative
|
||||
# or nil if the http_images_path is not set in the configuration.
|
||||
http_stylesheets_path = if relative?
|
||||
compute_relative_path(Compass.configuration.css_path)
|
||||
elsif Compass.configuration.http_stylesheets_path
|
||||
Compass.configuration.http_stylesheets_path
|
||||
else
|
||||
Compass.configuration.http_root_relative(Compass.configuration.css_dir)
|
||||
end
|
||||
def stylesheet_url(path, only_path = Sass::Script::Bool.new(false))
|
||||
# Compute the path to the stylesheet, either root relative or stylesheet relative
|
||||
# or nil if the http_images_path is not set in the configuration.
|
||||
http_stylesheets_path = if relative?
|
||||
compute_relative_path(Compass.configuration.css_path)
|
||||
elsif Compass.configuration.http_stylesheets_path
|
||||
Compass.configuration.http_stylesheets_path
|
||||
else
|
||||
Compass.configuration.http_root_relative(Compass.configuration.css_dir)
|
||||
end
|
||||
|
||||
path = "#{http_stylesheets_path}/#{path.value}"
|
||||
if only_path.to_bool
|
||||
Sass::Script::String.new(clean_path(path))
|
||||
else
|
||||
clean_url(path)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
module FontUrl
|
||||
def self.included(base)
|
||||
if base.respond_to?(:declare)
|
||||
base.declare :font_url, [:path]
|
||||
base.declare :font_url, [:path, :only_path]
|
||||
end
|
||||
end
|
||||
def font_url(path, only_path = Sass::Script::Bool.new(false))
|
||||
path = path.value # get to the string value of the literal.
|
||||
|
||||
# Short curcuit if they have provided an absolute url.
|
||||
if absolute_path?(path)
|
||||
return Sass::Script::String.new("url(#{path})")
|
||||
end
|
||||
|
||||
# Compute the path to the font file, either root relative or stylesheet relative
|
||||
# or nil if the http_fonts_path cannot be determined from the configuration.
|
||||
http_fonts_path = if relative?
|
||||
compute_relative_path(Compass.configuration.fonts_path)
|
||||
else
|
||||
Compass.configuration.http_fonts_path
|
||||
end
|
||||
|
||||
path = "#{http_fonts_path}/#{path}"
|
||||
|
||||
if only_path.to_bool
|
||||
Sass::Script::String.new(clean_path(path))
|
||||
else
|
||||
clean_url(path)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
module ImageUrl
|
||||
def self.included(base)
|
||||
if base.respond_to?(:declare)
|
||||
base.declare :image_url, [:path]
|
||||
base.declare :image_url, [:path, :only_path]
|
||||
base.declare :image_url, [:path, :only_path, :cache_buster]
|
||||
end
|
||||
end
|
||||
def image_url(path, only_path = Sass::Script::Bool.new(false), cache_buster = Sass::Script::Bool.new(true))
|
||||
path = path.value # get to the string value of the literal.
|
||||
|
||||
if path =~ %r{^#{Regexp.escape(Compass.configuration.http_images_path)}/(.*)}
|
||||
# Treat root relative urls (without a protocol) like normal if they start with
|
||||
# the images path.
|
||||
path = $1
|
||||
elsif absolute_path?(path)
|
||||
# Short curcuit if they have provided an absolute url.
|
||||
return Sass::Script::String.new("url(#{path})")
|
||||
end
|
||||
|
||||
# Compute the path to the image, either root relative or stylesheet relative
|
||||
# or nil if the http_images_path is not set in the configuration.
|
||||
http_images_path = if relative?
|
||||
compute_relative_path(Compass.configuration.images_path)
|
||||
elsif Compass.configuration.http_images_path
|
||||
Compass.configuration.http_images_path
|
||||
else
|
||||
Compass.configuration.http_root_relative(Compass.configuration.images_dir)
|
||||
end
|
||||
|
||||
# Compute the real path to the image on the file stystem if the images_dir is set.
|
||||
real_path = if Compass.configuration.images_dir
|
||||
File.join(Compass.configuration.project_path, Compass.configuration.images_dir, path)
|
||||
end
|
||||
|
||||
# prepend the path to the image if there's one
|
||||
if http_images_path
|
||||
http_images_path = "#{http_images_path}/" unless http_images_path[-1..-1] == "/"
|
||||
path = "#{http_images_path}#{path}"
|
||||
end
|
||||
|
||||
# Compute the asset host unless in relative mode.
|
||||
asset_host = if !relative? && Compass.configuration.asset_host
|
||||
Compass.configuration.asset_host.call(path)
|
||||
end
|
||||
|
||||
# Compute and append the cache buster if there is one.
|
||||
if cache_buster.to_bool
|
||||
if cache_buster.is_a?(Sass::Script::String)
|
||||
path += "?#{cache_buster.value}"
|
||||
else
|
||||
path = cache_busted_path(path, real_path)
|
||||
end
|
||||
end
|
||||
|
||||
# prepend the asset host if there is one.
|
||||
path = "#{asset_host}#{'/' unless path[0..0] == "/"}#{path}" if asset_host
|
||||
|
||||
if only_path.to_bool
|
||||
Sass::Script::String.new(clean_path(path))
|
||||
else
|
||||
clean_url(path)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
module GeneratedImageUrl
|
||||
def self.included(base)
|
||||
if base.respond_to?(:declare)
|
||||
base.declare :generated_image_url, [:path]
|
||||
base.declare :generated_image_url, [:path, :cache_buster]
|
||||
end
|
||||
end
|
||||
def generated_image_url(path, cache_buster = Sass::Script::Bool.new(false))
|
||||
path = path.value # get to the string value of the literal.
|
||||
|
||||
if path =~ %r{^#{Regexp.escape(Compass.configuration.http_generated_images_path)}/(.*)}
|
||||
# Treat root relative urls (without a protocol) like normal if they start with
|
||||
# the generated_images path.
|
||||
path = $1
|
||||
elsif absolute_path?(path)
|
||||
# Short curcuit if they have provided an absolute url.
|
||||
return Sass::Script::String.new("url(#{path})")
|
||||
end
|
||||
|
||||
# Compute the path to the image, either root relative or stylesheet relative
|
||||
# or nil if the http_generated_images_path is not set in the configuration.
|
||||
http_generated_images_path = if relative?
|
||||
compute_relative_path(Compass.configuration.generated_images_path)
|
||||
elsif Compass.configuration.http_generated_images_path
|
||||
Compass.configuration.http_generated_images_path
|
||||
else
|
||||
Compass.configuration.http_root_relative(Compass.configuration.generated_images_dir)
|
||||
end
|
||||
|
||||
# Compute the real path to the image on the file stystem if the generated_images_dir is set.
|
||||
real_path = if Compass.configuration.generated_images_dir
|
||||
File.join(Compass.configuration.project_path, Compass.configuration.generated_images_dir, path)
|
||||
end
|
||||
|
||||
# prepend the path to the image if there's one
|
||||
if http_generated_images_path
|
||||
http_generated_images_path = "#{http_generated_images_path}/" unless http_generated_images_path[-1..-1] == "/"
|
||||
path = "#{http_generated_images_path}#{path}"
|
||||
end
|
||||
|
||||
# Compute the asset host unless in relative mode.
|
||||
asset_host = if !relative? && Compass.configuration.asset_host
|
||||
Compass.configuration.asset_host.call(path)
|
||||
end
|
||||
|
||||
# Compute and append the cache buster if there is one.
|
||||
if cache_buster.to_bool
|
||||
if cache_buster.is_a?(Sass::Script::String)
|
||||
path += "?#{cache_buster.value}"
|
||||
else
|
||||
path = cache_busted_path(path, real_path)
|
||||
end
|
||||
end
|
||||
|
||||
# prepend the asset host if there is one.
|
||||
path = "#{asset_host}#{'/' unless path[0..0] == "/"}#{path}" if asset_host
|
||||
|
||||
path = "#{http_stylesheets_path}/#{path.value}"
|
||||
if only_path.to_bool
|
||||
Sass::Script::String.new(clean_path(path))
|
||||
else
|
||||
clean_url(path)
|
||||
end
|
||||
end
|
||||
Sass::Script::Functions.declare :stylesheet_url, [:path]
|
||||
Sass::Script::Functions.declare :stylesheet_url, [:path, :only_path]
|
||||
|
||||
def font_url(path, only_path = Sass::Script::Bool.new(false))
|
||||
path = path.value # get to the string value of the literal.
|
||||
|
||||
# Short curcuit if they have provided an absolute url.
|
||||
if absolute_path?(path)
|
||||
return Sass::Script::String.new("url(#{path})")
|
||||
end
|
||||
|
||||
# Compute the path to the font file, either root relative or stylesheet relative
|
||||
# or nil if the http_fonts_path cannot be determined from the configuration.
|
||||
http_fonts_path = if relative?
|
||||
compute_relative_path(Compass.configuration.fonts_path)
|
||||
else
|
||||
Compass.configuration.http_fonts_path
|
||||
end
|
||||
|
||||
path = "#{http_fonts_path}/#{path}"
|
||||
|
||||
if only_path.to_bool
|
||||
Sass::Script::String.new(clean_path(path))
|
||||
else
|
||||
clean_url(path)
|
||||
end
|
||||
end
|
||||
Sass::Script::Functions.declare :font_url, [:path]
|
||||
Sass::Script::Functions.declare :font_url, [:path, :only_path]
|
||||
|
||||
def image_url(path, only_path = Sass::Script::Bool.new(false), cache_buster = Sass::Script::Bool.new(true))
|
||||
path = path.value # get to the string value of the literal.
|
||||
|
||||
if path =~ %r{^#{Regexp.escape(Compass.configuration.http_images_path)}/(.*)}
|
||||
# Treat root relative urls (without a protocol) like normal if they start with
|
||||
# the images path.
|
||||
path = $1
|
||||
elsif absolute_path?(path)
|
||||
# Short curcuit if they have provided an absolute url.
|
||||
return Sass::Script::String.new("url(#{path})")
|
||||
end
|
||||
|
||||
# Compute the path to the image, either root relative or stylesheet relative
|
||||
# or nil if the http_images_path is not set in the configuration.
|
||||
http_images_path = if relative?
|
||||
compute_relative_path(Compass.configuration.images_path)
|
||||
elsif Compass.configuration.http_images_path
|
||||
Compass.configuration.http_images_path
|
||||
else
|
||||
Compass.configuration.http_root_relative(Compass.configuration.images_dir)
|
||||
end
|
||||
|
||||
# Compute the real path to the image on the file stystem if the images_dir is set.
|
||||
real_path = if Compass.configuration.images_dir
|
||||
File.join(Compass.configuration.project_path, Compass.configuration.images_dir, path)
|
||||
end
|
||||
|
||||
# prepend the path to the image if there's one
|
||||
if http_images_path
|
||||
http_images_path = "#{http_images_path}/" unless http_images_path[-1..-1] == "/"
|
||||
path = "#{http_images_path}#{path}"
|
||||
end
|
||||
|
||||
# Compute the asset host unless in relative mode.
|
||||
asset_host = if !relative? && Compass.configuration.asset_host
|
||||
Compass.configuration.asset_host.call(path)
|
||||
end
|
||||
|
||||
# Compute and append the cache buster if there is one.
|
||||
if cache_buster.to_bool
|
||||
if cache_buster.is_a?(Sass::Script::String)
|
||||
path += "?#{cache_buster.value}"
|
||||
else
|
||||
path = cache_busted_path(path, real_path)
|
||||
end
|
||||
end
|
||||
|
||||
# prepend the asset host if there is one.
|
||||
path = "#{asset_host}#{'/' unless path[0..0] == "/"}#{path}" if asset_host
|
||||
|
||||
if only_path.to_bool
|
||||
Sass::Script::String.new(clean_path(path))
|
||||
else
|
||||
clean_url(path)
|
||||
end
|
||||
end
|
||||
Sass::Script::Functions.declare :image_url, [:path]
|
||||
Sass::Script::Functions.declare :image_url, [:path, :only_path]
|
||||
Sass::Script::Functions.declare :image_url, [:path, :only_path, :cache_buster]
|
||||
|
||||
private
|
||||
|
||||
|
||||
@ -7,10 +7,8 @@ module Compass
|
||||
end
|
||||
end
|
||||
end
|
||||
require 'compass/sass_extensions/sprites/image_row'
|
||||
require 'compass/sass_extensions/sprites/row_fitter'
|
||||
|
||||
require 'compass/sass_extensions/sprites/image'
|
||||
require 'compass/sass_extensions/sprites/layout_methods'
|
||||
require 'compass/sass_extensions/sprites/sprite_methods'
|
||||
require 'compass/sass_extensions/sprites/image_methods'
|
||||
require 'compass/sass_extensions/sprites/sprite_map'
|
||||
|
||||
@ -17,16 +17,7 @@ module Compass
|
||||
|
||||
# The Full path to the image
|
||||
def file
|
||||
@file ||= find_file
|
||||
end
|
||||
|
||||
def find_file
|
||||
Compass.configuration.sprite_load_path.each do |path|
|
||||
f = File.join(path, relative_file)
|
||||
if File.exists?(f)
|
||||
return f
|
||||
end
|
||||
end
|
||||
File.join(Compass.configuration.images_path, relative_file)
|
||||
end
|
||||
|
||||
# Width of the image
|
||||
@ -34,10 +25,6 @@ module Compass
|
||||
dimensions.first
|
||||
end
|
||||
|
||||
def size
|
||||
@size ||= File.size(file)
|
||||
end
|
||||
|
||||
# Height of the image
|
||||
def height
|
||||
dimensions.last
|
||||
@ -48,28 +35,29 @@ module Compass
|
||||
File.basename(relative_file, '.png')
|
||||
end
|
||||
|
||||
def get_var_file(var)
|
||||
options.get_var "#{base.name}_#{name}_#{var}"
|
||||
end
|
||||
|
||||
# Value of <tt> $#{name}-repeat </tt> or <tt> $repeat </tt>
|
||||
def repeat
|
||||
@repeat ||= (get_var_file("repeat") || options.get_var("repeat") || Sass::Script::String.new("no-repeat")).value
|
||||
[ "#{name}-repeat", "repeat" ].each { |which|
|
||||
if var = options.get_var(which)
|
||||
return var.value
|
||||
end
|
||||
}
|
||||
"no-repeat"
|
||||
end
|
||||
|
||||
# Value of <tt> $#{name}-position </tt> or <tt> $position </tt> defaults to <tt>0px</tt>
|
||||
# Value of <tt> $#{name}-position </tt> or <tt> $position </tt> defaults o <tt>0px</tt>
|
||||
def position
|
||||
@position||= get_var_file("position") || options.get_var("position") || Sass::Script::Number.new(0, ["px"])
|
||||
options.get_var("#{name}-position") || options.get_var("position") || Sass::Script::Number.new(0, ["px"])
|
||||
end
|
||||
|
||||
# Offset within the sprite
|
||||
def offset
|
||||
@offset ||= (position.unitless? || position.unit_str == "px") ? position.value : 0
|
||||
(position.unitless? || position.unit_str == "px") ? position.value : 0
|
||||
end
|
||||
|
||||
|
||||
# Spacing between this image and the next
|
||||
def spacing
|
||||
@spacing ||= (get_var_file("spacing") || options.get_var("spacing") || Sass::Script::Number.new(0, ['px'])).value
|
||||
(options.get_var("#{name}-spacing") || options.get_var("spacing") || Sass::Script::Number.new(0)).value
|
||||
end
|
||||
|
||||
# MD5 hash of this file
|
||||
|
||||
@ -1,47 +0,0 @@
|
||||
require 'forwardable'
|
||||
|
||||
module Compass
|
||||
module SassExtensions
|
||||
module Sprites
|
||||
class ImageRow
|
||||
extend Forwardable
|
||||
|
||||
attr_reader :images, :max_width
|
||||
def_delegators :@images, :last, :delete, :empty?, :length
|
||||
|
||||
def initialize(max_width)
|
||||
@images = []
|
||||
@max_width = max_width
|
||||
end
|
||||
|
||||
def add(image)
|
||||
return false if !will_fit?(image)
|
||||
@images << image
|
||||
true
|
||||
end
|
||||
|
||||
alias :<< :add
|
||||
|
||||
def height
|
||||
images.map(&:height).max
|
||||
end
|
||||
|
||||
def width
|
||||
images.map(&:width).max
|
||||
end
|
||||
|
||||
def total_width
|
||||
images.inject(0) {|sum, img| sum + img.width }
|
||||
end
|
||||
|
||||
def efficiency
|
||||
1 - (total_width.to_f / max_width.to_f)
|
||||
end
|
||||
|
||||
def will_fit?(image)
|
||||
(total_width + image.width) <= max_width
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -1,121 +0,0 @@
|
||||
module Compass
|
||||
module SassExtensions
|
||||
module Sprites
|
||||
module LayoutMethods
|
||||
HORIZONTAL = 'horizontal'
|
||||
DIAGONAL = 'diagonal'
|
||||
SMART = 'smart'
|
||||
|
||||
def smart?
|
||||
layout == SMART
|
||||
end
|
||||
|
||||
def horizontal?
|
||||
layout == HORIZONTAL
|
||||
end
|
||||
|
||||
def diagonal?
|
||||
layout == DIAGONAL
|
||||
end
|
||||
|
||||
def layout
|
||||
@layout ||= @kwargs.get_var('layout').value
|
||||
end
|
||||
|
||||
# Calculates the overal image dimensions
|
||||
# collects image sizes and input parameters for each sprite
|
||||
def compute_image_positions!
|
||||
case layout
|
||||
when SMART
|
||||
calculate_smart_positions
|
||||
when DIAGONAL
|
||||
calculate_diagonal_dimensions
|
||||
calculate_diagonal_positions
|
||||
when HORIZONTAL
|
||||
@height = height_for_horizontal_layout
|
||||
calculate_horizontal_positions
|
||||
@width = width_for_horizontal_layout
|
||||
else
|
||||
@images.sort! {|a,b| b.size <=> a.size}
|
||||
@width = width_for_vertical_layout
|
||||
calulate_vertical_postions
|
||||
@height = height_for_vertical_layout
|
||||
end
|
||||
end
|
||||
|
||||
def calculate_smart_positions
|
||||
fitter = ::Compass::SassExtensions::Sprites::RowFitter.new(@images)
|
||||
current_y = 0
|
||||
fitter.fit!.each do |row|
|
||||
current_x = 0
|
||||
row.images.each_with_index do |image, index|
|
||||
image.left = current_x
|
||||
image.top = current_y
|
||||
current_x += image.width
|
||||
end
|
||||
current_y += row.height
|
||||
end
|
||||
@width = fitter.width
|
||||
@height = fitter.height
|
||||
end
|
||||
|
||||
|
||||
def calculate_diagonal_dimensions
|
||||
@width = @images.inject(0) {|sum, img| sum + img.width}
|
||||
@height = @images.inject(0) {|sum, img| sum + img.height}
|
||||
end
|
||||
|
||||
def calculate_diagonal_positions
|
||||
previous = nil
|
||||
@images.each_with_index do |image, index|
|
||||
if previous.nil?
|
||||
previous = image
|
||||
image.top = @height - image.height
|
||||
image.left = 0
|
||||
next
|
||||
end
|
||||
image.top = previous.top - image.height
|
||||
image.left = previous.left + previous.width
|
||||
previous = image
|
||||
end
|
||||
end
|
||||
|
||||
def calculate_horizontal_positions
|
||||
@images.each_with_index do |image, index|
|
||||
image.top = image.position.unit_str == '%' ? (@height - image.height) * (image.position.value / 100.0) : image.position.value
|
||||
next if index == 0
|
||||
last_image = @images[index-1]
|
||||
image.left = last_image.left + last_image.width + [image.spacing, last_image.spacing].max
|
||||
end
|
||||
end
|
||||
|
||||
def calulate_vertical_postions
|
||||
@images.each_with_index do |image, index|
|
||||
image.left = image.position.unit_str == "%" ? (@width - image.width) * (image.position.value / 100.0) : image.position.value
|
||||
next if index == 0
|
||||
last_image = @images[index-1]
|
||||
image.top = last_image.top + last_image.height + [image.spacing, last_image.spacing].max
|
||||
end
|
||||
end
|
||||
|
||||
def height_for_vertical_layout
|
||||
last = @images.last
|
||||
last.top + last.height
|
||||
end
|
||||
|
||||
def height_for_horizontal_layout
|
||||
@height = @images.map {|image| image.height + image.offset}.max
|
||||
end
|
||||
|
||||
def width_for_horizontal_layout
|
||||
@images.inject(0) { |sum, image| sum += (image.width + image.spacing) }
|
||||
end
|
||||
|
||||
def width_for_vertical_layout
|
||||
@images.map { |image| image.width + image.offset }.max
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
require 'forwardable'
|
||||
|
||||
module Compass
|
||||
module SassExtensions
|
||||
module Sprites
|
||||
class RowFitter
|
||||
extend Forwardable
|
||||
|
||||
attr_reader :images, :rows
|
||||
def_delegators :rows, :[]
|
||||
|
||||
def initialize(images)
|
||||
@images = images.sort {|a,b| a.height <=> b.height }
|
||||
@rows = []
|
||||
end
|
||||
|
||||
def fit!(style = :scan)
|
||||
send("#{style}_fit")
|
||||
@rows
|
||||
end
|
||||
|
||||
def width
|
||||
@width ||= @images.collect(&:width).max
|
||||
end
|
||||
|
||||
def height
|
||||
@height ||= @rows.inject(0) {|sum, row| sum += row.height}
|
||||
end
|
||||
|
||||
def efficiency
|
||||
@rows.inject(0) { |sum, row| sum += row.efficiency } ** @rows.length
|
||||
end
|
||||
|
||||
private
|
||||
def new_row(image = nil)
|
||||
row = Compass::SassExtensions::Sprites::ImageRow.new(width)
|
||||
row.add(image) if image
|
||||
row
|
||||
end
|
||||
|
||||
def fast_fit
|
||||
row = new_row
|
||||
@images.each do |image|
|
||||
if !row.add(image)
|
||||
@rows << row
|
||||
row = new_row(image)
|
||||
end
|
||||
end
|
||||
|
||||
@rows << row
|
||||
end
|
||||
|
||||
def scan_fit
|
||||
fast_fit
|
||||
|
||||
moved_images = []
|
||||
|
||||
begin
|
||||
removed = false
|
||||
|
||||
catch :done do
|
||||
@rows.each do |row|
|
||||
(@rows - [ row ]).each do |other_row|
|
||||
other_row.images.each do |image|
|
||||
if !moved_images.include?(image)
|
||||
if row.will_fit?(image)
|
||||
other_row.delete(image)
|
||||
row << image
|
||||
|
||||
@rows.delete(other_row) if other_row.empty?
|
||||
removed = true
|
||||
|
||||
moved_images << image
|
||||
throw :done
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end while removed
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -7,29 +7,16 @@ module Compass
|
||||
|
||||
include SpriteMethods
|
||||
include ImageMethods
|
||||
include LayoutMethods
|
||||
|
||||
|
||||
# Initialize a new sprite object from a relative file path
|
||||
# the path is relative to the <tt>images_path</tt> confguration option
|
||||
def self.from_uri(uri, context, kwargs)
|
||||
uri = uri.value
|
||||
path, name = Compass::SpriteImporter.path_and_name(uri)
|
||||
files = Compass::SpriteImporter.files(uri)
|
||||
sprites = files.map do |sprite|
|
||||
relative_name(sprite)
|
||||
end
|
||||
new(sprites, path, name, context, kwargs)
|
||||
end
|
||||
|
||||
def self.relative_name(sprite)
|
||||
sprite = File.expand_path(sprite)
|
||||
Compass.configuration.sprite_load_path.each do |path|
|
||||
path = File.expand_path(path)
|
||||
if sprite.include?(path)
|
||||
return sprite.gsub("#{path}/", "")
|
||||
end
|
||||
importer = ::Compass::SpriteImporter.new(:uri => uri.value, :options => {})
|
||||
sprites = importer.files.map do |sprite|
|
||||
sprite.gsub(Compass.configuration.images_path+"/", "")
|
||||
end
|
||||
new(sprites, importer.path, importer.name, context, kwargs)
|
||||
end
|
||||
|
||||
def initialize(sprites, path, name, context, kwargs)
|
||||
@ -38,7 +25,6 @@ module Compass
|
||||
@name = name
|
||||
@kwargs = kwargs
|
||||
@kwargs['cleanup'] ||= Sass::Script::Bool.new(true)
|
||||
@kwargs['layout'] ||= Sass::Script::String.new('vertical')
|
||||
@images = nil
|
||||
@width = nil
|
||||
@height = nil
|
||||
|
||||
@ -14,6 +14,7 @@ module Compass
|
||||
@width = 0
|
||||
init_images
|
||||
compute_image_positions!
|
||||
@height = @images.last.top + @images.last.height
|
||||
init_engine
|
||||
end
|
||||
|
||||
@ -28,10 +29,22 @@ module Compass
|
||||
def init_images
|
||||
@images = image_names.collect do |relative_file|
|
||||
image = Compass::SassExtensions::Sprites::Image.new(self, relative_file, kwargs)
|
||||
@width = [ @width, image.width + image.offset ].max
|
||||
image
|
||||
end
|
||||
end
|
||||
|
||||
# Calculates the overal image dimensions
|
||||
# collects image sizes and input parameters for each sprite
|
||||
def compute_image_positions!
|
||||
@images.each_with_index do |image, index|
|
||||
image.left = image.position.unit_str == "%" ? (@width - image.width) * (image.position.value / 100) : image.position.value
|
||||
next if index == 0
|
||||
last_image = @images[index-1]
|
||||
image.top = last_image.top + last_image.height + [image.spacing, last_image.spacing].max
|
||||
end
|
||||
end
|
||||
|
||||
# Validates that the sprite_names are valid sass
|
||||
def validate!
|
||||
for sprite_name in sprite_names
|
||||
@ -43,7 +56,7 @@ module Compass
|
||||
|
||||
# The on-the-disk filename of the sprite
|
||||
def filename
|
||||
File.join(Compass.configuration.generated_images_path, "#{path}-s#{uniqueness_hash}.png")
|
||||
File.join(Compass.configuration.images_path, "#{path}-s#{uniqueness_hash}.png")
|
||||
end
|
||||
|
||||
# Generate a sprite image if necessary
|
||||
@ -53,7 +66,7 @@ module Compass
|
||||
cleanup_old_sprites
|
||||
end
|
||||
engine.construct_sprite
|
||||
Compass.configuration.run_sprite_generated(engine.canvas)
|
||||
Compass.configuration.run_callback(:sprite_generated, engine.canvas)
|
||||
save!
|
||||
end
|
||||
end
|
||||
@ -87,9 +100,8 @@ module Compass
|
||||
|
||||
# Saves the sprite engine
|
||||
def save!
|
||||
FileUtils.mkdir_p(File.dirname(filename))
|
||||
saved = engine.save(filename)
|
||||
Compass.configuration.run_sprite_saved(filename)
|
||||
Compass.configuration.run_callback(:sprite_saved, filename)
|
||||
saved
|
||||
end
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
module Compass
|
||||
class SpriteImporter < Sass::Importers::Base
|
||||
attr_accessor :uri, :options
|
||||
VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
|
||||
SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png}
|
||||
VALID_EXTENSIONS = ['.png']
|
||||
@ -7,19 +8,33 @@ module Compass
|
||||
# finds all sprite files
|
||||
def self.find_all_sprite_map_files(path)
|
||||
hex = "[0-9a-f]"
|
||||
glob = "*-s#{hex*10}{#{VALID_EXTENSIONS.join(",")}}"
|
||||
glob = "*-{,s}#{hex*10}{#{VALID_EXTENSIONS.join(",")}}"
|
||||
Dir.glob(File.join(path, "**", glob))
|
||||
end
|
||||
|
||||
def self.load(uri, options)
|
||||
klass = Compass::SpriteImporter.new
|
||||
klass.uri, klass.options = uri, options
|
||||
klass
|
||||
end
|
||||
|
||||
def initialize(options ={})
|
||||
@uri, @options = '', {}
|
||||
options.each do |key, value|
|
||||
send("#{key}=", value)
|
||||
end
|
||||
end
|
||||
|
||||
def find(uri, options)
|
||||
@uri, @options = uri, options
|
||||
if uri =~ SPRITE_IMPORTER_REGEX
|
||||
return self.class.sass_engine(uri, self.class.sprite_name(uri), self, options)
|
||||
return sass_engine
|
||||
end
|
||||
nil
|
||||
end
|
||||
|
||||
def find_relative(uri, base, options)
|
||||
nil
|
||||
@uri, @options = uri, options
|
||||
find(File.join(base, uri), options)
|
||||
end
|
||||
|
||||
def to_s
|
||||
@ -35,47 +50,45 @@ module Compass
|
||||
end
|
||||
|
||||
def mtime(uri, options)
|
||||
self.class.files(uri).sort.inject(Time.at(0)) do |max_time, file|
|
||||
@uri, @options = uri, options
|
||||
files.sort.inject(Time.at(0)) do |max_time, file|
|
||||
(t = File.mtime(file)) > max_time ? t : max_time
|
||||
end
|
||||
end
|
||||
|
||||
def key(uri, options={})
|
||||
[self.class.name + ":sprite:" + File.dirname(File.expand_path(uri)), File.basename(uri)]
|
||||
@uri, @options = uri, options
|
||||
[self.class.name + ":" + File.dirname(File.expand_path(uri)), File.basename(uri)]
|
||||
end
|
||||
|
||||
def self.path_and_name(uri)
|
||||
if uri =~ SPRITE_IMPORTER_REGEX
|
||||
[$1, $3]
|
||||
else
|
||||
raise Compass::Error, "invalid sprite path"
|
||||
raise Compass::Error "invalid sprite path"
|
||||
end
|
||||
end
|
||||
|
||||
# Name of this spite
|
||||
def self.sprite_name(uri)
|
||||
_, name = path_and_name(uri)
|
||||
name
|
||||
def name
|
||||
ensure_path_and_name!
|
||||
@name
|
||||
end
|
||||
|
||||
# The on-disk location of this sprite
|
||||
def self.path(uri)
|
||||
path, _ = path_and_name(uri)
|
||||
path
|
||||
def path
|
||||
ensure_path_and_name!
|
||||
@path
|
||||
end
|
||||
|
||||
# Returns the Glob of image files for the uri
|
||||
def self.files(uri)
|
||||
Compass.configuration.sprite_load_path.each do |folder|
|
||||
files = Dir[File.join(folder, uri)].sort
|
||||
next if files.empty?
|
||||
return files
|
||||
end
|
||||
# Returns the Glob of image files for this sprite
|
||||
def files
|
||||
Dir[File.join(Compass.configuration.images_path, uri)].sort
|
||||
end
|
||||
|
||||
# Returns an Array of image names without the file extension
|
||||
def self.sprite_names(uri)
|
||||
files(uri).collect do |file|
|
||||
def sprite_names
|
||||
files.collect do |file|
|
||||
filename = File.basename(file, '.png')
|
||||
unless VAILD_FILE_NAME =~ filename
|
||||
raise Compass::Error, "Sprite file names must be legal css identifiers. Please rename #{File.basename(file)}"
|
||||
@ -84,18 +97,31 @@ module Compass
|
||||
end
|
||||
end
|
||||
|
||||
# Returns the sass_options for this sprite
|
||||
def self.sass_options(uri, importer, options)
|
||||
options.merge!(:filename => uri, :syntax => :scss, :importer => importer)
|
||||
def validate_sprites!
|
||||
files.each do |file|
|
||||
unless VALID_EXTENSIONS.include? File.extname(file)
|
||||
raise Compass::Error, "Invalid sprite extension only: #{VALID_EXTENSIONS.join(',')} images are allowed"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
# Returns the sass options for this sprite
|
||||
def sass_options
|
||||
options.merge(:filename => name, :syntax => :scss, :importer => self)
|
||||
end
|
||||
|
||||
# Returns a Sass::Engine for this sprite object
|
||||
def self.sass_engine(uri, name, importer, options)
|
||||
Sass::Engine.new(content_for_images(uri, name, options[:skip_overrides]), sass_options(uri, importer, options))
|
||||
def sass_engine
|
||||
validate_sprites!
|
||||
Sass::Engine.new(content_for_images, sass_options)
|
||||
end
|
||||
|
||||
def ensure_path_and_name!
|
||||
@path, @name = self.class.path_and_name(uri)
|
||||
end
|
||||
|
||||
# Generates the Sass for this sprite file
|
||||
def self.content_for_images(uri, name, skip_overrides = false)
|
||||
def content_for_images(skip_overrides = false)
|
||||
<<-SCSS
|
||||
@import "compass/utilities/sprites/base";
|
||||
|
||||
@ -108,9 +134,8 @@ $#{name}-spacing: 0 !default;
|
||||
$#{name}-repeat: no-repeat !default;
|
||||
$#{name}-prefix: '' !default;
|
||||
$#{name}-clean-up: true !default;
|
||||
$#{name}-layout:vertical !default;
|
||||
|
||||
#{skip_overrides ? "$#{name}-sprites: sprite-map(\"#{uri}\", $layout: $#{name}-layout, $cleanup: $#{name}-clean-up);" : generate_overrides(uri, name) }
|
||||
#{skip_overrides ? "$#{name}-sprites: sprite-map(\"#{uri}\", $cleanup: $#{name}-clean-up);" : generate_overrides }
|
||||
|
||||
// All sprites should extend this class
|
||||
// The #{name}-sprite mixin will do so for you.
|
||||
@ -136,13 +161,13 @@ $#{name}-layout:vertical !default;
|
||||
@include sprite($#{name}-sprites, $name, $dimensions, $offset-x, $offset-y)
|
||||
}
|
||||
|
||||
@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) {
|
||||
@include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix, $offset-x, $offset-y)
|
||||
@mixin #{name}-sprites($sprite-names, $dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) {
|
||||
@include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix)
|
||||
}
|
||||
|
||||
// Generates a class for each sprited image.
|
||||
@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites), $offset-x: 0, $offset-y: 0) {
|
||||
@include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix, $offset-x, $offset-y);
|
||||
@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) {
|
||||
@include #{name}-sprites(#{sprite_names.join(" ")}, $dimensions, $prefix);
|
||||
}
|
||||
SCSS
|
||||
end
|
||||
@ -151,13 +176,12 @@ SCSS
|
||||
# <tt>$#{name}-#{sprite_name}-position </tt>
|
||||
# <tt> $#{name}-#{sprite_name}-spacing </tt>
|
||||
# <tt> #{name}-#{sprite_name}-repeat: </tt>
|
||||
def self.generate_overrides(uri, name)
|
||||
sprites = sprite_names(uri)
|
||||
def generate_overrides
|
||||
content = <<-TXT
|
||||
// These variables control the generated sprite output
|
||||
// You can override them selectively before you import this file.
|
||||
TXT
|
||||
sprites.map do |sprite_name|
|
||||
sprite_names.map do |sprite_name|
|
||||
content += <<-SCSS
|
||||
$#{name}-#{sprite_name}-position: $#{name}-position !default;
|
||||
$#{name}-#{sprite_name}-spacing: $#{name}-spacing !default;
|
||||
@ -165,11 +189,11 @@ $#{name}-#{sprite_name}-repeat: $#{name}-repeat !default;
|
||||
SCSS
|
||||
end.join
|
||||
|
||||
content += "\n$#{name}-sprites: sprite-map(\"#{uri}\", \n$layout: $#{name}-layout, \n$cleanup: $#{name}-clean-up,\n"
|
||||
content += sprites.map do |sprite_name|
|
||||
%Q{ $#{name}-#{sprite_name}-position: $#{name}-#{sprite_name}-position,
|
||||
$#{name}-#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
|
||||
$#{name}-#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
|
||||
content += "\n$#{name}-sprites: sprite-map(\"#{uri}\", \n$cleanup: $#{name}-clean-up,\n"
|
||||
content += sprite_names.map do |sprite_name|
|
||||
%Q{ $#{sprite_name}-position: $#{name}-#{sprite_name}-position,
|
||||
$#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
|
||||
$#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
|
||||
end.join(",\n")
|
||||
content += ");"
|
||||
end
|
||||
|
||||
1
test/fixtures/fonts/bgrove.base64.txt
vendored
1
test/fixtures/fonts/bgrove.base64.txt
vendored
File diff suppressed because one or more lines are too long
BIN
test/fixtures/fonts/bgrove.ttf
vendored
BIN
test/fixtures/fonts/bgrove.ttf
vendored
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
14
test/fixtures/stylesheets/compass/css/lists.css
vendored
14
test/fixtures/stylesheets/compass/css/lists.css
vendored
@ -7,7 +7,7 @@ ul.horizontal {
|
||||
ul.horizontal li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-left: 0px;
|
||||
white-space: nowrap;
|
||||
display: inline;
|
||||
float: left;
|
||||
@ -29,7 +29,7 @@ ul.wide-horizontal {
|
||||
ul.wide-horizontal li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-left: 0px;
|
||||
white-space: nowrap;
|
||||
display: inline;
|
||||
float: left;
|
||||
@ -51,7 +51,7 @@ ul.right-horizontal {
|
||||
ul.right-horizontal li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-left: 0px;
|
||||
white-space: nowrap;
|
||||
display: inline;
|
||||
float: right;
|
||||
@ -73,7 +73,7 @@ ul.no-padding {
|
||||
ul.no-padding li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-left: 0px;
|
||||
white-space: nowrap;
|
||||
display: inline;
|
||||
float: left; }
|
||||
@ -87,7 +87,7 @@ ul.inline-block {
|
||||
ul.inline-block li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-left: 0px;
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
@ -106,7 +106,7 @@ ul.wide-inline-block {
|
||||
ul.wide-inline-block li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
margin-left: 0px;
|
||||
display: -moz-inline-box;
|
||||
-moz-box-orient: vertical;
|
||||
display: inline-block;
|
||||
@ -143,7 +143,7 @@ ul.no-bullets {
|
||||
ul.no-bullets li {
|
||||
list-style-image: none;
|
||||
list-style-type: none;
|
||||
margin-left: 0; }
|
||||
margin-left: 0px; }
|
||||
|
||||
ul.pretty {
|
||||
margin-left: 0; }
|
||||
|
||||
@ -50,6 +50,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
|
||||
|
||||
body.registered a.registered-only, body.registered abbr.registered-only, body.registered acronym.registered-only, body.registered audio.registered-only, body.registered b.registered-only, body.registered basefont.registered-only, body.registered bdo.registered-only, body.registered big.registered-only, body.registered br.registered-only, body.registered canvas.registered-only, body.registered cite.registered-only, body.registered code.registered-only, body.registered command.registered-only, body.registered datalist.registered-only, body.registered dfn.registered-only, body.registered em.registered-only, body.registered embed.registered-only, body.registered font.registered-only, body.registered i.registered-only, body.registered img.registered-only, body.registered input.registered-only, body.registered keygen.registered-only, body.registered kbd.registered-only, body.registered label.registered-only, body.registered mark.registered-only, body.registered meter.registered-only, body.registered output.registered-only, body.registered progress.registered-only, body.registered q.registered-only, body.registered rp.registered-only, body.registered rt.registered-only, body.registered ruby.registered-only, body.registered s.registered-only, body.registered samp.registered-only, body.registered select.registered-only, body.registered small.registered-only, body.registered span.registered-only, body.registered strike.registered-only, body.registered strong.registered-only, body.registered sub.registered-only, body.registered sup.registered-only, body.registered textarea.registered-only, body.registered time.registered-only, body.registered tt.registered-only, body.registered u.registered-only, body.registered var.registered-only, body.registered video.registered-only, body.registered wbr.registered-only {
|
||||
display: inline; }
|
||||
|
||||
body.registered address.registered-only, body.registered article.registered-only, body.registered aside.registered-only, body.registered blockquote.registered-only, body.registered center.registered-only, body.registered dir.registered-only, body.registered div.registered-only, body.registered dd.registered-only, body.registered details.registered-only, body.registered dl.registered-only, body.registered dt.registered-only, body.registered fieldset.registered-only, body.registered figcaption.registered-only, body.registered figure.registered-only, body.registered form.registered-only, body.registered footer.registered-only, body.registered frameset.registered-only, body.registered h1.registered-only, body.registered h2.registered-only, body.registered h3.registered-only, body.registered h4.registered-only, body.registered h5.registered-only, body.registered h6.registered-only, body.registered hr.registered-only, body.registered header.registered-only, body.registered hgroup.registered-only, body.registered isindex.registered-only, body.registered menu.registered-only, body.registered nav.registered-only, body.registered noframes.registered-only, body.registered noscript.registered-only, body.registered ol.registered-only, body.registered p.registered-only, body.registered pre.registered-only, body.registered section.registered-only, body.registered summary.registered-only, body.registered ul.registered-only {
|
||||
display: block; }
|
||||
|
||||
|
||||
1364
test/fixtures/stylesheets/compass/css/sprites.css
vendored
1364
test/fixtures/stylesheets/compass/css/sprites.css
vendored
File diff suppressed because it is too large
Load Diff
BIN
test/fixtures/stylesheets/compass/images/flag-s03c3b29b35.png
vendored
Normal file
BIN
test/fixtures/stylesheets/compass/images/flag-s03c3b29b35.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user