github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'stable'

Browse Source
This commit is contained in:
Chris Eppstein 2012-03-11 21:25:04 -07:00
commit da6fafee26
12 changed files with 34 additions and 632 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc-src/content/CHANGELOG.markdown
View File

@ -32,7 +32,7 @@ The Documentation for the [latest preview release](http://beta.compass-style.org
### 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)`
* New math functions are now available: `e()`, `logarithm($number[, $base = e()])`, `square-root($number)`
and `pow($number, $exponent)`

19
doc-src/content/reference/compass/css3/gradient.haml
View File

@ -1,19 +0,0 @@
---
title: Compass Gradient
crumb: Gradient
framework: compass
stylesheet: compass/css3/_gradient.scss
deprecated: true
meta_description: Specify linear gradients and radial gradients for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
:markdown
**<span class="warning">IMPORTANT:</span>** This module has been deprecated. See the new
[images module](../images/) for the new, more flexible approach to gradients.
Provides mixins to create cross-browser CSS3 gradients.

1
frameworks/compass/stylesheets/compass/_css3.scss
View File

@ -6,7 +6,6 @@
@import "css3/columns";
@import "css3/box-sizing";
@import "css3/box";
@import "css3/gradient";
@import "css3/images";
@import "css3/background-clip";
@import "css3/background-origin";

99
frameworks/compass/stylesheets/compass/css3/_gradient.scss
View File

@ -1,99 +0,0 @@
@import "compass/utilities/general/hacks";
@import "images";
// The linear gradient mixin works best across browsers if you use percentage-based color stops.
//
// Examples:
//
// // This yields a linear gradient spanning from top to bottom
// +linear-gradient(color-stops(white, black))
//
// // This yields a linear gradient spanning from bottom to top
// +linear-gradient(color-stops(white, black), bottom)
//
// // This yields a linear gradient spanning from left to right
// +linear-gradient(color-stops(white, black), left)
//
// // 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%))
//
// // This yields a background image on top of the gradient; requires an image
// // with an alpha-layer.
// +linear-gradient(color_stops(white,black), top, image-url('noise.png'))
//
// Browsers Supported:
//
// - Chrome
// - Safari
// - Firefox 3.6
// - Opera
//
// @deprecated Use the linear-gradient() function in conjunction with a
// property mixin like `background-image`.
@mixin linear-gradient($color-stops, $start: false, $image: false) {
@if $image {
@if $start {
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$start}, #{$color-stops}))";
} @else {
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, linear-gradient(#{$color-stops}))";
}
} @else {
@if $start {
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$start}, #{$color-stops}))";
} @else {
@warn "The linear-gradient mixin is deprecated. Instead use: @include background-image(linear-gradient(#{$color-stops}))";
}
}
@if not $start { $start: top; }
@include background-image($image, linear-gradient($start, $color-stops));
}
// Because of webkit's limitations, 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))
//
// // A background image on top of a 100px radius gradient; requires an image
// // with an alpha-layer.
// +radial-gradient(color_stops(#c00, #fff), top left, image-url("noise.png")))
//
// Browsers Supported:
//
// - Chrome
// - Safari
// - Firefox 3.6
// - Opera
//
// @deprecated Use the radial-gradient() function in conjunction with a
// property mixin like `background-image`.
@mixin radial-gradient($color-stops, $center-position: false, $image: false) {
@if $image {
@if $center-position {
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$center-position}, #{$color-stops}))";
} @else {
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(#{$image}, radial-gradient(#{$color-stops}))";
}
} @else {
@if $center-position {
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$center-position}, #{$color-stops}))";
} @else {
@warn "The radial-gradient mixin is deprecated. Instead use: @include background-image(radial-gradient(#{$color-stops}))";
}
}
@if not $center-position { $center-position: center center; }
@include background-image($image, radial-gradient($center-position, $color-stops));
}

20
lib/compass/sass_extensions/functions/math.rb
View File

