Deprecate the CSS3 Gradient module.
This commit is contained in:
parent
928bf675c2
commit
1d7882b9e6
@ -3,6 +3,7 @@ title: Compass Gradient
|
|||||||
crumb: Gradient
|
crumb: Gradient
|
||||||
framework: compass
|
framework: compass
|
||||||
stylesheet: compass/css3/_gradient.scss
|
stylesheet: compass/css3/_gradient.scss
|
||||||
|
deprecated: true
|
||||||
meta_description: Specify linear gradients and radial gradients for all browsers.
|
meta_description: Specify linear gradients and radial gradients for all browsers.
|
||||||
layout: core
|
layout: core
|
||||||
classnames:
|
classnames:
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
@import "compass/utilities/general/hacks";
|
@import "compass/utilities/general/hacks";
|
||||||
@import "images";
|
@import "images";
|
||||||
|
|
||||||
|
@warn "The css3 gradient module is deprecated. For more information see: http://beta.compass-style.org/docs/tutorials/upgrading/css3-v2/#gradients";
|
||||||
|
|
||||||
// The linear gradient mixin works best across browsers if you use percentage-based color stops.
|
// The linear gradient mixin works best across browsers if you use percentage-based color stops.
|
||||||
//
|
//
|
||||||
// Examples:
|
// Examples:
|
||||||
@ -51,17 +53,6 @@
|
|||||||
@include background-image($image, linear-gradient($start, $color-stops));
|
@include background-image($image, linear-gradient($start, $color-stops));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Emit a IE-Specific filters that renders a simple linear gradient.
|
|
||||||
// For use in IE 6 - 8. Best practice would have you apply this via a
|
|
||||||
// conditional IE stylesheet, but if you must, you should place this before
|
|
||||||
// any background-image properties that you have specified.
|
|
||||||
@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
|
|
||||||
@include has-layout;
|
|
||||||
$gradient-type: if($orientation == vertical, 0, 1);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
|
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Because of webkit's limitations, the radial gradient mixin works best if you use
|
// Because of webkit's limitations, the radial gradient mixin works best if you use
|
||||||
// pixel-based color stops.
|
// pixel-based color stops.
|
||||||
//
|
//
|
||||||
|
@ -1,27 +1,6 @@
|
|||||||
@import "shared";
|
@import "shared";
|
||||||
|
|
||||||
|
// Background property support for vendor prefixing within values.
|
||||||
@mixin background-image(
|
|
||||||
$image-1,
|
|
||||||
$image-2: false,
|
|
||||||
$image-3: false,
|
|
||||||
$image-4: false,
|
|
||||||
$image-5: false,
|
|
||||||
$image-6: false,
|
|
||||||
$image-7: false,
|
|
||||||
$image-8: false,
|
|
||||||
$image-9: false,
|
|
||||||
$image-10: false
|
|
||||||
) {
|
|
||||||
$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
|
|
||||||
|
|
||||||
@if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); }
|
|
||||||
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
|
|
||||||
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
|
|
||||||
@if $experimental-support-for-pie and (prefixed(-pie, $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
|
|
||||||
background-image: $images ;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin background(
|
@mixin background(
|
||||||
$background-1,
|
$background-1,
|
||||||
$background-2: false,
|
$background-2: false,
|
||||||
@ -44,6 +23,41 @@
|
|||||||
background: $backgrounds;
|
background: $backgrounds;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Background image property support for vendor prefixing within values.
|
||||||
|
@mixin background-image(
|
||||||
|
$image-1,
|
||||||
|
$image-2: false,
|
||||||
|
$image-3: false,
|
||||||
|
$image-4: false,
|
||||||
|
$image-5: false,
|
||||||
|
$image-6: false,
|
||||||
|
$image-7: false,
|
||||||
|
$image-8: false,
|
||||||
|
$image-9: false,
|
||||||
|
$image-10: false
|
||||||
|
) {
|
||||||
|
$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
|
||||||
|
|
||||||
|
@if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); }
|
||||||
|
@if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); }
|
||||||
|
@if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); }
|
||||||
|
@if $experimental-support-for-pie and (prefixed(-pie, $images) or -compass-list-size($images) > 1) { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }
|
||||||
|
background-image: $images ;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emit a IE-Specific filters that renders a simple linear gradient.
|
||||||
|
// For use in IE 6 - 8. Best practice would have you apply this via a
|
||||||
|
// conditional IE stylesheet, but if you must, you should place this before
|
||||||
|
// any background-image properties that you have specified.
|
||||||
|
@mixin filter-gradient($start-color, $end-color, $orientation: vertical) {
|
||||||
|
@include has-layout;
|
||||||
|
$gradient-type: if($orientation == vertical, 0, 1);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}')";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Border image property support for vendor prefixing properties and values.
|
||||||
@mixin border-image($value) {
|
@mixin border-image($value) {
|
||||||
@if $experimental-support-for-mozilla { -moz-border-image: -moz(-compass-list($value)); }
|
@if $experimental-support-for-mozilla { -moz-border-image: -moz(-compass-list($value)); }
|
||||||
@if $experimental-support-for-webkit { -webkit-border-image: -webkit(-compass-list($value)); }
|
@if $experimental-support-for-webkit { -webkit-border-image: -webkit(-compass-list($value)); }
|
||||||
@ -51,6 +65,7 @@
|
|||||||
border-image: $value;
|
border-image: $value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// List style image property support for vendor prefixing within values.
|
||||||
@mixin list-style-image($image) {
|
@mixin list-style-image($image) {
|
||||||
@if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
|
@if $experimental-support-for-mozilla and prefixed(-moz, $image) { list-style-image: -moz($image); }
|
||||||
@if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
|
@if $experimental-support-for-webkit and prefixed(-webkit, $image) { list-style-image: -webkit($image); }
|
||||||
@ -58,6 +73,7 @@
|
|||||||
list-style-image: $image ;
|
list-style-image: $image ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// List style property support for vendor prefixing within values.
|
||||||
@mixin list-style($value) {
|
@mixin list-style($value) {
|
||||||
$value: -compass-list($value);
|
$value: -compass-list($value);
|
||||||
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
|
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); }
|
||||||
@ -66,6 +82,7 @@
|
|||||||
list-style-image: $value ;
|
list-style-image: $value ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// content property support for vendor prefixing within values.
|
||||||
@mixin content($value) {
|
@mixin content($value) {
|
||||||
$value: -compass-list($value);
|
$value: -compass-list($value);
|
||||||
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
|
@if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); }
|
||||||
|
@ -7,7 +7,6 @@
|
|||||||
@import "box-sizing";
|
@import "box-sizing";
|
||||||
@import "box";
|
@import "box";
|
||||||
@import "images";
|
@import "images";
|
||||||
@import "gradient";
|
|
||||||
@import "background-clip";
|
@import "background-clip";
|
||||||
@import "background-origin";
|
@import "background-origin";
|
||||||
@import "background-size";
|
@import "background-size";
|
||||||
|
Loading…
Reference in New Issue
Block a user