Merge branch 'master' into docs
* master: (48 commits) Record current revision for release. Regenerated gemspec for version 0.10.0.rc1 Release Candidate 1 Fix a bug in 1.8.6 where readbyte is not defined. Record current revision for release. Regenerated gemspec for version 0.10.0.pre9 Update changelog for release. Version bump for v0.10.pre9 [Compass Core] Fix a ruby 1.9 bug in the image_size helper functions for jpeg images. Try to fix a test failure that only happens on RunCodeRun. [Compass Core] Silence a deprecation warning. Fixed a typo in the inline list utility. Regenerated gemspec for version 0.10.0.pre8 Version bump to .pre8 [Rails] Fix rails boot sequence in Rails 2.3.x environments. Record current revision for release. Regenerated gemspec for version 0.10.0.pre7 Version Bump A better error message if a color stop list is not passed in. Fix for rgba colors with the new gradient mixins. ... Conflicts: frameworks/compass/stylesheets/compass/css3/_gradient.sass
This commit is contained in:
commit
fd8162cedd
@ -1,6 +1,68 @@
|
|||||||
COMPASS CHANGELOG
|
COMPASS CHANGELOG
|
||||||
=================
|
=================
|
||||||
|
|
||||||
|
0.10.0.pre9 (March 6, 2010)
|
||||||
|
---------------------------
|
||||||
|
|
||||||
|
* Fix a ruby 1.9 bug in the image_size helper functions for jpeg images.
|
||||||
|
* Silence a deprecation warning.
|
||||||
|
|
||||||
|
|
||||||
|
0.10.0.pre7 & 0.10.0.pre8 (February 23, 2010)
|
||||||
|
---------------------------------------------
|
||||||
|
|
||||||
|
* Rails 3 compatibility fixes
|
||||||
|
* Fix for rgba colors with the new gradient mixins
|
||||||
|
* A better error message if a color stop list is not passed in to the gradient mixins.
|
||||||
|
|
||||||
|
0.10.0.pre6 (February 22, 2010)
|
||||||
|
-------------------------------
|
||||||
|
|
||||||
|
**IMPORTANT:**
|
||||||
|
|
||||||
|
* Rails users need to update their compass initializer.
|
||||||
|
* The CSS 3 Gradient mixins were re-written and their usage has changed.
|
||||||
|
|
||||||
|
Read on for the details:
|
||||||
|
|
||||||
|
### CLI
|
||||||
|
* Fixed some issues with colorized output.
|
||||||
|
* Don't force the user to specify the configuration path when calling compass config
|
||||||
|
|
||||||
|
### Compass Core
|
||||||
|
* Fix to the bang_hack mixin (Credit: Mark Rajcok)
|
||||||
|
* Support :first-child and :last-child pseudo selectors for +horizontal-list. (Credit: Cody Robbins)
|
||||||
|
* Clear the sticky footer so that it works correctly with grid layouts.
|
||||||
|
* The css3 gradient module has been re-written and has a new, much simpler mixins. If you have been using the css3 gradient mixins, you'll need to update your sass stylesheets. The new mixins can be seen in action [here](http://compass-style.org/examples/css3/gradients.html).
|
||||||
|
* Added new helper functions: `image_width("path/to/image.png")` & `image_height("path/to/image.png")` that return the size in pixels. (Credit: Deepak Jois & Richard Aday)
|
||||||
|
|
||||||
|
### Blueprint
|
||||||
|
* Take margins into account in liquid grid. (Credit: Christoffer Eliesen)
|
||||||
|
|
||||||
|
### Rails
|
||||||
|
* Several Rails 3 bug fixes (Credit: Jacques Crocker)
|
||||||
|
* Don't set unset options on the Sass::Plugin
|
||||||
|
* Fixed a setup bug and handle compass configuration changes at rails boot.
|
||||||
|
|
||||||
|
**IMPORTANT:** Existing rails projects _must_ change their compass initializer file to:
|
||||||
|
|
||||||
|
require 'compass'
|
||||||
|
rails_root = (defined?(Rails) ? Rails.root : RAILS_ROOT).to_s
|
||||||
|
Compass.add_project_configuration(File.join(rails_root, "config", "compass.rb"))
|
||||||
|
Compass.configure_sass_plugin!
|
||||||
|
Compass.handle_configuration_change!
|
||||||
|
|
||||||
|
### Internals
|
||||||
|
* New APIs for dealing with configuration changes and accessing a compiler instance.
|
||||||
|
* Provide a convenience function for discovering extensions: `Compass.discover_extensions!` that can be called during project configuration w/ other ruby frameworks.
|
||||||
|
|
||||||
|
### Extensions
|
||||||
|
|
||||||
|
* Don't force an extension to register itself just because it has ruby code.
|
||||||
|
This makes it easier for extensions to provide Sass functions from ruby.
|
||||||
|
|
||||||
|
Special thanks to Daniel Hofstetter for fixing my typos.
|
||||||
|
|
||||||
0.10.0.pre5 (January 18, 2010)
|
0.10.0.pre5 (January 18, 2010)
|
||||||
------------------------------
|
------------------------------
|
||||||
* Fixed a bug in the grid builder in ruby 1.8.6 (Credit: [Richard Wöber][der-rich])
|
* Fixed a bug in the grid builder in ruby 1.8.6 (Credit: [Richard Wöber][der-rich])
|
||||||
|
2
REVISION
2
REVISION
@ -1 +1 @@
|
|||||||
9503512782eba7e387ba0dec14e5cfe1f3c0f22b
|
98908c49780d58a43681c484bb36c6ace0cc2d85
|
4
Rakefile
4
Rakefile
@ -3,11 +3,13 @@ if ENV['RUN_CODE_RUN']
|
|||||||
if File.directory?("haml")
|
if File.directory?("haml")
|
||||||
Dir.chdir("haml") do
|
Dir.chdir("haml") do
|
||||||
sh "git", "fetch"
|
sh "git", "fetch"
|
||||||
sh "git", "reset", "--hard", "origin/stable"
|
|
||||||
end
|
end
|
||||||
else
|
else
|
||||||
sh "git", "clone", "git://github.com/nex3/haml.git"
|
sh "git", "clone", "git://github.com/nex3/haml.git"
|
||||||
end
|
end
|
||||||
|
Dir.chdir("haml") do
|
||||||
|
sh "git", "reset", "--hard", "origin/stable"
|
||||||
|
end
|
||||||
$LOAD_PATH.unshift "haml/lib"
|
$LOAD_PATH.unshift "haml/lib"
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -2,4 +2,4 @@
|
|||||||
:patch: 0
|
:patch: 0
|
||||||
:major: 0
|
:major: 0
|
||||||
:minor: 10
|
:minor: 10
|
||||||
:build: pre5
|
:build: rc1
|
||||||
|
@ -5,11 +5,11 @@
|
|||||||
|
|
||||||
Gem::Specification.new do |s|
|
Gem::Specification.new do |s|
|
||||||
s.name = %q{compass}
|
s.name = %q{compass}
|
||||||
s.version = "0.10.0.pre5"
|
s.version = "0.10.0.rc1"
|
||||||
|
|
||||||
s.required_rubygems_version = Gem::Requirement.new("> 1.3.1") if s.respond_to? :required_rubygems_version=
|
s.required_rubygems_version = Gem::Requirement.new("> 1.3.1") if s.respond_to? :required_rubygems_version=
|
||||||
s.authors = ["Chris Eppstein"]
|
s.authors = ["Chris Eppstein"]
|
||||||
s.date = %q{2010-01-19}
|
s.date = %q{2010-03-06}
|
||||||
s.default_executable = %q{compass}
|
s.default_executable = %q{compass}
|
||||||
s.description = %q{Compass is a Sass-based Stylesheet Framework that streamlines the creation and maintainance of CSS.}
|
s.description = %q{Compass is a Sass-based Stylesheet Framework that streamlines the creation and maintainance of CSS.}
|
||||||
s.email = %q{chris@eppsteins.net}
|
s.email = %q{chris@eppsteins.net}
|
||||||
@ -107,15 +107,37 @@ Gem::Specification.new do |s|
|
|||||||
"examples/compass/sticky_footer.html.haml",
|
"examples/compass/sticky_footer.html.haml",
|
||||||
"examples/compass/utilities.html.haml",
|
"examples/compass/utilities.html.haml",
|
||||||
"examples/css3/config.rb",
|
"examples/css3/config.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/README.markdown",
|
||||||
|
"examples/css3/extensions/compass-colors/VERSION.yml",
|
||||||
|
"examples/css3/extensions/compass-colors/example/config.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/example/src/_split_compliment_theme.sass",
|
||||||
|
"examples/css3/extensions/compass-colors/example/src/screen.sass",
|
||||||
|
"examples/css3/extensions/compass-colors/lib/compass-colors.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/lib/compass-colors/compass_extension.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/lib/compass-colors/hsl.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/lib/compass-colors/sass_extensions.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/spec/approximate_color_matching.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/spec/sass_extensions_spec.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/analogous/_theme.sass",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/analogous/manifest.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/basic/_theme.sass",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/basic/manifest.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/complementary/_theme.sass",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/complementary/manifest.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/split_complement/_theme.sass",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/split_complement/manifest.rb",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/triadic/_theme.sass",
|
||||||
|
"examples/css3/extensions/compass-colors/templates/triadic/manifest.rb",
|
||||||
"examples/css3/extensions/fancy-fonts/templates/project/Vtks Revolt.ttf",
|
"examples/css3/extensions/fancy-fonts/templates/project/Vtks Revolt.ttf",
|
||||||
"examples/css3/extensions/fancy-fonts/templates/project/angelina.ttf",
|
"examples/css3/extensions/fancy-fonts/templates/project/angelina.ttf",
|
||||||
"examples/css3/extensions/fancy-fonts/templates/project/fancy-fonts.sass",
|
"examples/css3/extensions/fancy-fonts/templates/project/fancy-fonts.sass",
|
||||||
"examples/css3/extensions/fancy-fonts/templates/project/manifest.rb",
|
"examples/css3/extensions/fancy-fonts/templates/project/manifest.rb",
|
||||||
|
"examples/css3/gradients.html.haml",
|
||||||
"examples/css3/images/fresh-peas.jpg",
|
"examples/css3/images/fresh-peas.jpg",
|
||||||
"examples/css3/index.html.haml",
|
"examples/css3/index.html.haml",
|
||||||
"examples/css3/src/_base.sass",
|
"examples/css3/src/_base.sass",
|
||||||
"examples/css3/src/fancy-fonts.sass",
|
"examples/css3/src/fancy-fonts.sass",
|
||||||
"examples/css3/src/gradient.sass",
|
"examples/css3/src/gradients.sass",
|
||||||
"examples/css3/src/main.sass",
|
"examples/css3/src/main.sass",
|
||||||
"examples/css3/stylesheets/fonts/Vtks Revolt.ttf",
|
"examples/css3/stylesheets/fonts/Vtks Revolt.ttf",
|
||||||
"examples/css3/stylesheets/fonts/angelina.ttf",
|
"examples/css3/stylesheets/fonts/angelina.ttf",
|
||||||
@ -342,13 +364,13 @@ Gem::Specification.new do |s|
|
|||||||
"lib/compass/app_integration/merb.rb",
|
"lib/compass/app_integration/merb.rb",
|
||||||
"lib/compass/app_integration/merb/runtime.rb",
|
"lib/compass/app_integration/merb/runtime.rb",
|
||||||
"lib/compass/app_integration/rails.rb",
|
"lib/compass/app_integration/rails.rb",
|
||||||
"lib/compass/app_integration/rails/action_controller.rb",
|
"lib/compass/app_integration/rails/actionpack2/action_controller.rb",
|
||||||
|
"lib/compass/app_integration/rails/actionpack2/sass_plugin.rb",
|
||||||
|
"lib/compass/app_integration/rails/actionpack2/urls.rb",
|
||||||
"lib/compass/app_integration/rails/configuration_defaults.rb",
|
"lib/compass/app_integration/rails/configuration_defaults.rb",
|
||||||
"lib/compass/app_integration/rails/installer.rb",
|
"lib/compass/app_integration/rails/installer.rb",
|
||||||
"lib/compass/app_integration/rails/runtime.rb",
|
"lib/compass/app_integration/rails/runtime.rb",
|
||||||
"lib/compass/app_integration/rails/sass_plugin.rb",
|
|
||||||
"lib/compass/app_integration/rails/templates/compass-install-rails.rb",
|
"lib/compass/app_integration/rails/templates/compass-install-rails.rb",
|
||||||
"lib/compass/app_integration/rails/urls.rb",
|
|
||||||
"lib/compass/app_integration/stand_alone.rb",
|
"lib/compass/app_integration/stand_alone.rb",
|
||||||
"lib/compass/app_integration/stand_alone/configuration_defaults.rb",
|
"lib/compass/app_integration/stand_alone/configuration_defaults.rb",
|
||||||
"lib/compass/app_integration/stand_alone/installer.rb",
|
"lib/compass/app_integration/stand_alone/installer.rb",
|
||||||
@ -400,10 +422,11 @@ Gem::Specification.new do |s|
|
|||||||
"lib/compass/logger.rb",
|
"lib/compass/logger.rb",
|
||||||
"lib/compass/sass_extensions.rb",
|
"lib/compass/sass_extensions.rb",
|
||||||
"lib/compass/sass_extensions/functions.rb",
|
"lib/compass/sass_extensions/functions.rb",
|
||||||
"lib/compass/sass_extensions/functions/color_stop.rb",
|
|
||||||
"lib/compass/sass_extensions/functions/display.rb",
|
"lib/compass/sass_extensions/functions/display.rb",
|
||||||
"lib/compass/sass_extensions/functions/enumerate.rb",
|
"lib/compass/sass_extensions/functions/enumerate.rb",
|
||||||
"lib/compass/sass_extensions/functions/font_files.rb",
|
"lib/compass/sass_extensions/functions/font_files.rb",
|
||||||
|
"lib/compass/sass_extensions/functions/gradient_support.rb",
|
||||||
|
"lib/compass/sass_extensions/functions/image_size.rb",
|
||||||
"lib/compass/sass_extensions/functions/inline_image.rb",
|
"lib/compass/sass_extensions/functions/inline_image.rb",
|
||||||
"lib/compass/sass_extensions/functions/selectors.rb",
|
"lib/compass/sass_extensions/functions/selectors.rb",
|
||||||
"lib/compass/sass_extensions/functions/urls.rb",
|
"lib/compass/sass_extensions/functions/urls.rb",
|
||||||
@ -438,11 +461,20 @@ Gem::Specification.new do |s|
|
|||||||
"test/fixtures/stylesheets/blueprint/sass/print.sass",
|
"test/fixtures/stylesheets/blueprint/sass/print.sass",
|
||||||
"test/fixtures/stylesheets/blueprint/sass/screen.sass",
|
"test/fixtures/stylesheets/blueprint/sass/screen.sass",
|
||||||
"test/fixtures/stylesheets/blueprint/sass/typography.sass",
|
"test/fixtures/stylesheets/blueprint/sass/typography.sass",
|
||||||
|
"test/fixtures/stylesheets/compass/100x150.jpg",
|
||||||
"test/fixtures/stylesheets/compass/config.rb",
|
"test/fixtures/stylesheets/compass/config.rb",
|
||||||
|
"test/fixtures/stylesheets/compass/css/gradients.css",
|
||||||
|
"test/fixtures/stylesheets/compass/css/image_size.css",
|
||||||
"test/fixtures/stylesheets/compass/css/layout.css",
|
"test/fixtures/stylesheets/compass/css/layout.css",
|
||||||
"test/fixtures/stylesheets/compass/css/print.css",
|
"test/fixtures/stylesheets/compass/css/print.css",
|
||||||
"test/fixtures/stylesheets/compass/css/reset.css",
|
"test/fixtures/stylesheets/compass/css/reset.css",
|
||||||
"test/fixtures/stylesheets/compass/css/utilities.css",
|
"test/fixtures/stylesheets/compass/css/utilities.css",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.gif",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.jpeg",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.jpg",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.png",
|
||||||
|
"test/fixtures/stylesheets/compass/sass/gradients.sass",
|
||||||
|
"test/fixtures/stylesheets/compass/sass/image_size.sass",
|
||||||
"test/fixtures/stylesheets/compass/sass/layout.sass",
|
"test/fixtures/stylesheets/compass/sass/layout.sass",
|
||||||
"test/fixtures/stylesheets/compass/sass/print.sass",
|
"test/fixtures/stylesheets/compass/sass/print.sass",
|
||||||
"test/fixtures/stylesheets/compass/sass/reset.sass",
|
"test/fixtures/stylesheets/compass/sass/reset.sass",
|
||||||
@ -471,7 +503,7 @@ Gem::Specification.new do |s|
|
|||||||
s.rdoc_options = ["--charset=UTF-8"]
|
s.rdoc_options = ["--charset=UTF-8"]
|
||||||
s.require_paths = ["lib"]
|
s.require_paths = ["lib"]
|
||||||
s.rubyforge_project = %q{compass}
|
s.rubyforge_project = %q{compass}
|
||||||
s.rubygems_version = %q{1.3.5}
|
s.rubygems_version = %q{1.3.6}
|
||||||
s.summary = %q{A Real Stylesheet Framework}
|
s.summary = %q{A Real Stylesheet Framework}
|
||||||
s.test_files = [
|
s.test_files = [
|
||||||
"test/command_line_helper.rb",
|
"test/command_line_helper.rb",
|
||||||
@ -486,11 +518,20 @@ Gem::Specification.new do |s|
|
|||||||
"test/fixtures/stylesheets/blueprint/sass/print.sass",
|
"test/fixtures/stylesheets/blueprint/sass/print.sass",
|
||||||
"test/fixtures/stylesheets/blueprint/sass/screen.sass",
|
"test/fixtures/stylesheets/blueprint/sass/screen.sass",
|
||||||
"test/fixtures/stylesheets/blueprint/sass/typography.sass",
|
"test/fixtures/stylesheets/blueprint/sass/typography.sass",
|
||||||
|
"test/fixtures/stylesheets/compass/100x150.jpg",
|
||||||
"test/fixtures/stylesheets/compass/config.rb",
|
"test/fixtures/stylesheets/compass/config.rb",
|
||||||
|
"test/fixtures/stylesheets/compass/css/gradients.css",
|
||||||
|
"test/fixtures/stylesheets/compass/css/image_size.css",
|
||||||
"test/fixtures/stylesheets/compass/css/layout.css",
|
"test/fixtures/stylesheets/compass/css/layout.css",
|
||||||
"test/fixtures/stylesheets/compass/css/print.css",
|
"test/fixtures/stylesheets/compass/css/print.css",
|
||||||
"test/fixtures/stylesheets/compass/css/reset.css",
|
"test/fixtures/stylesheets/compass/css/reset.css",
|
||||||
"test/fixtures/stylesheets/compass/css/utilities.css",
|
"test/fixtures/stylesheets/compass/css/utilities.css",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.gif",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.jpeg",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.jpg",
|
||||||
|
"test/fixtures/stylesheets/compass/images/100x150.png",
|
||||||
|
"test/fixtures/stylesheets/compass/sass/gradients.sass",
|
||||||
|
"test/fixtures/stylesheets/compass/sass/image_size.sass",
|
||||||
"test/fixtures/stylesheets/compass/sass/layout.sass",
|
"test/fixtures/stylesheets/compass/sass/layout.sass",
|
||||||
"test/fixtures/stylesheets/compass/sass/print.sass",
|
"test/fixtures/stylesheets/compass/sass/print.sass",
|
||||||
"test/fixtures/stylesheets/compass/sass/reset.sass",
|
"test/fixtures/stylesheets/compass/sass/reset.sass",
|
||||||
|
60
examples/css3/gradients.html.haml
Normal file
60
examples/css3/gradients.html.haml
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
!!!
|
||||||
|
%html
|
||||||
|
%head
|
||||||
|
%link(href="stylesheets/gradients.css" rel="stylesheet" type="text/css")
|
||||||
|
%body
|
||||||
|
%table
|
||||||
|
%thead
|
||||||
|
%th
|
||||||
|
%th.linear Linear
|
||||||
|
%th.radial Radial
|
||||||
|
%tbody
|
||||||
|
%tr.default
|
||||||
|
%th Default
|
||||||
|
%td.linear <br><br><br>
|
||||||
|
%td.radial <br><br><br>
|
||||||
|
%tr.default
|
||||||
|
%th
|
||||||
|
%td.linear-code
|
||||||
|
%td.radial-code
|
||||||
|
%tr.top-left
|
||||||
|
%th Top Left
|
||||||
|
%td.linear <br><br><br>
|
||||||
|
%td.radial <br><br><br>
|
||||||
|
%tr.top-left
|
||||||
|
%th
|
||||||
|
%td.linear-code
|
||||||
|
%td.radial-code
|
||||||
|
%tr.bottom-right
|
||||||
|
%th Bottom Right
|
||||||
|
%td.linear <br><br><br>
|
||||||
|
%td.radial <br><br><br>
|
||||||
|
%tr.bottom-right
|
||||||
|
%th
|
||||||
|
%td.linear-code
|
||||||
|
%td.radial-code
|
||||||
|
%tr.three-color
|
||||||
|
%th Three Evenly-spaced Colors
|
||||||
|
%td.linear <br><br><br>
|
||||||
|
%td.radial <br><br><br>
|
||||||
|
%tr.three-color
|
||||||
|
%th
|
||||||
|
%td.linear-code
|
||||||
|
%td.radial-code
|
||||||
|
%tr.four-color
|
||||||
|
%th Four Positioned Colors
|
||||||
|
%td.linear <br><br><br>
|
||||||
|
%td.radial <br><br><br>
|
||||||
|
%tr.four-color
|
||||||
|
%th
|
||||||
|
%td.linear-code
|
||||||
|
%td.radial-code
|
||||||
|
%tr.filled-in
|
||||||
|
%th Filled-in End-points
|
||||||
|
%td.linear <br><br><br>
|
||||||
|
%td.radial <br><br><br>
|
||||||
|
%tr.filled-in
|
||||||
|
%th
|
||||||
|
%td.linear-code
|
||||||
|
%td.radial-code
|
||||||
|
|
@ -30,21 +30,23 @@
|
|||||||
%h2 Gradients
|
%h2 Gradients
|
||||||
%pre.horizontal
|
%pre.horizontal
|
||||||
%code<>
|
%code<>
|
||||||
+h-gradient(#d92626, #2626d9)
|
:preserve
|
||||||
|
+linear-gradient(
|
||||||
|
color_stops(#d92626, #2626d9),
|
||||||
|
"left")
|
||||||
%pre.vertical
|
%pre.vertical
|
||||||
%code<>
|
%code<>
|
||||||
+v-gradient(#d92626, #2626d9)
|
:preserve
|
||||||
%pre.diagonal
|
+linear-gradient(
|
||||||
%code<
|
color_stops(#d92626, #2626d9))
|
||||||
+linear-gradient("left top",
|
|
||||||
"right bottom",
|
|
||||||
\#d92626, #2626d9)
|
|
||||||
%pre.radial
|
%pre.radial
|
||||||
%code<>
|
%code<>
|
||||||
+radial-gradient(<br /> "center center, 10, center center, 100",<br /> #d92626, #2626d9)
|
+radial-gradient(<br> color_stops(#d92626, #2626d9))
|
||||||
|
%a(href="gradients.html") More Gradients
|
||||||
.examples
|
.examples
|
||||||
#border-radius.example
|
#border-radius.example
|
||||||
%h2 Border Radius
|
%h2 Border Radius
|
||||||
|
%p This box has rounded corners
|
||||||
.gutter
|
.gutter
|
||||||
#box-shadow.example
|
#box-shadow.example
|
||||||
%h2 Box Shadow
|
%h2 Box Shadow
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
@import compass/css3.sass
|
@import compass/css3.sass
|
||||||
|
|
||||||
+font-face("Angelina", font-files("angelina.ttf", 'truetype'))
|
+font-face("Angelina", font_files("angelina.ttf", "truetype"))
|
||||||
h1
|
h1
|
||||||
font-family: "Angelina"
|
font-family: "Angelina"
|
||||||
font-size: 5em
|
font-size: 5em
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
@import compass/css3/gradient.sass
|
|
||||||
|
|
||||||
#gradient
|
|
||||||
width: 200px
|
|
||||||
height: 100px
|
|
||||||
border: 1px solid #777
|
|
||||||
.linear
|
|
||||||
+v-gradient(#fff, #aaa, color_stop(50%, #ccc, 50%, #bbb))
|
|
||||||
.radial
|
|
||||||
+radial-gradient("45 45, 10, 52 50, 30", "Cyan", "DodgerBlue")
|
|
69
examples/css3/src/gradients.sass
Normal file
69
examples/css3/src/gradients.sass
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
@import compass/css3.sass
|
||||||
|
|
||||||
|
#gradient
|
||||||
|
width: 200px
|
||||||
|
height: 100px
|
||||||
|
border: 1px solid #777
|
||||||
|
|
||||||
|
thead th
|
||||||
|
min-height: 50px
|
||||||
|
min-width: 100px
|
||||||
|
+text-shadow(#fff)
|
||||||
|
th.linear
|
||||||
|
+linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
|
||||||
|
th.radial
|
||||||
|
+radial-gradient(color_stops(#fff, #f00 20px, #ff0 30px, #0f0 40px))
|
||||||
|
tr.default
|
||||||
|
td.linear
|
||||||
|
+linear-gradient(color_stops(#c00, #00c))
|
||||||
|
td.radial
|
||||||
|
+radial-gradient(color_stops(#c00, #00c))
|
||||||
|
td.linear-code:before
|
||||||
|
content: "+linear-gradient(color_stops(#c00, #00c))"
|
||||||
|
td.radial-code:before
|
||||||
|
content: "+radial-gradient(color_stops(#c00, #00c))"
|
||||||
|
tr.top-left
|
||||||
|
td.linear
|
||||||
|
+linear-gradient(color_stops(#c00, #00c), "top left")
|
||||||
|
td.radial
|
||||||
|
+radial-gradient(color_stops(#c00, #00c), "top left")
|
||||||
|
td.linear-code:before
|
||||||
|
content: "+linear-gradient(color_stops(#c00, #00c), \"top left\")"
|
||||||
|
td.radial-code:before
|
||||||
|
content: "+radial-gradient(color_stops(#c00, #00c), \"top left\")"
|
||||||
|
tr.bottom-right
|
||||||
|
td.linear
|
||||||
|
+linear-gradient(color_stops(#c00, #00c), "bottom right")
|
||||||
|
td.radial
|
||||||
|
+radial-gradient(color_stops(#c00, #00c), "bottom right")
|
||||||
|
td.linear-code:before
|
||||||
|
content: "+linear-gradient(color_stops(#c00, #00c), \"bottom right\")"
|
||||||
|
td.radial-code:before
|
||||||
|
content: "+radial-gradient(color_stops(#c00, #00c), \"bottom right\")"
|
||||||
|
tr.three-color
|
||||||
|
td.linear
|
||||||
|
+linear-gradient(color_stops(#c00, #fff, #00c))
|
||||||
|
td.radial
|
||||||
|
+radial-gradient(color_stops(#c00, #fff, #00c 50px))
|
||||||
|
td.linear-code:before
|
||||||
|
content: "+linear-gradient(color_stops(#c00, #fff, #00c))"
|
||||||
|
td.radial-code:before
|
||||||
|
content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"
|
||||||
|
tr.four-color
|
||||||
|
td.linear
|
||||||
|
+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))
|
||||||
|
td.radial
|
||||||
|
+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))
|
||||||
|
td.linear-code:before
|
||||||
|
content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"
|
||||||
|
td.radial-code:before
|
||||||
|
content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"
|
||||||
|
tr.filled-in
|
||||||
|
td.linear
|
||||||
|
+linear-gradient(color_stops(#c00 33%, #00c 66%))
|
||||||
|
td.radial
|
||||||
|
+radial-gradient(color_stops(#c00 25px, #00c 75px))
|
||||||
|
td.linear-code:before
|
||||||
|
content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"
|
||||||
|
td.radial-code:before
|
||||||
|
content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"
|
@ -39,7 +39,7 @@ h1
|
|||||||
content: " "
|
content: " "
|
||||||
|
|
||||||
.example
|
.example
|
||||||
+v-gradient(#fff, #ccc)
|
+linear-gradient(color_stops(#fff, #ccc))
|
||||||
pre
|
pre
|
||||||
padding: 1em
|
padding: 1em
|
||||||
margin: 1em
|
margin: 1em
|
||||||
@ -48,8 +48,8 @@ h1
|
|||||||
font-weight: bold
|
font-weight: bold
|
||||||
#background-clip
|
#background-clip
|
||||||
pre
|
pre
|
||||||
background: transparent #{image-url("fresh-peas.jpg")} no-repeat
|
background: transparent #{image_url("fresh-peas.jpg")} no-repeat
|
||||||
border: 1em solid #{transparentize(red, .75)}
|
border: 1em solid rgba(255,0,0,.25)
|
||||||
.padding-box
|
.padding-box
|
||||||
+background-clip("padding-box")
|
+background-clip("padding-box")
|
||||||
+background-origin("padding-box")
|
+background-origin("padding-box")
|
||||||
@ -59,8 +59,9 @@ h1
|
|||||||
|
|
||||||
#background-size
|
#background-size
|
||||||
pre
|
pre
|
||||||
background: transparent #{image-url("fresh-peas.jpg")} no-repeat
|
background: transparent #{image_url("fresh-peas.jpg")} no-repeat
|
||||||
border: 1em solid #{transparentize(red, .75)}
|
border: 1em solid #{mix(red, white, .5)}
|
||||||
|
border: 1em solid rgba(255,0,0,.25)
|
||||||
.top-left
|
.top-left
|
||||||
+background-size(50% 50%)
|
+background-size(50% 50%)
|
||||||
.centered
|
.centered
|
||||||
@ -69,12 +70,39 @@ h1
|
|||||||
|
|
||||||
#gradients
|
#gradients
|
||||||
.horizontal
|
.horizontal
|
||||||
+h-gradient(#d92626, #2626d9)
|
+linear-gradient(color_stops(#d92626, #2626d9), "left")
|
||||||
.vertical
|
.vertical
|
||||||
+v-gradient(#d92626, #2626d9)
|
+linear-gradient(color_stops(#d92626, #2626d9))
|
||||||
.diagonal
|
.diagonal
|
||||||
+linear-gradient("left top", "right bottom", #d92626, #2626d9)
|
+linear-gradient(color_stops(#d92626, #2626d9), "right top")
|
||||||
.radial
|
.radial
|
||||||
+radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
|
/* +radial-gradient(color_stops(#d92626 0, #2626d9 1))
|
||||||
background-color: #2626d9
|
+radial-gradient(color_stops(#d92626 10px, #2626d9 150px))
|
||||||
|
// +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
|
||||||
|
// background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
|
||||||
|
// background-color: #2626d9
|
||||||
|
.radial-1
|
||||||
|
// A default radial gradient:
|
||||||
|
/* +radial-gradient(color_stops(#ddd, #aaa))
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa))
|
||||||
|
.radial-2
|
||||||
|
// A centered gradient
|
||||||
|
/* +radial-gradient(color_stops(#ddd, #aaa))
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa))
|
||||||
|
.radial-3
|
||||||
|
// A centered radial gradient at the top
|
||||||
|
/* +radial-gradient(color_stops(#ddd, #aaa), "top center")
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa), "top center")
|
||||||
|
.radial-4
|
||||||
|
// A centered radial gradient with fixed color stops
|
||||||
|
/* +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
|
||||||
|
+radial-gradient(color_stops(#ddd 20px, #aaa 50px))
|
||||||
|
.radial-5
|
||||||
|
// A centered gradient with several color stops
|
||||||
|
/* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00))
|
||||||
|
+radial-gradient(color_stops(#ddd 20px, #aaa 50%, #c00 200px))
|
||||||
|
.radial-6
|
||||||
|
// A centered gradient with color stops
|
||||||
|
/* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c))
|
||||||
|
+radial-gradient(color_stops(#0c0 0px, #ddd 20px, #aaa 50px, #00c 100px))
|
||||||
|
|
||||||
|
@ -36,13 +36,13 @@
|
|||||||
// Main layout grid, override these constants to build your grid and container sizes.
|
// Main layout grid, override these constants to build your grid and container sizes.
|
||||||
// The width shown gives the right floored percentage values.
|
// The width shown gives the right floored percentage values.
|
||||||
!blueprint_liquid_grid_columns ||= 24
|
!blueprint_liquid_grid_columns ||= 24
|
||||||
!blueprint_liquid_grid_width ||= 4.173%
|
!blueprint_liquid_grid_width ||= 3.167%
|
||||||
!blueprint_liquid_grid_margin ||= 0.833em
|
!blueprint_liquid_grid_margin ||= 1.042%
|
||||||
|
|
||||||
// Do not edit below this line unless you really know what you're doing.
|
// Do not edit below this line unless you really know what you're doing.
|
||||||
!blueprint_liquid_container_width = 80%
|
!blueprint_liquid_container_width = 80%
|
||||||
!blueprint_liquid_container_min_width = 950px
|
!blueprint_liquid_container_min_width = 950px
|
||||||
!blueprint_liquid_grid_push_pull = -(!blueprint_liquid_grid_margin * 4)
|
!blueprint_liquid_grid_push_pull = -(!blueprint_liquid_grid_margin + !blueprint_liquid_grid_width)
|
||||||
|
|
||||||
=blueprint-liquid-grid
|
=blueprint-liquid-grid
|
||||||
// A container should group all your columns
|
// A container should group all your columns
|
||||||
@ -82,7 +82,7 @@
|
|||||||
+clearfix
|
+clearfix
|
||||||
|
|
||||||
=span(!n, !override = false)
|
=span(!n, !override = false)
|
||||||
!width = (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
!width = (!blueprint_liquid_grid_width * !n) + (!blueprint_liquid_grid_margin * (!n - 1))
|
||||||
@if !override
|
@if !override
|
||||||
width= !width !important
|
width= !width !important
|
||||||
@else
|
@else
|
||||||
@ -101,10 +101,10 @@
|
|||||||
margin-right= !blueprint_liquid_grid_margin
|
margin-right= !blueprint_liquid_grid_margin
|
||||||
|
|
||||||
=append(!n)
|
=append(!n)
|
||||||
padding-right= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
padding-right= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n
|
||||||
|
|
||||||
=prepend(!n)
|
=prepend(!n)
|
||||||
padding-left= (!blueprint_liquid_grid_width * !n) - ((!blueprint_liquid_grid_width * !n) % 1)
|
padding-left= (!blueprint_liquid_grid_width + !blueprint_liquid_grid_margin) * !n
|
||||||
|
|
||||||
=pull(!n, !last = false)
|
=pull(!n, !last = false)
|
||||||
margin-left= (!blueprint_liquid_grid_push_pull * !n)
|
margin-left= (!blueprint_liquid_grid_push_pull * !n)
|
||||||
@ -113,7 +113,7 @@
|
|||||||
+float-right
|
+float-right
|
||||||
margin:
|
margin:
|
||||||
top: 0
|
top: 0
|
||||||
left: 1.5em
|
left= !blueprint_liquid_grid_margin
|
||||||
right= (!blueprint_liquid_grid_push_pull * !n)
|
right= (!blueprint_liquid_grid_push_pull * !n)
|
||||||
bottom: 0
|
bottom: 0
|
||||||
|
|
||||||
@ -121,8 +121,8 @@
|
|||||||
border-right: 1px solid #eee
|
border-right: 1px solid #eee
|
||||||
|
|
||||||
=colborder
|
=colborder
|
||||||
padding-right: 2%
|
padding-right= !blueprint_liquid_grid_margin * 2
|
||||||
margin-right: 2%
|
margin-right= !blueprint_liquid_grid_margin * 2
|
||||||
+border
|
+border
|
||||||
|
|
||||||
=colruler
|
=colruler
|
||||||
@ -131,7 +131,9 @@
|
|||||||
clear: both
|
clear: both
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 0.083em
|
height: 0.083em
|
||||||
margin: 0 0 1.583em
|
margin: 0
|
||||||
|
margin-left= !blueprint_liquid_grid_margin * 2
|
||||||
|
margin-right= !blueprint_liquid_grid_margin * 2
|
||||||
border: none
|
border: none
|
||||||
|
|
||||||
=colspacer
|
=colspacer
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/buttons.sass has moved to blueprint/buttons.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/buttons.sass has moved to blueprint/buttons.sass"
|
||||||
@import blueprint/buttons.sass
|
@import blueprint/buttons.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/colors.sass has moved to blueprint/colors.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/colors.sass has moved to blueprint/colors.sass"
|
||||||
@import blueprint/colors.sass
|
@import blueprint/colors.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/debug.sass has moved to blueprint/debug.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/debug.sass has moved to blueprint/debug.sass"
|
||||||
@import blueprint/debug.sass
|
@import blueprint/debug.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/fancy_type.sass has moved to blueprint/fancy_type.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/fancy_type.sass has moved to blueprint/fancy_type.sass"
|
||||||
@import blueprint/fancy_type.sass
|
@import blueprint/fancy_type.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/form.sass has moved to blueprint/form.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/form.sass has moved to blueprint/form.sass"
|
||||||
@import blueprint/form.sass
|
@import blueprint/form.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/grid.sass has moved to blueprint/grid.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/grid.sass has moved to blueprint/grid.sass"
|
||||||
@import blueprint/grid.sass
|
@import blueprint/grid.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/interaction.sass has moved to blueprint/interaction.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/interaction.sass has moved to blueprint/interaction.sass"
|
||||||
@import blueprint/interaction.sass
|
@import blueprint/interaction.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/link_icons.sass has moved to blueprint/link_icons.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/link_icons.sass has moved to blueprint/link_icons.sass"
|
||||||
@import blueprint/link_icons.sass
|
@import blueprint/link_icons.sass
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/liquid.sass has moved to blueprint/liquid.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/liquid.sass has moved to blueprint/liquid.sass"
|
||||||
@import blueprint/liquid.sass
|
@import blueprint/liquid.sass
|
||||||
|
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/reset.sass has moved to blueprint/reset.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/reset.sass has moved to blueprint/reset.sass"
|
||||||
@import blueprint/reset.sass
|
@import blueprint/reset.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/rtl.sass has moved to blueprint/rtl.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/rtl.sass has moved to blueprint/rtl.sass"
|
||||||
@import blueprint/rtl.sass
|
@import blueprint/rtl.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/scaffolding.sass has moved to blueprint/scaffolding.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/scaffolding.sass has moved to blueprint/scaffolding.sass"
|
||||||
@import blueprint/scaffolding.sass
|
@import blueprint/scaffolding.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/typography.sass has moved to blueprint/typography.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/typography.sass has moved to blueprint/typography.sass"
|
||||||
@import blueprint/typography.sass
|
@import blueprint/typography.sass
|
||||||
|
@ -1,2 +1,2 @@
|
|||||||
@debug "DEPRECATION WARINING: blueprint/modules/utilities.sass has moved to blueprint/utilities.sass"
|
@debug "DEPRECATION WARNING: blueprint/modules/utilities.sass has moved to blueprint/utilities.sass"
|
||||||
@import blueprint/utilities.sass
|
@import blueprint/utilities.sass
|
||||||
|
@ -1,46 +1,57 @@
|
|||||||
|
// This yields a linear gradient spanning from top to bottom
|
||||||
//
|
//
|
||||||
Gradient mixin for all types of gradients. Use the other mixins for specific types of gradients.
|
// +linear-gradient(color_stops(white, black))
|
||||||
|
|
||||||
Arguments are type, coords, color_start, color_end and color_stop
|
|
||||||
|
|
||||||
=gradient(!type, !coords, !color_start, !color_end, !color_stop = false)
|
|
||||||
!gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})"
|
|
||||||
@if !color_stop
|
|
||||||
!gradient= !gradient + ", " + !color_stop
|
|
||||||
background: -webkit-gradient(#{!type}, #{!gradient})
|
|
||||||
background: -moz-#{!type}-gradient(#{!gradient})
|
|
||||||
|
|
||||||
//
|
//
|
||||||
This will yield a radial gradient with an apparent specular highlight
|
// This yields a linear gradient spanning from bottom to top
|
||||||
+radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue)
|
|
||||||
|
|
||||||
=radial-gradient(!coords, !color1, !color2, !color_stop = false)
|
|
||||||
+gradient("radial", !coords, !color1, !color2, !color_stop)
|
|
||||||
|
|
||||||
//
|
//
|
||||||
This yields a linear gradient spanning from !start to !end coordinates
|
// +linear-gradient(color_stops(white, black), "bottom")
|
||||||
+linear-gradient("left top", "left bottom", #fff, #ddd)
|
|
||||||
|
|
||||||
=linear-gradient(!start, !end, !color1, !color2, !color_stop = false)
|
|
||||||
!coords = !start + ", " + !end
|
|
||||||
+gradient("linear", !coords, !color1, !color2, !color_stop)
|
|
||||||
|
|
||||||
//
|
//
|
||||||
This yields a gradient starting at the top with #fff, ending in #aaa
|
// This yields a linear gradient spanning from left to right
|
||||||
+v-gradient(#fff, #aaa)
|
|
||||||
|
|
||||||
Same as above but with a #ccc at the halfway point
|
|
||||||
+v-gradient(#fff, #aaa, color_stop(50%, #ccc))
|
|
||||||
|
|
||||||
Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
|
|
||||||
+v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb))
|
|
||||||
|
|
||||||
=v-gradient(!color1, !color2, !color_stop = false)
|
|
||||||
+linear-gradient("left top", "left bottom", !color1, !color2, !color_stop)
|
|
||||||
|
|
||||||
//
|
//
|
||||||
This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above
|
// +linear-gradient(color_stops(white, black), "left")
|
||||||
h-gradient(#fff, #ddd)
|
//
|
||||||
|
// This yields a linear gradient starting at white passing
|
||||||
|
// thru blue at 33% down and then to black
|
||||||
|
//
|
||||||
|
// +linear-gradient(color_stops(white, blue 33%, black))
|
||||||
|
//
|
||||||
|
// This yields a linear gradient starting at white passing
|
||||||
|
// thru blue at 33% down and then to black at 67% until the end
|
||||||
|
//
|
||||||
|
// +linear-gradient(color_stops(white, blue 33%, black 67%))
|
||||||
|
//
|
||||||
|
// Browsers Supported:
|
||||||
|
//
|
||||||
|
// - Chrome
|
||||||
|
// - Safari
|
||||||
|
// - Firefox 3.6
|
||||||
|
|
||||||
=h-gradient(!color1, !color2, !color_stop = false)
|
=linear-gradient(!color_stops, !start = "top")
|
||||||
+linear-gradient("left top", "right top", !color1, !color2, !color_stop)
|
// Firefox's gradient api is nice.
|
||||||
|
// Webkit's gradient api sucks -- hence these backflips:
|
||||||
|
!end = grad_opposite_position(!start)
|
||||||
|
background-image: -webkit-gradient(linear, #{grad_point(!start)}, #{grad_point(!end)}, #{grad_color_stops(!color_stops)})
|
||||||
|
background-image: -moz-linear-gradient(#{!start}, #{!color_stops})
|
||||||
|
|
||||||
|
// Due to limitation's of webkit, the radial gradient mixin works best if you use
|
||||||
|
// pixel-based color stops.
|
||||||
|
//
|
||||||
|
// Examples:
|
||||||
|
//
|
||||||
|
// // Defaults to a centered, 100px radius gradient
|
||||||
|
// +radial-gradient(color_stops(#c00, #00c))
|
||||||
|
// // 100px radius gradient in the top left corner
|
||||||
|
// +radial-gradient(color_stops(#c00, #00c), "top left")
|
||||||
|
// // Three colors, ending at 50px and passing thru #fff at 25px
|
||||||
|
// +radial-gradient(color_stops(#c00, #fff, #00c 50px))
|
||||||
|
//
|
||||||
|
// Browsers Supported:
|
||||||
|
//
|
||||||
|
// - Chrome
|
||||||
|
// - Safari
|
||||||
|
// - Firefox 3.6
|
||||||
|
|
||||||
|
=radial-gradient(!color_stops, !center_position = "center center")
|
||||||
|
!end_pos = grad_end_position(!color_stops, true)
|
||||||
|
background-image: -webkit-gradient(radial, #{grad_point(!center_position)}, 0, #{grad_point(!center_position)}, #{!end_pos}, #{grad_color_stops(!color_stops)})
|
||||||
|
background-image: -moz-radial-gradient(#{!center_position}, circle, #{!color_stops})
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
html, body
|
html, body
|
||||||
height: 100%
|
height: 100%
|
||||||
#{!root_selector}
|
#{!root_selector}
|
||||||
|
clear: both
|
||||||
min-height: 100%
|
min-height: 100%
|
||||||
height: auto !important
|
height: auto !important
|
||||||
height: 100%
|
height: 100%
|
||||||
|
@ -13,5 +13,5 @@
|
|||||||
// @private This mixin is not meant to be used directly.
|
// @private This mixin is not meant to be used directly.
|
||||||
=hacked-minimum(!property, !value)
|
=hacked-minimum(!property, !value)
|
||||||
min-#{!property}= !value
|
min-#{!property}= !value
|
||||||
+bang-hack(!property, !value, 'auto')
|
+bang-hack(!property, !value, "auto")
|
||||||
|
|
||||||
|
@ -30,6 +30,10 @@
|
|||||||
//**
|
//**
|
||||||
Can be mixed into any li selector that is meant to participate in a horizontal layout.
|
Can be mixed into any li selector that is meant to participate in a horizontal layout.
|
||||||
Used to implement +horizontal-list.
|
Used to implement +horizontal-list.
|
||||||
|
|
||||||
|
:last-child is not fully supported
|
||||||
|
see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
|
||||||
|
|
||||||
=horizontal-list-item(!padding = 4px)
|
=horizontal-list-item(!padding = 4px)
|
||||||
+no-bullet
|
+no-bullet
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
@ -37,9 +41,9 @@
|
|||||||
padding:
|
padding:
|
||||||
left= !padding
|
left= !padding
|
||||||
right= !padding
|
right= !padding
|
||||||
&.first
|
&:first-child, &.first
|
||||||
padding-left: 0px
|
padding-left: 0px
|
||||||
&.last
|
&:last-child, &.last
|
||||||
padding-right: 0px
|
padding-right: 0px
|
||||||
|
|
||||||
//**
|
//**
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
padding: 0px
|
padding: 0px
|
||||||
display: inline
|
display: inline
|
||||||
|
|
||||||
// makes an inlin list that is comma delimited.
|
// makes an inline list that is comma delimited.
|
||||||
// use of this recipe is not recommended at this time due to browser support issues.
|
// use of this recipe is not recommended at this time due to browser support issues.
|
||||||
//
|
//
|
||||||
// use of :content and :after is not fully supported in all browsers.
|
// use of :content and :after is not fully supported in all browsers.
|
||||||
|
@ -17,6 +17,6 @@ module Compass
|
|||||||
module_function :base_directory, :lib_directory
|
module_function :base_directory, :lib_directory
|
||||||
end
|
end
|
||||||
|
|
||||||
%w(configuration frameworks app_integration).each do |lib|
|
%w(configuration frameworks app_integration actions compiler).each do |lib|
|
||||||
require "compass/#{lib}"
|
require "compass/#{lib}"
|
||||||
end
|
end
|
||||||
|
@ -20,6 +20,12 @@ module Compass
|
|||||||
extend(ConfigurationDefaults)
|
extend(ConfigurationDefaults)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def env
|
||||||
|
if rails_env = (defined?(::Rails) ? ::Rails.env : (defined?(RAILS_ENV) ? RAILS_ENV : nil))
|
||||||
|
rails_env.production? ? :production : :development
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -80,9 +80,12 @@ module Compass
|
|||||||
end
|
end
|
||||||
|
|
||||||
def config_contents
|
def config_contents
|
||||||
|
"# This configuration file works with both the Compass command line tool and within Rails.\n" +
|
||||||
Compass.configuration.serialize do |prop, value|
|
Compass.configuration.serialize do |prop, value|
|
||||||
if prop == :project_path
|
if prop == :project_path
|
||||||
"project_path = RAILS_ROOT if defined?(RAILS_ROOT)\n"
|
"project_path = RAILS_ROOT if defined?(RAILS_ROOT)\n"
|
||||||
|
elsif prop == :environment
|
||||||
|
"environment = Compass::AppIntegration::Rails.env\n"
|
||||||
elsif prop == :output_style
|
elsif prop == :output_style
|
||||||
""
|
""
|
||||||
end
|
end
|
||||||
@ -91,11 +94,11 @@ module Compass
|
|||||||
|
|
||||||
def initializer_contents
|
def initializer_contents
|
||||||
%Q{require 'compass'
|
%Q{require 'compass'
|
||||||
# If you have any compass plugins, require them here.
|
|rails_root = (defined?(Rails) ? Rails.root : RAILS_ROOT).to_s
|
||||||
Compass.configuration.parse(File.join(RAILS_ROOT, "config", "compass.rb"))
|
|Compass.add_project_configuration(File.join(rails_root, "config", "compass.rb"))
|
||||||
Compass.configuration.environment = (defined?(Rails) ? Rails.env : RAILS_ENV).to_sym
|
|Compass.configure_sass_plugin!
|
||||||
Compass.configure_sass_plugin!
|
|Compass.handle_configuration_change!
|
||||||
}
|
|}.gsub(/^\s+\|/,'')
|
||||||
end
|
end
|
||||||
|
|
||||||
def stylesheet_prefix
|
def stylesheet_prefix
|
||||||
|
@ -1,10 +1,20 @@
|
|||||||
unless defined?(Compass::RAILS_LOADED)
|
unless defined?(Compass::RAILS_LOADED)
|
||||||
Compass::RAILS_LOADED = true
|
Compass::RAILS_LOADED = true
|
||||||
|
begin
|
||||||
%w(action_controller sass_plugin urls).each do |lib|
|
require 'action_pack/version'
|
||||||
require "compass/app_integration/rails/#{lib}"
|
if ActionPack::VERSION::MAJOR >= 3
|
||||||
|
# TODO figure something out so image_path works with rails integration
|
||||||
|
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
|
end
|
||||||
|
|
||||||
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
# Wierd that this has to be re-included to pick up sub-modules. Ruby bug?
|
||||||
class Sass::Script::Functions::EvaluationContext
|
class Sass::Script::Functions::EvaluationContext
|
||||||
include Sass::Script::Functions
|
include Sass::Script::Functions
|
||||||
|
@ -12,9 +12,7 @@ module Compass
|
|||||||
Compass.add_project_configuration(:project_type => options.delete(:project_type))
|
Compass.add_project_configuration(:project_type => options.delete(:project_type))
|
||||||
end
|
end
|
||||||
Compass.add_configuration(options, 'command_line')
|
Compass.add_configuration(options, 'command_line')
|
||||||
if File.exists?(Compass.configuration.extensions_path)
|
Compass.discover_extensions!
|
||||||
Compass::Frameworks.discover(Compass.configuration.extensions_path)
|
|
||||||
end
|
|
||||||
Compass.add_configuration(installer.completed_configuration, 'installer')
|
Compass.add_configuration(installer.completed_configuration, 'installer')
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -23,9 +23,7 @@ module Compass
|
|||||||
|
|
||||||
def configure!
|
def configure!
|
||||||
add_project_configuration
|
add_project_configuration
|
||||||
if File.exists?(Compass.configuration.extensions_path)
|
Compass.discover_extensions!
|
||||||
Compass::Frameworks.discover(Compass.configuration.extensions_path)
|
|
||||||
end
|
|
||||||
end
|
end
|
||||||
|
|
||||||
def add_project_configuration
|
def add_project_configuration
|
||||||
|
@ -59,8 +59,11 @@ module Compass
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
else
|
else
|
||||||
directory File.dirname(options[:configuration_file])
|
config_file = options[:configuration_file]
|
||||||
installer.write_configuration_files(options[:configuration_file])
|
config_file ||= Compass.detect_configuration_file
|
||||||
|
config_file ||= Compass::Configuration::Helpers::KNOWN_CONFIG_LOCATIONS.first
|
||||||
|
directory File.dirname(config_file)
|
||||||
|
installer.write_configuration_files(config_file)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -58,6 +58,13 @@ module Compass
|
|||||||
nil
|
nil
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def clean!
|
||||||
|
FileUtils.rm_rf options[:cache_location]
|
||||||
|
css_files.each do |css_file|
|
||||||
|
FileUtils.rm_f css_file
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
def run
|
def run
|
||||||
if new_config?
|
if new_config?
|
||||||
# Wipe out the cache and force compilation if the configuration has changed.
|
# Wipe out the cache and force compilation if the configuration has changed.
|
||||||
|
@ -3,7 +3,7 @@ module Compass
|
|||||||
# The adapters module provides methods that make configuration data from a compass project
|
# The adapters module provides methods that make configuration data from a compass project
|
||||||
# adapt to various consumers of configuration data
|
# adapt to various consumers of configuration data
|
||||||
module Adapters
|
module Adapters
|
||||||
def to_compiler_arguments(additional_options)
|
def to_compiler_arguments(additional_options = {})
|
||||||
[project_path, sass_path, css_path, to_sass_engine_options.merge(additional_options)]
|
[project_path, sass_path, css_path, to_sass_engine_options.merge(additional_options)]
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -19,8 +19,8 @@ module Compass
|
|||||||
plugin_opts = {:template_location => locations}
|
plugin_opts = {:template_location => locations}
|
||||||
plugin_opts[:style] = output_style if output_style
|
plugin_opts[:style] = output_style if output_style
|
||||||
plugin_opts[:line_comments] = line_comments
|
plugin_opts[:line_comments] = line_comments
|
||||||
plugin_opts[:cache] = cache
|
plugin_opts[:cache] = cache unless cache.nil?
|
||||||
plugin_opts[:cache_location] = cache_path
|
plugin_opts[:cache_location] = cache_path unless cache_path.nil?
|
||||||
plugin_opts.merge!(sass_options || {})
|
plugin_opts.merge!(sass_options || {})
|
||||||
plugin_opts
|
plugin_opts
|
||||||
end
|
end
|
||||||
|
@ -2,6 +2,10 @@ module Compass
|
|||||||
module Configuration
|
module Configuration
|
||||||
module Defaults
|
module Defaults
|
||||||
|
|
||||||
|
def default_project_path
|
||||||
|
"."
|
||||||
|
end
|
||||||
|
|
||||||
def default_project_type
|
def default_project_type
|
||||||
:stand_alone
|
:stand_alone
|
||||||
end
|
end
|
||||||
|
@ -31,6 +31,7 @@ module Compass
|
|||||||
if config.is_a?(Compass::Configuration::Data)
|
if config.is_a?(Compass::Configuration::Data)
|
||||||
config
|
config
|
||||||
elsif config.respond_to?(:read)
|
elsif config.respond_to?(:read)
|
||||||
|
filename ||= config.to_s if config.is_a?(Pathname)
|
||||||
Compass::Configuration::Data.new_from_string(config.read, filename)
|
Compass::Configuration::Data.new_from_string(config.read, filename)
|
||||||
elsif config.is_a?(Hash)
|
elsif config.is_a?(Hash)
|
||||||
Compass::Configuration::Data.new(filename, config)
|
Compass::Configuration::Data.new(filename, config)
|
||||||
@ -88,6 +89,12 @@ module Compass
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def discover_extensions!
|
||||||
|
if File.exists?(configuration.extensions_path)
|
||||||
|
Compass::Frameworks.discover(configuration.extensions_path)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
# Returns a full path to the relative path to the project directory
|
# Returns a full path to the relative path to the project directory
|
||||||
def projectize(path, project_path = nil)
|
def projectize(path, project_path = nil)
|
||||||
project_path ||= configuration.project_path
|
project_path ||= configuration.project_path
|
||||||
@ -112,6 +119,15 @@ module Compass
|
|||||||
possible_files.detect{|f| File.exists?(f)}
|
possible_files.detect{|f| File.exists?(f)}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def handle_configuration_change!
|
||||||
|
if (compiler = Compass.compiler).new_config?
|
||||||
|
compiler.clean!
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
def compiler
|
||||||
|
Compass::Compiler.new(*Compass.configuration.to_compiler_arguments)
|
||||||
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -145,13 +145,17 @@ module Compass
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def debug
|
def chain
|
||||||
instances = [self]
|
instances = [self]
|
||||||
instances << instances.last.inherited_data while instances.last.inherited_data
|
instances << instances.last.inherited_data while instances.last.inherited_data
|
||||||
|
instances
|
||||||
|
end
|
||||||
|
|
||||||
|
def debug
|
||||||
normalized_attrs = {}
|
normalized_attrs = {}
|
||||||
ATTRIBUTES.each do |prop|
|
ATTRIBUTES.each do |prop|
|
||||||
values = []
|
values = []
|
||||||
instances.each do |instance|
|
chain.each do |instance|
|
||||||
values << {
|
values << {
|
||||||
:raw => (instance.send("raw_#{prop}") rescue nil),
|
:raw => (instance.send("raw_#{prop}") rescue nil),
|
||||||
:value => (instance.send("#{prop}_without_default") rescue nil),
|
:value => (instance.send("#{prop}_without_default") rescue nil),
|
||||||
|
@ -10,7 +10,7 @@ module Compass
|
|||||||
module ClassMethods
|
module ClassMethods
|
||||||
def new_from_file(config_file)
|
def new_from_file(config_file)
|
||||||
data = Data.new(config_file)
|
data = Data.new(config_file)
|
||||||
data.parse(config_file)
|
data._parse(config_file)
|
||||||
data
|
data
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -22,8 +22,12 @@ module Compass
|
|||||||
end
|
end
|
||||||
|
|
||||||
module InstanceMethods
|
module InstanceMethods
|
||||||
# parses a configuration file which is a ruby script
|
|
||||||
def parse(config_file)
|
def parse(config_file)
|
||||||
|
raise Compass::Error, "Compass.configuration.parse(filename) has been removed. Please call Compass.add_project_configuration(filename) instead."
|
||||||
|
end
|
||||||
|
|
||||||
|
# parses a configuration file which is a ruby script
|
||||||
|
def _parse(config_file)
|
||||||
unless File.readable?(config_file)
|
unless File.readable?(config_file)
|
||||||
raise Compass::Error, "Configuration file, #{config_file}, not found or not readable."
|
raise Compass::Error, "Configuration file, #{config_file}, not found or not readable."
|
||||||
end
|
end
|
||||||
@ -37,6 +41,7 @@ module Compass
|
|||||||
eval(contents, bind, filename)
|
eval(contents, bind, filename)
|
||||||
ATTRIBUTES.each do |prop|
|
ATTRIBUTES.each do |prop|
|
||||||
value = eval(prop.to_s, bind) rescue nil
|
value = eval(prop.to_s, bind) rescue nil
|
||||||
|
value = value.to_s if value.is_a?(Pathname)
|
||||||
self.send("#{prop}=", value) unless value.nil?
|
self.send("#{prop}=", value) unless value.nil?
|
||||||
end
|
end
|
||||||
if @added_import_paths
|
if @added_import_paths
|
||||||
@ -73,7 +78,7 @@ module Compass
|
|||||||
def serialize_property(prop, value)
|
def serialize_property(prop, value)
|
||||||
%Q(#{prop} = #{value.inspect}\n)
|
%Q(#{prop} = #{value.inspect}\n)
|
||||||
end
|
end
|
||||||
|
|
||||||
def issue_deprecation_warnings
|
def issue_deprecation_warnings
|
||||||
if http_images_path == :relative
|
if http_images_path == :relative
|
||||||
$stderr.puts "DEPRECATION WARNING: Please set relative_assets = true to enable relative paths."
|
$stderr.puts "DEPRECATION WARNING: Please set relative_assets = true to enable relative paths."
|
||||||
|
@ -6,7 +6,11 @@ require 'compass/actions'
|
|||||||
require 'compass/installers'
|
require 'compass/installers'
|
||||||
require 'compass/commands'
|
require 'compass/commands'
|
||||||
require 'rbconfig'
|
require 'rbconfig'
|
||||||
require 'win32console' if RbConfig::CONFIG['host_os'] =~ /mswin|mingw/
|
begin
|
||||||
|
require 'win32console' if RbConfig::CONFIG['host_os'] =~ /mswin|mingw/
|
||||||
|
rescue LoadError
|
||||||
|
$boring = true
|
||||||
|
end
|
||||||
|
|
||||||
module Compass::Exec
|
module Compass::Exec
|
||||||
end
|
end
|
||||||
|
@ -27,11 +27,20 @@ module Compass
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def detect_registration
|
||||||
|
@registered = nil
|
||||||
|
yield
|
||||||
|
@registered
|
||||||
|
ensure
|
||||||
|
@registered = nil
|
||||||
|
end
|
||||||
|
|
||||||
def register(name, *arguments)
|
def register(name, *arguments)
|
||||||
|
@registered = Framework.new(name, *arguments)
|
||||||
if idx = ALL.index(self[name])
|
if idx = ALL.index(self[name])
|
||||||
ALL[idx] = Framework.new(name, *arguments)
|
ALL[idx] = @registered
|
||||||
else
|
else
|
||||||
ALL << Framework.new(name, *arguments)
|
ALL << @registered
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -54,9 +63,10 @@ module Compass
|
|||||||
File.join(directory, File.basename(directory)+".rb")
|
File.join(directory, File.basename(directory)+".rb")
|
||||||
]
|
]
|
||||||
loader = loaders.detect{|l| File.exists?(l)}
|
loader = loaders.detect{|l| File.exists?(l)}
|
||||||
if loader
|
registered_framework = detect_registration do
|
||||||
require loader
|
require loader if loader
|
||||||
else
|
end
|
||||||
|
unless registered_framework
|
||||||
register File.basename(directory), directory
|
register File.basename(directory), directory
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
@ -2,12 +2,13 @@ module Compass
|
|||||||
|
|
||||||
class Logger
|
class Logger
|
||||||
|
|
||||||
DEFAULT_ACTIONS = [:directory, :exists, :remove, :create, :overwrite, :compile, :error, :identical]
|
DEFAULT_ACTIONS = [:directory, :exists, :remove, :create, :overwrite, :compile, :error, :identical, :warning]
|
||||||
|
|
||||||
COLORS = { :clear => 0, :red => 31, :green => 32, :yellow => 33 }
|
COLORS = { :clear => 0, :red => 31, :green => 32, :yellow => 33 }
|
||||||
|
|
||||||
ACTION_COLORS = {
|
ACTION_COLORS = {
|
||||||
:error => :red,
|
:error => :red,
|
||||||
|
:warning => :yellow,
|
||||||
:compile => :green,
|
:compile => :green,
|
||||||
:overwrite => :yellow,
|
:overwrite => :yellow,
|
||||||
:create => :green,
|
:create => :green,
|
||||||
@ -46,7 +47,11 @@ module Compass
|
|||||||
|
|
||||||
def color(c)
|
def color(c)
|
||||||
if Compass.configuration.color_output && c && COLORS.has_key?(c.to_sym)
|
if Compass.configuration.color_output && c && COLORS.has_key?(c.to_sym)
|
||||||
"\e[#{COLORS[c.to_sym]}m"
|
if defined?($boring) && $boring
|
||||||
|
""
|
||||||
|
else
|
||||||
|
"\e[#{COLORS[c.to_sym]}m"
|
||||||
|
end
|
||||||
else
|
else
|
||||||
""
|
""
|
||||||
end
|
end
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
module Compass::SassExtensions::Functions
|
module Compass::SassExtensions::Functions
|
||||||
end
|
end
|
||||||
|
|
||||||
%w(selectors enumerate urls display inline_image color_stop font_files).each do |func|
|
%w(selectors enumerate urls display inline_image image_size gradient_support font_files).each do |func|
|
||||||
require "compass/sass_extensions/functions/#{func}"
|
require "compass/sass_extensions/functions/#{func}"
|
||||||
end
|
end
|
||||||
|
|
||||||
@ -11,7 +11,8 @@ module Sass::Script::Functions
|
|||||||
include Compass::SassExtensions::Functions::Urls
|
include Compass::SassExtensions::Functions::Urls
|
||||||
include Compass::SassExtensions::Functions::Display
|
include Compass::SassExtensions::Functions::Display
|
||||||
include Compass::SassExtensions::Functions::InlineImage
|
include Compass::SassExtensions::Functions::InlineImage
|
||||||
include Compass::SassExtensions::Functions::ColorStop
|
include Compass::SassExtensions::Functions::ImageSize
|
||||||
|
include Compass::SassExtensions::Functions::GradientSupport::Functions
|
||||||
include Compass::SassExtensions::Functions::FontFiles
|
include Compass::SassExtensions::Functions::FontFiles
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
module Compass::SassExtensions::Functions::ColorStop
|
|
||||||
def color_stop(*args)
|
|
||||||
raise Sass::SyntaxError, "An even number of arguments must be passed to color-stop()" unless args.size % 2 == 0
|
|
||||||
stops = []
|
|
||||||
while args.size > 0
|
|
||||||
stops << "color-stop(#{args.shift}, #{args.shift})"
|
|
||||||
end
|
|
||||||
Sass::Script::String.new(stops.join(", "))
|
|
||||||
end
|
|
||||||
end
|
|
195
lib/compass/sass_extensions/functions/gradient_support.rb
Normal file
195
lib/compass/sass_extensions/functions/gradient_support.rb
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
module Compass::SassExtensions::Functions::GradientSupport
|
||||||
|
|
||||||
|
class List < Sass::Script::Literal
|
||||||
|
attr_accessor :values
|
||||||
|
def initialize(*values)
|
||||||
|
self.values = values
|
||||||
|
end
|
||||||
|
def inspect
|
||||||
|
values.map{|v| v.inspect}.join(", ")
|
||||||
|
end
|
||||||
|
def to_s
|
||||||
|
inspect
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
class ColorStop < Sass::Script::Literal
|
||||||
|
attr_accessor :color, :stop
|
||||||
|
def initialize(color, stop = nil)
|
||||||
|
self.color, self.stop = color, stop
|
||||||
|
end
|
||||||
|
def inspect
|
||||||
|
to_s
|
||||||
|
end
|
||||||
|
def to_s
|
||||||
|
s = color.inspect.dup
|
||||||
|
if stop
|
||||||
|
s << " "
|
||||||
|
if stop.unitless?
|
||||||
|
s << stop.times(Sass::Script::Number.new(100, ["%"])).inspect
|
||||||
|
else
|
||||||
|
s << stop.inspect
|
||||||
|
end
|
||||||
|
end
|
||||||
|
s
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
module Functions
|
||||||
|
# returns the opposite position of a side or corner.
|
||||||
|
def grad_opposite_position(position)
|
||||||
|
opposite = position.value.split(/ +/).map do |pos|
|
||||||
|
case pos
|
||||||
|
when "top" then "bottom"
|
||||||
|
when "bottom" then "top"
|
||||||
|
when "left" then "right"
|
||||||
|
when "right" then "left"
|
||||||
|
when "center" then "center"
|
||||||
|
else
|
||||||
|
raise Sass::SyntaxError, "Cannot determine the opposite of #{pos}"
|
||||||
|
end
|
||||||
|
end
|
||||||
|
Sass::Script::String.new(opposite.join(" "))
|
||||||
|
end
|
||||||
|
|
||||||
|
# returns color-stop() calls for use in webkit.
|
||||||
|
def grad_color_stops(color_list)
|
||||||
|
assert_list(color_list)
|
||||||
|
normalize_stops!(color_list)
|
||||||
|
max = color_list.values.last.stop
|
||||||
|
color_stops = color_list.values.map do |pos|
|
||||||
|
# have to convert absolute units to percentages for use in color stop functions.
|
||||||
|
stop = pos.stop
|
||||||
|
stop = stop.div(max).times(Sass::Script::Number.new(100,["%"])) if stop.numerator_units == max.numerator_units
|
||||||
|
"color-stop(#{stop.inspect}, #{pos.color.inspect})"
|
||||||
|
end
|
||||||
|
Sass::Script::String.new(color_stops.join(", "))
|
||||||
|
end
|
||||||
|
|
||||||
|
# returns the end position of the gradient from the color stop
|
||||||
|
def grad_end_position(color_list, radial = Sass::Script::Bool.new(false))
|
||||||
|
assert_list(color_list)
|
||||||
|
default = Sass::Script::Number.new(100)
|
||||||
|
grad_position(color_list, Sass::Script::Number.new(color_list.values.size), default, radial)
|
||||||
|
end
|
||||||
|
|
||||||
|
def grad_position(color_list, index, default, radial = Sass::Script::Bool.new(false))
|
||||||
|
assert_list(color_list)
|
||||||
|
stop = color_list.values[index.value - 1].stop
|
||||||
|
if stop && radial.to_bool
|
||||||
|
orig_stop = stop
|
||||||
|
if stop.unitless?
|
||||||
|
if stop.value <= 1
|
||||||
|
# A unitless number is assumed to be a percentage when it's between 0 and 1
|
||||||
|
stop = stop.times(Sass::Script::Number.new(100, ["%"]))
|
||||||
|
else
|
||||||
|
# Otherwise, a unitless number is assumed to be in pixels
|
||||||
|
stop = stop.times(Sass::Script::Number.new(1, ["px"]))
|
||||||
|
end
|
||||||
|
end
|
||||||
|
if stop.numerator_units == ["%"] && color_list.values.last.stop && color_list.values.last.stop.numerator_units == ["px"]
|
||||||
|
stop = stop.times(color_list.values.last.stop).div(Sass::Script::Number.new(100, ["%"]))
|
||||||
|
end
|
||||||
|
Compass::Logger.new.record(:warning, "Webkit only supports pixels for the start and end stops for radial gradients. Got: #{orig_stop}") if stop.numerator_units != ["px"]
|
||||||
|
stop.div(Sass::Script::Number.new(1, stop.numerator_units, stop.denominator_units))
|
||||||
|
elsif stop
|
||||||
|
stop
|
||||||
|
else
|
||||||
|
default
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
# the given a position, return a point in percents
|
||||||
|
def grad_point(position)
|
||||||
|
position = position.value
|
||||||
|
position = if position[" "]
|
||||||
|
if position =~ /(top|bottom|center) (left|right|center)/
|
||||||
|
"#{$2} #{$1}"
|
||||||
|
else
|
||||||
|
position
|
||||||
|
end
|
||||||
|
else
|
||||||
|
case position
|
||||||
|
when /top|bottom/
|
||||||
|
"left #{position}"
|
||||||
|
when /left|right/
|
||||||
|
"#{position} top"
|
||||||
|
else
|
||||||
|
position
|
||||||
|
end
|
||||||
|
end
|
||||||
|
Sass::Script::String.new(position.
|
||||||
|
gsub(/top/, "0%").
|
||||||
|
gsub(/bottom/, "100%").
|
||||||
|
gsub(/left/,"0%").
|
||||||
|
gsub(/right/,"100%").
|
||||||
|
gsub(/center/, "50%"))
|
||||||
|
end
|
||||||
|
|
||||||
|
def color_stops(*args)
|
||||||
|
List.new(*args.map do |arg|
|
||||||
|
case arg
|
||||||
|
when Sass::Script::Color
|
||||||
|
ColorStop.new(arg)
|
||||||
|
when Sass::Script::String
|
||||||
|
# We get a string as the result of concatenation
|
||||||
|
# So we have to reparse the expression
|
||||||
|
color = stop = nil
|
||||||
|
expr = Sass::Script::Parser.parse(arg.value, 0, 0)
|
||||||
|
case expr
|
||||||
|
when Sass::Script::Color
|
||||||
|
color = expr
|
||||||
|
when Sass::Script::Funcall
|
||||||
|
color = expr
|
||||||
|
when Sass::Script::Operation
|
||||||
|
unless expr.instance_variable_get("@operator") == :concat
|
||||||
|
# This should never happen.
|
||||||
|
raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
|
||||||
|
end
|
||||||
|
color = expr.instance_variable_get("@operand1")
|
||||||
|
stop = expr.instance_variable_get("@operand2")
|
||||||
|
else
|
||||||
|
raise Sass::SyntaxError, "Couldn't parse a color stop from: #{arg.value}"
|
||||||
|
end
|
||||||
|
ColorStop.new(color, stop)
|
||||||
|
else
|
||||||
|
raise Sass::SyntaxError, "Not a valid color stop: #{arg}"
|
||||||
|
end
|
||||||
|
end)
|
||||||
|
end
|
||||||
|
private
|
||||||
|
def normalize_stops!(color_list)
|
||||||
|
positions = color_list.values
|
||||||
|
# fill in the start and end positions, if unspecified
|
||||||
|
positions.first.stop = Sass::Script::Number.new(0) unless positions.first.stop
|
||||||
|
positions.last.stop = Sass::Script::Number.new(100, ["%"]) unless positions.last.stop
|
||||||
|
# fill in empty values
|
||||||
|
for i in 0...positions.size
|
||||||
|
if positions[i].stop.nil?
|
||||||
|
num = 2.0
|
||||||
|
for j in (i+1)...positions.size
|
||||||
|
if positions[j].stop
|
||||||
|
positions[i].stop = positions[i-1].stop.plus((positions[j].stop.minus(positions[i-1].stop)).div(Sass::Script::Number.new(num)))
|
||||||
|
break
|
||||||
|
else
|
||||||
|
num += 1
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
# normalize unitless numbers
|
||||||
|
positions.each do |pos|
|
||||||
|
if pos.stop.unitless? && pos.stop.value <= 1
|
||||||
|
pos.stop = pos.stop.times(Sass::Script::Number.new(100, ["%"]))
|
||||||
|
elsif pos.stop.unitless?
|
||||||
|
pos.stop = pos.stop.times(Sass::Script::Number.new(1, ["px"]))
|
||||||
|
end
|
||||||
|
end
|
||||||
|
nil
|
||||||
|
end
|
||||||
|
def assert_list(value)
|
||||||
|
return if value.is_a?(List)
|
||||||
|
raise ArgumentError.new("#{value.inspect} is not a list of color stops. Expected: color_stops(<color> <number>?, ...)")
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
102
lib/compass/sass_extensions/functions/image_size.rb
Normal file
102
lib/compass/sass_extensions/functions/image_size.rb
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
module Compass::SassExtensions::Functions::ImageSize
|
||||||
|
# Returns the width of the image relative to the images directory
|
||||||
|
def image_width(image_file)
|
||||||
|
image_path = real_path(image_file)
|
||||||
|
width = ImageProperties.new(image_path).size.first
|
||||||
|
Sass::Script::Number.new(width,["px"])
|
||||||
|
end
|
||||||
|
|
||||||
|
# Returns the height of the image relative to the images directory
|
||||||
|
def image_height(image_file)
|
||||||
|
image_path = real_path(image_file)
|
||||||
|
height = ImageProperties.new(image_path).size.last
|
||||||
|
Sass::Script::Number.new(height, ["px"])
|
||||||
|
end
|
||||||
|
|
||||||
|
private
|
||||||
|
def real_path(image_file)
|
||||||
|
path = image_file.value
|
||||||
|
# Compute the real path to the image on the file stystem if the images_dir is set.
|
||||||
|
if Compass.configuration.images_path
|
||||||
|
File.join(Compass.configuration.images_path, path)
|
||||||
|
else
|
||||||
|
File.join(Compass.configuration.project_path, path)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
class ImageProperties
|
||||||
|
def initialize(file)
|
||||||
|
@file = file
|
||||||
|
@file_type = File.extname(@file)[1..-1]
|
||||||
|
end
|
||||||
|
|
||||||
|
def size
|
||||||
|
@dimensions ||= send(:"get_size_for_#{@file_type}")
|
||||||
|
rescue NoMethodError
|
||||||
|
raise Sass::SyntaxError, "Unrecognized file type: #{@file_type}"
|
||||||
|
end
|
||||||
|
|
||||||
|
private
|
||||||
|
def get_size_for_png
|
||||||
|
IO.read(@file)[0x10..0x18].unpack('NN')
|
||||||
|
end
|
||||||
|
|
||||||
|
def get_size_for_gif
|
||||||
|
size = IO.read(@file)[6..10].unpack('SS')
|
||||||
|
end
|
||||||
|
|
||||||
|
def get_size_for_jpg
|
||||||
|
get_size_for_jpeg
|
||||||
|
end
|
||||||
|
|
||||||
|
def get_size_for_jpeg
|
||||||
|
jpeg = JPEG.new(@file)
|
||||||
|
[jpeg.width, jpeg.height]
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
class JPEG
|
||||||
|
attr_reader :width, :height, :bits
|
||||||
|
|
||||||
|
def initialize(file)
|
||||||
|
if file.kind_of? IO
|
||||||
|
examine(file)
|
||||||
|
else
|
||||||
|
File.open(file, 'rb') { |io| examine(io) }
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
private
|
||||||
|
def examine(io)
|
||||||
|
class << io
|
||||||
|
unless method_defined?(:readbyte)
|
||||||
|
def readbyte
|
||||||
|
getc
|
||||||
|
end
|
||||||
|
end
|
||||||
|
def readint; (readbyte << 8) + readbyte; end
|
||||||
|
def readframe; read(readint - 2); end
|
||||||
|
def readsof; [readint, readbyte, readint, readint, readbyte]; end
|
||||||
|
def next
|
||||||
|
c = readbyte while c != 0xFF
|
||||||
|
c = readbyte while c == 0xFF
|
||||||
|
c
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
raise 'malformed JPEG!' unless io.readbyte == 0xFF && io.readbyte == 0xD8 # SOI
|
||||||
|
|
||||||
|
while marker = io.next
|
||||||
|
case marker
|
||||||
|
when 0xC0..0xC3, 0xC5..0xC7, 0xC9..0xCB, 0xCD..0xCF # SOF markers
|
||||||
|
length, @bits, @height, @width, components = io.readsof
|
||||||
|
raise 'malformed JPEG' unless length == 8 + components * 3
|
||||||
|
when 0xD9, 0xDA then break # EOI, SOS
|
||||||
|
when 0xFE then @comment = io.readframe # COM
|
||||||
|
when 0xE1 then io.readframe # APP1, contains EXIF tag
|
||||||
|
else io.readframe # ignore frame
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
@ -42,7 +42,7 @@ class CompassTest < Test::Unit::TestCase
|
|||||||
each_css_file(proj.css_path) do |css_file|
|
each_css_file(proj.css_path) do |css_file|
|
||||||
assert_no_errors css_file, 'compass'
|
assert_no_errors css_file, 'compass'
|
||||||
end
|
end
|
||||||
assert_renders_correctly :reset, :layout, :utilities
|
assert_renders_correctly :reset, :layout, :utilities, :gradients, :image_size
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@ -93,6 +93,36 @@ css_dir = "css"
|
|||||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||||
# relative_assets = true
|
# relative_assets = true
|
||||||
additional_import_paths = ["../foo", "/path/to/my/framework"]
|
additional_import_paths = ["../foo", "/path/to/my/framework"]
|
||||||
|
EXPECTED
|
||||||
|
assert_equal "/", Compass.configuration.http_path
|
||||||
|
assert_equal expected_serialization.split("\n"), Compass.configuration.serialize.split("\n")
|
||||||
|
end
|
||||||
|
|
||||||
|
def test_config_with_pathname
|
||||||
|
contents = StringIO.new(<<-CONFIG)
|
||||||
|
http_path = "/"
|
||||||
|
project_path = Pathname.new("/home/chris/my_compass_project")
|
||||||
|
css_dir = "css"
|
||||||
|
additional_import_paths = ["../foo"]
|
||||||
|
add_import_path "/path/to/my/framework"
|
||||||
|
CONFIG
|
||||||
|
|
||||||
|
Compass.add_configuration(contents, "test_additional_import_paths")
|
||||||
|
|
||||||
|
assert Compass.configuration.to_sass_engine_options[:load_paths].include?("/home/chris/my_compass_project/../foo")
|
||||||
|
assert Compass.configuration.to_sass_engine_options[:load_paths].include?("/path/to/my/framework"), Compass.configuration.to_sass_engine_options[:load_paths].inspect
|
||||||
|
assert_equal "/home/chris/my_compass_project/css/framework", Compass.configuration.to_sass_plugin_options[:template_location]["/path/to/my/framework"]
|
||||||
|
assert_equal "/home/chris/my_compass_project/css/foo", Compass.configuration.to_sass_plugin_options[:template_location]["/home/chris/my_compass_project/../foo"]
|
||||||
|
|
||||||
|
expected_serialization = <<EXPECTED
|
||||||
|
# Require any additional compass plugins here.
|
||||||
|
project_path = "/home/chris/my_compass_project"
|
||||||
|
# Set this to the root of your project when deployed:
|
||||||
|
http_path = "/"
|
||||||
|
css_dir = "css"
|
||||||
|
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||||
|
# relative_assets = true
|
||||||
|
additional_import_paths = ["../foo", "/path/to/my/framework"]
|
||||||
EXPECTED
|
EXPECTED
|
||||||
assert_equal "/", Compass.configuration.http_path
|
assert_equal "/", Compass.configuration.http_path
|
||||||
assert_equal expected_serialization.split("\n"), Compass.configuration.serialize.split("\n")
|
assert_equal expected_serialization.split("\n"), Compass.configuration.serialize.split("\n")
|
||||||
|
BIN
test/fixtures/stylesheets/compass/100x150.jpg
vendored
Normal file
BIN
test/fixtures/stylesheets/compass/100x150.jpg
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
75
test/fixtures/stylesheets/compass/css/gradients.css
vendored
Normal file
75
test/fixtures/stylesheets/compass/css/gradients.css
vendored
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
.linear-1 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-2 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(left, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-3 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top left, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-4 {
|
||||||
|
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top right, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-5 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-6 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-7 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 0%, #cccccc 20%, #eeeeee 60%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-8 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.linear-9 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 0%, #aaaaaa 20%); }
|
||||||
|
|
||||||
|
.linear-10 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
|
||||||
|
|
||||||
|
.linear-11 {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, #dddddd), color-stop(90%, black), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd 40%, black 45%, #aaaaaa 50%); }
|
||||||
|
|
||||||
|
.radial-1 {
|
||||||
|
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.radial-2 {
|
||||||
|
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.radial-3 {
|
||||||
|
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.radial-4 {
|
||||||
|
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-radial-gradient(center center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.radial-5 {
|
||||||
|
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-radial-gradient(top center, circle, #dddddd 0%, #aaaaaa 100%); }
|
||||||
|
|
||||||
|
.radial-6 {
|
||||||
|
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-radial-gradient(center center, circle, #dddddd 20px, #aaaaaa 50px); }
|
||||||
|
|
||||||
|
.radial-7 {
|
||||||
|
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
|
||||||
|
background-image: -moz-radial-gradient(center center, circle, #dddddd 20%, #aaaaaa 50px); }
|
||||||
|
|
||||||
|
.alpha-linear {
|
||||||
|
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(80%, rgba(255, 255, 255, 0)), color-stop(90%, rgba(255, 127, 127, 0.5)), color-stop(100%, rgba(255, 255, 255, 1)));
|
||||||
|
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5) 45%, rgba(255, 255, 255, 1) 50%); }
|
15
test/fixtures/stylesheets/compass/css/image_size.css
vendored
Normal file
15
test/fixtures/stylesheets/compass/css/image_size.css
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
.png {
|
||||||
|
width: 100px;
|
||||||
|
height: 150px; }
|
||||||
|
|
||||||
|
.jpg {
|
||||||
|
width: 100px;
|
||||||
|
height: 150px; }
|
||||||
|
|
||||||
|
.jpeg {
|
||||||
|
width: 100px;
|
||||||
|
height: 150px; }
|
||||||
|
|
||||||
|
.gif {
|
||||||
|
width: 100px;
|
||||||
|
height: 150px; }
|
@ -2,6 +2,7 @@ html, body {
|
|||||||
height: 100%; }
|
height: 100%; }
|
||||||
|
|
||||||
#layout {
|
#layout {
|
||||||
|
clear: both;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
BIN
test/fixtures/stylesheets/compass/images/100x150.gif
vendored
Normal file
BIN
test/fixtures/stylesheets/compass/images/100x150.gif
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
test/fixtures/stylesheets/compass/images/100x150.jpeg
vendored
Normal file
BIN
test/fixtures/stylesheets/compass/images/100x150.jpeg
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
BIN
test/fixtures/stylesheets/compass/images/100x150.jpg
vendored
Normal file
BIN
test/fixtures/stylesheets/compass/images/100x150.jpg
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
BIN
test/fixtures/stylesheets/compass/images/100x150.png
vendored
Normal file
BIN
test/fixtures/stylesheets/compass/images/100x150.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.9 KiB |
51
test/fixtures/stylesheets/compass/sass/gradients.sass
vendored
Normal file
51
test/fixtures/stylesheets/compass/sass/gradients.sass
vendored
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
@import compass/css3.sass
|
||||||
|
|
||||||
|
.linear-1
|
||||||
|
+linear-gradient(color_stops(#ddd, #aaa))
|
||||||
|
.linear-2
|
||||||
|
+linear-gradient(color_stops(#ddd, #aaa), "left")
|
||||||
|
.linear-3
|
||||||
|
+linear-gradient(color_stops(#ddd, #aaa), "top left")
|
||||||
|
.linear-4
|
||||||
|
+linear-gradient(color_stops(#ddd, #aaa), "top right")
|
||||||
|
.linear-5
|
||||||
|
+linear-gradient(color_stops(#ddd, #ccc, #aaa))
|
||||||
|
.linear-6
|
||||||
|
+linear-gradient(color_stops(#ddd, #ccc 20%, #aaa))
|
||||||
|
.linear-7
|
||||||
|
+linear-gradient(color_stops(#ddd, #ccc 20%, #eee, #aaa))
|
||||||
|
.linear-8
|
||||||
|
+linear-gradient(color_stops(#ddd 80%, #aaa))
|
||||||
|
.linear-9
|
||||||
|
+linear-gradient(color_stops(#ddd, #aaa 20%))
|
||||||
|
.linear-10
|
||||||
|
+linear-gradient(color_stops(#ddd 40%, #aaa 50%))
|
||||||
|
.linear-11
|
||||||
|
+linear-gradient(color_stops(#ddd 40%, #000, #aaa 50%))
|
||||||
|
.radial-1
|
||||||
|
// A default radial gradient:
|
||||||
|
// A centered gradient having the shape of the container (aka ellipse)
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa))
|
||||||
|
.radial-2
|
||||||
|
// A centered gradient having the shape of the container (aka ellipse)
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa))
|
||||||
|
.radial-3
|
||||||
|
// A centered gradient at the top having the shape of the container (aka ellipse)
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa), "top center")
|
||||||
|
.radial-4
|
||||||
|
// A centered gradient having a circular shape
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa))
|
||||||
|
.radial-5
|
||||||
|
// A centered gradient at the top having a circular shape
|
||||||
|
+radial-gradient(color_stops(#ddd, #aaa), "top center")
|
||||||
|
.radial-6
|
||||||
|
// A centered circular gradient with color stops
|
||||||
|
// The color stops must be absolute units
|
||||||
|
+radial-gradient(color_stops(#ddd 20px, #aaa 50px))
|
||||||
|
.radial-7
|
||||||
|
// A centered elliptical gradient with color stops
|
||||||
|
// The color stops must be relative units
|
||||||
|
+radial-gradient(color_stops(#ddd 20%, #aaa 50px))
|
||||||
|
|
||||||
|
.alpha-linear
|
||||||
|
+linear-gradient(color_stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
|
12
test/fixtures/stylesheets/compass/sass/image_size.sass
vendored
Normal file
12
test/fixtures/stylesheets/compass/sass/image_size.sass
vendored
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.png
|
||||||
|
width= image_width("100x150.png")
|
||||||
|
height= image_height("100x150.png")
|
||||||
|
.jpg
|
||||||
|
width= image_width("100x150.jpg")
|
||||||
|
height= image_height("100x150.jpg")
|
||||||
|
.jpeg
|
||||||
|
width= image_width("100x150.jpeg")
|
||||||
|
height= image_height("100x150.jpeg")
|
||||||
|
.gif
|
||||||
|
width= image_width("100x150.gif")
|
||||||
|
height= image_height("100x150.gif")
|
Loading…
Reference in New Issue
Block a user