Compare commits
No commits in common. "master" and "stable" have entirely different histories.
12
Gemfile
@ -9,15 +9,21 @@ gem "compass-validator", "3.0.1"
|
|||||||
gem "css_parser", "~> 1.0.1"
|
gem "css_parser", "~> 1.0.1"
|
||||||
gem "sass", "~>3.1"
|
gem "sass", "~>3.1"
|
||||||
gem "haml", "~> 3.1"
|
gem "haml", "~> 3.1"
|
||||||
gem "rcov", :platform => :mri_18
|
gem "rcov", :platform => :mri
|
||||||
gem "rubyzip"
|
gem "rubyzip"
|
||||||
gem "livereload"
|
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 'mocha'
|
||||||
gem 'timecop'
|
gem 'timecop'
|
||||||
gem 'diff-lcs', '~> 1.1.2'
|
gem 'diff-lcs', '~> 1.1.2'
|
||||||
|
|
||||||
gem 'rake', '0.8.7'
|
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
@ -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
@ -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.
|
To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
|
||||||
END
|
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"
|
desc "Compile Examples into HTML and CSS"
|
||||||
task :examples do
|
task :examples do
|
||||||
linked_haml = "tests/haml"
|
linked_haml = "tests/haml"
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
---
|
---
|
||||||
:major: 0
|
:major: 0
|
||||||
:minor: 12
|
:minor: 11
|
||||||
:state: alpha
|
:patch: 5
|
||||||
:build: 0
|
:name: Antares
|
||||||
:name: Alnilam
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
# Require any additional compass plugins here.
|
# Require any additional compass plugins here.
|
||||||
require 'susy'
|
require 'susy'
|
||||||
require 'css-slideshow'
|
require 'css-slideshow'
|
||||||
require 'compass-theme'
|
|
||||||
# Set this to the root of your project when deployed:
|
# Set this to the root of your project when deployed:
|
||||||
http_path = "/"
|
http_path = "/"
|
||||||
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
||||||
|
@ -1,8 +1,6 @@
|
|||||||
source :gemcutter
|
source :gemcutter
|
||||||
|
|
||||||
#gem 'cri', '~> 1.0.1'
|
gem 'nanoc3', :git => "git://github.com/chriseppstein/nanoc.git"
|
||||||
gem 'adsf'
|
|
||||||
gem 'nanoc3' #, :git => "git://github.com/chriseppstein/nanoc.git"
|
|
||||||
gem 'rdiscount'
|
gem 'rdiscount'
|
||||||
gem 'thor'
|
gem 'thor'
|
||||||
gem 'rack'
|
gem 'rack'
|
||||||
@ -10,13 +8,12 @@ gem 'mime-types'
|
|||||||
gem 'serve', "1.0.0"
|
gem 'serve', "1.0.0"
|
||||||
gem 'nokogiri'
|
gem 'nokogiri'
|
||||||
gem 'coderay'
|
gem 'coderay'
|
||||||
gem 'haml'
|
gem 'sass', ">= 3.1"
|
||||||
|
gem 'haml', ">= 3.1"
|
||||||
gem 'rake'
|
gem 'rake'
|
||||||
gem 'activesupport', '~> 3.0.10', :require => 'active_support/inflector'
|
|
||||||
gem 'compass', :path => ".."
|
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 'compass-susy-plugin', ">=0.7.0.pre8"
|
gem 'css-slideshow', "0.2.0"
|
||||||
# gem 'css-slideshow', "0.2.0"
|
|
||||||
gem 'json'
|
gem 'json'
|
||||||
gem 'css_parser', "1.0.1"
|
gem 'css_parser', "1.0.1"
|
||||||
gem 'ruby-prof'
|
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
|
PATH
|
||||||
remote: ..
|
remote: ..
|
||||||
specs:
|
specs:
|
||||||
compass (0.12.alpha.0.374aed6)
|
compass (0.11.1.93b89a2)
|
||||||
chunky_png (~> 1.2)
|
chunky_png (~> 1.1)
|
||||||
fssm (>= 0.2.7)
|
fssm (>= 0.2.7)
|
||||||
sass (~> 3.1)
|
sass (~> 3.1)
|
||||||
|
|
||||||
GEM
|
GEM
|
||||||
remote: http://rubygems.org/
|
remote: http://rubygems.org/
|
||||||
specs:
|
specs:
|
||||||
activesupport (3.0.10)
|
activesupport (3.0.7)
|
||||||
adsf (1.0.1)
|
builder (2.1.2)
|
||||||
rack (>= 1.0.0)
|
chunky_png (1.2.0)
|
||||||
builder (3.0.0)
|
coderay (0.9.7)
|
||||||
chunky_png (1.2.1)
|
compass-susy-plugin (0.9.beta.3)
|
||||||
coderay (0.9.8)
|
compass (>= 0.11.beta.3)
|
||||||
compass-susy-plugin (0.9)
|
cri (1.0.1)
|
||||||
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)
|
|
||||||
css-slideshow (0.2.0)
|
css-slideshow (0.2.0)
|
||||||
compass (>= 0.10.0.rc3)
|
compass (>= 0.10.0.rc3)
|
||||||
css_parser (1.0.1)
|
css_parser (1.0.1)
|
||||||
fssm (0.2.7)
|
fssm (0.2.7)
|
||||||
haml (3.1.2)
|
haml (3.1.0)
|
||||||
i18n (0.4.2)
|
i18n (0.4.2)
|
||||||
json (1.5.4)
|
json (1.5.1)
|
||||||
mime-types (1.16)
|
mime-types (1.16)
|
||||||
nanoc3 (3.2.1)
|
nokogiri (1.4.4)
|
||||||
cri (~> 2.0)
|
rack (1.2.2)
|
||||||
nokogiri (1.5.0)
|
rake (0.8.7)
|
||||||
rack (1.2.3)
|
rb-fsevent (0.4.0)
|
||||||
rake (0.9.2)
|
|
||||||
rb-fsevent (0.4.3.1)
|
|
||||||
rdiscount (1.6.8)
|
rdiscount (1.6.8)
|
||||||
ruby-prof (0.10.8)
|
ruby-prof (0.9.2)
|
||||||
sass (3.1.7)
|
sass (3.1.0)
|
||||||
serve (1.0.0)
|
serve (1.0.0)
|
||||||
activesupport (~> 3.0.1)
|
activesupport (~> 3.0.1)
|
||||||
i18n (~> 0.4.1)
|
i18n (~> 0.4.1)
|
||||||
rack (~> 1.2.1)
|
rack (~> 1.2.1)
|
||||||
tzinfo (~> 0.3.23)
|
tzinfo (~> 0.3.23)
|
||||||
thor (0.14.6)
|
thor (0.14.6)
|
||||||
tzinfo (0.3.29)
|
tzinfo (0.3.26)
|
||||||
|
|
||||||
PLATFORMS
|
PLATFORMS
|
||||||
ruby
|
ruby
|
||||||
|
|
||||||
DEPENDENCIES
|
DEPENDENCIES
|
||||||
adsf
|
|
||||||
builder
|
builder
|
||||||
coderay
|
coderay
|
||||||
compass!
|
compass!
|
||||||
compass-theme (~> 0.0.1)
|
compass-susy-plugin (>= 0.7.0.pre8)
|
||||||
|
css-slideshow (= 0.2.0)
|
||||||
css_parser (= 1.0.1)
|
css_parser (= 1.0.1)
|
||||||
haml
|
haml (>= 3.1)
|
||||||
json
|
json
|
||||||
mime-types
|
mime-types
|
||||||
nanoc3
|
nanoc3!
|
||||||
nokogiri
|
nokogiri
|
||||||
rack
|
rack
|
||||||
rake
|
rake
|
||||||
rb-fsevent
|
rb-fsevent
|
||||||
rdiscount
|
rdiscount
|
||||||
ruby-prof
|
ruby-prof
|
||||||
|
sass (>= 3.1)
|
||||||
serve (= 1.0.0)
|
serve (= 1.0.0)
|
||||||
thor
|
thor
|
||||||
|
@ -63,7 +63,6 @@ end
|
|||||||
|
|
||||||
compile '*' do
|
compile '*' do
|
||||||
if item[:extension] == "markdown"
|
if item[:extension] == "markdown"
|
||||||
filter :erb
|
|
||||||
filter :rdiscount
|
filter :rdiscount
|
||||||
elsif item[:extension] == "haml"
|
elsif item[:extension] == "haml"
|
||||||
filter :haml, :ugly => true
|
filter :haml, :ugly => true
|
||||||
|
Before Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 33 KiB |
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/)
|
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)
|
0.11.6 (UNRELEASED)
|
||||||
-------------------
|
-------------------
|
||||||
|
|
||||||
* Added `user-select` mixin to control the selection model and granularity of an element.
|
* 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`.
|
||||||
It accepts one argument (`$select`) from the following options: `none` | `text` | `toggle` | `element` | `elements` | `all` | `inherit`.
|
|
||||||
|
|
||||||
0.11.5 (07/10/2011)
|
0.11.5 (07/10/2011)
|
||||||
-------------------
|
-------------------
|
||||||
|
@ -175,28 +175,6 @@ later on.
|
|||||||
Defaults to <code>http_path + "/" + images_dir</code>.
|
Defaults to <code>http_path + "/" + images_dir</code>.
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
<tr>
|
||||||
<td style="vertical-align:top;"><code>javascripts_dir</code> </td>
|
<td style="vertical-align:top;"><code>javascripts_dir</code> </td>
|
||||||
<td style="vertical-align:top;">String </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.
|
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 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.
|
**Step 1**: If you do not have a github account, create one.
|
||||||
|
|
||||||
|
@ -5,16 +5,12 @@ crumb: Spriting
|
|||||||
classnames:
|
classnames:
|
||||||
- tutorial
|
- tutorial
|
||||||
---
|
---
|
||||||
|
|
||||||
# Spriting with Compass
|
# Spriting with Compass
|
||||||
|
|
||||||
Spriting has never been easier with Compass. You place the sprite images in a folder,
|
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
|
import them into your stylesheet, and then you can use the sprite in your selectors in one
|
||||||
of several convenient ways.
|
of several convenient ways.
|
||||||
|
|
||||||
## Sprite Tutorial Contents
|
|
||||||
<%= sprite_tutorial_links(true) %>
|
|
||||||
|
|
||||||
## Setup
|
## Setup
|
||||||
|
|
||||||
For this tutorial, let's imagine that in your project's image folder there are four icons:
|
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.
|
Each is an icon that is 32px square.
|
||||||
|
|
||||||
## Basic Usage
|
## 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:
|
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
|
||||||
|
|
||||||
@import "icon/*.png";
|
@import "icon/*.png";
|
||||||
@ -52,9 +45,9 @@ 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
|
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 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
|
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
|
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
|
should never have to care what the is name of the generated sprite map, nor where a sprite
|
||||||
is located within it.
|
is located within it.
|
||||||
@ -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
|
sprites, you may find that hand crafting the import will speed up compilation times. See
|
||||||
the section on [performance considerations](#performance) for more details.
|
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>
|
<a name="performance"></a>
|
||||||
## Performance Considerations
|
## 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:
|
|
||||||
|
|
||||||
![Vertical Example](/images/tutorials/sprites/layout/vert.png)
|
|
||||||
## Horizontal
|
|
||||||
|
|
||||||
$mysprite-layout:horizontal;
|
|
||||||
@import "mysprite/*.png";
|
|
||||||
|
|
||||||
Example Output:
|
|
||||||
|
|
||||||
![Horizontal Example](/images/tutorials/sprites/layout/horizontal.png)
|
|
||||||
|
|
||||||
Notes:
|
|
||||||
|
|
||||||
* Responds to the same configuration options that vertical has.
|
|
||||||
|
|
||||||
## Diagonal
|
|
||||||
|
|
||||||
$mysprite-layout:diagonal;
|
|
||||||
@import "mysprite/*.png";
|
|
||||||
|
|
||||||
Example Output:
|
|
||||||
|
|
||||||
![Diagonal Example](/images/tutorials/sprites/layout/diagonal.png)
|
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
![Smart Example](/images/tutorials/sprites/layout/smart.png)
|
|
||||||
|
|
||||||
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
|
%ol
|
||||||
%li Experience cleaner markup without presentational classes.
|
%li Experience cleaner markup without presentational classes.
|
||||||
%li It’s chock full of the web’s best reusable patterns.
|
%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 Compass mixins make CSS3 easy.
|
||||||
%li Download and create extensions with ease.
|
%li Download and create extensions with ease.
|
||||||
.sass
|
.sass
|
||||||
|
@ -35,9 +35,8 @@ documented_functions:
|
|||||||
sin($number)
|
sin($number)
|
||||||
.details
|
.details
|
||||||
%p
|
%p
|
||||||
Returns the sine of a number. If the number is unitless or has a unit of <code>deg</code>
|
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. Unless the number has a unit of <code>deg</code> it
|
then it will return a unitless result. Degrees will first be converted to radians.
|
||||||
will be evaluated as radians. Degrees will first be converted to radians.
|
|
||||||
If the number is any other unit, the units will be passed thru to the result,
|
If the number is any other unit, the units will be passed thru to the result,
|
||||||
and the number will be treated as radians.
|
and the number will be treated as radians.
|
||||||
|
|
||||||
@ -47,9 +46,8 @@ documented_functions:
|
|||||||
cos($number)
|
cos($number)
|
||||||
.details
|
.details
|
||||||
%p
|
%p
|
||||||
Returns the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
|
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. Unless the number has a unit of <code>deg</code> it
|
then it will return a unitless result. Degrees will first be converted to radians.
|
||||||
will be evaluated as radians. Degrees will first be converted to radians.
|
|
||||||
If the number is any other unit, the units will be passed thru to the result,
|
If the number is any other unit, the units will be passed thru to the result,
|
||||||
and the number will be treated as radians.
|
and the number will be treated as radians.
|
||||||
#tan.helper
|
#tan.helper
|
||||||
@ -58,8 +56,7 @@ documented_functions:
|
|||||||
tan($number)
|
tan($number)
|
||||||
.details
|
.details
|
||||||
%p
|
%p
|
||||||
Returns the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
|
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. Unless the number has a unit of <code>deg</code> it
|
then it will return a unitless result. Degrees will first be converted to radians.
|
||||||
will be evaluated as radians. Degrees will first be converted to radians.
|
|
||||||
If the number is any other unit, the units will be passed thru to the result,
|
If the number is any other unit, the units will be passed thru to the result,
|
||||||
and the number will be treated as radians.
|
and the number will be treated as radians.
|
||||||
|
@ -12,7 +12,6 @@ documented_functions:
|
|||||||
- "stylesheet-url"
|
- "stylesheet-url"
|
||||||
- "font-url"
|
- "font-url"
|
||||||
- "image-url"
|
- "image-url"
|
||||||
- "generated-image-url"
|
|
||||||
---
|
---
|
||||||
%h1 Compass URL Helpers
|
%h1 Compass URL Helpers
|
||||||
|
|
||||||
@ -32,7 +31,7 @@ documented_functions:
|
|||||||
Generates a path to an asset found relative to the project's css directory.
|
Generates a path to an asset found relative to the project's css directory.
|
||||||
%br
|
%br
|
||||||
Passing a true value as the second argument will cause the only the path to be returned
|
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
|
#font-url.helper
|
||||||
%h3
|
%h3
|
||||||
@ -43,7 +42,7 @@ documented_functions:
|
|||||||
Generates a path to an asset found relative to the project's font directory.
|
Generates a path to an asset found relative to the project's font directory.
|
||||||
%br
|
%br
|
||||||
Passing a true value as the second argument will cause the only the path to be returned
|
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
|
#image-url.helper
|
||||||
%h3
|
%h3
|
||||||
@ -54,27 +53,9 @@ documented_functions:
|
|||||||
Generates a path to an asset found relative to the project's images directory.
|
Generates a path to an asset found relative to the project's images directory.
|
||||||
%p
|
%p
|
||||||
Passing a true value as the second argument will cause the only the path to be returned
|
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
|
%p
|
||||||
The third argument is used to control the cache buster on a per-use basis.
|
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.
|
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
@ -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
@ -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
@ -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
@ -0,0 +1,6 @@
|
|||||||
|
body#blog-archive {
|
||||||
|
.timestamp {
|
||||||
|
margin-right: 1em;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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
@ -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; }
|
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
@ -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
@ -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
@ -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]}
|
%h1 Demo: #{@item[:title]}
|
||||||
#demo= example_html
|
#demo= example_html
|
||||||
|
|
||||||
= yield if block_given?
|
= yield
|
||||||
|
|
||||||
#how
|
#how
|
||||||
%section#markup
|
%section#markup
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
%p.beta
|
%p.beta
|
||||||
This module is fairly new and is currently in BETA (β).
|
This module is fairly new and is currently in BETA (β).
|
||||||
|
|
||||||
= yield if block_given?
|
= yield
|
||||||
|
|
||||||
%p
|
%p
|
||||||
This file can be imported using:
|
This file can be imported using:
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
# All files in the 'lib' directory will be loaded
|
# All files in the 'lib' directory will be loaded
|
||||||
# before nanoc starts compiling.
|
# before nanoc starts compiling.
|
||||||
require 'erb'
|
|
||||||
require 'active_support/inflector'
|
|
||||||
include Nanoc3::Helpers::LinkTo
|
include Nanoc3::Helpers::LinkTo
|
||||||
include Nanoc3::Helpers::Capturing
|
include Nanoc3::Helpers::Capturing
|
||||||
include Nanoc3::Helpers::Rendering
|
include Nanoc3::Helpers::Rendering
|
||||||
@ -138,16 +137,3 @@ def long_compass_version
|
|||||||
require 'compass/commands'
|
require 'compass/commands'
|
||||||
Compass::Commands::PrintVersion.long_output_string
|
Compass::Commands::PrintVersion.long_output_string
|
||||||
end
|
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
|
|
||||||
|
@ -9,9 +9,8 @@ def fetch(uri_str, limit = 10)
|
|||||||
|
|
||||||
url = URI.parse(uri_str)
|
url = URI.parse(uri_str)
|
||||||
http = Net::HTTP.new(url.host, url.port)
|
http = Net::HTTP.new(url.host, url.port)
|
||||||
http.open_timeout = 10
|
http.open_timeout = 2
|
||||||
http.read_timeout = 30
|
http.read_timeout = 30
|
||||||
http.use_ssl = true
|
|
||||||
response = http.start do |http|
|
response = http.start do |http|
|
||||||
puts "getting #{url.path}"
|
puts "getting #{url.path}"
|
||||||
http.request_get(url.path)
|
http.request_get(url.path)
|
||||||
@ -26,7 +25,7 @@ def fetch(uri_str, limit = 10)
|
|||||||
end
|
end
|
||||||
|
|
||||||
def install_from_github(user, project, ext_name, branch = "master", working_directory = Dir.pwd)
|
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')
|
extdir = File.join(working_directory,'extensions')
|
||||||
|
|
||||||
if !File.exists?("#{extdir}/#{ext_name}")
|
if !File.exists?("#{extdir}/#{ext_name}")
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
require File.join(File.dirname(__FILE__), '..', 'downloader')
|
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/box_shadow.css |
|
||||||
| tmp/columns.css |
|
| tmp/columns.css |
|
||||||
| tmp/fonts.css |
|
| tmp/fonts.css |
|
||||||
| images/flag-s8c3c755a68.png |
|
| images/flag-s03c3b29b35.png |
|
||||||
And the following files are removed:
|
And the following files are removed:
|
||||||
| .sass-cache/ |
|
| .sass-cache/ |
|
||||||
| tmp/border_radius.css |
|
| tmp/border_radius.css |
|
||||||
@ -208,7 +208,7 @@ Feature: Command Line
|
|||||||
| tmp/box_shadow.css |
|
| tmp/box_shadow.css |
|
||||||
| tmp/columns.css |
|
| tmp/columns.css |
|
||||||
| tmp/fonts.css |
|
| tmp/fonts.css |
|
||||||
| images/flag-s8c3c755a68.png |
|
| images/flag-s03c3b29b35.png |
|
||||||
|
|
||||||
Scenario: Watching a project for changes
|
Scenario: Watching a project for changes
|
||||||
Given ruby supports fork
|
Given ruby supports fork
|
||||||
|
@ -133,7 +133,6 @@ end
|
|||||||
|
|
||||||
Then "the following files are reported removed:" do |table|
|
Then "the following files are reported removed:" do |table|
|
||||||
table.rows.each do |css_file|
|
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}
|
Then %Q{a css file #{css_file.first} is reported removed}
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -6,8 +6,6 @@
|
|||||||
// * $font-files is required using font-files('relative/location', 'format').
|
// * $font-files is required using font-files('relative/location', 'format').
|
||||||
// for best results use this order: woff, opentype/truetype, svg
|
// for best results use this order: woff, opentype/truetype, svg
|
||||||
// * $eot is required by IE, and is a relative location of the eot file.
|
// * $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
|
// * For android 2.2 Compatiblity, please ensure that your web page has
|
||||||
// a meta viewport tag.
|
// a meta viewport tag.
|
||||||
// * To support iOS < 4.2, an SVG file must be provided
|
// * 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
|
// If you need to generate other formats check out the Font Squirrel
|
||||||
// [font generator](http://www.fontsquirrel.com/fontface/generator)
|
// [font generator](http://www.fontsquirrel.com/fontface/generator)
|
||||||
//
|
//
|
||||||
|
// Example:
|
||||||
// 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
|
// @include font-face("this name", font-files("this.woff", woff, "this.otf", opentype), "this.eot")
|
||||||
// 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.
|
|
||||||
|
|
||||||
@mixin font-face(
|
@mixin font-face(
|
||||||
$name,
|
$name,
|
||||||
$font-files,
|
$font-files,
|
||||||
$eot: false,
|
$eot: false
|
||||||
$weight: false,
|
|
||||||
$style: false
|
|
||||||
) {
|
) {
|
||||||
$iefont: unquote("#{$eot}?iefix");
|
$iefont: unquote("#{$eot}?iefix");
|
||||||
@font-face {
|
@font-face {
|
||||||
@ -38,26 +29,5 @@
|
|||||||
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
|
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
|
||||||
}
|
}
|
||||||
src: $font-files;
|
src: $font-files;
|
||||||
@if $weight {
|
|
||||||
font-weight: $weight;
|
|
||||||
}
|
|
||||||
@if $style {
|
|
||||||
font-style: $style;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// 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);
|
@include sprite-dimensions($map, $sprite);
|
||||||
}
|
}
|
||||||
@if not $disable-magic-sprite-selectors {
|
@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
|
// Include the selectors for the `$sprite` given the `$map` and the
|
||||||
// `$full-sprite-name`
|
// `$full-sprite-name`
|
||||||
// @private
|
// @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 {
|
@each $selector in $sprite-selectors {
|
||||||
@if sprite_has_selector($map, $sprite-name, $selector) {
|
@if sprite_has_selector($map, $sprite-name, $selector) {
|
||||||
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-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 a base class is provided, then each class will extend it.
|
||||||
//
|
//
|
||||||
// If `$dimensions` is `true`, the sprite dimensions will specified.
|
// 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 {
|
@each $sprite-name in $sprite-names {
|
||||||
@if sprite_does_not_have_parent($map, $sprite-name) {
|
@if sprite_does_not_have_parent($map, $sprite-name) {
|
||||||
$full-sprite-name: "#{$prefix}-#{$sprite-name}";
|
$full-sprite-name: "#{$prefix}-#{$sprite-name}";
|
||||||
.#{$full-sprite-name} {
|
.#{$full-sprite-name} {
|
||||||
@if $base-class { @extend #{$base-class}; }
|
@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
|
end
|
||||||
|
|
||||||
def remove(file_name)
|
def remove(file_name)
|
||||||
file_name ||= ''
|
|
||||||
if File.directory?(file_name)
|
if File.directory?(file_name)
|
||||||
FileUtils.rm_rf file_name
|
FileUtils.rm_rf file_name
|
||||||
log_action :remove, basename(file_name)+"/", options
|
log_action :remove, basename(file_name)+"/", options
|
||||||
|
@ -24,10 +24,8 @@ module Compass
|
|||||||
end
|
end
|
||||||
|
|
||||||
def configuration
|
def configuration
|
||||||
config = Compass::Configuration::Data.new('rails')
|
Compass::Configuration::Data.new('rails').
|
||||||
config.extend(ConfigurationDefaults)
|
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
|
|
||||||
end
|
end
|
||||||
|
|
||||||
def env
|
def env
|
||||||
@ -50,32 +48,17 @@ module Compass
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def check_for_double_boot!
|
def initialize!(config = nil)
|
||||||
if booted?
|
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
|
else
|
||||||
booted!
|
booted!
|
||||||
end
|
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)
|
config ||= Compass.detect_configuration_file(root)
|
||||||
Compass.add_project_configuration(config, :project_type => :rails)
|
Compass.add_project_configuration(config, :project_type => :rails)
|
||||||
Compass.discover_extensions!
|
Compass.discover_extensions!
|
||||||
Compass.configure_sass_plugin!
|
Compass.configure_sass_plugin!
|
||||||
Compass.handle_configuration_change! if sass_plugin_enabled? || rails_compilation_enabled?
|
Compass.handle_configuration_change!
|
||||||
end
|
end
|
||||||
end
|
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 Compass
|
||||||
module AppIntegration
|
module AppIntegration
|
||||||
module Rails
|
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
|
module ConfigurationDefaults
|
||||||
|
|
||||||
def project_type_without_default
|
def project_type_without_default
|
||||||
@ -54,8 +8,12 @@ module Compass
|
|||||||
end
|
end
|
||||||
|
|
||||||
def default_sass_dir
|
def default_sass_dir
|
||||||
|
if Sass::Util.ap_geq?('3.1.0.beta')
|
||||||
|
File.join("app", "assets", "stylesheets")
|
||||||
|
else
|
||||||
File.join("app", "stylesheets")
|
File.join("app", "stylesheets")
|
||||||
end
|
end
|
||||||
|
end
|
||||||
|
|
||||||
def default_css_dir
|
def default_css_dir
|
||||||
File.join("public", "stylesheets")
|
File.join("public", "stylesheets")
|
||||||
@ -70,25 +28,27 @@ module Compass
|
|||||||
end
|
end
|
||||||
|
|
||||||
def default_javascripts_dir
|
def default_javascripts_dir
|
||||||
|
if Sass::Util.ap_geq?('3.1.0.beta')
|
||||||
|
File.join("app", "assets", "javascripts")
|
||||||
|
else
|
||||||
File.join("public", "javascripts")
|
File.join("public", "javascripts")
|
||||||
end
|
end
|
||||||
|
end
|
||||||
|
|
||||||
def default_http_images_path
|
def default_http_images_path
|
||||||
# Relies on the fact that this will be loaded after the "normal"
|
"#{top_level.http_path}images"
|
||||||
# defaults, so that method_missing finds http_root_relative
|
|
||||||
http_root_relative "images"
|
|
||||||
end
|
end
|
||||||
|
|
||||||
def default_http_javascripts_path
|
def default_http_javascripts_path
|
||||||
http_root_relative "javascripts"
|
"#{top_level.http_path}javascripts"
|
||||||
end
|
end
|
||||||
|
|
||||||
def default_http_fonts_path
|
def default_http_fonts_path
|
||||||
http_root_relative "fonts"
|
"#{top_level.http_path}fonts"
|
||||||
end
|
end
|
||||||
|
|
||||||
def default_http_stylesheets_path
|
def default_http_stylesheets_path
|
||||||
http_root_relative "stylesheets"
|
"#{top_level.http_path}stylesheets"
|
||||||
end
|
end
|
||||||
|
|
||||||
def default_extensions_dir
|
def default_extensions_dir
|
||||||
|
@ -3,15 +3,25 @@ unless defined?(Compass::RAILS_LOADED)
|
|||||||
begin
|
begin
|
||||||
require 'action_pack/version'
|
require 'action_pack/version'
|
||||||
if ActionPack::VERSION::MAJOR >= 3
|
if ActionPack::VERSION::MAJOR >= 3
|
||||||
if ActionPack::VERSION::MINOR < 1
|
# TODO figure something out so image_path works with rails integration
|
||||||
require 'compass/app_integration/rails/actionpack30'
|
%w(railtie).each do |lib|
|
||||||
else
|
require "compass/app_integration/rails/actionpack3/#{lib}"
|
||||||
require 'compass/app_integration/rails/actionpack31'
|
|
||||||
end
|
end
|
||||||
else
|
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
|
end
|
||||||
|
rescue LoadError => e
|
||||||
|
$stderr.puts "Compass could not access the rails environment."
|
||||||
|
rescue NameError => e
|
||||||
$stderr.puts "Compass could not access the rails environment."
|
$stderr.puts "Compass could not access the rails environment."
|
||||||
end
|
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
|
end
|
||||||
|
@ -30,7 +30,7 @@ module Compass
|
|||||||
def perform
|
def perform
|
||||||
compiler = new_compiler_instance
|
compiler = new_compiler_instance
|
||||||
compiler.clean!
|
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
|
remove sprite
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -39,11 +39,10 @@ module Compass
|
|||||||
|
|
||||||
def perform
|
def perform
|
||||||
relative_uri = options[:uri].gsub(/^#{Compass.configuration.images_dir}\//, '')
|
relative_uri = options[:uri].gsub(/^#{Compass.configuration.images_dir}\//, '')
|
||||||
name = Compass::SpriteImporter.sprite_name(relative_uri)
|
sprites = Compass::SpriteImporter.new(:uri => relative_uri, :options => Compass.sass_engine_options)
|
||||||
sprites = Compass::SpriteImporter.new
|
options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{sprites.name}.#{Compass.configuration.preferred_syntax}")
|
||||||
options[:output_file] ||= File.join(Compass.configuration.sass_path, "sprites", "_#{name}.#{Compass.configuration.preferred_syntax}")
|
|
||||||
options[:skip_overrides] ||= false
|
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"
|
if options[:output_file][-4..-1] != "scss"
|
||||||
contents = Sass::Engine.new(contents, Compass.sass_engine_options.merge(:syntax => :scss)).to_tree.to_sass
|
contents = Sass::Engine.new(contents, Compass.sass_engine_options.merge(:syntax => :scss)).to_tree.to_sass
|
||||||
end
|
end
|
||||||
|
@ -138,7 +138,7 @@ module Compass
|
|||||||
end
|
end
|
||||||
duration = options[:time] ? "(#{(css_content.__duration * 1000).round / 1000.0}s)" : ""
|
duration = options[:time] ? "(#{(css_content.__duration * 1000).round / 1000.0}s)" : ""
|
||||||
write_file(css_filename, css_content, options.merge(:force => true, :extra => duration))
|
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
|
end
|
||||||
|
|
||||||
def should_compile?(sass_filename, css_filename)
|
def should_compile?(sass_filename, css_filename)
|
||||||
@ -159,7 +159,7 @@ module Compass
|
|||||||
formatted_error = "(Line #{e.sass_line}: #{e.message})"
|
formatted_error = "(Line #{e.sass_line}: #{e.message})"
|
||||||
file = basename(sass_filename)
|
file = basename(sass_filename)
|
||||||
logger.record :error, file, formatted_error
|
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)
|
write_file css_filename, error_contents(e, sass_filename), options.merge(:force => true)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -20,12 +20,10 @@ module Compass
|
|||||||
attributes_for_directory(:css, :stylesheets),
|
attributes_for_directory(:css, :stylesheets),
|
||||||
attributes_for_directory(:sass, nil),
|
attributes_for_directory(:sass, nil),
|
||||||
attributes_for_directory(:images),
|
attributes_for_directory(:images),
|
||||||
attributes_for_directory(:generated_images),
|
|
||||||
attributes_for_directory(:javascripts),
|
attributes_for_directory(:javascripts),
|
||||||
attributes_for_directory(:fonts),
|
attributes_for_directory(:fonts),
|
||||||
attributes_for_directory(:extensions, nil),
|
attributes_for_directory(:extensions, nil),
|
||||||
# Compilation options
|
# Compilation options
|
||||||
:sprite_load_path,
|
|
||||||
:output_style,
|
:output_style,
|
||||||
:environment,
|
:environment,
|
||||||
:relative_assets,
|
:relative_assets,
|
||||||
|
@ -4,11 +4,7 @@ module Compass
|
|||||||
module Comments
|
module Comments
|
||||||
|
|
||||||
def comment_for_http_path
|
def comment_for_http_path
|
||||||
unless top_level.http_path_without_default
|
"# Set this to the root of your project when deployed:\n"
|
||||||
"# Set this to the root of your project when deployed:\nhttp_path = #{top_level.http_path.to_s.inspect}\n"
|
|
||||||
else
|
|
||||||
""
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
||||||
def comment_for_relative_assets
|
def comment_for_relative_assets
|
||||||
|
@ -18,38 +18,12 @@ module Compass
|
|||||||
class Data
|
class Data
|
||||||
|
|
||||||
attr_reader :name
|
attr_reader :name
|
||||||
extend Sass::Callbacks
|
|
||||||
|
|
||||||
|
|
||||||
include Compass::Configuration::Inheritance
|
include Compass::Configuration::Inheritance
|
||||||
include Compass::Configuration::Serialization
|
include Compass::Configuration::Serialization
|
||||||
include Compass::Configuration::Adapters
|
include Compass::Configuration::Adapters
|
||||||
extend Compass::Configuration::Paths
|
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 *ATTRIBUTES
|
||||||
inherited_accessor :required_libraries, :loaded_frameworks, :framework_path #XXX we should make these arrays add up cumulatively.
|
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
|
relative_assets || http_images_path == :relative
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def run_callback(event, *args)
|
||||||
|
begin
|
||||||
|
send(:"run_#{event}", *args)
|
||||||
|
rescue NoMethodError => e
|
||||||
|
unless e.message =~ /run_#{event}/
|
||||||
|
raise
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
private
|
private
|
||||||
|
|
||||||
def assert_valid_keys!(attr_hash)
|
def assert_valid_keys!(attr_hash)
|
||||||
|
@ -10,7 +10,7 @@ module Compass
|
|||||||
:stand_alone
|
:stand_alone
|
||||||
end
|
end
|
||||||
|
|
||||||
def default_http_path
|
def http_path_without_default
|
||||||
"/"
|
"/"
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -60,14 +60,6 @@ module Compass
|
|||||||
end
|
end
|
||||||
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
|
def default_javascripts_path
|
||||||
if (pp = top_level.project_path) && (dir = top_level.javascripts_dir)
|
if (pp = top_level.project_path) && (dir = top_level.javascripts_dir)
|
||||||
Compass.projectize(dir, pp)
|
Compass.projectize(dir, pp)
|
||||||
@ -92,22 +84,11 @@ module Compass
|
|||||||
end
|
end
|
||||||
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
|
def default_http_images_dir
|
||||||
top_level.images_dir
|
top_level.images_dir
|
||||||
end
|
end
|
||||||
|
|
||||||
def default_sprite_load_path
|
|
||||||
[top_level.images_path]
|
|
||||||
end
|
|
||||||
|
|
||||||
def default_http_images_path
|
def default_http_images_path
|
||||||
http_root_relative top_level.http_images_dir
|
http_root_relative top_level.http_images_dir
|
||||||
end
|
end
|
||||||
@ -120,10 +101,6 @@ module Compass
|
|||||||
http_root_relative top_level.http_stylesheets_dir
|
http_root_relative top_level.http_stylesheets_dir
|
||||||
end
|
end
|
||||||
|
|
||||||
def default_http_generated_images_path
|
|
||||||
http_root_relative top_level.http_generated_images_dir
|
|
||||||
end
|
|
||||||
|
|
||||||
def default_http_fonts_dir
|
def default_http_fonts_dir
|
||||||
if fd = top_level.fonts_dir_without_default
|
if fd = top_level.fonts_dir_without_default
|
||||||
fd
|
fd
|
||||||
|
@ -1,6 +1,28 @@
|
|||||||
module Compass
|
module Compass
|
||||||
module Configuration
|
module Configuration
|
||||||
class FileData < Data
|
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)
|
def self.new_from_file(config_file, defaults = nil)
|
||||||
data = new(config_file)
|
data = new(config_file)
|
||||||
data.with_defaults(defaults) do
|
data.with_defaults(defaults) do
|
||||||
|
@ -68,22 +68,15 @@ module Compass
|
|||||||
end
|
end
|
||||||
unless @callbacks_loaded
|
unless @callbacks_loaded
|
||||||
Sass::Plugin.on_updating_stylesheet do |sass_file, css_file|
|
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
|
end
|
||||||
Sass::Plugin.on_compilation_error do |e, filename, css|
|
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
|
end
|
||||||
@callbacks_loaded = true
|
@callbacks_loaded = true
|
||||||
end
|
end
|
||||||
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
|
def sass_engine_options
|
||||||
configuration.to_sass_engine_options
|
configuration.to_sass_engine_options
|
||||||
end
|
end
|
||||||
|
@ -61,19 +61,6 @@ module Compass
|
|||||||
inherited_writer(*attributes)
|
inherited_writer(*attributes)
|
||||||
end
|
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
|
end
|
||||||
|
|
||||||
|
@ -27,7 +27,6 @@ module Compass
|
|||||||
if @added_import_paths
|
if @added_import_paths
|
||||||
self.additional_import_paths ||= []
|
self.additional_import_paths ||= []
|
||||||
self.additional_import_paths += @added_import_paths
|
self.additional_import_paths += @added_import_paths
|
||||||
self.additional_import_paths.uniq!
|
|
||||||
end
|
end
|
||||||
issue_deprecation_warnings
|
issue_deprecation_warnings
|
||||||
end
|
end
|
||||||
|
@ -1,39 +1,10 @@
|
|||||||
module Compass::SassExtensions::Functions::FontFiles
|
module Compass::SassExtensions::Functions::FontFiles
|
||||||
FONT_TYPES = {
|
|
||||||
:woff => 'woff',
|
|
||||||
:otf => 'opentype',
|
|
||||||
:opentype => 'opentype',
|
|
||||||
:ttf => 'truetype',
|
|
||||||
:truetype => 'truetype',
|
|
||||||
:svg => 'svg'
|
|
||||||
}
|
|
||||||
|
|
||||||
def font_files(*args)
|
def font_files(*args)
|
||||||
|
raise Sass::SyntaxError, "An even number of arguments must be passed to font_files()" unless args.size % 2 == 0
|
||||||
files = []
|
files = []
|
||||||
args_length = args.length
|
while args.size > 0
|
||||||
skip_next = false
|
files << "#{font_url(args.shift)} format('#{args.shift}')"
|
||||||
|
|
||||||
args.each_with_index do |arg, index|
|
|
||||||
if skip_next
|
|
||||||
skip_next = false
|
|
||||||
next
|
|
||||||
end
|
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
|
|
||||||
end
|
|
||||||
|
|
||||||
Sass::Script::String.new(files.join(", "))
|
Sass::Script::String.new(files.join(", "))
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -1,13 +1,15 @@
|
|||||||
module Compass::SassExtensions::Functions::ImageSize
|
module Compass::SassExtensions::Functions::ImageSize
|
||||||
# Returns the width of the image relative to the images directory
|
# Returns the width of the image relative to the images directory
|
||||||
def image_width(image_file)
|
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"])
|
Sass::Script::Number.new(width,["px"])
|
||||||
end
|
end
|
||||||
|
|
||||||
# Returns the height of the image relative to the images directory
|
# Returns the height of the image relative to the images directory
|
||||||
def image_height(image_file)
|
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"])
|
Sass::Script::Number.new(height, ["px"])
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -43,26 +45,13 @@ module Compass::SassExtensions::Functions::ImageSize
|
|||||||
end
|
end
|
||||||
|
|
||||||
private
|
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)
|
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.
|
# Compute the real path to the image on the file stystem if the images_dir is set.
|
||||||
if Compass.configuration.images_path
|
if Compass.configuration.images_path
|
||||||
File.join(Compass.configuration.images_path, image_file)
|
File.join(Compass.configuration.images_path, path)
|
||||||
else
|
else
|
||||||
File.join(Compass.configuration.project_path, image_file)
|
File.join(Compass.configuration.project_path, path)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ module Compass::SassExtensions::Functions::InlineImage
|
|||||||
while args.size > 0
|
while args.size > 0
|
||||||
path = args.shift.value
|
path = args.shift.value
|
||||||
real_path = File.join(Compass.configuration.fonts_path, path)
|
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}')"
|
files << "#{url} format('#{args.shift}')"
|
||||||
end
|
end
|
||||||
Sass::Script::String.new(files.join(", "))
|
Sass::Script::String.new(files.join(", "))
|
||||||
|
@ -61,7 +61,7 @@ module Compass::SassExtensions::Functions::Sprites
|
|||||||
verify_map(map, "sprite")
|
verify_map(map, "sprite")
|
||||||
verify_sprite(sprite)
|
verify_sprite(sprite)
|
||||||
if image = map.image_for(sprite.value)
|
if image = map.image_for(sprite.value)
|
||||||
Sass::Script::String.new(image.file)
|
Sass::Script::String.new(image.relative_file)
|
||||||
else
|
else
|
||||||
missing_image!(map, sprite)
|
missing_image!(map, sprite)
|
||||||
end
|
end
|
||||||
@ -96,7 +96,9 @@ module Compass::SassExtensions::Functions::Sprites
|
|||||||
def sprite_url(map)
|
def sprite_url(map)
|
||||||
verify_map(map, "sprite-url")
|
verify_map(map, "sprite-url")
|
||||||
map.generate
|
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
|
end
|
||||||
Sass::Script::Functions.declare :sprite_url, [:map]
|
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]
|
Sass::Script::Functions.declare :sprite_position, [:map, :sprite, :offset_x, :offset_y]
|
||||||
|
|
||||||
def sprite_image(*args)
|
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
|
end
|
||||||
|
|
||||||
protected
|
protected
|
||||||
|
@ -19,10 +19,9 @@ module Compass::SassExtensions::Functions::Trig
|
|||||||
private
|
private
|
||||||
def trig(operation, number)
|
def trig(operation, number)
|
||||||
if number.numerator_units == ["deg"] && number.denominator_units == []
|
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
|
else
|
||||||
Sass::Script::Number.new(Math.send(operation, number.value), number.numerator_units, number.denominator_units)
|
Sass::Script::Number.new(Math.send(operation, number.value), number.numerator_units, number.denominator_units)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
end
|
end
|
||||||
|
@ -1,24 +1,5 @@
|
|||||||
module Compass::SassExtensions::Functions::Urls
|
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
|
|
||||||
end
|
|
||||||
def stylesheet_url(path, only_path = Sass::Script::Bool.new(false))
|
def stylesheet_url(path, only_path = Sass::Script::Bool.new(false))
|
||||||
# Compute the path to the stylesheet, either root relative or stylesheet relative
|
# 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.
|
# or nil if the http_images_path is not set in the configuration.
|
||||||
@ -37,15 +18,9 @@ module Compass::SassExtensions::Functions::Urls
|
|||||||
clean_url(path)
|
clean_url(path)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
Sass::Script::Functions.declare :stylesheet_url, [:path]
|
||||||
|
Sass::Script::Functions.declare :stylesheet_url, [:path, :only_path]
|
||||||
|
|
||||||
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))
|
def font_url(path, only_path = Sass::Script::Bool.new(false))
|
||||||
path = path.value # get to the string value of the literal.
|
path = path.value # get to the string value of the literal.
|
||||||
|
|
||||||
@ -70,16 +45,9 @@ module Compass::SassExtensions::Functions::Urls
|
|||||||
clean_url(path)
|
clean_url(path)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
Sass::Script::Functions.declare :font_url, [:path]
|
||||||
|
Sass::Script::Functions.declare :font_url, [:path, :only_path]
|
||||||
|
|
||||||
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))
|
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.
|
path = path.value # get to the string value of the literal.
|
||||||
|
|
||||||
@ -136,68 +104,9 @@ module Compass::SassExtensions::Functions::Urls
|
|||||||
clean_url(path)
|
clean_url(path)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
Sass::Script::Functions.declare :image_url, [:path]
|
||||||
|
Sass::Script::Functions.declare :image_url, [:path, :only_path]
|
||||||
module GeneratedImageUrl
|
Sass::Script::Functions.declare :image_url, [:path, :only_path, :cache_buster]
|
||||||
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
|
|
||||||
|
|
||||||
clean_url(path)
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
private
|
private
|
||||||
|
|
||||||
|
@ -7,10 +7,8 @@ module Compass
|
|||||||
end
|
end
|
||||||
end
|
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/image'
|
||||||
require 'compass/sass_extensions/sprites/layout_methods'
|
|
||||||
require 'compass/sass_extensions/sprites/sprite_methods'
|
require 'compass/sass_extensions/sprites/sprite_methods'
|
||||||
require 'compass/sass_extensions/sprites/image_methods'
|
require 'compass/sass_extensions/sprites/image_methods'
|
||||||
require 'compass/sass_extensions/sprites/sprite_map'
|
require 'compass/sass_extensions/sprites/sprite_map'
|
||||||
|
@ -17,16 +17,7 @@ module Compass
|
|||||||
|
|
||||||
# The Full path to the image
|
# The Full path to the image
|
||||||
def file
|
def file
|
||||||
@file ||= find_file
|
File.join(Compass.configuration.images_path, relative_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
|
|
||||||
end
|
end
|
||||||
|
|
||||||
# Width of the image
|
# Width of the image
|
||||||
@ -34,10 +25,6 @@ module Compass
|
|||||||
dimensions.first
|
dimensions.first
|
||||||
end
|
end
|
||||||
|
|
||||||
def size
|
|
||||||
@size ||= File.size(file)
|
|
||||||
end
|
|
||||||
|
|
||||||
# Height of the image
|
# Height of the image
|
||||||
def height
|
def height
|
||||||
dimensions.last
|
dimensions.last
|
||||||
@ -48,28 +35,29 @@ module Compass
|
|||||||
File.basename(relative_file, '.png')
|
File.basename(relative_file, '.png')
|
||||||
end
|
end
|
||||||
|
|
||||||
def get_var_file(var)
|
|
||||||
options.get_var "#{base.name}_#{name}_#{var}"
|
|
||||||
end
|
|
||||||
|
|
||||||
# Value of <tt> $#{name}-repeat </tt> or <tt> $repeat </tt>
|
# Value of <tt> $#{name}-repeat </tt> or <tt> $repeat </tt>
|
||||||
def repeat
|
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
|
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
|
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
|
end
|
||||||
|
|
||||||
# Offset within the sprite
|
# Offset within the sprite
|
||||||
def offset
|
def offset
|
||||||
@offset ||= (position.unitless? || position.unit_str == "px") ? position.value : 0
|
(position.unitless? || position.unit_str == "px") ? position.value : 0
|
||||||
end
|
end
|
||||||
|
|
||||||
# Spacing between this image and the next
|
# Spacing between this image and the next
|
||||||
def spacing
|
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
|
end
|
||||||
|
|
||||||
# MD5 hash of this file
|
# 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 SpriteMethods
|
||||||
include ImageMethods
|
include ImageMethods
|
||||||
include LayoutMethods
|
|
||||||
|
|
||||||
|
|
||||||
# Initialize a new sprite object from a relative file path
|
# Initialize a new sprite object from a relative file path
|
||||||
# the path is relative to the <tt>images_path</tt> confguration option
|
# the path is relative to the <tt>images_path</tt> confguration option
|
||||||
def self.from_uri(uri, context, kwargs)
|
def self.from_uri(uri, context, kwargs)
|
||||||
uri = uri.value
|
importer = ::Compass::SpriteImporter.new(:uri => uri.value, :options => {})
|
||||||
path, name = Compass::SpriteImporter.path_and_name(uri)
|
sprites = importer.files.map do |sprite|
|
||||||
files = Compass::SpriteImporter.files(uri)
|
sprite.gsub(Compass.configuration.images_path+"/", "")
|
||||||
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
|
|
||||||
end
|
end
|
||||||
|
new(sprites, importer.path, importer.name, context, kwargs)
|
||||||
end
|
end
|
||||||
|
|
||||||
def initialize(sprites, path, name, context, kwargs)
|
def initialize(sprites, path, name, context, kwargs)
|
||||||
@ -38,7 +25,6 @@ module Compass
|
|||||||
@name = name
|
@name = name
|
||||||
@kwargs = kwargs
|
@kwargs = kwargs
|
||||||
@kwargs['cleanup'] ||= Sass::Script::Bool.new(true)
|
@kwargs['cleanup'] ||= Sass::Script::Bool.new(true)
|
||||||
@kwargs['layout'] ||= Sass::Script::String.new('vertical')
|
|
||||||
@images = nil
|
@images = nil
|
||||||
@width = nil
|
@width = nil
|
||||||
@height = nil
|
@height = nil
|
||||||
|
@ -14,6 +14,7 @@ module Compass
|
|||||||
@width = 0
|
@width = 0
|
||||||
init_images
|
init_images
|
||||||
compute_image_positions!
|
compute_image_positions!
|
||||||
|
@height = @images.last.top + @images.last.height
|
||||||
init_engine
|
init_engine
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -28,10 +29,22 @@ module Compass
|
|||||||
def init_images
|
def init_images
|
||||||
@images = image_names.collect do |relative_file|
|
@images = image_names.collect do |relative_file|
|
||||||
image = Compass::SassExtensions::Sprites::Image.new(self, relative_file, kwargs)
|
image = Compass::SassExtensions::Sprites::Image.new(self, relative_file, kwargs)
|
||||||
|
@width = [ @width, image.width + image.offset ].max
|
||||||
image
|
image
|
||||||
end
|
end
|
||||||
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
|
# Validates that the sprite_names are valid sass
|
||||||
def validate!
|
def validate!
|
||||||
for sprite_name in sprite_names
|
for sprite_name in sprite_names
|
||||||
@ -43,7 +56,7 @@ module Compass
|
|||||||
|
|
||||||
# The on-the-disk filename of the sprite
|
# The on-the-disk filename of the sprite
|
||||||
def filename
|
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
|
end
|
||||||
|
|
||||||
# Generate a sprite image if necessary
|
# Generate a sprite image if necessary
|
||||||
@ -53,7 +66,7 @@ module Compass
|
|||||||
cleanup_old_sprites
|
cleanup_old_sprites
|
||||||
end
|
end
|
||||||
engine.construct_sprite
|
engine.construct_sprite
|
||||||
Compass.configuration.run_sprite_generated(engine.canvas)
|
Compass.configuration.run_callback(:sprite_generated, engine.canvas)
|
||||||
save!
|
save!
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
@ -87,9 +100,8 @@ module Compass
|
|||||||
|
|
||||||
# Saves the sprite engine
|
# Saves the sprite engine
|
||||||
def save!
|
def save!
|
||||||
FileUtils.mkdir_p(File.dirname(filename))
|
|
||||||
saved = engine.save(filename)
|
saved = engine.save(filename)
|
||||||
Compass.configuration.run_sprite_saved(filename)
|
Compass.configuration.run_callback(:sprite_saved, filename)
|
||||||
saved
|
saved
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
module Compass
|
module Compass
|
||||||
class SpriteImporter < Sass::Importers::Base
|
class SpriteImporter < Sass::Importers::Base
|
||||||
|
attr_accessor :uri, :options
|
||||||
VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
|
VAILD_FILE_NAME = /\A#{Sass::SCSS::RX::IDENT}\Z/
|
||||||
SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png}
|
SPRITE_IMPORTER_REGEX = %r{((.+/)?([^\*.]+))/(.+?)\.png}
|
||||||
VALID_EXTENSIONS = ['.png']
|
VALID_EXTENSIONS = ['.png']
|
||||||
@ -7,19 +8,33 @@ module Compass
|
|||||||
# finds all sprite files
|
# finds all sprite files
|
||||||
def self.find_all_sprite_map_files(path)
|
def self.find_all_sprite_map_files(path)
|
||||||
hex = "[0-9a-f]"
|
hex = "[0-9a-f]"
|
||||||
glob = "*-s#{hex*10}{#{VALID_EXTENSIONS.join(",")}}"
|
glob = "*-{,s}#{hex*10}{#{VALID_EXTENSIONS.join(",")}}"
|
||||||
Dir.glob(File.join(path, "**", glob))
|
Dir.glob(File.join(path, "**", glob))
|
||||||
end
|
end
|
||||||
|
|
||||||
def find(uri, options)
|
def self.load(uri, options)
|
||||||
if uri =~ SPRITE_IMPORTER_REGEX
|
klass = Compass::SpriteImporter.new
|
||||||
return self.class.sass_engine(uri, self.class.sprite_name(uri), self, options)
|
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 sass_engine
|
||||||
end
|
end
|
||||||
nil
|
|
||||||
end
|
end
|
||||||
|
|
||||||
def find_relative(uri, base, options)
|
def find_relative(uri, base, options)
|
||||||
nil
|
@uri, @options = uri, options
|
||||||
|
find(File.join(base, uri), options)
|
||||||
end
|
end
|
||||||
|
|
||||||
def to_s
|
def to_s
|
||||||
@ -35,47 +50,45 @@ module Compass
|
|||||||
end
|
end
|
||||||
|
|
||||||
def mtime(uri, options)
|
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
|
(t = File.mtime(file)) > max_time ? t : max_time
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def key(uri, options={})
|
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
|
end
|
||||||
|
|
||||||
def self.path_and_name(uri)
|
def self.path_and_name(uri)
|
||||||
if uri =~ SPRITE_IMPORTER_REGEX
|
if uri =~ SPRITE_IMPORTER_REGEX
|
||||||
[$1, $3]
|
[$1, $3]
|
||||||
else
|
else
|
||||||
raise Compass::Error, "invalid sprite path"
|
raise Compass::Error "invalid sprite path"
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
# Name of this spite
|
# Name of this spite
|
||||||
def self.sprite_name(uri)
|
def name
|
||||||
_, name = path_and_name(uri)
|
ensure_path_and_name!
|
||||||
name
|
@name
|
||||||
end
|
end
|
||||||
|
|
||||||
# The on-disk location of this sprite
|
# The on-disk location of this sprite
|
||||||
def self.path(uri)
|
def path
|
||||||
path, _ = path_and_name(uri)
|
ensure_path_and_name!
|
||||||
path
|
@path
|
||||||
end
|
end
|
||||||
|
|
||||||
# Returns the Glob of image files for the uri
|
# Returns the Glob of image files for this sprite
|
||||||
def self.files(uri)
|
def files
|
||||||
Compass.configuration.sprite_load_path.each do |folder|
|
Dir[File.join(Compass.configuration.images_path, uri)].sort
|
||||||
files = Dir[File.join(folder, uri)].sort
|
|
||||||
next if files.empty?
|
|
||||||
return files
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
||||||
# Returns an Array of image names without the file extension
|
# Returns an Array of image names without the file extension
|
||||||
def self.sprite_names(uri)
|
def sprite_names
|
||||||
files(uri).collect do |file|
|
files.collect do |file|
|
||||||
filename = File.basename(file, '.png')
|
filename = File.basename(file, '.png')
|
||||||
unless VAILD_FILE_NAME =~ filename
|
unless VAILD_FILE_NAME =~ filename
|
||||||
raise Compass::Error, "Sprite file names must be legal css identifiers. Please rename #{File.basename(file)}"
|
raise Compass::Error, "Sprite file names must be legal css identifiers. Please rename #{File.basename(file)}"
|
||||||
@ -84,18 +97,31 @@ module Compass
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
# Returns the sass_options for this sprite
|
def validate_sprites!
|
||||||
def self.sass_options(uri, importer, options)
|
files.each do |file|
|
||||||
options.merge!(:filename => uri, :syntax => :scss, :importer => importer)
|
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
|
end
|
||||||
|
|
||||||
# Returns a Sass::Engine for this sprite object
|
# Returns a Sass::Engine for this sprite object
|
||||||
def self.sass_engine(uri, name, importer, options)
|
def sass_engine
|
||||||
Sass::Engine.new(content_for_images(uri, name, options[:skip_overrides]), sass_options(uri, importer, options))
|
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
|
end
|
||||||
|
|
||||||
# Generates the Sass for this sprite file
|
# 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
|
<<-SCSS
|
||||||
@import "compass/utilities/sprites/base";
|
@import "compass/utilities/sprites/base";
|
||||||
|
|
||||||
@ -108,9 +134,8 @@ $#{name}-spacing: 0 !default;
|
|||||||
$#{name}-repeat: no-repeat !default;
|
$#{name}-repeat: no-repeat !default;
|
||||||
$#{name}-prefix: '' !default;
|
$#{name}-prefix: '' !default;
|
||||||
$#{name}-clean-up: true !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
|
// All sprites should extend this class
|
||||||
// The #{name}-sprite mixin will do so for you.
|
// 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)
|
@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) {
|
@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, $offset-x, $offset-y)
|
@include sprites($#{name}-sprites, $sprite-names, $#{name}-sprite-base-class, $dimensions, $prefix)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generates a class for each sprited image.
|
// 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) {
|
@mixin all-#{name}-sprites($dimensions: $#{name}-sprite-dimensions, $prefix: sprite-map-name($#{name}-sprites)) {
|
||||||
@include #{name}-sprites(#{sprite_names(uri).join(" ")}, $dimensions, $prefix, $offset-x, $offset-y);
|
@include #{name}-sprites(#{sprite_names.join(" ")}, $dimensions, $prefix);
|
||||||
}
|
}
|
||||||
SCSS
|
SCSS
|
||||||
end
|
end
|
||||||
@ -151,13 +176,12 @@ SCSS
|
|||||||
# <tt>$#{name}-#{sprite_name}-position </tt>
|
# <tt>$#{name}-#{sprite_name}-position </tt>
|
||||||
# <tt> $#{name}-#{sprite_name}-spacing </tt>
|
# <tt> $#{name}-#{sprite_name}-spacing </tt>
|
||||||
# <tt> #{name}-#{sprite_name}-repeat: </tt>
|
# <tt> #{name}-#{sprite_name}-repeat: </tt>
|
||||||
def self.generate_overrides(uri, name)
|
def generate_overrides
|
||||||
sprites = sprite_names(uri)
|
|
||||||
content = <<-TXT
|
content = <<-TXT
|
||||||
// These variables control the generated sprite output
|
// These variables control the generated sprite output
|
||||||
// You can override them selectively before you import this file.
|
// You can override them selectively before you import this file.
|
||||||
TXT
|
TXT
|
||||||
sprites.map do |sprite_name|
|
sprite_names.map do |sprite_name|
|
||||||
content += <<-SCSS
|
content += <<-SCSS
|
||||||
$#{name}-#{sprite_name}-position: $#{name}-position !default;
|
$#{name}-#{sprite_name}-position: $#{name}-position !default;
|
||||||
$#{name}-#{sprite_name}-spacing: $#{name}-spacing !default;
|
$#{name}-#{sprite_name}-spacing: $#{name}-spacing !default;
|
||||||
@ -165,11 +189,11 @@ $#{name}-#{sprite_name}-repeat: $#{name}-repeat !default;
|
|||||||
SCSS
|
SCSS
|
||||||
end.join
|
end.join
|
||||||
|
|
||||||
content += "\n$#{name}-sprites: sprite-map(\"#{uri}\", \n$layout: $#{name}-layout, \n$cleanup: $#{name}-clean-up,\n"
|
content += "\n$#{name}-sprites: sprite-map(\"#{uri}\", \n$cleanup: $#{name}-clean-up,\n"
|
||||||
content += sprites.map do |sprite_name|
|
content += sprite_names.map do |sprite_name|
|
||||||
%Q{ $#{name}-#{sprite_name}-position: $#{name}-#{sprite_name}-position,
|
%Q{ $#{sprite_name}-position: $#{name}-#{sprite_name}-position,
|
||||||
$#{name}-#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
|
$#{sprite_name}-spacing: $#{name}-#{sprite_name}-spacing,
|
||||||
$#{name}-#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
|
$#{sprite_name}-repeat: $#{name}-#{sprite_name}-repeat}
|
||||||
end.join(",\n")
|
end.join(",\n")
|
||||||
content += ");"
|
content += ");"
|
||||||
end
|
end
|
||||||
|
1
test/fixtures/fonts/bgrove.base64.txt
vendored
BIN
test/fixtures/fonts/bgrove.ttf
vendored
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 2.8 KiB |
14
test/fixtures/stylesheets/compass/css/lists.css
vendored
@ -7,7 +7,7 @@ ul.horizontal {
|
|||||||
ul.horizontal li {
|
ul.horizontal li {
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: 0;
|
margin-left: 0px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: inline;
|
display: inline;
|
||||||
float: left;
|
float: left;
|
||||||
@ -29,7 +29,7 @@ ul.wide-horizontal {
|
|||||||
ul.wide-horizontal li {
|
ul.wide-horizontal li {
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: 0;
|
margin-left: 0px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: inline;
|
display: inline;
|
||||||
float: left;
|
float: left;
|
||||||
@ -51,7 +51,7 @@ ul.right-horizontal {
|
|||||||
ul.right-horizontal li {
|
ul.right-horizontal li {
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: 0;
|
margin-left: 0px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: inline;
|
display: inline;
|
||||||
float: right;
|
float: right;
|
||||||
@ -73,7 +73,7 @@ ul.no-padding {
|
|||||||
ul.no-padding li {
|
ul.no-padding li {
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: 0;
|
margin-left: 0px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: inline;
|
display: inline;
|
||||||
float: left; }
|
float: left; }
|
||||||
@ -87,7 +87,7 @@ ul.inline-block {
|
|||||||
ul.inline-block li {
|
ul.inline-block li {
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: 0;
|
margin-left: 0px;
|
||||||
display: -moz-inline-box;
|
display: -moz-inline-box;
|
||||||
-moz-box-orient: vertical;
|
-moz-box-orient: vertical;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -106,7 +106,7 @@ ul.wide-inline-block {
|
|||||||
ul.wide-inline-block li {
|
ul.wide-inline-block li {
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: 0;
|
margin-left: 0px;
|
||||||
display: -moz-inline-box;
|
display: -moz-inline-box;
|
||||||
-moz-box-orient: vertical;
|
-moz-box-orient: vertical;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -143,7 +143,7 @@ ul.no-bullets {
|
|||||||
ul.no-bullets li {
|
ul.no-bullets li {
|
||||||
list-style-image: none;
|
list-style-image: none;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin-left: 0; }
|
margin-left: 0px; }
|
||||||
|
|
||||||
ul.pretty {
|
ul.pretty {
|
||||||
margin-left: 0; }
|
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 {
|
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; }
|
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 {
|
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; }
|
display: block; }
|
||||||
|
|
||||||
|
1364
test/fixtures/stylesheets/compass/css/sprites.css
vendored
BIN
test/fixtures/stylesheets/compass/images/flag-s03c3b29b35.png
vendored
Normal file
After Width: | Height: | Size: 103 KiB |
Before Width: | Height: | Size: 75 KiB |
@ -125,10 +125,11 @@ private
|
|||||||
expected_lines.gsub!(/^@charset[^;]+;/,'') if options[:ignore_charset]
|
expected_lines.gsub!(/^@charset[^;]+;/,'') if options[:ignore_charset]
|
||||||
expected_lines = expected_lines.split("\n").reject{|l| l=~/\A\Z/}
|
expected_lines = expected_lines.split("\n").reject{|l| l=~/\A\Z/}
|
||||||
expected_lines.zip(actual_lines).each_with_index do |pair, line|
|
expected_lines.zip(actual_lines).each_with_index do |pair, line|
|
||||||
|
message = "template: #{name}\nline: #{line + 1}"
|
||||||
if pair.first == pair.last
|
if pair.first == pair.last
|
||||||
assert(true)
|
assert(true)
|
||||||
else
|
else
|
||||||
assert false, "Error in #{result_path(@current_project)}/#{name}.css:#{line + 1}\n"+diff_as_string(pair.first.inspect, pair.last.inspect)
|
assert false, diff_as_string(pair.first.inspect, pair.last.inspect)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
if expected_lines.size < actual_lines.size
|
if expected_lines.size < actual_lines.size
|
||||||
|