Deprecate the CSS3 Gradient module.

twalpole · Nov 20, 2010 · 1d7882b · 1d7882b
1 parent 928bf67
commit 1d7882b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 32 deletions.
diff --git a/doc-src/content/reference/compass/css3/gradient.haml b/doc-src/content/reference/compass/css3/gradient.haml
@@ -3,6 +3,7 @@ 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:

diff --git a/frameworks/compass/stylesheets/compass/css3/_gradient.scss b/frameworks/compass/stylesheets/compass/css3/_gradient.scss
@@ -1,6 +1,8 @@
 @import "compass/utilities/general/hacks";
 @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.
 //
 // Examples:
@@ -51,17 +53,6 @@
   @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
 // pixel-based color stops.
 //

diff --git a/frameworks/compass/stylesheets/compass/css3/_images.scss b/frameworks/compass/stylesheets/compass/css3/_images.scss
@@ -1,6 +1,29 @@
 @import "shared";
 
+// Background property support for vendor prefixing within values.
+@mixin background(
+  $background-1,
+  $background-2: false,
+  $background-3: false,
+  $background-4: false,
+  $background-5: false,
+  $background-6: false,
+  $background-7: false,
+  $background-8: false,
+  $background-9: false,
+  $background-10: false
+) {
+  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
+                        $background-6, $background-7, $background-8, $background-9, $background-10);
+
+  @if $experimental-support-for-svg     and prefixed(-svg,    $backgrounds) {       background:    -svg($backgrounds); }
+  @if $experimental-support-for-webkit  and prefixed(-webkit, $backgrounds) {       background: -webkit($backgrounds); }
+  @if $experimental-support-for-mozilla and prefixed(-moz,    $backgrounds) {       background:    -moz($backgrounds); }
+  @if $experimental-support-for-pie     and (prefixed(-pie,   $backgrounds) or -compass-list-size($backgrounds) > 1) {  -pie-background:    -pie($backgrounds); }
+                                                                                    background:         $backgrounds;
+}
 
+// Background image property support for vendor prefixing within values.
 @mixin background-image(
   $image-1,
   $image-2: false,
@@ -22,42 +45,35 @@
                                                                          background-image:         $images ;
 }
 
-@mixin background(
-  $background-1,
-  $background-2: false,
-  $background-3: false,
-  $background-4: false,
-  $background-5: false,
-  $background-6: false,
-  $background-7: false,
-  $background-8: false,
-  $background-9: false,
-  $background-10: false
-) {
-  $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5,
-                        $background-6, $background-7, $background-8, $background-9, $background-10);
-
-  @if $experimental-support-for-svg     and prefixed(-svg,    $backgrounds) {       background:    -svg($backgrounds); }
-  @if $experimental-support-for-webkit  and prefixed(-webkit, $backgrounds) {       background: -webkit($backgrounds); }
-  @if $experimental-support-for-mozilla and prefixed(-moz,    $backgrounds) {       background:    -moz($backgrounds); }
-  @if $experimental-support-for-pie     and (prefixed(-pie,   $backgrounds) or -compass-list-size($backgrounds) > 1) {  -pie-background:    -pie($backgrounds); }
-                                                                                    background:         $backgrounds;
+// 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) {
   @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-svg     {         border-image:    -svg(-compass-list($value)); }
                                                   border-image:                       $value;
 }
 
+// List style image property support for vendor prefixing within values.
 @mixin list-style-image($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-svg     and prefixed(-svg,    $image) { list-style-image:    -svg($image); }
                                                                         list-style-image:         $image ;
 }
 
+// List style property support for vendor prefixing within values.
 @mixin list-style($value) {
   $value: -compass-list($value);
   @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { list-style-image:    -moz($value); }
@@ -66,6 +82,7 @@
                                                                         list-style-image:         $value ;
 }
 
+// content property support for vendor prefixing within values.
 @mixin content($value) {
   $value: -compass-list($value);
   @if $experimental-support-for-mozilla and prefixed(-moz,    $value) { content:    -moz($value); }

diff --git a/frameworks/compass/stylesheets/compass/css3/_version-2.scss b/frameworks/compass/stylesheets/compass/css3/_version-2.scss
@@ -7,7 +7,6 @@
 @import "box-sizing";
 @import "box";
 @import "images";
-@import "gradient";
 @import "background-clip";
 @import "background-origin";
 @import "background-size";