diff --git a/doc-src/content/reference/compass/css3/gradient.haml b/doc-src/content/reference/compass/css3/gradient.haml deleted file mode 100644 index 745e320a..00000000 --- a/doc-src/content/reference/compass/css3/gradient.haml +++ /dev/null @@ -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 - **IMPORTANT:** 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. diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss deleted file mode 100644 index afca03c1..00000000 --- a/frameworks/compass/stylesheets/compass/css3/_gradient.scss +++ /dev/null @@ -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)); -} diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index 73e1d13c..b6631b92 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -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'); } diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index 8251e9ce..5616f096 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -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)