Update the gradient examples

examples/css3/gradients.html.haml

@@ -0,0 +1,60 @@
+!!!
+%html
+  %head
+    %link(href="stylesheets/gradients.css" rel="stylesheet" type="text/css")
+  %body
+    %table
+      %thead
+        %th  
+        %th.linear Linear
+        %th.radial Radial
+      %tbody
+        %tr.default
+          %th Default
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.default
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.top-left
+          %th Top Left
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.top-left
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.bottom-right
+          %th Bottom Right
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.bottom-right
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.three-color
+          %th Three Evenly-spaced Colors
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.three-color
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.four-color
+          %th Four Positioned Colors
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.four-color
+          %th
+          %td.linear-code
+          %td.radial-code
+        %tr.filled-in
+          %th Filled-in End-points
+          %td.linear <br><br><br>
+          %td.radial <br><br><br>
+        %tr.filled-in
+          %th
+          %td.linear-code
+          %td.radial-code
+

examples/css3/index.html.haml

@@ -39,24 +39,10 @@
               :preserve
                 +linear-gradient(
                   color_stops(#d92626, #2626d9))
-          %pre.diagonal
-            %code<
-              :preserve
-                
-                
-                
-                
-                
-                +linear-gradient(
-                  color_stops(#d92626, #2626d9),
-                  "top left")
-                
-                
-                
-                
           %pre.radial
             %code<>
-              +radial-gradient(<br />  "center center, 10, center center, 100",<br />  #d92626, #2626d9)
+              +radial-gradient(<br>  color_stops(#d92626, #2626d9))
+          %a(href="gradients.html") More Gradients
       .examples
         #border-radius.example
           %h2 Border Radius

examples/css3/src/gradient.sass

@@ -1,10 +0,0 @@
-@import compass/css3/gradient.sass
-
-#gradient
-  width: 200px
-  height: 100px
-  border: 1px solid #777
-.linear
-  +linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
-.radial
-  +radial-gradient("45 45, 10, 52 50, 30", "Cyan", "DodgerBlue")

examples/css3/src/gradients.sass

@@ -0,0 +1,69 @@
+@import compass/css3.sass
+
+#gradient
+  width: 200px
+  height: 100px
+  border: 1px solid #777
+
+thead th
+  min-height: 50px
+  min-width: 100px
+  +text-shadow(#fff)
+th.linear
+  +linear-gradient(color_stops(#fff, #f00 50%, #ff0 75%, #0f0))
+th.radial
+  +radial-gradient(color_stops(#fff, #f00 20px, #ff0 30px, #0f0 40px))
+tr.default
+  td.linear
+    +linear-gradient(color_stops(#c00, #00c))
+  td.radial
+    +radial-gradient(color_stops(#c00, #00c))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #00c))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #00c))"
+tr.top-left
+  td.linear
+    +linear-gradient(color_stops(#c00, #00c), "top left")
+  td.radial
+    +radial-gradient(color_stops(#c00, #00c), "top left")
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #00c), \"top left\")"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #00c), \"top left\")"
+tr.bottom-right
+  td.linear
+    +linear-gradient(color_stops(#c00, #00c), "bottom right")
+  td.radial
+    +radial-gradient(color_stops(#c00, #00c), "bottom right")
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #00c), \"bottom right\")"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #00c), \"bottom right\")"
+tr.three-color
+  td.linear
+    +linear-gradient(color_stops(#c00, #fff, #00c))
+  td.radial
+    +radial-gradient(color_stops(#c00, #fff, #00c 50px))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #fff, #00c))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #fff, #00c 50px))"
+tr.four-color
+  td.linear
+    +linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))
+  td.radial
+    +radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00, #0c0 25%, #0cc 75%, #00c 50px))"
+tr.filled-in
+  td.linear
+    +linear-gradient(color_stops(#c00 33%, #00c 66%))
+  td.radial
+    +radial-gradient(color_stops(#c00 25px, #00c 75px))
+  td.linear-code:before
+    content: "+linear-gradient(color_stops(#c00 33%, #00c 66%))"
+  td.radial-code:before
+    content: "+radial-gradient(color_stops(#c00 25px, #00c 75px))"

examples/css3/src/main.sass

@@ -76,7 +76,33 @@ h1
   .diagonal
     +linear-gradient(color_stops(#d92626, #2626d9), "right top")
   .radial
-    +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
+    /* +radial-gradient(color_stops(#d92626 0, #2626d9 1))
-    background-image: -moz-radial-gradient(20px center, circle, 40px center #d92626 10px, #2626d9 100px)
+    +radial-gradient(color_stops(#d92626 10px, #2626d9 150px))
-    background-color: #2626d9
+    // +radial-gradient("center center, 10, center center, 100", #d92626, #2626d9)
+    // background-image: -moz-radial-gradient(20px center, circle, #d92626 10px, #2626d9 100px)
+    // background-color: #2626d9
+  .radial-1
+    // A default radial gradient:
+    /* +radial-gradient(color_stops(#ddd, #aaa))
+    +radial-gradient(color_stops(#ddd, #aaa))
+  .radial-2
+    // A centered gradient
+    /* +radial-gradient(color_stops(#ddd, #aaa))
+    +radial-gradient(color_stops(#ddd, #aaa))
+  .radial-3
+    // A centered radial gradient at the top
+    /* +radial-gradient(color_stops(#ddd, #aaa), "top center")
+    +radial-gradient(color_stops(#ddd, #aaa), "top center")
+  .radial-4
+    // A centered radial gradient with fixed color stops
+    /* +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
+    +radial-gradient(color_stops(#ddd 20px, #aaa 50px))
+  .radial-5
+    // A centered gradient with several color stops
+    /* +radial-gradient(color_stops(#ddd 20%, #aaa 50%, #c00))
+    +radial-gradient(color_stops(#ddd 20px, #aaa 50%, #c00 200px))
+  .radial-6
+    // A centered gradient with color stops
+    /* +radial-gradient(color_stops(#0c0, #ddd 20%, #aaa 50%, #00c))
+    +radial-gradient(color_stops(#0c0 0px, #ddd 20px, #aaa 50px, #00c 100px))