@ -3,38 +3,54 @@ module Compass::SassExtensions::Functions::Math
def pi()
Sass::Script::Number.new(Math::PI)
end
Sass::Script::Functions.declare :pi, []
def sin(number)
trig(:sin, number)
end
Sass::Script::Functions.declare :sin, [:number]
def cos(number)
trig(:cos, number)
end
Sass::Script::Functions.declare :cos, [:number]
def tan(number)
trig(:tan, number)
end
Sass::Script::Functions.declare :tan, [:number]
def e()
Sass::Script::Number.new(Math::E)
end
Sass::Script::Functions.declare :pi, []
def log(number, base = Sass::Script::Number.new(Math::E))
def logarithm(number, base = e )
assert_type number, :Number
assert_type base, :Number
Sass::Script::Number.new(Math.log(number.value, base.value), number.numerator_units, number.denominator_units)
raise Sass::SyntaxError, "base to logarithm must be unitless." unless base.unitless?
result = Math.log(number.value, base.value) rescue Math.log(number.value) / Math.log(base.value)
Sass::Script::Number.new(result, number.numerator_units, number.denominator_units)
end
Sass::Script::Functions.declare :logarithm, [:number]
Sass::Script::Functions.declare :logarithm, [:number, :base]
def sqrt(number)
numeric_transformation(number) { |n| Math.sqrt(n) }
end
Sass::Script::Functions.declare :sqrt, [:number]
alias square_root sqrt
Sass::Script::Functions.declare :square_root, [:number]
def pow(number, exponent)
assert_type number, :Number
assert_type exponent, :Number
raise Sass::SyntaxError, "exponent to pow must be unitless." unless exponent.unitless?
Sass::Script::Number.new(number.value**exponent.value, number.numerator_units, number.denominator_units)
end
Sass::Script::Functions.declare :pow, [:number, :exponent]
private
def trig(operation, number)

360
test/fixtures/stylesheets/compass/css/gradients.css vendored
View File

