Merge branch 'master' into stable
Conflicts: Gemfile lib/compass/sass_extensions/functions.rb lib/compass/sass_extensions/functions/trig.rb test/units/sass_extensions_test.rb
This commit is contained in:
Chris Eppstein
commit
c8174b5679
@ -1,6 +1,7 @@
|
||||
rvm:
|
||||
- 1.8.7
|
||||
- 1.9.2
|
||||
- 1.9.3
|
||||
- jruby
|
||||
- rbx
|
||||
- ree
|
||||
|
||||
29
Gemfile
29
Gemfile
@ -2,28 +2,27 @@ source :rubygems
|
||||
|
||||
gemspec
|
||||
|
||||
gem "cucumber", "~> 0.9.2"
|
||||
gem "cucumber", "~> 1.1.4"
|
||||
gem "rspec", "~>2.0.0"
|
||||
gem "rails", "~>3.0.0.rc"
|
||||
gem "rails", "~> 3.1"
|
||||
gem "compass-validator", "3.0.1"
|
||||
gem "css_parser", "~> 1.0.1"
|
||||
gem "sass", "~>3.1"
|
||||
gem "sass", "~> 3.1"
|
||||
gem "haml", "~> 3.1"
|
||||
gem "rcov", :platform => :mri_18
|
||||
gem "rubyzip"
|
||||
gem "livereload"
|
||||
gem "ruby-prof", :platform => :mri_18
|
||||
|
||||
gem 'autotest'
|
||||
gem 'autotest-fsevent' if RUBY_PLATFORM =~ /darwin/
|
||||
gem 'fakefs', :git => 'git://github.com/johnbintz/fakefs.git'
|
||||
gem 'mocha'
|
||||
gem 'timecop'
|
||||
gem 'diff-lcs', '~> 1.1.2'
|
||||
gem 'rake', '~> 0.9.2'
|
||||
|
||||
gem 'rake', '0.8.7'
|
||||
# Warning becarful adding OS dependant gems above this line it will break the CI server please
|
||||
# place them below so they are excluded
|
||||
|
||||
group :mac do
|
||||
gem "rb-fsevent"
|
||||
unless ENV["CI"]
|
||||
gem 'rb-fsevent'
|
||||
gem 'growl_notify'
|
||||
gem "ruby-prof", :platform => :mri_18
|
||||
gem "rcov", :platform => :mri_18
|
||||
gem 'guard'
|
||||
gem 'guard-test'
|
||||
gem 'guard-cucumber'
|
||||
end
|
||||
|
||||
|
||||
16
Guardfile
Normal file
16
Guardfile
Normal file
@ -0,0 +1,16 @@
|
||||
group :tests do
|
||||
guard :test do
|
||||
watch(%r{^lib/(.+)\.rb$}) { |m| "test/#{m[1]}_test.rb" }
|
||||
watch(%r{^test/.+_test\.rb$})
|
||||
watch(%r{^test/units/.+_test\.rb$})
|
||||
watch('test/test_helper.rb') { "test" }
|
||||
end
|
||||
end
|
||||
|
||||
group :features do
|
||||
guard :cucumber do
|
||||
watch(%r{^features/.+\.feature$})
|
||||
watch(%r{^features/support/.+$}) { 'features' }
|
||||
watch(%r{^features/step_definitions/(.+)_steps\.rb$}) { |m| Dir[File.join("**/#{m[1]}.feature")][0] || 'features' }
|
||||
end
|
||||
end
|
||||
@ -1,4 +1,7 @@
|
||||
# Compass
|
||||
|
||||
Build Status: 
|
||||
|
||||
A [Sass][sass]-based CSS Meta-Framework that allows you to mix and match any of the following CSS frameworks:
|
||||
|
||||
- [Compass Core][compass_core_website] - [Wiki Documentation][compass_core_wiki]
|
||||
|
||||
11
Rakefile
11
Rakefile
@ -1,6 +1,7 @@
|
||||
require 'rubygems'
|
||||
require 'bundler'
|
||||
Bundler.setup
|
||||
require 'rake/dsl_definition' rescue nil
|
||||
require 'compass'
|
||||
|
||||
# ----- Default: Testing ------
|
||||
@ -29,6 +30,16 @@ To run with an alternate version of Rails, make test/rails a symlink to that ver
|
||||
To run with an alternate version of Haml & Sass, make test/haml a symlink to that version.
|
||||
END
|
||||
|
||||
Rake::TestTask.new :units do |t|
|
||||
t.libs << 'lib'
|
||||
t.libs << 'test'
|
||||
test_files = FileList['test/units/**/*_test.rb']
|
||||
test_files.exclude('test/rails/*', 'test/haml/*')
|
||||
t.test_files = test_files
|
||||
t.verbose = true
|
||||
end
|
||||
|
||||
|
||||
desc "Compile Examples into HTML and CSS"
|
||||
task :examples do
|
||||
linked_haml = "tests/haml"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
---
|
||||
:major: 0
|
||||
:minor: 11
|
||||
:patch: 7
|
||||
:name: Antares
|
||||
:minor: 12
|
||||
:state: rc
|
||||
:build: 1
|
||||
:name: Alnilam
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
Autotest.add_discovery { 'rspec2' }
|
||||
|
||||
|
||||
|
||||
|
||||
10
bin/compass
10
bin/compass
@ -21,6 +21,10 @@ fallback_load_path(File.join(File.dirname(__FILE__), '..', 'lib')) do
|
||||
require 'compass/exec'
|
||||
end
|
||||
|
||||
if defined?(Bundler)
|
||||
Bundler.require :assets
|
||||
end
|
||||
|
||||
runner = Proc.new do
|
||||
Compass::Exec::SubCommandUI.new(ARGV).run!
|
||||
end
|
||||
@ -36,9 +40,5 @@ if ARGV.delete("--profile")
|
||||
printer.print(STDERR, 0)
|
||||
exit exit_code
|
||||
else
|
||||
if exit_code = runner.call
|
||||
exit exit_code
|
||||
else
|
||||
exit 1
|
||||
end
|
||||
exit runner.call || 1
|
||||
end
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Require any additional compass plugins here.
|
||||
require 'susy'
|
||||
require 'css-slideshow'
|
||||
|
||||
require 'compass-theme'
|
||||
# Set this to the root of your project when deployed:
|
||||
http_path = "/"
|
||||
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
source :gemcutter
|
||||
|
||||
gem 'nanoc3'
|
||||
gem 'asdf'
|
||||
gem 'rdiscount'
|
||||
gem 'thor'
|
||||
gem 'rack'
|
||||
@ -8,12 +9,13 @@ gem 'mime-types'
|
||||
gem 'serve', "1.0.0"
|
||||
gem 'nokogiri'
|
||||
gem 'coderay'
|
||||
gem 'sass', ">= 3.1"
|
||||
gem 'haml', ">= 3.1"
|
||||
gem 'haml'
|
||||
gem 'rake'
|
||||
gem 'activesupport', '~> 3.0.10', :require => 'active_support/inflector'
|
||||
gem 'compass', :path => ".."
|
||||
gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
gem 'css-slideshow', "0.2.0"
|
||||
gem 'compass-theme', :path => '../../compass-theme' #:git => 'git://github.com/Compass/compass-theme.git'
|
||||
# gem 'compass-susy-plugin', ">=0.7.0.pre8"
|
||||
# gem 'css-slideshow', "0.2.0"
|
||||
gem 'json'
|
||||
gem 'css_parser', "1.0.1"
|
||||
gem 'ruby-prof'
|
||||
|
||||
@ -1,57 +1,68 @@
|
||||
PATH
|
||||
remote: ..
|
||||
specs:
|
||||
compass (0.11.5.38ccee8)
|
||||
compass (0.12.rc.0.c403ac9)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
|
||||
PATH
|
||||
remote: ../../compass-theme
|
||||
specs:
|
||||
compass-theme (0.0.2)
|
||||
compass (~> 0.11)
|
||||
compass-susy-plugin (~> 0.7.0)
|
||||
css-slideshow (= 0.2.0)
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
specs:
|
||||
activesupport (3.0.7)
|
||||
builder (2.1.2)
|
||||
activesupport (3.0.10)
|
||||
asdf (0.5.0)
|
||||
rack (~> 1.2.1)
|
||||
builder (3.0.0)
|
||||
chunky_png (1.2.5)
|
||||
coderay (0.9.7)
|
||||
compass-susy-plugin (0.9.beta.3)
|
||||
compass (>= 0.11.beta.3)
|
||||
compass-susy-plugin (0.7.0)
|
||||
compass (>= 0.10.0)
|
||||
cri (2.0.2)
|
||||
css-slideshow (0.2.0)
|
||||
compass (>= 0.10.0.rc3)
|
||||
css_parser (1.0.1)
|
||||
fssm (0.2.7)
|
||||
haml (3.1.0)
|
||||
fssm (0.2.8.1)
|
||||
haml (3.1.2)
|
||||
i18n (0.4.2)
|
||||
json (1.5.1)
|
||||
json (1.5.4)
|
||||
mime-types (1.16)
|
||||
nanoc3 (3.2.2)
|
||||
cri (~> 2.0)
|
||||
nokogiri (1.4.4)
|
||||
rack (1.2.2)
|
||||
rake (0.8.7)
|
||||
rake (0.9.2)
|
||||
rb-fsevent (0.4.0)
|
||||
rdiscount (1.6.8)
|
||||
ruby-prof (0.9.2)
|
||||
sass (3.1.0)
|
||||
ruby-prof (0.10.8)
|
||||
sass (3.1.12)
|
||||
serve (1.0.0)
|
||||
activesupport (~> 3.0.1)
|
||||
i18n (~> 0.4.1)
|
||||
rack (~> 1.2.1)
|
||||
tzinfo (~> 0.3.23)
|
||||
thor (0.14.6)
|
||||
tzinfo (0.3.26)
|
||||
tzinfo (0.3.29)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
activesupport (~> 3.0.10)
|
||||
asdf
|
||||
builder
|
||||
coderay
|
||||
compass!
|
||||
compass-susy-plugin (>= 0.7.0.pre8)
|
||||
css-slideshow (= 0.2.0)
|
||||
compass-theme!
|
||||
css_parser (= 1.0.1)
|
||||
haml (>= 3.1)
|
||||
haml
|
||||
json
|
||||
mime-types
|
||||
nanoc3
|
||||
@ -61,6 +72,5 @@ DEPENDENCIES
|
||||
rb-fsevent
|
||||
rdiscount
|
||||
ruby-prof
|
||||
sass (>= 3.1)
|
||||
serve (= 1.0.0)
|
||||
thor
|
||||
|
||||
@ -63,6 +63,7 @@ end
|
||||
|
||||
compile '*' do
|
||||
if item[:extension] == "markdown"
|
||||
filter :erb
|
||||
filter :rdiscount
|
||||
elsif item[:extension] == "haml"
|
||||
filter :haml, :ugly => true
|
||||
|
||||
BIN
doc-src/assets/images/tutorials/sprites/layout/diagonal.png
Normal file
BIN
doc-src/assets/images/tutorials/sprites/layout/diagonal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
doc-src/assets/images/tutorials/sprites/layout/horizontal.png
Normal file
BIN
doc-src/assets/images/tutorials/sprites/layout/horizontal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
doc-src/assets/images/tutorials/sprites/layout/smart.png
Normal file
BIN
doc-src/assets/images/tutorials/sprites/layout/smart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
doc-src/assets/images/tutorials/sprites/layout/vert.png
Normal file
BIN
doc-src/assets/images/tutorials/sprites/layout/vert.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@ -4,15 +4,38 @@ function showInstallCommand() {
|
||||
var notes = [];
|
||||
var project_name = "<myproject>";
|
||||
var can_be_bare = true;
|
||||
commands.push("$ gem install compass");
|
||||
var in_working_dir = false;
|
||||
var use_bundler = false;
|
||||
if ($("#app-type").val() != "rails") {
|
||||
commands.push("$ gem install compass");
|
||||
}
|
||||
if (cmd == "init") {
|
||||
commands.push("$ cd " + project_name);
|
||||
in_working_dir = true
|
||||
project_name = ".";
|
||||
$(".creating").hide();
|
||||
} else {
|
||||
$(".creating").show();
|
||||
if ($("#project_name").val() != "")
|
||||
project_name = $("#project_name").val();
|
||||
}
|
||||
if ($("#app-type").val() == "rails") {
|
||||
notes.push("<p class='note warning'>Rails 2.3 and 3.0 users require additional installation steps. For full rails installation and upgrade instructions please refer to the compass-rails <a href='https://github.com/Compass/compass-rails/blob/master/README.md'>README</a>.</p>");
|
||||
use_bundler = true;
|
||||
}
|
||||
if ($("#app-type").val() == "rails") {
|
||||
if (cmd == "create") {
|
||||
commands.push("$ rails new " + project_name);
|
||||
commands.push("$ cd " + project_name);
|
||||
in_working_dir = true
|
||||
project_name = ".";
|
||||
}
|
||||
commands.push("> Edit Gemfile and add this:");
|
||||
commands.push(" group :assets do");
|
||||
commands.push(" gem 'compass-rails'");
|
||||
commands.push(" # Add any compass extensions here");
|
||||
commands.push(" end");
|
||||
commands.push("$ bundle");
|
||||
cmd = "init rails";
|
||||
can_be_bare = false;
|
||||
} else if ($("#app-type").val() == "other") {
|
||||
@ -28,9 +51,12 @@ function showInstallCommand() {
|
||||
var framework = $("#framework").val();
|
||||
var create_command;
|
||||
if (cmd == "install") {
|
||||
create_command = "$ compass install " + framework + " " + project_name;
|
||||
create_command = "$ compass install " + framework;
|
||||
} else {
|
||||
create_command = "$ compass " + cmd + " " + project_name;
|
||||
create_command = "$ compass " + cmd;
|
||||
}
|
||||
if (!in_working_dir) {
|
||||
create_command = create_command + " " + project_name;
|
||||
}
|
||||
if (framework != "compass" && framework != "bare" && cmd != "install") {
|
||||
create_command = create_command + " --using " + framework;
|
||||
@ -46,14 +72,20 @@ function showInstallCommand() {
|
||||
}
|
||||
if ($("#options").val() == "customized") {
|
||||
$("#directories").show();
|
||||
create_command = create_command +
|
||||
" --sass-dir \"" + $("#sassdir").val() + "\"" +
|
||||
" --css-dir \"" + $("#cssdir").val() + "\"" +
|
||||
" --javascripts-dir \"" + $("#jsdir").val() + "\"" +
|
||||
" --images-dir \"" + $("#imagesdir").val() + "\"";
|
||||
if ($("#sassdir").val() != "")
|
||||
create_command += " --sass-dir \"" + $("#sassdir").val() + "\"";
|
||||
if ($("#cssdir").val() != "")
|
||||
create_command += " --css-dir \"" + $("#cssdir").val() + "\"";
|
||||
if ($("#jsdir").val() != "")
|
||||
create_command += " --javascripts-dir \"" + $("#jsdir").val() + "\"";
|
||||
if ($("#imagesdir").val() != "")
|
||||
create_command += " --images-dir \"" + $("#imagesdir").val() + "\"";
|
||||
} else {
|
||||
$("#directories").hide();
|
||||
}
|
||||
if (use_bundler) {
|
||||
create_command = "$ bundle exec " + create_command.replace(/\$ /,'');
|
||||
}
|
||||
commands.push(create_command);
|
||||
var instructions = "<pre><code>" + commands.join("\n") + "</code></pre>";
|
||||
if (instructions.match(/</)) {
|
||||
|
||||
@ -14,6 +14,92 @@ The Documentation for the [latest stable release](http://compass-style.org/docs/
|
||||
|
||||
The Documentation for the [latest preview release](http://beta.compass-style.org/)
|
||||
|
||||
0.12.rc.2 (03/11/2012)
|
||||
----------------------
|
||||
|
||||
### Stylesheet Changes
|
||||
|
||||
* Improved [hide-text mixin](/reference/compass/typography/text/replacement/#mixin-hide-text) for better performance and accessibility.
|
||||
* Added [squish-text mixin](/reference/compass/typography/text/replacement/#mixin-squish-text) to hide text on inline elements.
|
||||
* Compass css3 transitions module now correctly handled transitioning of
|
||||
prefixed properties.
|
||||
|
||||
### Misc Changes
|
||||
* Fix the mime-type of embedded `woff` font files. Add support for Embedded OpenType fonts.
|
||||
* New math functions are now available: `e()`, `log($number[, $base = e()])`, `sqrt($number)`
|
||||
and `pow($number, $exponent)`
|
||||
|
||||
|
||||
0.12.rc.1 (02/02/2012)
|
||||
----------------------
|
||||
|
||||
Give warnings for users who upgrade without knowing about the compass-rails gem.
|
||||
|
||||
0.12.rc.0 (01/31/2012)
|
||||
----------------------
|
||||
|
||||
### Stylesheet Changes
|
||||
|
||||
* Removed -ms prefix from box-sizing
|
||||
* Added sprite_names sass function
|
||||
* Added -ms prefix to transitions
|
||||
|
||||
### Command Line
|
||||
|
||||
* Added support for `--debug-info` and `--no-debug-info` to the compass compile command
|
||||
|
||||
### Rails Integration
|
||||
|
||||
Rails projects must now use the [`compass-rails`](https://github.com/compass/compass-rails)
|
||||
gem to integrate with compass. Please read the [README](https://github.com/Compass/compass-rails/blob/master/README.md) for upgrade instructions. More information in this [blog post](/blog/2012/01/29/compass-and-rails-integration/).
|
||||
|
||||
0.12.alpha.3 (12/23/2011)
|
||||
-------------------------
|
||||
|
||||
* The `$round-to-nearest-half-line` config variable was added. When
|
||||
true, the vertical rhythm module will round line heights to the
|
||||
nearest half-line to avoid awkwardly large gaps between lines of text.
|
||||
Defaults to false.
|
||||
* Added `reset-baseline` to the vertical rhythm module so you can force the baseline to reset.
|
||||
* Merges in the stable changes between 0.11.5 and 0.11.6.
|
||||
|
||||
0.12.alpha.2 (11/28/2011)
|
||||
-------------------------
|
||||
|
||||
* Bug fixes for Rails 2.x applications.
|
||||
|
||||
0.12.alpha.1 (11/14/2011)
|
||||
-------------------------
|
||||
|
||||
* 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
|
||||
* log sprite generation and removal to the console
|
||||
* Added a new helper function `compass-env()` that returns the current compass environment (development, production)
|
||||
* Added the ability to inline a sprite image by setting `$<map>-inline:true` before you call `@import`
|
||||
* Removed `-khtml` prefixes by default you can still enable them by setting `$experimental-support-for-khtml:true;`
|
||||
* Improved rails 3.1 integration
|
||||
* `true` and `false` are now valid sprite names
|
||||
* Removed deprecated forms of the box-shadow, text-shadow, and transform
|
||||
mixins.
|
||||
|
||||
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_load_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.8 (02/26/2012)
|
||||
-------------------
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ crumb: Plugins and frameworks
|
||||
%a
|
||||
http://compass-style.org
|
||||
%td
|
||||
You are currently vising the Compass docs.
|
||||
You are currently viewing the Compass docs.
|
||||
%tr
|
||||
%td Blueprint
|
||||
%td 0.8.0
|
||||
|
||||
@ -19,7 +19,7 @@ layout: default
|
||||
|
||||
1. [**Contribute to Compass**](/help/tutorials/contributing).
|
||||
2. [**Develop a Compass Extension**](/help/tutorials/extensions).
|
||||
3. [**Contribute to Sass Recipies**](http://chriseppstein.github.com/sass-recipes/).
|
||||
3. [**Contribute to Sass Recipes**](http://chriseppstein.github.com/sass-recipes/).
|
||||
4. Publish your code somewhere and email a link to the [mailing list](http://groups.google.com/group/compass-users).
|
||||
|
||||
## Help Others
|
||||
|
||||
@ -143,7 +143,7 @@ later on.
|
||||
<td style="vertical-align:top;"><code>sass_dir</code> </td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
<td style="vertical-align:top;">The directory where the sass stylesheets are kept.
|
||||
It is relative to the <code>project_path</code>. Defaults to <code>"src"</code>.
|
||||
It is relative to the <code>project_path</code>. Defaults to <code>"sass"</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -170,11 +170,33 @@ later on.
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>http_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The full http path to images on the web server.
|
||||
Defaults to <code>http_path + "/" + images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>generated_images_dir</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The directory where generated images are kept.
|
||||
It is relative to the <code>project_path</code>.
|
||||
Defaults to the value of <code>images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>generated_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The full path to where generated images are kept.
|
||||
Defaults to the value of <code><project_path>/<generated_images_dir></code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>http_generated_images_path</code> </td>
|
||||
<td style="vertical-align:top;">String</td>
|
||||
<td style="vertical-align:top;">The full http path to generated images on
|
||||
the web server. Defaults to <code>http_path + "/" + generated_images_dir</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>javascripts_dir</code> </td>
|
||||
<td style="vertical-align:top;">String </td>
|
||||
@ -287,6 +309,13 @@ later on.
|
||||
Defaults to <code>{:compression => Zlib::BEST_COMPRESSION}</code>. See the chunky_png <a href='https://github.com/wvanbergen/chunky_png/wiki/Constraints' _target='blank'>wiki</a> for more information
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="vertical-align:top;"><code>sprite_load_path</code></td>
|
||||
<td style="vertical-align:top;">Array </td>
|
||||
<td style="vertical-align:top;">
|
||||
Defaults to <code> [images_path] </code>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<a name="configuration-functions"></a>
|
||||
|
||||
@ -10,10 +10,10 @@ Contributing Stylesheets to Compass
|
||||
|
||||
Thank you for your interest in contributing to Compass. Our goal is to make it as easy
|
||||
as we can for you to contribute changes to compass -- So if there's something here that
|
||||
seems harder than it aught to be, please let us know.
|
||||
seems harder than it ought to be, please let us know.
|
||||
|
||||
If you find a bug **in this document**, you are bound to contribute a fix. Stop reading now
|
||||
if you do not wish to abide by this rool.
|
||||
if you do not wish to abide by this rule.
|
||||
|
||||
**Step 1**: If you do not have a github account, create one.
|
||||
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: Removing Vendor Prefixes from Compass Stylesheets
|
||||
layout: tutorial
|
||||
crumb: Removing Vendor Prefixes from Compass
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
# Removing Vendor Prefixes from Compass Stylesheets
|
||||
|
||||
Compass makes it easy to code many of the CSS3 vendor prefixed properties, without having to type it all out by hand.
|
||||
|
||||
## Easy Vendor Prefixes
|
||||
|
||||
Let's say you wanted to add a border radius to an element like this:
|
||||
|
||||
.round {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
With Compass it's easier to use the `border-radius` mixin:
|
||||
|
||||
.round {
|
||||
@include border-radius(4px);
|
||||
}
|
||||
|
||||
That mixin will create all of the vendor prefixed CSS properties you need, with much less of a chance of a typo or inconsistent display. It will also take care of any browser specific implementations of the CSS property that don't match up to the W3C specification.
|
||||
|
||||
.round {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-khtml-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
## Problem
|
||||
|
||||
The problem with that solution, as good as it is, is that all of those browser prefixes will cruft up your stylesheet quickly if you use a lot of them, and/or aren't using `@extend` to keep them to a minimum.
|
||||
|
||||
Of particular note are the generated Opera `(-o-border-radius)` and Konquerer `(-khtml-border-radius)` properties, which are added to create support for those browsers. As great as those browsers may be, they often account for a very small minority of a website's traffic, traffic that may not compensate for the full weight of their support when using experimental CSS3 properties.
|
||||
|
||||
## Solution
|
||||
|
||||
Thankfully, Compass includes a selection of default boolean variables that you can override, allowing you to globally turn off the support for the various vendor prefixes:
|
||||
|
||||
$experimental-support-for-mozilla : true !default;
|
||||
$experimental-support-for-webkit : true !default;
|
||||
$support-for-original-webkit-gradients : true !default;
|
||||
$experimental-support-for-opera : true !default;
|
||||
$experimental-support-for-microsoft : true !default;
|
||||
$experimental-support-for-khtml : true !default;
|
||||
|
||||
If you set any of the above variables to `false`, Compass will skip those prefixes when it processes your stylesheet.
|
||||
|
||||
So to exclude Opera and Konquerer vendor prefixes from your CSS, add the following code just above your include of the CSS3 module in your base SCSS file:
|
||||
|
||||
$experimental-support-for-opera:false;
|
||||
$experimental-support-for-khtml:false;
|
||||
@import "compass/css3";
|
||||
|
||||
The resultant output will be as follow:
|
||||
|
||||
.round {
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@ -125,7 +125,7 @@ should attempt to adhere to unless there's a good reason not to do so.
|
||||
pieces for faster load times when they're not using everything.
|
||||
3. Use partials (files starting with an underscore) for stylesheets that are meant
|
||||
to be imported. If you do not Sass will generate css
|
||||
files for your libaries in some configurations.
|
||||
files for your libraries in some configurations.
|
||||
4. Provide a project template. If you do not, your project should only be
|
||||
providing widgets or page designs, etc.
|
||||
|
||||
@ -174,10 +174,13 @@ You may also see some real manifest files here:
|
||||
|
||||
### Manifest Declarations
|
||||
|
||||
|
||||
**Easy Mode:** If you just have some basic files and nothing fancy going on, simply place this line in your manifest:
|
||||
|
||||
discover :all
|
||||
|
||||
If the file is missing `discover :all` is the default
|
||||
|
||||
This will cause compass to find all the files in your template and use the files' extension to determine where they should go. Alternatively, you can request that compass only discover files of a certain type. For example, the following will only discover javascript and image assets, you could then declare other file types on your own.
|
||||
|
||||
discover :javascripts
|
||||
|
||||
@ -9,6 +9,13 @@ classnames:
|
||||
|
||||
## Ruby on Rails
|
||||
|
||||
### Rails 3.1
|
||||
Just add compass to your Gemfile like so:
|
||||
|
||||
gem 'compass'
|
||||
|
||||
Also checkout this [gist](https://gist.github.com/1184843)
|
||||
|
||||
### Rails 3
|
||||
compass init rails /path/to/myrailsproject
|
||||
### Rails 2.3
|
||||
@ -16,26 +23,26 @@ classnames:
|
||||
|
||||
## Sinatra
|
||||
|
||||
require 'compass'
|
||||
require 'sinatra'
|
||||
require 'haml'
|
||||
require 'sass'
|
||||
require 'compass'
|
||||
|
||||
configure do
|
||||
Compass.configuration do |config|
|
||||
config.project_path = File.dirname(__FILE__)
|
||||
config.sass_dir = 'views'
|
||||
end
|
||||
|
||||
set :haml, { :format => :html5 }
|
||||
set :sass, Compass.sass_engine_options
|
||||
set :haml, {:format => :html5, :escape_html => true}
|
||||
set :scss, {:style => :compact, :debug_info => false}
|
||||
Compass.add_project_configuration(File.join(Sinatra::Application.root, 'config', 'compass.rb'))
|
||||
end
|
||||
|
||||
get '/screen.css' do
|
||||
get '/stylesheets/:name.css' do
|
||||
content_type 'text/css', :charset => 'utf-8'
|
||||
sass :screen
|
||||
scss(:"stylesheets/#{params[:name]}" )
|
||||
end
|
||||
|
||||
get '/' do
|
||||
haml :index
|
||||
end
|
||||
|
||||
|
||||
If you keep your stylesheets in “views/stylesheets/” directory instead of just “views/”, remember to update sass_dir configuration accordingly.
|
||||
Check out this [sample compass-sinatra project](http://github.com/chriseppstein/compass-sinatra) to get up and running in no time!
|
||||
|
||||
@ -55,29 +62,31 @@ At the top of the Nanoc Rules file, load the Compass configuration, like this:
|
||||
|
||||
require 'compass'
|
||||
|
||||
Compass.add_project_configuration 'compass/config.rb' # when using Compass 0.10
|
||||
Compass.configuration.parse 'compass/config.rb' # when using Compass < 0.10
|
||||
Compass.add_project_configuration 'compass.rb' # when using Compass > 0.10
|
||||
Compass.configuration.parse 'compass.rb' # when using Compass < 0.10
|
||||
|
||||
Your Compass configuration file (in compass/config.rb) could look like this (you may need to change the path to some directories depending on your directory structure):
|
||||
|
||||
http_path = "/"
|
||||
project_path = "."
|
||||
css_dir = "output/assets/style"
|
||||
sass_dir = "content/assets/style"
|
||||
images_dir = "output/assets/images"
|
||||
|
||||
# when using SCSS:
|
||||
sass_options = {
|
||||
:syntax => :scss
|
||||
}
|
||||
http_path = "/"
|
||||
project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
|
||||
css_dir = "output/stylesheets"
|
||||
sass_dir = "content/stylesheets"
|
||||
images_dir = "assets/images"
|
||||
javascripts_dir = "assets/javascripts"
|
||||
fonts_dir = "assets/fonts"
|
||||
http_javascripts_dir = "javascripts"
|
||||
http_stylesheets_dir = "stylesheets"
|
||||
http_images_dir = "images"
|
||||
http_fonts_dir = "fonts"
|
||||
|
||||
|
||||
To filter the stylesheets using Sass and Compass, call the sass filter with Sass engine options taken from Compass, like this:
|
||||
|
||||
filter :sass, Compass.sass_engine_options
|
||||
compile '/stylesheets/*' do
|
||||
filter :sass, sass_options.merge(:syntax => item[:extension].to_sym)
|
||||
end
|
||||
|
||||
|
||||
### Nanoc Projects using the formal approach
|
||||
|
||||
* [nanoc Bootstrap](http://github.com/adamstac/nanoc-bootstrap) - a base nanoc project with support for Haml, Sass, Compass, jQuery and more.
|
||||
* [nanoc & Compass Example Project](http://github.com/ddfreyne/nanoc-bootstrap-compass)
|
||||
* [This Site](https://github.com/chriseppstein/compass/tree/master/doc-src)
|
||||
|
||||
@ -5,12 +5,16 @@ crumb: Spriting
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
# Spriting with Compass
|
||||
|
||||
Spriting has never been easier with Compass. You place the sprite images in a folder,
|
||||
import them into your stylesheet, and then you can use the sprite in your selectors in one
|
||||
of several convenient ways.
|
||||
|
||||
## Sprite Tutorial Contents
|
||||
<%= sprite_tutorial_links(true) %>
|
||||
|
||||
## Setup
|
||||
|
||||
For this tutorial, let's imagine that in your project's image folder there are four icons:
|
||||
@ -21,8 +25,11 @@ For this tutorial, let's imagine that in your project's image folder there are f
|
||||
* `images/icon/delete.png`
|
||||
|
||||
Each is an icon that is 32px square.
|
||||
|
||||
<a name="basic-usage"></a>
|
||||
## Basic Usage
|
||||
|
||||
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
|
||||
|
||||
The simplest way to use these icon sprites is to let compass give you a class for each sprite:
|
||||
|
||||
@import "icon/*.png";
|
||||
@ -47,14 +54,28 @@ Let's go over what happened there. The import statement told compass to [generat
|
||||
stylesheet that is customized for your sprites](https://gist.github.com/729507). This
|
||||
stylesheet is [magic](#magic-imports), it is not written to disk, and it can be customized
|
||||
by setting configuration variables before you import it. See the section below on
|
||||
[Customization Options](#customization-options). The goal of this stylesheet is to provide a
|
||||
[Customization Options](customization-options). The goal of this stylesheet is to provide a
|
||||
simple naming convention for your sprites so that you they are easy to remember and use. You
|
||||
should never have to care what the is name of the generated sprite map, nor where a sprite
|
||||
is located within it.
|
||||
|
||||
<a name="selector-control"></a>
|
||||
<a name='nested-folders' id='nested-folders'></a>
|
||||
## Nested Folders
|
||||
|
||||
****Note**: The use of `orange` is only for this example, "icon" represents the folder name that contains your sprites.
|
||||
|
||||
Sprites stored in a nested folder will use the last folder name in the path as the sprite name.
|
||||
|
||||
Example:
|
||||
|
||||
@import "themes/orange/*.png";
|
||||
@include all-orange-sprite;
|
||||
|
||||
<a name="selector-control" id="selector-control"></a>
|
||||
## Selector Control
|
||||
|
||||
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
|
||||
|
||||
If you want control over what selectors are generated, it is easy to do. In this example,
|
||||
this is done by using the magic `icon-sprite` mixin. Note that the mixin's name is dependent
|
||||
on the name of the folder in which you've placed your icons.
|
||||
@ -81,9 +102,35 @@ And your stylesheet will compile to:
|
||||
.actions .save { background-position: 0 -96px; }
|
||||
.actions .delete { background-position: 0 0; }
|
||||
|
||||
<a name="magic-imports"></a>
|
||||
<a name="sass_functions" id="sass_functions"></a>
|
||||
## Sass Functions
|
||||
|
||||
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
|
||||
|
||||
Getting the image dimensions of a sprite
|
||||
|
||||
You can get a unit value by using the magical dimension functions `<map>-sprite-height` and `<map>-sprite-width`
|
||||
If you are looking to just return the dimensions see the [docs](/reference/compass/utilities/sprites/base/#mixin-sprite-dimensions)
|
||||
|
||||
Example:
|
||||
|
||||
|
||||
@import "icon/*.png";
|
||||
$box-padding: 5px;
|
||||
$height: icon-sprite-height(some_icon);
|
||||
$width: icon-sprite-width(some_icon);
|
||||
|
||||
.somediv {
|
||||
height:$height + $box-padding;
|
||||
width:$width + $box-padding;
|
||||
}
|
||||
|
||||
|
||||
<a name="magic-imports" id="magic-imports"></a>
|
||||
## Magic Imports
|
||||
|
||||
****Note**: The use of `icon` is only for this example, "icon" represents the folder name that contains your sprites.
|
||||
|
||||
As noted above, compass will magically create sprite stylesheets for you. Some people like
|
||||
magic, some people are scared by it, and others are curious about how the magic works. If
|
||||
you would like to avoid the magic, you can use compass to generate an import for you. On the
|
||||
@ -101,103 +148,7 @@ might want to avoid it. For instance, if your sprite map has more than about 20
|
||||
sprites, you may find that hand crafting the import will speed up compilation times. See
|
||||
the section on [performance considerations](#performance) for more details.
|
||||
|
||||
<a name="magic-selectors"></a>
|
||||
## Magic Selectors
|
||||
|
||||
If you want to add selectors for your sprites, it's easy todo by adding `_active` `_target` or `_hover` to the file name, In the example below we have a sprite directory that looks like:
|
||||
|
||||
* `selectors/ten-by-ten.png`
|
||||
* `selectors/ten-by-ten_hover.png`
|
||||
* `selectors/ten-by-ten_active.png`
|
||||
* `selectors/ten-by-ten_target.png`
|
||||
|
||||
Now in our sass file we add:
|
||||
|
||||
@import "selectors/*.png";
|
||||
|
||||
a {
|
||||
@include selectors-sprite(ten-by-ten)
|
||||
}
|
||||
|
||||
And your stylesheet will compile to:
|
||||
|
||||
.selectors-sprite, a {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
a {
|
||||
background-position: 0 0;
|
||||
}
|
||||
a:hover, a.ten-by-ten_hover, a.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
a:target, a.ten-by-ten_target, a.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
a:active, a.ten-by-ten_active, a.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
Alternatively you can use the `@include all-selectors-sprites;` after the import and get the following output:
|
||||
|
||||
.selectors-sprite, .selectors-ten-by-ten {
|
||||
background: url('/selectors-sedfef809e2.png') no-repeat;
|
||||
}
|
||||
|
||||
.selectors-ten-by-ten {
|
||||
background-position: 0 0;
|
||||
}
|
||||
.selectors-ten-by-ten:hover, .selectors-ten-by-ten.ten-by-ten_hover, .selectors-ten-by-ten.ten-by-ten-hover {
|
||||
background-position: 0 -20px;
|
||||
}
|
||||
.selectors-ten-by-ten:target, .selectors-ten-by-ten.ten-by-ten_target, .selectors-ten-by-ten.ten-by-ten-target {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
.selectors-ten-by-ten:active, .selectors-ten-by-ten.ten-by-ten_active, .selectors-ten-by-ten.ten-by-ten-active {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
<a name="customization-options"></a>
|
||||
## Customization Options
|
||||
|
||||
### Options per Sprite Map
|
||||
|
||||
When constructing the sprite map, the entire sprite map and it's associated stylesheet
|
||||
can be configured in the following ways. Each option is specified by setting a [configuration
|
||||
variable](/help/tutorials/configurable-variables/) before importing the sprite. The variables
|
||||
are named according to the name of the folder containing the sprites. In the examples below
|
||||
the sprites were contained within a folder called `icon`.
|
||||
|
||||
* `$<map>-spacing` -- The amount of transparent space, in pixels, around each sprite.
|
||||
Defaults to `0px`. E.g. `$icon-spacing: 20px`.
|
||||
* `$<map>-repeat` -- Wether or not each sprite should repeat along the x axis. Defaults
|
||||
to `no-repeat`. E.g. `$icon-repeat: repeat-x`.
|
||||
* `$<map>-position` -- The position of the sprite in the sprite map along the x-axis. Can
|
||||
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
|
||||
sprite to be on the right-hand side of the sprite map. Defaults to `0px`.
|
||||
E.g. `$icon-position: 100%`.
|
||||
* `$<map>-sprite-dimensions` -- Whether or not the dimensions of the sprite should be
|
||||
included in each sprite's CSS output. Can be `true` or `false`. Defaults to `false`.
|
||||
* `$<map>-sprite-base-class` -- The base class for these sprites. Defaults to `.<map>-sprite`.
|
||||
E.g. `$icon-sprite-base-class: ".action-icon"`
|
||||
* `$<map>-clean-up` -- Whether or not to removed the old sprite file when a new one is created. Defaults to true
|
||||
|
||||
### Options per Sprite
|
||||
|
||||
When constructing the sprite map, each sprite can be configured in the following ways:
|
||||
|
||||
* `$<map>-<sprite>-spacing` -- The amount of transparent space, in pixels, around the sprite. Defaults
|
||||
to the sprite map's spacing which defaults to `0px`. E.g. `$icon-new-spacing: 20px`.
|
||||
* `$<map>-<sprite>-repeat` -- Wether or not the sprite should repeat along the x axis. Defaults
|
||||
to the sprite map's repeat which defaults to `no-repeat`. E.g. `$icon-new-repeat: repeat-x`.
|
||||
* `$<map>-<sprite>-position` -- The position of the sprite in the sprite map along the x-axis. Can
|
||||
be specified in pixels or percentage of the sprite map's width. `100%` would cause the
|
||||
sprite to be on the right-hand side of the sprite map. Defaults to the sprite map's
|
||||
position value which defaults to `0px`. E.g. `$icon-new-position: 100%`.
|
||||
|
||||
<a name="performance"></a>
|
||||
<a name="performance" id="performance"></a>
|
||||
## Performance Considerations
|
||||
|
||||
Reading PNG files and assembling new images and saving them to disk might have a non-trivial
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
---
|
||||
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%`.
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Sprite layouts
|
||||
layout: tutorial
|
||||
crumb: Sprite layouts
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
# Sprite Tutorial
|
||||
<%= sprite_tutorial_links %>
|
||||
|
||||
## Sprite Layouts
|
||||
|
||||
Example:
|
||||
|
||||
$icon-layout:horizontal;
|
||||
@import "icon/*.png";
|
||||
|
||||
$dropcap-layout:diagonal
|
||||
@import "dropcap/*.png";
|
||||
|
||||
## Vertical
|
||||
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
## Horizontal
|
||||
|
||||
$mysprite-layout:horizontal;
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
|
||||
Notes:
|
||||
|
||||
* Responds to the same configuration options that vertical has.
|
||||
|
||||
## Diagonal
|
||||
|
||||
$mysprite-layout:diagonal;
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
|
||||
Notes:
|
||||
|
||||
* Configuration options do not effect the layout
|
||||
* This is incredibly resource intensive on the browser
|
||||
|
||||
## Smart
|
||||
|
||||
$mysprite-layout:smart;
|
||||
@import "mysprite/*.png";
|
||||
|
||||
Example Output:
|
||||
|
||||
|
||||
|
||||
Notes:
|
||||
|
||||
* Configuration options do not effect the layout
|
||||
* Most efficient use of browser memory
|
||||
|
||||
Example icons from [Open Icon Library](http://openiconlibrary.sourceforge.net/) and are released under public domain
|
||||
24
doc-src/content/help/tutorials/testing.markdown
Normal file
24
doc-src/content/help/tutorials/testing.markdown
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Testing Your Stylesheets
|
||||
layout: tutorial
|
||||
crumb: Testing
|
||||
classnames:
|
||||
- tutorial
|
||||
---
|
||||
|
||||
# Test Unit
|
||||
|
||||
require 'compass/test_case'
|
||||
class StylesheetsTest < Compass::TestCase
|
||||
def test_stylesheets
|
||||
my_sass_files.each do |sass_file|
|
||||
assert_compiles(sass_file) do |result|
|
||||
assert_not_blank result
|
||||
end
|
||||
end
|
||||
end
|
||||
protected
|
||||
def my_sass_files
|
||||
Dir.glob(File.expand_path(File.join(File.dirname(__FILE__), "../..", "app/stylesheets/**/[^_]*.sass")))
|
||||
end
|
||||
end
|
||||
@ -12,7 +12,7 @@ layout: homepage
|
||||
%ol
|
||||
%li Experience cleaner markup without presentational classes.
|
||||
%li It’s chock full of the web’s best reusable patterns.
|
||||
%li Developing a personal framework is simple.
|
||||
%li It makes creating <a href="/help/tutorials/spriting/">sprites</a> a breeze.
|
||||
%li Compass mixins make CSS3 easy.
|
||||
%li Download and create extensions with ease.
|
||||
.sass
|
||||
|
||||
@ -30,6 +30,9 @@ body_id: install
|
||||
%option{:value => "rails"} rails
|
||||
%option{:value => "other"} other
|
||||
project
|
||||
%span.creating
|
||||
named
|
||||
%input#project_name(placeholder="<myproject>")
|
||||
with
|
||||
%select#framework
|
||||
%option{:value => "compass"} compass's
|
||||
@ -48,14 +51,14 @@ body_id: install
|
||||
%option{:value => "customized"} customize my project's
|
||||
directory structure<span id="directories" style="display:none;">
|
||||
using
|
||||
%input#sassdir(value="sass")
|
||||
%input#sassdir(placeholder="sass")
|
||||
for the sass source directory,
|
||||
%input#cssdir(value="css")
|
||||
%input#cssdir(placeholder="css")
|
||||
for the css output directory,
|
||||
%input#jsdir(value="javascripts")
|
||||
%input#jsdir(placeholder="javascripts")
|
||||
for the javascripts directory,
|
||||
and
|
||||
%input#imagesdir(value="images")
|
||||
%input#imagesdir(placeholder="images")
|
||||
for the images directory</span></span>.
|
||||
|
||||
%h4 Thanks. Now run the following steps in your terminal:
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
---
|
||||
title: "Compass/Rails Integration in v0.12"
|
||||
description: "Starting in Compass v0.12 compass's rails integration is
|
||||
done via a new project called compass-rails."
|
||||
author: chris
|
||||
---
|
||||
|
||||
The Compass v0.12 release is way behind schedule but it's finally getting
|
||||
very close to release. The main goal of the v0.12 release has been to add
|
||||
support for the rails asset pipeline and we hope that you'll agree that this
|
||||
release achieves the very best integration with rails that compass has
|
||||
ever provided.
|
||||
|
||||
In v0.12, we've create a new gem called `compass-rails` to provide full
|
||||
support for rails 2.3 and greater. Let me tell you, this was no small
|
||||
feat. 2.3 lacks Railtie support and 3.1 introduced the asset pipeline.
|
||||
Backflips were performed; blood, sweat, and tears were shed; Monkeys
|
||||
were patched and Ducks were punched.
|
||||
|
||||
The compass command line tool will now be aware of and compass
|
||||
configuration settings you've made in your rails configuration files
|
||||
and/or in the compass configuration file. You can use the approach that
|
||||
best suites your workflow.
|
||||
|
||||
While the asset pipeline is convenient, large applications with lots of
|
||||
stylesheets and many imports can become sluggish in development mode. To
|
||||
make things snappier, you can now run the compass watcher in a separate
|
||||
terminal to begin compilation as soon as you save. In combination with
|
||||
tools like [live-reload](https://github.com/mockko/livereload), you may
|
||||
not even need to reload your webpage to see the result in your browser.
|
||||
|
||||
Compass extensions and their starter files can be added to your rails
|
||||
project following the extensions' existing installation instructions.
|
||||
No special consideration is needed to support rails except to note
|
||||
that the extension gem should be listed in the `:assets` group of your
|
||||
Gemfile and you might need to use `bundle exec` to launch the compass
|
||||
command line tool.
|
||||
|
||||
Having a dedicated gem for integration provides a number of benefits.
|
||||
First, it means that we can release rails integration fixes on a
|
||||
separate release schedule from the main compass library. Second, it
|
||||
solves a chicken & egg problem we had where the command-line tools
|
||||
didn't know whether they were dealing with a rails project until it was
|
||||
too late. Finally, it allowed us to clean up some of the Compass
|
||||
internals. To be clear, this gem doesn't mean that Rails support is
|
||||
deprecated or a second class citizen in any way.
|
||||
|
||||
Huge thanks go to [Scott Davis](https://github.com/scottdavis) for his
|
||||
hard work on the compass-rails gem.
|
||||
@ -0,0 +1,47 @@
|
||||
---
|
||||
title: "Compass v0.12 (Release Candidate) is Released"
|
||||
description: "Compass 0.12: Flexible Sprites, Rails Integration"
|
||||
author: chris
|
||||
---
|
||||
|
||||
Compass 0.12 release candidate is out! Install it now:
|
||||
|
||||
$ (sudo) gem install compass --pre
|
||||
|
||||
This release is primarily to support the Rails Asset Pipeline which
|
||||
required major changes to the Compass internals. If you use rails
|
||||
with Compass please read the [blog post about the new compass-rails
|
||||
gem][compass-rails].
|
||||
|
||||
In addition to the rails improvements this release contains many updates
|
||||
to Compass Sprites:
|
||||
|
||||
* **Sprite Layouts**: `vertical` (default), `horizontal`, `diagonal`, and `smart`
|
||||
layouts are now available. Different layouts may allow you to use
|
||||
sprites more easily with differing design requirements. The `smart`
|
||||
layout will efficiently pack sprites of different sizes -- resulting
|
||||
in smaller file sizes. To select a layout set the
|
||||
`$<spritename>-layout` variable to your desired layout name.
|
||||
* **Sprite Load Path**: Sprite source files can now be stored in more locations than
|
||||
just your images directory. To add sprite locations in your compass
|
||||
configuration: `sprite_load_path << 'my/sprite/folder'
|
||||
* **Sprite output location**: If you need to output sprites to a
|
||||
location other than the images directory set `generated_images_dir`,
|
||||
`generated_images_path`, `http_generated_images_dir`, and
|
||||
`http_generated_images_path` in your compass configuration according
|
||||
to your needs. You can refer to images in your generated images
|
||||
directory using the `generated-image-url()` function.
|
||||
|
||||
Additionally there are many new CSS3 improvements, bug fixes, and other
|
||||
small enhancements that you can read about in the
|
||||
[CHANGELOG](/CHANGELOG/).
|
||||
|
||||
What's next for Compass? The Sass 3.2 release is coming soon and I'd
|
||||
very much like the 0.13 release of compass to take advantage of the
|
||||
great features that it offers. Additionally, we're working on an
|
||||
extension registry where you can post your compass extensions and
|
||||
discover new ones. Lastly, we'll be extracting blueprint to a
|
||||
compass extension as that project seems to have stagnated. I'd say
|
||||
we're getting pretty close to a 1.0 release!
|
||||
|
||||
[compass-rails]: /blog/2012/01/29/compass-and-rails-integration/
|
||||
@ -5,7 +5,6 @@ framework: compass
|
||||
stylesheet: compass/css3/_box-shadow.scss
|
||||
meta_description: Specify the box shadow for all browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
@ -5,7 +5,6 @@ framework: compass
|
||||
stylesheet: compass/css3/_images.scss
|
||||
meta_description: Specify linear gradients and radial gradients for many browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
@ -5,7 +5,6 @@ framework: compass
|
||||
stylesheet: compass/css3/_pie.scss
|
||||
meta_description: Compass integration with the css3pie tool.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
@ -4,7 +4,6 @@ crumb: Text Shadow
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_text-shadow.scss
|
||||
meta_description: Specify the text shadow for all browsers.
|
||||
beta: true
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
|
||||
@ -5,7 +5,6 @@ framework: compass
|
||||
stylesheet: compass/css3/_transform.scss
|
||||
meta_description: Specify transformations for many browsers.
|
||||
layout: core
|
||||
beta: true
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
|
||||
15
doc-src/content/reference/compass/css3/user_interface.haml
Normal file
15
doc-src/content/reference/compass/css3/user_interface.haml
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Compass User Interface
|
||||
crumb: User Interface
|
||||
framework: compass
|
||||
stylesheet: compass/css3/_user-interface.scss
|
||||
meta_description: Declare an element inline block for all browsers.
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- css3
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Provides mixins for the CSS3 User Interface module.
|
||||
@ -38,8 +38,9 @@ documented_functions:
|
||||
sin(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
Takes the sine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Degrees will first be converted to radians.
|
||||
Returns the sine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
|
||||
will be evaluated as radians. Degrees will first be converted to radians.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
and the number will be treated as radians.
|
||||
|
||||
@ -49,8 +50,9 @@ documented_functions:
|
||||
cos(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
Takes the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Degrees will first be converted to radians.
|
||||
Returns the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
|
||||
will be evaluated as radians. Degrees will first be converted to radians.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
and the number will be treated as radians.
|
||||
|
||||
@ -60,8 +62,9 @@ documented_functions:
|
||||
tan(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
Takes the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Degrees will first be converted to radians.
|
||||
Returns the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
|
||||
then it will return a unitless result. Unless the number has a unit of <code>deg</code> it
|
||||
will be evaluated as radians. Degrees will first be converted to radians.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
and the number will be treated as radians.
|
||||
|
||||
|
||||
@ -12,6 +12,7 @@ documented_functions:
|
||||
- "stylesheet-url"
|
||||
- "font-url"
|
||||
- "image-url"
|
||||
- "generated-image-url"
|
||||
---
|
||||
%h1 Compass URL Helpers
|
||||
|
||||
@ -31,7 +32,7 @@ documented_functions:
|
||||
Generates a path to an asset found relative to the project's css directory.
|
||||
%br
|
||||
Passing a true value as the second argument will cause the only the path to be returned
|
||||
instead of a `url()` function
|
||||
instead of a <code>url()</code> function
|
||||
|
||||
#font-url.helper
|
||||
%h3
|
||||
@ -42,7 +43,7 @@ documented_functions:
|
||||
Generates a path to an asset found relative to the project's font directory.
|
||||
%br
|
||||
Passing a true value as the second argument will cause the only the path to be returned
|
||||
instead of a `url()` function
|
||||
instead of a <code>url()</code> function
|
||||
|
||||
#image-url.helper
|
||||
%h3
|
||||
@ -53,9 +54,27 @@ documented_functions:
|
||||
Generates a path to an asset found relative to the project's images directory.
|
||||
%p
|
||||
Passing a true value as the second argument will cause the only the path to be returned
|
||||
instead of a `url()` function
|
||||
instead of a <code>url()</code> function
|
||||
%p
|
||||
The third argument is used to control the cache buster on a per-use basis.
|
||||
When set to `false` no cache buster will be used. When a string, that
|
||||
When set to <code>false</code> no cache buster will be used. When a string, that
|
||||
value will be used as the cache buster.
|
||||
|
||||
#generated-image-url.helper
|
||||
%h3
|
||||
%a(href="#generated-image-url")
|
||||
generated-image-url($path, $cache-buster: false)
|
||||
.details
|
||||
%p
|
||||
Generates a path to an image generated during compilation using the
|
||||
<code>generated_image</code> related configuration properties.
|
||||
%p
|
||||
Most users will never call this helper directly, it is primarily provided
|
||||
for use by plugins that need to generate paths to images they create. E.g.
|
||||
The <code>sprite-url()</code> helper calls this helper.
|
||||
%p
|
||||
The second argument is used to control the cache buster on a per-use basis.
|
||||
Defaults to <code>false</code>, meaning that no cache buster will be used.
|
||||
When a string, that value will be used as the cache buster, when <code>true</code>
|
||||
Compass will generate a cache-buster based on the image's modification time.
|
||||
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
$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
|
||||
@ -1,17 +0,0 @@
|
||||
.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)
|
||||
@ -1,10 +0,0 @@
|
||||
@mixin reset($reset-type: false){
|
||||
@if($reset-type){
|
||||
@if($reset-type == global){
|
||||
@include global-reset;
|
||||
}
|
||||
@if($reset-type == html5){
|
||||
@include reset-html5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
body#blog-archive {
|
||||
.timestamp {
|
||||
margin-right: 1em;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
//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; }
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,99 +0,0 @@
|
||||
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;} }
|
||||
@ -1,10 +0,0 @@
|
||||
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; }
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
$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; }
|
||||
@ -1,63 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@ -1,96 +0,0 @@
|
||||
.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; } }
|
||||
@ -1,31 +0,0 @@
|
||||
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)";
|
||||
}
|
||||
}
|
||||
@ -1,275 +0,0 @@
|
||||
@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; }
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@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; }
|
||||
@ -1,216 +0,0 @@
|
||||
@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; }
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
|
||||
// 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; }
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
// Default Syntax Highlighter theme.
|
||||
//@import "shCore.scss";
|
||||
|
||||
@import "shThemeRDark.scss";
|
||||
|
||||
/*.syntaxhighlighter {
|
||||
.keyword { font-weight: bold !important; }
|
||||
}*/
|
||||
@ -1,120 +0,0 @@
|
||||
$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; }
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
# All files in the 'lib' directory will be loaded
|
||||
# before nanoc starts compiling.
|
||||
|
||||
require 'erb'
|
||||
require 'active_support/inflector'
|
||||
include Nanoc3::Helpers::LinkTo
|
||||
include Nanoc3::Helpers::Capturing
|
||||
include Nanoc3::Helpers::Rendering
|
||||
@ -137,3 +138,16 @@ def long_compass_version
|
||||
require 'compass/commands'
|
||||
Compass::Commands::PrintVersion.long_output_string
|
||||
end
|
||||
|
||||
|
||||
def sprite_tutorial_links(index=false)
|
||||
string = <<-ERB
|
||||
<% unless index %>
|
||||
* [Sprite Tutorial Index](/help/tutorials/spriting/)
|
||||
<% end %>
|
||||
<% Dir["./content/help/tutorials/spriting/**/*.markdown"].sort.each do |file| %>
|
||||
* [<%= File.basename(file, '.markdown').gsub('-', ' ').titleize %>](/help/tutorials/spriting/<%= File.basename(file, '.markdown') %>)
|
||||
<% end %>
|
||||
ERB
|
||||
::ERB.new(string).result(binding)
|
||||
end
|
||||
|
||||
@ -86,7 +86,9 @@ module Sass
|
||||
docstring.gsub(/@doc off(.*?)@doc on/m, '')
|
||||
end
|
||||
def docstring
|
||||
value.gsub(PRE_COMMENT, '').gsub(POST_COMMENT, '')
|
||||
v = value
|
||||
v = v.join("\n") if v.respond_to?(:join)
|
||||
v.gsub(PRE_COMMENT, '').gsub(POST_COMMENT, '')
|
||||
end
|
||||
def doc
|
||||
if value == "@doc off"
|
||||
|
||||
@ -9,8 +9,9 @@ def fetch(uri_str, limit = 10)
|
||||
|
||||
url = URI.parse(uri_str)
|
||||
http = Net::HTTP.new(url.host, url.port)
|
||||
http.open_timeout = 2
|
||||
http.open_timeout = 10
|
||||
http.read_timeout = 30
|
||||
http.use_ssl = true
|
||||
response = http.start do |http|
|
||||
puts "getting #{url.path}"
|
||||
http.request_get(url.path)
|
||||
@ -25,7 +26,7 @@ def fetch(uri_str, limit = 10)
|
||||
end
|
||||
|
||||
def install_from_github(user, project, ext_name, branch = "master", working_directory = Dir.pwd)
|
||||
download_link = "http://github.com/#{user}/#{project}/zipball/#{branch}"
|
||||
download_link = "https://github.com/#{user}/#{project}/zipball/#{branch}"
|
||||
extdir = File.join(working_directory,'extensions')
|
||||
|
||||
if !File.exists?("#{extdir}/#{ext_name}")
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
require File.join(File.dirname(__FILE__), '..', 'downloader')
|
||||
|
||||
install_from_github('chriseppstein', 'compass-960-plugin', 'ninesixty')
|
||||
install_from_github('nextmat', 'compass-960-plugin', 'ninesixty')
|
||||
|
||||
|
||||
@ -77,16 +77,6 @@ Feature: Command Line
|
||||
Then an error message is printed out: A bare project cannot be created when a framework is specified.
|
||||
And the command exits with a non-zero error code
|
||||
|
||||
Scenario: Initializing a rails project
|
||||
Given ruby supports fork
|
||||
Given I'm in a newly created rails project: my_rails_project
|
||||
When I initialize a project using: compass init rails --sass-dir app/stylesheets --css-dir public/stylesheets/compiled
|
||||
Then a config file config/compass.rb is reported created
|
||||
Then a config file config/compass.rb is created
|
||||
And a sass file app/stylesheets/screen.scss is created
|
||||
And a sass file app/stylesheets/print.scss is created
|
||||
And a sass file app/stylesheets/ie.scss is created
|
||||
|
||||
Scenario: Compiling an existing project.
|
||||
Given I am using the existing project in test/fixtures/stylesheets/compass
|
||||
When I run: compass compile
|
||||
@ -200,7 +190,7 @@ Feature: Command Line
|
||||
| tmp/box_shadow.css |
|
||||
| tmp/columns.css |
|
||||
| tmp/fonts.css |
|
||||
| images/flag-s03c3b29b35.png |
|
||||
| images/flag-s4798b5a210.png |
|
||||
And the following files are removed:
|
||||
| .sass-cache/ |
|
||||
| tmp/border_radius.css |
|
||||
@ -208,7 +198,7 @@ Feature: Command Line
|
||||
| tmp/box_shadow.css |
|
||||
| tmp/columns.css |
|
||||
| tmp/fonts.css |
|
||||
| images/flag-s03c3b29b35.png |
|
||||
| images/flag-s4798b5a210.png |
|
||||
|
||||
Scenario: Watching a project for changes
|
||||
Given ruby supports fork
|
||||
|
||||
@ -12,20 +12,11 @@ Feature: Extensions
|
||||
When I run: compass frameworks
|
||||
Then the list of frameworks includes "testing"
|
||||
|
||||
@listframeworks
|
||||
Scenario: Extensions directory for rails projects
|
||||
Given ruby supports fork
|
||||
And I'm in a newly created rails project: my_rails_project
|
||||
And the "my_rails_project/vendor/plugins/compass/extensions" directory exists
|
||||
And and I have a fake extension at my_rails_project/vendor/plugins/compass/extensions/testing
|
||||
When I run: compass frameworks
|
||||
Then the list of frameworks includes "testing"
|
||||
|
||||
@listframeworks
|
||||
Scenario: Shared extensions directory
|
||||
Given I am using the existing project in test/fixtures/stylesheets/compass
|
||||
And the "~/.compass/extensions" directory exists
|
||||
Given the "~/.compass/extensions" directory exists
|
||||
And and I have a fake extension at ~/.compass/extensions/testing
|
||||
And I am using the existing project in test/fixtures/stylesheets/compass
|
||||
When I run: compass frameworks
|
||||
Then the list of frameworks includes "testing"
|
||||
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
Feature: Rails Integration
|
||||
In order to provide an integrated experience
|
||||
As a Ruby on Rails user
|
||||
I want to easily access the Compass functionality
|
||||
|
||||
Scenario: Configure Compass from my Application
|
||||
Given I'm in a rails3.1 application named 'exemplar'
|
||||
When I edit 'config/application.rb' and save it with the following value:
|
||||
"""
|
||||
require File.expand_path('../boot', __FILE__)
|
||||
require 'rails/all'
|
||||
Bundler.require(:default, Rails.env) if defined?(Bundler)
|
||||
module Exemplar
|
||||
class Application < Rails::Application
|
||||
config.encoding = "utf-8"
|
||||
config.filter_parameters += [:password]
|
||||
|
||||
config.compass.fonts_dir = "app/assets/fonts"
|
||||
end
|
||||
end
|
||||
"""
|
||||
And I run: compass config -p fonts_dir
|
||||
Then the command should print out "app/assets/fonts"
|
||||
Scenario: Rails gets access to the compass config file
|
||||
Given I'm in a rails3.1 application named 'exemplar'
|
||||
When I edit 'config/compass.rb' and save it with the following value:
|
||||
"""
|
||||
fonts_dir = "app/assets/fonts"
|
||||
"""
|
||||
And I run: ruby -I. -rconfig/environment -e 'puts Compass.configuration.fonts_dir'
|
||||
Then the command should print out "app/assets/fonts"
|
||||
|
||||
@ -6,7 +6,6 @@ require 'compass/exec'
|
||||
include Compass::TestCaseHelper
|
||||
include Compass::CommandLineHelper
|
||||
include Compass::IoHelper
|
||||
include Compass::RailsHelper
|
||||
|
||||
Before do
|
||||
Compass.reset_configuration!
|
||||
@ -41,16 +40,6 @@ Given %r{^I am in the parent directory$} do
|
||||
Dir.chdir ".."
|
||||
end
|
||||
|
||||
Given %r{^I'm in a newly created rails project: (.+)$} do |project_name|
|
||||
@cleanup_directories << project_name
|
||||
begin
|
||||
generate_rails_app project_name
|
||||
Dir.chdir project_name
|
||||
rescue LoadError
|
||||
pending "Missing Ruby-on-rails gems: sudo gem install rails"
|
||||
end
|
||||
end
|
||||
|
||||
Given /^I should clean up the directory: (\w+)$/ do |directory|
|
||||
@cleanup_directories << directory
|
||||
end
|
||||
@ -135,13 +124,14 @@ end
|
||||
|
||||
Then "the following files are reported removed:" do |table|
|
||||
table.rows.each do |css_file|
|
||||
Then %Q{a css file #{css_file.first} is reported removed}
|
||||
#need to find a better way but this works for now
|
||||
step %Q{a css file #{css_file.first} is reported removed}
|
||||
end
|
||||
end
|
||||
|
||||
Then "the following files are removed:" do |table|
|
||||
table.rows.each do |css_file|
|
||||
Then %Q{a css file #{css_file.first} is removed}
|
||||
step %Q{a css file #{css_file.first} is removed}
|
||||
end
|
||||
end
|
||||
|
||||
@ -257,7 +247,7 @@ end
|
||||
Then /^I should see the following "([^"]+)" commands:$/ do |kind, table|
|
||||
|
||||
|
||||
Then %Q{I should be shown a list of "#{kind}" commands}
|
||||
step %Q{I should be shown a list of "#{kind}" commands}
|
||||
|
||||
commands = @last_command_list.map{|c| c =~ /^\s+\* ([^ ]+)\s+- [A-Z].+$/; [$1]}
|
||||
table.diff!(commands)
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
Given /^the "([^\"]*)" directory exists$/ do |directory|
|
||||
directory.gsub!('~', ENV["HOME"]) if directory.include?('~/')
|
||||
FileUtils.mkdir_p directory
|
||||
end
|
||||
|
||||
Given /^and I have a fake extension at (.*)$/ do |directory|
|
||||
directory.gsub!('~', ENV["HOME"]) if directory.include?('~/')
|
||||
FileUtils.mkdir_p File.join(directory, 'stylesheets')
|
||||
FileUtils.mkdir_p File.join(directory, 'templates/project')
|
||||
open(File.join(directory, 'templates/project/manifest.rb'),"w") do |f|
|
||||
|
||||
@ -27,7 +27,7 @@ $experimental-support-for-opera : true !default;
|
||||
// Support for microsoft in experimental css3 properties (-ms).
|
||||
$experimental-support-for-microsoft : true !default;
|
||||
// Support for khtml in experimental css3 properties (-khtml).
|
||||
$experimental-support-for-khtml : true !default;
|
||||
$experimental-support-for-khtml : false !default;
|
||||
// Support for svg in experimental css3 properties.
|
||||
// Setting this to true might add significant size to your
|
||||
// generated stylesheets.
|
||||
|
||||
@ -17,6 +17,7 @@ $default-border-radius: 5px !default;
|
||||
// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// .simple {
|
||||
// -webkit-border-radius: 4px 4px;
|
||||
// -moz-border-radius: 4px / 4px;
|
||||
|
||||
@ -40,30 +40,13 @@ $default-box-shadow-inset : false !default;
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
// This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
|
||||
$legacy: (type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and type-of(if($shadow-5, $shadow-5, 0)) == number and ($shadow-6 == inset or type-of($shadow-6) == bool) and ($shadow-2 or $shadow-3 or $shadow-4 or $shadow-5 or $shadow-6));
|
||||
@if $legacy {
|
||||
@warn "Passing separate arguments for a single shadow to box-shadow is deprecated. " +
|
||||
"Pass the values as a single space-separated list, or use the single-box-shadow mixin. " +
|
||||
"See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
|
||||
@include single-box-shadow(
|
||||
if($shadow-1, $shadow-1, $default-box-shadow-color),
|
||||
if($shadow-2, $shadow-2, $default-box-shadow-h-offset),
|
||||
if($shadow-3, $shadow-3, $default-box-shadow-v-offset),
|
||||
if($shadow-4, $shadow-4, $default-box-shadow-blur),
|
||||
if($shadow-5, $shadow-5, $default-box-shadow-spread),
|
||||
if($shadow-6, $shadow-6, $default-box-shadow-inset)
|
||||
);
|
||||
}
|
||||
@else {
|
||||
@if $shadow-1 == default {
|
||||
$shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
|
||||
}
|
||||
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
||||
@include experimental(box-shadow, $shadow,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
@if $shadow-1 == default {
|
||||
$shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
|
||||
}
|
||||
$shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
||||
@include experimental(box-shadow, $shadow,
|
||||
-moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
|
||||
|
||||
@ -8,6 +8,6 @@
|
||||
@mixin box-sizing($bs) {
|
||||
$bs: unquote($bs);
|
||||
@include experimental(box-sizing, $bs,
|
||||
-moz, -webkit, not -o, -ms, not -khtml, official
|
||||
-moz, -webkit, not -o, not -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
// * $font-files is required using font-files('relative/location', 'format').
|
||||
// for best results use this order: woff, opentype/truetype, svg
|
||||
// * $eot is required by IE, and is a relative location of the eot file.
|
||||
// * $weight shows if the font is bold, defaults to normal
|
||||
// * $style defaults to normal, might be also italic
|
||||
// * For android 2.2 Compatiblity, please ensure that your web page has
|
||||
// a meta viewport tag.
|
||||
// * To support iOS < 4.2, an SVG file must be provided
|
||||
@ -13,13 +15,20 @@
|
||||
// If you need to generate other formats check out the Font Squirrel
|
||||
// [font generator](http://www.fontsquirrel.com/fontface/generator)
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// @include font-face("this name", font-files("this.woff", woff, "this.otf", opentype), "this.eot")
|
||||
|
||||
// In order to refer to a specific style of the font in your stylesheets as
|
||||
// e.g. "font-style: italic;", you may add a couple of @font-face includes
|
||||
// containing the respective font files for each style and specying
|
||||
// respective the $style parameter.
|
||||
|
||||
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
|
||||
|
||||
@mixin font-face(
|
||||
$name,
|
||||
$font-files,
|
||||
$eot: false
|
||||
$eot: false,
|
||||
$weight: false,
|
||||
$style: false
|
||||
) {
|
||||
$iefont: unquote("#{$eot}?#iefix");
|
||||
@font-face {
|
||||
@ -29,5 +38,11 @@
|
||||
$font-files: font-url($iefont) unquote("format('eot')"), $font-files;
|
||||
}
|
||||
src: $font-files;
|
||||
@if $weight {
|
||||
font-weight: $weight;
|
||||
}
|
||||
@if $style {
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,11 +12,11 @@
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$official : true
|
||||
) {
|
||||
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
|
||||
@if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; }
|
||||
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
|
||||
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
|
||||
@if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; }
|
||||
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
|
||||
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
|
||||
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
|
||||
@if $official { #{$property} : $value; }
|
||||
}
|
||||
|
||||
@ -29,10 +29,10 @@
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$official : true
|
||||
) {
|
||||
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
|
||||
@if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; }
|
||||
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
|
||||
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
|
||||
@if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; }
|
||||
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
|
||||
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
|
||||
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
|
||||
@if $official { #{$property} : #{$value}; }
|
||||
}
|
||||
|
||||
@ -23,26 +23,12 @@ $default-text-shadow-blur: 1px !default;
|
||||
$shadow-9 : false,
|
||||
$shadow-10: false
|
||||
) {
|
||||
// This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
|
||||
$legacy: type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and ($shadow-2 or $shadow-3 or $shadow-4) and not($shadow-5 or $shadow-6 or $shadow-7 or $shadow-8 or $shadow-9 or $shadow-10);
|
||||
@if $legacy {
|
||||
@warn "Passing separate arguments for a single shadow to text-shadow is deprecated. " +
|
||||
"Pass the values as a single space-separated list, or use the single-text-shadow mixin. " +
|
||||
"See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
|
||||
@include single-text-shadow(
|
||||
$shadow-1,
|
||||
if($shadow-2, $shadow-2, $default-text-shadow-h-offset),
|
||||
if($shadow-3, $shadow-3, $default-text-shadow-v-offset),
|
||||
if($shadow-4, $shadow-4, $default-text-shadow-blur)
|
||||
);
|
||||
} @else {
|
||||
@if $shadow-1 == default {
|
||||
$shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
|
||||
}
|
||||
text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
|
||||
$shadow-4, $shadow-5, $shadow-6,
|
||||
$shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
||||
@if $shadow-1 == default {
|
||||
$shadow-1: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
|
||||
}
|
||||
text-shadow: compact($shadow-1, $shadow-2, $shadow-3,
|
||||
$shadow-4, $shadow-5, $shadow-6,
|
||||
$shadow-7, $shadow-8, $shadow-9, $shadow-10);
|
||||
}
|
||||
|
||||
// Provides a single cross-browser CSS text shadow.
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
|
||||
// @doc off
|
||||
// Note ----------------------------------------------------------------------
|
||||
// Safari is the only browser that currently supports 3D transforms.
|
||||
// Because of that it can be important to control whether a given 2D transform
|
||||
// uses the full range of experimental browser prefixes, or only the 3D list.
|
||||
// Safari, Chrome, and Firefox all support 3D transforms. However,
|
||||
// only in the most recent builds. You should also provide fallback 2d support for
|
||||
// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
|
||||
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
||||
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
||||
// and also accepts 'true' (3D). Currently the lists are as follows:
|
||||
// 2D: Mozilla, Webkit, Opera, Official
|
||||
// 3D: Webkit, Official **(Only Safari Supports 3D perspective)**
|
||||
// 3D: Webkit, Firefox.
|
||||
|
||||
// Available Transforms ------------------------------------------------------
|
||||
// - Scale (2d and 3d)
|
||||
|
||||
@ -23,15 +23,16 @@ $default-transition-function: false !default;
|
||||
|
||||
$default-transition-delay: false !default;
|
||||
|
||||
$transitionable-prefixed-values: transform, transform-origin !default;
|
||||
|
||||
// One or more properties to transition
|
||||
//
|
||||
// * for multiple, use a comma-delimited list
|
||||
// * also accepts "all" or "none"
|
||||
|
||||
@mixin transition-property($properties: $default-transition-property) {
|
||||
@include experimental(transition-property, unquote($properties),
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
@if type-of($properties) == string { $properties: unquote($properties); }
|
||||
@include build-prefix-values(transition-property, $properties);
|
||||
}
|
||||
|
||||
// One or more durations in seconds
|
||||
@ -42,7 +43,7 @@ $default-transition-delay: false !default;
|
||||
@mixin transition-duration($duration: $default-transition-duration) {
|
||||
@if type-of($duration) == string { $duration: unquote($duration); }
|
||||
@include experimental(transition-duration, $duration,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
-moz, -webkit, -o, -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
@ -54,7 +55,7 @@ $default-transition-delay: false !default;
|
||||
|
||||
@mixin transition-timing-function($function: $default-transition-function) {
|
||||
@include experimental(transition-timing-function, unquote($function),
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
-moz, -webkit, -o, -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
@ -66,22 +67,19 @@ $default-transition-delay: false !default;
|
||||
@mixin transition-delay($delay: $default-transition-delay) {
|
||||
@if type-of($delay) == string { $delay: unquote($delay); }
|
||||
@include experimental(transition-delay, $delay,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
-moz, -webkit, -o, -ms, not -khtml, official
|
||||
);
|
||||
}
|
||||
|
||||
// Transition all-in-one shorthand
|
||||
|
||||
@mixin single-transition(
|
||||
$properties: $default-transition-property,
|
||||
$property: $default-transition-property,
|
||||
$duration: $default-transition-duration,
|
||||
$function: $default-transition-function,
|
||||
$delay: $default-transition-delay
|
||||
) {
|
||||
@include transition-property($properties);
|
||||
@include transition-duration($duration);
|
||||
@if $function { @include transition-timing-function($function); }
|
||||
@if $delay { @include transition-delay($delay); }
|
||||
@include build-prefix-values(transition, compact($property $duration $function, false), $delay);
|
||||
}
|
||||
|
||||
@mixin transition(
|
||||
@ -96,24 +94,61 @@ $default-transition-delay: false !default;
|
||||
$transition-9 : false,
|
||||
$transition-10: false
|
||||
) {
|
||||
$legacy: (type-of($transition-1) == string and type-of(if($transition-2, $transition-2, 0)) == number and type-of(if($transition-3, $transition-3, '')) == string and type-of(if($transition-4, $transition-4, 0)) == number and ($transition-2 or $transition-3 or $transition-4));
|
||||
@if $legacy {
|
||||
@warn "Passing separate arguments for a single transition to transition is deprecated. " +
|
||||
"Pass the values as a single space-separated list, or use the single-transition mixin.";
|
||||
@include single-transition(
|
||||
if($transition-1, $transition-1, $default-transition-property),
|
||||
if($transition-2, $transition-2, $default-transition-duration),
|
||||
if($transition-3, $transition-3, $default-transition-function),
|
||||
if($transition-4, $transition-4, $default-transition-delay)
|
||||
);
|
||||
}
|
||||
@else {
|
||||
@if $transition-1 == default {
|
||||
$transition-1 : -compass-space-list(compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
|
||||
}
|
||||
$transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
|
||||
@include experimental(transition, $transition,
|
||||
-moz, -webkit, -o, not -ms, not -khtml, official
|
||||
);
|
||||
@if $transition-1 == default {
|
||||
$transition-1 : (compact($default-transition-property, $default-transition-duration, $default-transition-function, $default-transition-delay));
|
||||
}
|
||||
|
||||
$transition : compact($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10);
|
||||
@include build-prefix-values(transition, $transition);
|
||||
}
|
||||
|
||||
@mixin build-prefix-values($property, $values, $delay: false) {
|
||||
$raw-values: ($values);
|
||||
$index: compact(false);
|
||||
|
||||
$webkit-value: compact(false);
|
||||
$moz-value: compact(false);
|
||||
$ms-value: compact(false);
|
||||
$o-value: compact(false);
|
||||
|
||||
@each $value in $raw-values {
|
||||
$value: compact(join($value, false));
|
||||
$match: false;
|
||||
|
||||
@each $prefixed-value in $transitionable-prefixed-values {
|
||||
@if index($value, $prefixed-value) {
|
||||
$index: index($value, $prefixed-value);
|
||||
$match: true;
|
||||
}
|
||||
}
|
||||
|
||||
@if $match {
|
||||
$value-prefix: nth($value, $index);
|
||||
$value-suffix: compact(false);
|
||||
|
||||
@for $i from 2 through length($value) {
|
||||
$value-suffix: append($value-suffix, nth($value, $i), space);
|
||||
}
|
||||
|
||||
$non-webkit-suffix: compact(append($value-suffix, $delay, space));
|
||||
|
||||
$webkit-value: append($webkit-value, compact(join(-webkit-#{$value-prefix}, $value-suffix)), comma);
|
||||
$moz-value: append($moz-value, compact(join(-moz-#{$value-prefix}, $non-webkit-suffix)), comma);
|
||||
$ms-value: append($ms-value, compact(join(-ms-#{$value-prefix}, $non-webkit-suffix)), comma);
|
||||
$o-value: append($o-value, compact(join(-o-#{$value-prefix}, $non-webkit-suffix)), comma);
|
||||
} @else {
|
||||
$non-webkit-value: compact(append($value, $delay, space));
|
||||
|
||||
$webkit-value: append($webkit-value, $value, comma);
|
||||
$moz-value: append($moz-value, $non-webkit-value, comma);
|
||||
$ms-value: append($ms-value, $non-webkit-value, comma);
|
||||
$o-value: append($o-value, $non-webkit-value, comma);
|
||||
}
|
||||
}
|
||||
|
||||
@if $experimental-support-for-webkit { -webkit-#{$property} : $webkit-value; @if $delay { -webkit-#{$property}-delay : $delay; } }
|
||||
@if $experimental-support-for-mozilla { -moz-#{$property} : $moz-value; }
|
||||
@if $experimental-support-for-microsoft { -ms-#{$property} : $ms-value; }
|
||||
@if $experimental-support-for-opera { -o-#{$property} : $o-value; }
|
||||
#{$property} : compact($values $delay);
|
||||
}
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
@import "shared";
|
||||
|
||||
// User Interface ------------------------------------------------------------
|
||||
// This file can be expanded to handle all the user interface properties as
|
||||
// they become available in browsers:
|
||||
// http://www.w3.org/TR/2000/WD-css3-userint-20000216
|
||||
@import "shared";
|
||||
|
||||
|
||||
// User Select ---------------------------------------------------------------
|
||||
// This property controls the selection model and granularity of an element.
|
||||
//
|
||||
// @param $select
|
||||
// [ none | text | toggle | element | elements | all | inherit ]
|
||||
|
||||
@mixin user-select($select) {
|
||||
$select: unquote($select);
|
||||
@include experimental(user-select, $select,
|
||||
|
||||
@ -15,9 +15,14 @@ $ie-font-ratio: 16px / 100%;
|
||||
// Set to false if you want to use absolute pixes in sizing your typography.
|
||||
$relative-font-sizing: true !default;
|
||||
|
||||
// Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function
|
||||
// to round the line height to the nearest half line height instead of the
|
||||
// nearest integral line height to avoid large spacing between lines.
|
||||
$round-to-nearest-half-line: false !default;
|
||||
|
||||
// Ensure there is at least this many pixels
|
||||
// of vertical padding above and below the text.
|
||||
$min-line-padding: 2px;
|
||||
$min-line-padding: 2px !default;
|
||||
|
||||
// $base-font-size but in your output unit of choice.
|
||||
// Defaults to 1em when `$relative-font-sizing`
|
||||
@ -59,6 +64,11 @@ $base-half-leader: $base-leader / 2;
|
||||
}
|
||||
}
|
||||
|
||||
// resets the baseline to 1 leading unit
|
||||
@mixin reset-baseline {
|
||||
@include adjust-leading-to(1, if($relative-font-sizing, $base-font-size, $base-font-size));
|
||||
}
|
||||
|
||||
// Show a background image that can be used to debug your alignments.
|
||||
// include the $img argument if you would rather use your own image than the
|
||||
// Compass default gradient image.
|
||||
@ -103,9 +113,11 @@ $base-half-leader: $base-leader / 2;
|
||||
}
|
||||
|
||||
@function lines-for-font-size($font-size) {
|
||||
$lines: ceil($font-size / $base-line-height);
|
||||
$lines: if($round-to-nearest-half-line,
|
||||
ceil(2 * $font-size / $base-line-height) / 2,
|
||||
ceil($font-size / $base-line-height));
|
||||
@if $lines * $base-line-height - $font-size < $min-line-padding * 2 {
|
||||
$lines: $lines + 1;
|
||||
$lines: $lines + if($round-to-nearest-half-line, 0.5, 1);
|
||||
}
|
||||
@return $lines;
|
||||
}
|
||||
|
||||
@ -26,9 +26,17 @@
|
||||
|
||||
// Hides text in an element so you can see the background.
|
||||
@mixin hide-text {
|
||||
$approximate_em_value: 12px / 1em;
|
||||
$wider_than_any_screen: -9999em;
|
||||
text-indent: $wider_than_any_screen * $approximate_em_value;
|
||||
// slightly wider than the box prevents issues with inline-block elements
|
||||
text-indent: 110%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Hides text in an element by squishing the text into oblivion.
|
||||
// Use this if you need to hide text contained in an inline element
|
||||
// but still have it read by a screen reader.
|
||||
@mixin squish-text {
|
||||
font: 0/0 serif;
|
||||
text-shadow: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
@ -1 +1,2 @@
|
||||
@import "sprites/base";
|
||||
@import "sprites/sprite-img";
|
||||
|
||||
@ -30,18 +30,18 @@ $disable-magic-sprite-selectors:false !default;
|
||||
@include sprite-dimensions($map, $sprite);
|
||||
}
|
||||
@if not $disable-magic-sprite-selectors {
|
||||
@include sprite-selectors($map, $sprite, $sprite);
|
||||
@include sprite-selectors($map, $sprite, $sprite, $offset-x, $offset-y);
|
||||
}
|
||||
}
|
||||
|
||||
// Include the selectors for the `$sprite` given the `$map` and the
|
||||
// `$full-sprite-name`
|
||||
// @private
|
||||
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name) {
|
||||
@mixin sprite-selectors($map, $sprite-name, $full-sprite-name, $offset-x: 0, $offset-y: 0) {
|
||||
@each $selector in $sprite-selectors {
|
||||
@if sprite_has_selector($map, $sprite-name, $selector) {
|
||||
&:#{$selector}, &.#{$full-sprite-name}_#{$selector}, &.#{$full-sprite-name}-#{$selector} {
|
||||
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}");
|
||||
@include sprite-background-position($map, "#{$sprite-name}_#{$selector}", $offset-x, $offset-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -53,13 +53,13 @@ $disable-magic-sprite-selectors:false !default;
|
||||
// If a base class is provided, then each class will extend it.
|
||||
//
|
||||
// If `$dimensions` is `true`, the sprite dimensions will specified.
|
||||
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map)) {
|
||||
@mixin sprites($map, $sprite-names, $base-class: false, $dimensions: false, $prefix: sprite-map-name($map), $offset-x: 0, $offset-y: 0) {
|
||||
@each $sprite-name in $sprite-names {
|
||||
@if sprite_does_not_have_parent($map, $sprite-name) {
|
||||
$full-sprite-name: "#{$prefix}-#{$sprite-name}";
|
||||
.#{$full-sprite-name} {
|
||||
@if $base-class { @extend #{$base-class}; }
|
||||
@include sprite($map, $sprite-name, $dimensions);
|
||||
@include sprite($map, $sprite-name, $dimensions, $offset-x, $offset-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,29 +28,52 @@ $sprite-image-default-height: $sprite-default-size !default;
|
||||
// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
|
||||
@mixin sprite-img($img, $col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
|
||||
@include sprite-background($img, $width, $height);
|
||||
@include sprite-position($col, $row, $width, $height, $margin); }
|
||||
@include sprite-position($col, $row, $width, $height, $margin);
|
||||
}
|
||||
|
||||
// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
|
||||
@mixin sprite-background($img, $width: $sprite-default-size, $height: $width) {
|
||||
@include sprite-background-rectangle($img, $width, $height); }
|
||||
@include sprite-background-rectangle($img, $width, $height);
|
||||
}
|
||||
|
||||
// Sets rules common for all sprites, assumes a rectangular region.
|
||||
@mixin sprite-background-rectangle($img, $width: $sprite-image-default-width, $height: $sprite-image-default-height) {
|
||||
background: image-url($img) no-repeat;
|
||||
width: $width;
|
||||
height: $height;
|
||||
overflow: hidden; }
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Allows horizontal sprite positioning optimized for a single row of sprites.
|
||||
@mixin sprite-column($col, $width: $sprite-image-default-width, $margin: $sprite-default-margin) {
|
||||
@include sprite-position($col, 1, $width, 0px, $margin); }
|
||||
@include sprite-position($col, 1, $width, 0px, $margin);
|
||||
}
|
||||
|
||||
// Allows vertical sprite positioning optimized for a single column of sprites.
|
||||
@mixin sprite-row($row, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
|
||||
@include sprite-position(1, $row, 0px, $height, $margin); }
|
||||
@include sprite-position(1, $row, 0px, $height, $margin);
|
||||
}
|
||||
|
||||
// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
|
||||
@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) {
|
||||
$x: ($col - 1) * -$width - ($col - 1) * $margin;
|
||||
$y: ($row - 1) * -$height - ($row - 1) * $margin;
|
||||
background-position: $x $y; }
|
||||
background-position: $x $y;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Similar to 'sprite-replace-text-with-dimensions' but does not autmaticly set the demensions
|
||||
@mixin sprite-replace-text ($map, $sprite, $dimensions: false, $offset-x: 0, $offset-y: 0) {
|
||||
@include hide-text;
|
||||
@include sprite($map, $sprite, $dimensions, $offset-x, $offset-y);
|
||||
background-image: $map;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// Similar to 'replace-text-with-dimensions' but with sprites
|
||||
// To use, create your sprite and then pass it in the `$map` param
|
||||
// The name of the image in the sprite folder should be `$img-name`
|
||||
@mixin sprite-replace-text-with-dimensions ($map, $sprite, $offset-x: 0, $offset-y: 0){
|
||||
@include sprite-replace-text ($map, $sprite, true, $offset-x, $offset-y);
|
||||
}
|
||||
@ -3,11 +3,13 @@
|
||||
background-color: $header-color;
|
||||
&.even, &:nth-child(2n) {
|
||||
background-color: $header-color - $dark-intersection; } }
|
||||
tr.odd {
|
||||
td {
|
||||
background-color: $odd-row-color;
|
||||
&.even, &:nth-child(2n) {
|
||||
background-color: $odd-row-color - $dark-intersection; } } }
|
||||
tr {
|
||||
&.odd, &:nth-child(2n+1) {
|
||||
td {
|
||||
background-color: $odd-row-color;
|
||||
&.even, &:nth-child(2n) {
|
||||
background-color: $odd-row-color - $dark-intersection; } } }
|
||||
}
|
||||
tr.even {
|
||||
td {
|
||||
background-color: $even-row-color;
|
||||
|
||||
@ -17,7 +17,7 @@ module Compass
|
||||
def shared_extension_paths
|
||||
@shared_extension_paths ||= begin
|
||||
if ENV["HOME"] && File.directory?(ENV["HOME"])
|
||||
[File.expand_path("~/.compass/extensions")]
|
||||
[File.join(ENV["HOME"], ".compass", "extensions")]
|
||||
else
|
||||
[]
|
||||
end
|
||||
@ -30,3 +30,6 @@ end
|
||||
%w(configuration frameworks app_integration actions compiler).each do |lib|
|
||||
require "compass/#{lib}"
|
||||
end
|
||||
|
||||
# for rails upgrade warnings in 0.12
|
||||
require 'compass/app_integration/rails'
|
||||
|
||||
@ -65,6 +65,7 @@ module Compass
|
||||
end
|
||||
|
||||
def remove(file_name)
|
||||
file_name ||= ''
|
||||
if File.directory?(file_name)
|
||||
FileUtils.rm_rf file_name
|
||||
log_action :remove, basename(file_name)+"/", options
|
||||
@ -106,6 +107,5 @@ module Compass
|
||||
logger.record(action, file, options[:extra].to_s)
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,24 +1,39 @@
|
||||
%w(stand_alone rails merb).each do |lib|
|
||||
require "compass/app_integration/#{lib}"
|
||||
end
|
||||
require "compass/app_integration/stand_alone"
|
||||
|
||||
module Compass
|
||||
module AppIntegration
|
||||
module Helpers
|
||||
def lookup(project_type)
|
||||
eval "Compass::AppIntegration::#{camelize(project_type)}"
|
||||
rescue NameError
|
||||
raise Compass::Error, "No application integration exists for #{project_type}"
|
||||
#attr_accessor :project_types
|
||||
DEAFULT_PROJECT_TYPES = {
|
||||
:stand_alone => "Compass::AppIntegration::StandAlone"
|
||||
}
|
||||
|
||||
def init
|
||||
@project_types ||= DEAFULT_PROJECT_TYPES.dup
|
||||
end
|
||||
|
||||
protected
|
||||
def project_types
|
||||
@project_types
|
||||
end
|
||||
|
||||
# Stolen from ActiveSupport
|
||||
def camelize(s)
|
||||
s.to_s.gsub(/\/(.?)/) { "::#{$1.upcase}" }.gsub(/(?:^|_)(.)/) { $1.upcase }
|
||||
def default?
|
||||
@project_types.keys === DEAFULT_PROJECT_TYPES.keys
|
||||
end
|
||||
|
||||
def lookup(type)
|
||||
unless @project_types[type].nil?
|
||||
eval @project_types[type]
|
||||
else
|
||||
raise Compass::Error, "No application integration exists for #{type}"
|
||||
end
|
||||
end
|
||||
|
||||
def register(type, klass)
|
||||
@project_types[type] = klass
|
||||
end
|
||||
|
||||
end
|
||||
extend Helpers
|
||||
init
|
||||
end
|
||||
end
|
||||
|
||||
@ -1 +0,0 @@
|
||||
require 'compass/app_integration/merb/runtime' if defined?(Merb::Plugins)
|
||||
@ -1,63 +0,0 @@
|
||||
# To configure Merb to use compass do the following:
|
||||
#
|
||||
# Add dependencies to config/dependencies.rb
|
||||
#
|
||||
# dependency "haml", ">=2.2.0"
|
||||
# dependency "merb-haml", merb_gems_version
|
||||
# dependency "chriseppstein-compass", :require_as => 'compass'
|
||||
#
|
||||
#
|
||||
# To use a different sass stylesheets locations as is recommended by compass
|
||||
# add this configuration to your configuration block:
|
||||
#
|
||||
# Merb::BootLoader.before_app_loads do
|
||||
# Merb::Plugins.config[:compass] = {
|
||||
# :stylesheets => "app/stylesheets",
|
||||
# :compiled_stylesheets => "public/stylesheets/compiled"
|
||||
# }
|
||||
# end
|
||||
#
|
||||
module Compass
|
||||
def self.setup_template_location
|
||||
# default the compass configuration if they didn't set it up yet.
|
||||
Merb::Plugins.config[:compass] ||= {}
|
||||
|
||||
# default sass stylesheet location unless configured to something else
|
||||
Merb::Plugins.config[:compass][:stylesheets] ||= Merb.dir_for(:stylesheet) / "sass"
|
||||
|
||||
# default sass css location unless configured to something else
|
||||
Merb::Plugins.config[:compass][:compiled_stylesheets] ||= Merb.dir_for(:stylesheet)
|
||||
|
||||
#define the template hash for the project stylesheets as well as the framework stylesheets.
|
||||
template_location = {
|
||||
Merb::Plugins.config[:compass][:stylesheets] => Merb::Plugins.config[:compass][:compiled_stylesheets]
|
||||
}
|
||||
Compass::Frameworks::ALL.each do |framework|
|
||||
template_location[framework.stylesheets_directory] = Merb::Plugins.config[:compass][:compiled_stylesheets]
|
||||
end
|
||||
|
||||
# merge existing template locations if present
|
||||
if Merb::Plugins.config[:sass][:template_location].is_a?(Hash)
|
||||
template_location.merge!(Merb::Plugins.config[:sass][:template_location])
|
||||
Merb::Plugins.config[:sass][:template_location] = template_location
|
||||
end
|
||||
|
||||
#configure Sass to know about all these sass locations.
|
||||
Sass::Plugin.options[:template_location] = template_location
|
||||
end
|
||||
end
|
||||
|
||||
Merb::BootLoader.after_app_loads do
|
||||
#set up sass if haml load didn't do it -- this happens when using a non-default stylesheet location.
|
||||
unless defined?(Sass::Plugin)
|
||||
require "sass/plugin"
|
||||
if Merb::Plugins.config[:sass]
|
||||
Sass::Plugin.options = Merb::Plugins.config[:sass]
|
||||
# support old (deprecatd Merb::Config[:sass] option)
|
||||
elsif Merb::Config[:sass]
|
||||
Sass::Plugin.options = Merb::Config[:sass]
|
||||
end
|
||||
end
|
||||
|
||||
Compass.setup_template_location
|
||||
end
|
||||
@ -1,66 +1,18 @@
|
||||
%w(configuration_defaults installer).each do |lib|
|
||||
require "compass/app_integration/rails/#{lib}"
|
||||
end
|
||||
|
||||
require 'compass/app_integration/rails/runtime' if defined?(ActionController::Base)
|
||||
|
||||
|
||||
module Compass
|
||||
module AppIntegration
|
||||
module Rails
|
||||
|
||||
extend self
|
||||
|
||||
def booted!
|
||||
Compass::AppIntegration::Rails.const_set(:BOOTED, true)
|
||||
def initialize!
|
||||
Compass::Util.compass_warn("WARNING: Please remove the call to Compass::AppIntegration::Rails.initialize! from #{caller[0].sub(/:.*$/,'')};\nWARNING: This is done automatically now. If this is default compass initializer you can just remove the file.")
|
||||
end
|
||||
|
||||
def booted?
|
||||
defined?(Compass::AppIntegration::Rails::BOOTED) && Compass::AppIntegration::Rails::BOOTED
|
||||
end
|
||||
|
||||
def installer(*args)
|
||||
Installer.new(*args)
|
||||
end
|
||||
|
||||
def configuration
|
||||
Compass::Configuration::Data.new('rails').
|
||||
extend(ConfigurationDefaults)
|
||||
end
|
||||
|
||||
def env
|
||||
env_production? ? :production : :development
|
||||
end
|
||||
|
||||
def env_production?
|
||||
if defined?(::Rails) && ::Rails.respond_to?(:env)
|
||||
::Rails.env.production?
|
||||
elsif defined?(RAILS_ENV)
|
||||
RAILS_ENV == "production"
|
||||
end
|
||||
end
|
||||
|
||||
def root
|
||||
if defined?(::Rails) && ::Rails.respond_to?(:root)
|
||||
::Rails.root
|
||||
elsif defined?(RAILS_ROOT)
|
||||
RAILS_ROOT
|
||||
end
|
||||
Compass::Util.compass_warn("WARNING: Please remove the call to Compass::AppIntegration::Rails.root from #{caller[0].sub(/:.*$/,'')};\nWARNING: This is done automatically now. If this is default compass initializer you can just remove the file.")
|
||||
::Rails.root
|
||||
end
|
||||
|
||||
def initialize!(config = nil)
|
||||
if booted?
|
||||
Compass::Util.compass_warn("Warning: Compass was booted twice. Compass has a Railtie now; please remove your intializer.")
|
||||
else
|
||||
booted!
|
||||
end
|
||||
config ||= Compass.detect_configuration_file(root)
|
||||
Compass.add_project_configuration(config, :project_type => :rails)
|
||||
Compass.discover_extensions!
|
||||
Compass.configure_sass_plugin!
|
||||
Compass.handle_configuration_change!
|
||||
def env
|
||||
Compass::Util.compass_warn("WARNING: Please remove the call to Compass::AppIntegration::Rails.env from #{caller[0].sub(/:.*$/,'')};\nWARNING: This is done automatically now. If this is default compass initializer you can just remove the file.")
|
||||
::Rails.env
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
# :stopdoc:
|
||||
module ActionController
|
||||
class Base
|
||||
def process_with_compass(*args)
|
||||
Sass::Plugin.rails_controller = self
|
||||
begin
|
||||
process_without_compass(*args)
|
||||
ensure
|
||||
Sass::Plugin.rails_controller = nil
|
||||
end
|
||||
end
|
||||
alias_method_chain :process, :compass
|
||||
end
|
||||
end
|
||||
# :startdoc:
|
||||
@ -1,5 +0,0 @@
|
||||
module Sass::Plugin
|
||||
class << self
|
||||
attr_accessor :rails_controller
|
||||
end
|
||||
end
|
||||
@ -1,18 +0,0 @@
|
||||
module Compass::SassExtensions::Functions::Urls
|
||||
def image_url_with_rails_integration(path, only_path = Sass::Script::Bool.new(false), cache_buster = Sass::Script::Bool.new(true))
|
||||
if (@controller = Sass::Plugin.rails_controller) && @controller.respond_to?(:request) && @controller.request
|
||||
begin
|
||||
if only_path.to_bool
|
||||
Sass::Script::String.new image_path(path.value)
|
||||
else
|
||||
Sass::Script::String.new "url(#{image_path(path.value)})"
|
||||
end
|
||||
ensure
|
||||
@controller = nil
|
||||
end
|
||||
else
|
||||
image_url_without_rails_integration(path, only_path, cache_buster)
|
||||
end
|
||||
end
|
||||
alias_method_chain :image_url, :rails_integration
|
||||
end
|
||||
@ -1,46 +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("project")
|
||||
end
|
||||
data.project_type = :rails # Forcing this makes sure all the rails defaults will be loaded.
|
||||
data
|
||||
end
|
||||
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.initialize!(app.config.compass)
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -1,77 +0,0 @@
|
||||
module Compass
|
||||
module AppIntegration
|
||||
module Rails
|
||||
module ConfigurationDefaults
|
||||
|
||||
def project_type_without_default
|
||||
:rails
|
||||
end
|
||||
|
||||
def default_sass_dir
|
||||
if Sass::Util.ap_geq?('3.1.0.beta')
|
||||
File.join("app", "assets", "stylesheets")
|
||||
else
|
||||
File.join("app", "stylesheets")
|
||||
end
|
||||
end
|
||||
|
||||
def default_css_dir
|
||||
File.join("public", "stylesheets")
|
||||
end
|
||||
|
||||
def default_images_dir
|
||||
File.join("public", "images")
|
||||
end
|
||||
|
||||
def default_fonts_dir
|
||||
File.join("public", "fonts")
|
||||
end
|
||||
|
||||
def default_javascripts_dir
|
||||
if Sass::Util.ap_geq?('3.1.0.beta')
|
||||
File.join("app", "assets", "javascripts")
|
||||
else
|
||||
File.join("public", "javascripts")
|
||||
end
|
||||
end
|
||||
|
||||
def default_http_images_path
|
||||
"#{top_level.http_path}images"
|
||||
end
|
||||
|
||||
def default_http_javascripts_path
|
||||
"#{top_level.http_path}javascripts"
|
||||
end
|
||||
|
||||
def default_http_fonts_path
|
||||
"#{top_level.http_path}fonts"
|
||||
end
|
||||
|
||||
def default_http_stylesheets_path
|
||||
"#{top_level.http_path}stylesheets"
|
||||
end
|
||||
|
||||
def default_extensions_dir
|
||||
File.join("vendor", "plugins", "compass_extensions")
|
||||
end
|
||||
|
||||
def default_cache_dir
|
||||
File.join("tmp", "sass-cache")
|
||||
end
|
||||
|
||||
def default_project_path
|
||||
project_path = Compass::AppIntegration::Rails.root
|
||||
end
|
||||
|
||||
def default_http_path
|
||||
"/" # XXX Where is/was this stored in the Rails config?
|
||||
end
|
||||
|
||||
def default_environment
|
||||
Compass::AppIntegration::Rails.env
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -1,182 +0,0 @@
|
||||
module Compass
|
||||
module Installers
|
||||
class Base
|
||||
end
|
||||
class ManifestInstaller < Base
|
||||
end
|
||||
end
|
||||
|
||||
module AppIntegration
|
||||
module Rails
|
||||
class Installer < Compass::Installers::ManifestInstaller
|
||||
|
||||
def completed_configuration
|
||||
config = {}
|
||||
config[:sass_dir] = prompt_sass_dir unless sass_dir_without_default
|
||||
config[:css_dir] = prompt_css_dir unless css_dir_without_default
|
||||
config unless config.empty?
|
||||
end
|
||||
|
||||
def write_configuration_files(config_file = nil)
|
||||
config_file ||= targetize('config/compass.rb')
|
||||
unless File.exists?(config_file)
|
||||
directory File.dirname(config_file)
|
||||
write_file config_file, config_contents
|
||||
end
|
||||
unless rails3?
|
||||
directory File.dirname(targetize('config/initializers/compass.rb'))
|
||||
write_file targetize('config/initializers/compass.rb'), initializer_contents
|
||||
end
|
||||
end
|
||||
|
||||
def rails3?
|
||||
File.exists?(targetize('config/application.rb'))
|
||||
end
|
||||
|
||||
def prepare
|
||||
write_configuration_files
|
||||
end
|
||||
|
||||
def gem_config_instructions
|
||||
if rails3?
|
||||
%Q{Add the following to your Gemfile:\n\n gem "compass", ">= #{Compass::VERSION}"}
|
||||
else
|
||||
%Q{Add the following to your environment.rb:\n\n config.gem "compass", :version => ">= #{Compass::VERSION}"}
|
||||
end
|
||||
end
|
||||
|
||||
def finalize(options = {})
|
||||
if options[:create]
|
||||
puts <<-NEXTSTEPS
|
||||
|
||||
Congratulations! Your rails project has been configured to use Compass.
|
||||
Just a couple more things left to do.
|
||||
|
||||
#{gem_config_instructions}
|
||||
|
||||
Then, make sure you restart your server.
|
||||
|
||||
Sass will automatically compile your stylesheets during the next
|
||||
page request and keep them up to date when they change.
|
||||
NEXTSTEPS
|
||||
end
|
||||
unless options[:prepare]
|
||||
if manifest.has_stylesheet?
|
||||
puts "\nNow add these lines to the head of your layout(s):\n\n"
|
||||
puts stylesheet_links
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def hamlize?
|
||||
# XXX Is there a better way to detect haml in a particular rails project?
|
||||
require 'haml'
|
||||
true
|
||||
rescue LoadError
|
||||
false
|
||||
end
|
||||
|
||||
def install_location_for_html(to, options)
|
||||
separate("public/#{pattern_name_as_dir}#{to}")
|
||||
end
|
||||
|
||||
def prompt_sass_dir
|
||||
if rails3?
|
||||
nil
|
||||
else
|
||||
recommended_location = separate('app/stylesheets')
|
||||
default_location = separate('public/stylesheets/sass')
|
||||
print %Q{Compass recommends that you keep your stylesheets in #{recommended_location}
|
||||
instead of the Sass default location of #{default_location}.
|
||||
Is this OK? (Y/n) }
|
||||
answer = $stdin.gets.downcase[0]
|
||||
answer == ?n ? default_location : recommended_location
|
||||
end
|
||||
end
|
||||
|
||||
def prompt_css_dir
|
||||
if rails3?
|
||||
nil
|
||||
else
|
||||
recommended_location = separate("public/stylesheets/compiled")
|
||||
default_location = separate("public/stylesheets")
|
||||
puts
|
||||
print %Q{Compass recommends that you keep your compiled css in #{recommended_location}/
|
||||
instead the Sass default of #{default_location}/.
|
||||
However, if you're exclusively using Sass, then #{default_location}/ is recommended.
|
||||
Emit compiled stylesheets to #{recommended_location}/? (Y/n) }
|
||||
answer = $stdin.gets
|
||||
answer = answer.downcase[0]
|
||||
answer == ?n ? default_location : recommended_location
|
||||
end
|
||||
end
|
||||
|
||||
def config_contents
|
||||
project_path, Compass.configuration.project_path = Compass.configuration.project_path, nil
|
||||
("# This configuration file works with both the Compass command line tool and within Rails.\n" +
|
||||
Compass.configuration.serialize)
|
||||
ensure
|
||||
Compass.configuration.project_path = project_path
|
||||
end
|
||||
|
||||
def initializer_contents
|
||||
%Q{require 'compass'
|
||||
|require 'compass/app_integration/rails'
|
||||
|Compass::AppIntegration::Rails.initialize!
|
||||
|}.gsub(/^\s+\|/,'')
|
||||
end
|
||||
|
||||
def stylesheet_prefix
|
||||
if css_dir.length >= 19
|
||||
"#{css_dir[19..-1]}/"
|
||||
else
|
||||
nil
|
||||
end
|
||||
end
|
||||
|
||||
def stylesheet_links
|
||||
if hamlize?
|
||||
haml_stylesheet_links
|
||||
else
|
||||
html_stylesheet_links
|
||||
end
|
||||
end
|
||||
|
||||
def haml_stylesheet_links
|
||||
html = "%head\n"
|
||||
manifest.each_stylesheet do |stylesheet|
|
||||
# Skip partials.
|
||||
next if File.basename(stylesheet.from)[0..0] == "_"
|
||||
ss_line = " = stylesheet_link_tag '#{stylesheet_prefix}#{stylesheet.to.sub(/\.s[ac]ss$/,'.css')}'"
|
||||
if stylesheet.options[:media]
|
||||
ss_line += ", :media => '#{stylesheet.options[:media]}'"
|
||||
end
|
||||
if stylesheet.options[:condition]
|
||||
ss_line = " /[if #{stylesheet.options[:condition]}]\n " + ss_line
|
||||
end
|
||||
html << ss_line + "\n"
|
||||
end
|
||||
html
|
||||
end
|
||||
def html_stylesheet_links
|
||||
html = "<head>\n"
|
||||
manifest.each_stylesheet do |stylesheet|
|
||||
# Skip partials.
|
||||
next if File.basename(stylesheet.from)[0..0] == "_"
|
||||
ss_line = "<%= stylesheet_link_tag '#{stylesheet_prefix}#{stylesheet.to.sub(/\.s[ac]ss$/,'.css')}'"
|
||||
if stylesheet.options[:media]
|
||||
ss_line += ", :media => '#{stylesheet.options[:media]}'"
|
||||
end
|
||||
ss_line += " %>"
|
||||
if stylesheet.options[:condition]
|
||||
ss_line = "<!--[if #{stylesheet.options[:condition]}]>" + ss_line + "<![endif]-->"
|
||||
end
|
||||
html << " #{ss_line}\n"
|
||||
end
|
||||
html << "</head>"
|
||||
html
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -1,27 +0,0 @@
|
||||
unless defined?(Compass::RAILS_LOADED)
|
||||
Compass::RAILS_LOADED = true
|
||||
begin
|
||||
require 'action_pack/version'
|
||||
if ActionPack::VERSION::MAJOR >= 3
|
||||
# TODO figure something out so image_path works with rails integration
|
||||
%w(railtie).each do |lib|
|
||||
require "compass/app_integration/rails/actionpack3/#{lib}"
|
||||
end
|
||||
else
|
||||
%w(action_controller sass_plugin urls).each do |lib|
|
||||
require "compass/app_integration/rails/actionpack2/#{lib}"
|
||||
end
|
||||
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."
|
||||
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
|
||||
@ -1,78 +0,0 @@
|
||||
# =================================================================
|
||||
# Compass Ruby on Rails Installer (template) v.1.0
|
||||
# written by Derek Perez (derek@derekperez.com)
|
||||
# -----------------------------------------------------------------
|
||||
# NOTE: This installer is designed to work as a Rails template,
|
||||
# and can only be used with Rails 2.3+.
|
||||
# -----------------------------------------------------------------
|
||||
# Copyright (c) 2009 Derek Perez
|
||||
#
|
||||
# Permission is hereby granted, free of charge, to any person
|
||||
# obtaining a copy of this software and associated documentation
|
||||
# files (the "Software"), to deal in the Software without
|
||||
# restriction, including without limitation the rights to use,
|
||||
# copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
# copies of the Software, and to permit persons to whom the
|
||||
# Software is furnished to do so, subject to the following
|
||||
# conditions:
|
||||
#
|
||||
# The above copyright notice and this permission notice shall be
|
||||
# included in all copies or substantial portions of the Software.
|
||||
#
|
||||
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
# EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
# OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
# NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
# HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
# WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
# FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
# OTHER DEALINGS IN THE SOFTWARE.
|
||||
# =================================================================
|
||||
|
||||
# Determine if we use sudo, defaults to true unless we are
|
||||
# on win32, cygwin, or mingw32 or they ask us not to
|
||||
def sudo_is_an_option?
|
||||
return false if RUBY_PLATFORM =~ /(win|w)32$/ # true if win32, cygwin or mingw32
|
||||
return false if ENV['NO_SUDO'] =~ /true/i
|
||||
return true
|
||||
end
|
||||
|
||||
puts "==================================================="
|
||||
puts "Welcome to the Compass Installer for Ruby on Rails!"
|
||||
puts "==================================================="
|
||||
puts
|
||||
|
||||
# css framework prompt
|
||||
css_framework = ask("What CSS Framework install do you want to use with Compass?")
|
||||
|
||||
# sass storage prompt
|
||||
sass_dir = ask("Where would you like to keep your sass files within your project? (default: 'app/stylesheets')")
|
||||
sass_dir = "app/stylesheets" if Compass::Util.blank?(sass_dir)
|
||||
|
||||
# compiled css storage prompt
|
||||
css_dir = ask("Where would you like Compass to store your compiled css files? (default: 'public/stylesheets/compiled')")
|
||||
css_dir = "public/stylesheets/compiled" if Compass::Util.blank?(css_dir)
|
||||
|
||||
# use sudo for gem commands?
|
||||
use_sudo = nil
|
||||
if sudo_is_an_option? # dont give them the option if they are on a system that can't use sudo (aka windows)
|
||||
use_sudo = yes?("Use sudo for the gem commands? (the default for your system is #{sudo_is_an_option? ? 'yes' : 'no'})")
|
||||
end
|
||||
use_sudo = sudo_is_an_option? if Compass::Util.blank?(use_sudo)
|
||||
|
||||
# define dependencies
|
||||
gem "haml", :version => ">=3.0.0"
|
||||
gem "compass", :version => ">= 0.10.0"
|
||||
|
||||
# install and unpack
|
||||
rake "gems:install GEM=haml --trace", :sudo => use_sudo
|
||||
rake "gems:install GEM=compass --trace", :sudo => use_sudo
|
||||
rake "gems:unpack GEM=compass --trace"
|
||||
|
||||
# build out compass command
|
||||
compass_command = "compass init rails . --css-dir=#{css_dir} --sass-dir=#{sass_dir} "
|
||||
compass_command << "--using #{css_framework} " unless Compass::Util.blank?(css_framework)
|
||||
|
||||
# integrate it!
|
||||
run "haml --rails ."
|
||||
run compass_command
|
||||
@ -30,7 +30,7 @@ module Compass
|
||||
def perform
|
||||
compiler = new_compiler_instance
|
||||
compiler.clean!
|
||||
Compass::SpriteImporter.find_all_sprite_map_files(Compass.configuration.images_path).each do |sprite|
|
||||
Compass::SpriteImporter.find_all_sprite_map_files(Compass.configuration.generated_images_path).each do |sprite|
|
||||
remove sprite
|
||||
end
|
||||
end
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user