Remove deprecated gradient mixins and
This commit is contained in:
Chris Eppstein
parent
9baa7a0282
commit
2072cac4cb
@ -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,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));
|
||||
}
|
||||
360
test/fixtures/stylesheets/compass/css/gradients.css
vendored
360
test/fixtures/stylesheets/compass/css/gradients.css
vendored
@ -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'); }
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user