@ -213,366 +213,6 @@
background: foo(-ms-radial-gradient(#dddddd, #aaaaaa 100px));
background: foo(radial-gradient(#dddddd, #aaaaaa 100px)); }
.linear-1 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #aaaaaa); }
.linear-2 {
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(left, #dddddd, #aaaaaa);
background-image: linear-gradient(left, #dddddd, #aaaaaa); }
.linear-3 {
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: linear-gradient(top left, #dddddd, #aaaaaa); }
.linear-4 {
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: linear-gradient(top right, #dddddd, #aaaaaa); }
.linear-5 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc, #aaaaaa); }
.linear-6 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa); }
.linear-7 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa); }
.linear-8 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa); }
.linear-9 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -ms-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: linear-gradient(top, #dddddd, #aaaaaa 20%); }
.linear-10 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -ms-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
.linear-11 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -ms-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%); }
.linear-12 {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
background-image: -webkit-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -moz-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -o-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -ms-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%); }
.radial-1 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-2 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-3 {
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-4 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-5 {
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-6 {
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -ms-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, #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: -webkit-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -ms-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%); }
.linear-svg-1 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #aaaaaa); }
.linear-svg-2 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(left, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(left, #dddddd, #aaaaaa);
background-image: linear-gradient(left, #dddddd, #aaaaaa); }
.linear-svg-3 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(top left, #dddddd, #aaaaaa);
background-image: linear-gradient(top left, #dddddd, #aaaaaa); }
.linear-svg-4 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -moz-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -o-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: -ms-linear-gradient(top right, #dddddd, #aaaaaa);
background-image: linear-gradient(top right, #dddddd, #aaaaaa); }
.linear-svg-5 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(50%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #cccccc, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc, #aaaaaa); }
.linear-svg-6 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #aaaaaa); }
.linear-svg-7 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #cccccc), color-stop(60%, #eeeeee), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa);
background-image: linear-gradient(top, #dddddd, #cccccc 20%, #eeeeee, #aaaaaa); }
.linear-svg-8 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(80%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -moz-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -o-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: -ms-linear-gradient(top, #dddddd 80%, #aaaaaa);
background-image: linear-gradient(top, #dddddd 80%, #aaaaaa); }
.linear-svg-9 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -moz-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -o-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: -ms-linear-gradient(top, #dddddd, #aaaaaa 20%);
background-image: linear-gradient(top, #dddddd, #aaaaaa 20%); }
.linear-svg-10 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(50%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -moz-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: -ms-linear-gradient(top, #dddddd 40%, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #aaaaaa 50%); }
.linear-svg-11 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #dddddd), color-stop(45%, #000000), color-stop(50%, #aaaaaa));
background-image: -webkit-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -moz-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -o-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: -ms-linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%);
background-image: linear-gradient(top, #dddddd 40%, #000000, #aaaaaa 50%); }
.linear-svg-12 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMzMlIiBzdG9wLWNvbG9yPSIjMDAwMGZmIi8+PHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(33%, #0000ff), color-stop(67%, #000000));
background-image: -webkit-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -moz-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -o-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: -ms-linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%);
background-image: linear-gradient(top, #ffffff, #0000ff 33%, #000000 67%); }
.radial-svg-1 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-svg-2 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-svg-3 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-svg-4 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(center center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(center center, #dddddd, #aaaaaa 100px); }
.radial-svg-5 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSIxMDAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 100, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -moz-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -o-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: -ms-radial-gradient(top center, #dddddd, #aaaaaa 100px);
background-image: radial-gradient(top center, #dddddd, #aaaaaa 100px); }
.radial-svg-6 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(40%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -moz-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: -ms-radial-gradient(center center, #dddddd 20px, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20px, #aaaaaa 50px); }
.radial-svg-7 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAiPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWFhYWFhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(20%, #dddddd), color-stop(100%, #aaaaaa));
background-image: -webkit-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -moz-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -o-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: -ms-radial-gradient(center center, #dddddd 20%, #aaaaaa 50px);
background-image: radial-gradient(center center, #dddddd 20%, #aaaaaa 50px); }
.alpha-linear-svg {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9InJnYmEoMjU1LCAyNTUsIDI1NSwgMCkiLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0icmdiYSgyNTUsIDEyNywgMTI3LCAwLjUpIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 127, 127, 0.5)), color-stop(50%, #ffffff));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), #ffffff 50%); }
.ie-horizontal-filter {
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFFFFFF', endColorstr='#FF000000'); }

143
test/fixtures/stylesheets/compass/sass/gradients.sass vendored
View File

@ -1,4 +1,4 @@
@import compass/css3/images, compass/css3/gradient
@import compass/css3/images
$experimental-support-for-svg: true
.bg-shortcut-simple-image
@ -87,147 +87,6 @@ $experimental-support-for-svg: false
.unknown-function-wrapper
+background(foo(radial-gradient(#ddd, #aaa 100px)))
.linear-1
+linear-gradient(color-stops(#dddddd, #aaaaaa))
.linear-2
+linear-gradient(color-stops(#dddddd, #aaaaaa), left)
.linear-3
+linear-gradient(color-stops(#dddddd, #aaaaaa), top left)
.linear-4
+linear-gradient(color-stops(#dddddd, #aaaaaa), top right)
.linear-5
+linear-gradient(color-stops(#dddddd, #cccccc, #aaaaaa))
.linear-6
+linear-gradient(color-stops(#dddddd, #cccccc 20%, #aaaaaa))
.linear-7
+linear-gradient(color-stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))
.linear-8
+linear-gradient(color-stops(#dddddd 80%, #aaaaaa))
.linear-9
+linear-gradient(color-stops(#dddddd, #aaaaaa 20%))
.linear-10
+linear-gradient(color-stops(#dddddd 40%, #aaaaaa 50%))
.linear-11
+linear-gradient(color-stops(#dddddd 40%, black, #aaaaaa 50%))
.linear-12
+linear-gradient(color-stops(white, blue 33%, black 67%))
.radial-1
// A default radial gradient:
A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-2
// A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-3
// A centered gradient at the top having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-4
// A centered gradient having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-5
// A centered gradient at the top having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-6
// A centered circular gradient with color stops
The color stops must be absolute units
+radial-gradient(color-stops(#dddddd 20px, #aaaaaa 50px))
.radial-7
// A centered elliptical gradient with color stops
The color stops must be relative units
+radial-gradient(color-stops(#dddddd 20%, #aaaaaa 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%))
$experimental-support-for-svg: true
.linear-svg-1
+linear-gradient(color-stops(#dddddd, #aaaaaa))
.linear-svg-2
+linear-gradient(color-stops(#dddddd, #aaaaaa), left)
.linear-svg-3
+linear-gradient(color-stops(#dddddd, #aaaaaa), top left)
.linear-svg-4
+linear-gradient(color-stops(#dddddd, #aaaaaa), top right)
.linear-svg-5
+linear-gradient(color-stops(#dddddd, #cccccc, #aaaaaa))
.linear-svg-6
+linear-gradient(color-stops(#dddddd, #cccccc 20%, #aaaaaa))
.linear-svg-7
+linear-gradient(color-stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))
.linear-svg-8
+linear-gradient(color-stops(#dddddd 80%, #aaaaaa))
.linear-svg-9
+linear-gradient(color-stops(#dddddd, #aaaaaa 20%))
.linear-svg-10
+linear-gradient(color-stops(#dddddd 40%, #aaaaaa 50%))
.linear-svg-11
+linear-gradient(color-stops(#dddddd 40%, black, #aaaaaa 50%))
.linear-svg-12
+linear-gradient(color-stops(white, blue 33%, black 67%))
.radial-svg-1
// A default radial gradient:
A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-svg-2
// A centered gradient having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-svg-3
// A centered gradient at the top having the shape of the container (aka ellipse)
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-svg-4
// A centered gradient having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px))
.radial-svg-5
// A centered gradient at the top having a circular shape
+radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)
.radial-svg-6
// A centered circular gradient with color stops
The color stops must be absolute units
+radial-gradient(color-stops(#dddddd 20px, #aaaaaa 50px))
.radial-svg-7
// A centered elliptical gradient with color stops
The color stops must be relative units
+radial-gradient(color-stops(#dddddd 20%, #aaaaaa 50px))
.alpha-linear-svg
+linear-gradient(color-stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))
.ie-horizontal-filter
+filter-gradient(white, black, horizontal)

2
test/units/compass_module_test.rb
View File

@ -30,7 +30,7 @@ class CompassModuleTest < Test::Unit::TestCase
def test_shared_extension_paths_with_relative_home
ENV["HOME"] = "."
assert_equal [], Compass.shared_extension_paths
assert_equal ["./.compass/extensions"], Compass.shared_extension_paths
end
end

12
test/units/sass_extensions_test.rb
View File

@ -82,11 +82,17 @@ class SassExtensionsTest < Test::Unit::TestCase
assert_equal "0.959", evaluate("sin(360)")
assert evaluate("tan(pi()/2 - 0.0001)").to_f > 1000, evaluate("tan(pi()/2 - 0.0001)")
assert evaluate("tan(pi()/2 + 0.0001)").to_f < -1000, evaluate("tan(pi()/2 - 0.0001)")
assert_equal "0.693px", evaluate("log(2px)")
assert_equal "0", evaluate("log(1)")
assert_equal "1", evaluate("log(e())")
assert_equal "0.693px", evaluate("logarithm(2px)")
assert_equal "0", evaluate("logarithm(1)")
assert_equal "1", evaluate("logarithm(e())")
assert_equal "1", evaluate("logarithm($number: e())")
assert_equal "1", evaluate("logarithm(10, $base: 10)")
assert_equal "5px", evaluate("sqrt(25px)")
assert_equal "5px", evaluate("sqrt($number: 25px)")
assert_equal "5px", evaluate("square-root(25px)")
assert_equal "5px", evaluate("square-root($number: 25px)")
assert_equal "25px", evaluate("pow(5px, 2)")
assert_equal "25px", evaluate("pow($number: 5px, $exponent: 2)")
assert_equal "79.432px", evaluate("pow(5px, e())")
end