* Added examples for CSS3 transforms, transitions and gradients.

* Updated every CSS3 example to follow doc conventions: no tabs, spaces(2), colon after property (e.g. background: red), id naming like #id-name, no camelCasing

doc-src/content/examples/compass/css3/border_radius/markup.haml

@@ -1 +1,49 @@
-#border-radius
+%p
+  Box with all corners rounded
+
+#border-radius.border-radius-example
+
+%p
+  Box with only top left corner rounded
+
+#border-radius-top-left.border-radius-example
+
+%p
+  Box with only top right corner rounded
+
+#border-radius-top-right.border-radius-example
+
+%p
+  Box with only bottom left corner rounded
+
+#border-radius-bottom-left.border-radius-example
+
+%p
+  Box with only bottom right corner rounded
+
+#border-radius-bottom-right.border-radius-example
+
+%p
+  Box with top corners rounded
+
+#border-radiusTop.border-radius-example
+
+%p
+  Box with bottom corners rounded
+
+#border-radius-bottom.border-radius-example
+
+%p
+  Box with left corners rounded
+
+#border-radius-left.border-radius-example
+
+%p
+  Box with right corners rounded
+
+#border-radius-right.border-radius-example
+
+%p
+  Box with different roundings for top/bottom and left/right
+
+#border-radius-combo.border-radius-example

doc-src/content/examples/compass/css3/border_radius/stylesheet.sass

@@ -1,7 +1,40 @@
 @import compass/css3
 
+.border-radius-example
+  width: 40px
+  height: 40px
+  background: red
+  margin: 20px
+
 #border-radius
-	+border-radius('10px')
+  +border-radius("10px")
-	:width 40px
+
-	:height 40px
+#border-radius-top-left
-	:background red
+  +border-top-left-radius("10px")
+
+#border-radius-top-right
+  +border-top-right-radius("10px")
+
+#border-radius-bottom-left
+  +border-bottom-left-radius("10px")
+
+#border-radius-bottom-right
+  +border-bottom-right-radius("10px")
+
+#border-radius-top
+  +border-top-radius("10px")
+
+#border-radius-bottom
+  +border-bottom-radius("10px")
+
+#border-radius-left
+  +border-left-radius("10px")
+
+#border-radius-right
+  +border-right-radius("10px")
+
+#border-radius-combo
+  +border-corner-radius("top", "left", "20px")
+  +border-corner-radius("top", "right", "5px")
+  +border-corner-radius("bottom", "left", "12px")
+  +border-corner-radius("bottom", "right", "28px")

doc-src/content/examples/compass/css3/box_shadow/markup.haml

@@ -1,3 +1,3 @@
-#box-shadow-default
+#box-shadow-default.box-shadow-example
 
-#box-shadow-custom
+#box-shadow-custom.box-shadow-example

doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass

@@ -1,17 +1,15 @@
 @import compass/css3
 
+.box-shadow-example
+  width: 40px
+  height: 40px
+  background: #EEE
+  margin: 20px
+
 // Default box shadow
 #box-shadow-default
-	+box-shadow
+  +box-shadow
-	:width 40px
-	:height 40px
-	:background #EEE
-	:margin 20px
 
 // Box shadow with custom settings
 #box-shadow-custom
-	+box-shadow(red, 2px, 2px, 10px)
+  +box-shadow(red, 2px, 2px, 10px)
-	:width 40px
-	:height 40px
-	:background #EEE
-	:margin 20px

doc-src/content/examples/compass/css3/box_sizing/markup.haml

@@ -1,3 +1,3 @@
-#contentBox
+#content-box.box-sizing-example
 
-#borderBox
+#border-box.box-sizing-example

doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass

@@ -1,17 +1,14 @@
 @import compass/css3
 
-#contentBox
+.box-sizing-example
-	+box-sizing('content-box')
+  background: red
-	:background red
+  padding: 20px
-	:padding 20px
+  border: 10px solid green
-	:border 10px solid green
+  margin: 20px
-	:margin 20px
+  width: 200px
-	:width 200px
 
-#borderBox
+#content-box
-	+box-sizing('border-box')
+  +box-sizing('content-box')
-	:background red
+
-	:padding 20px
+#border-box
-	:border 10px solid green
+  +box-sizing('border-box')
-	:margin 20px
-	:width 200px

doc-src/content/examples/compass/css3/columns/markup.haml

@@ -1,8 +1,8 @@
-%div(id="twoColumn")
+%div(id="two-column")
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
-%div(id="threeColumn")
+%div(id="three-column")
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
-%div(id="fourColumnWithRule")
+%div(id="four-column-with-rule")
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

doc-src/content/examples/compass/css3/columns/stylesheet.sass

@@ -1,17 +1,17 @@
 @import compass/css3
 
-#twoColumn
+#two-column
-	+column-count(2)
+  +column-count(2)
-	:width 300px
+  width: 300px
-	:margin-bottom 20px
+  margin-bottom: 20px
 
-#threeColumn
+#three-column
-	+column-count(3)
+  +column-count(3)
-	:width 300px
+  width: 300px
-	:margin-bottom 20px
+  margin-bottom: 20px
 
-#fourColumnWithRule
+#four-column-with-rule
-	+column-count(4)
+  +column-count(4)
-	+column-rule(1px, solid, red)
+  +column-rule(1px, "solid", red)
-	:width 300px
+  width: 300px
-	:margin-bottom 20px
+  margin-bottom: 20px

doc-src/content/examples/compass/css3/gradient.haml

@@ -0,0 +1,8 @@
+---
+title: Gradient
+description: css3 mixin for css gradients
+framework: compass/css3
+stylesheet: compass/css3/_gradient.sass
+example: true
+---
+= render "partials/example"

doc-src/content/examples/compass/css3/gradient/markup.haml

@@ -0,0 +1,34 @@
+%p
+  this box has no gradients
+
+.gradient-example
+
+%p
+  This will yield a radial gradient with an apparent specular highlight  
+
+#radial-gradient.gradient-example
+
+%p
+  This yields a linear gradient spanning from !start to !end coordinates  
+
+#linear-gradient.gradient-example
+
+%p
+  This yields a gradient starting at the top with #fff, ending in #aaa  
+
+#v-gradient.gradient-example
+
+%p
+  Same as above but with a #ccc at the halfway point  
+
+#v-gradient-2.gradient-example
+
+%p
+  Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top  
+
+#v-gradient-3.gradient-example
+
+%p
+  This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above  
+
+#h-gradient.gradient-example

doc-src/content/examples/compass/css3/gradient/stylesheet.sass

@@ -0,0 +1,31 @@
+@import compass/css3
+
+.gradient-example
+  width: 80px
+  height: 80px
+  background: red
+  margin: 20px
+
+// This will yield a radial gradient with an apparent specular highlight  
+#radial-gradient
+  +radial-gradient("45 45, 10, 52 50, 30", "Cyan", "DodgerBlue")
+
+// This yields a linear gradient spanning from !start to !end coordinates  
+#linear-gradient
+  +linear-gradient("left top", "left bottom", #fff, #ddd)
+
+// This yields a gradient starting at the top with #fff, ending in #aaa  
+#v-gradient
+  +v-gradient(#fff, #aaa)
+
+// Same as above but with a #ccc at the halfway point  
+#v-gradient-2
+  +v-gradient(#fff, #aaa, color_stop(50%, #ccc))
+
+// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top  
+#v-gradient-3
+  +v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb))
+
+// This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above  
+#h-gradient
+  +h-gradient(#fff, #ddd)

doc-src/content/examples/compass/css3/inline_block/stylesheet.sass

@@ -1,7 +1,7 @@
 @import compass/css3
 
 #inline-block
-	+inline-block
+  +inline-block
-	:padding 4px 10px
+  padding: 4px 10px
-	:background red
+  background: red
-	:color white
+  color: white

doc-src/content/examples/compass/css3/opacity/markup.haml

@@ -1,9 +1,9 @@
-#opacity10.opacityExample
+#opacity-10.opacity-example
 
-#opacity20.opacityExample
+#opacity-20.opacity-example
 
-#opacity50.opacityExample
+#opacity-50.opacity-example
 
-#opaque.opacityExample
+#opaque.opacity-example
 
-#transparent.opacityExample
+#transparent.opacity-example

doc-src/content/examples/compass/css3/opacity/stylesheet.sass

@@ -1,22 +1,22 @@
 @import compass/css3
 
-.opacityExample
+.opacity-example
-	:background red
+  background: red
-	:width 40px
+  width: 40px
-	:height 40px
+  height: 40px
-	:float left
+  float: left
 
-#opacity10
+#opacity-10
-	+opacity(0.1)
+  +opacity(0.1)
 
-#opacity20
+#opacity-20
-	+opacity(0.2)
+  +opacity(0.2)
 
-#opacity50
+#opacity-50
-	+opacity(0.5)
+  +opacity(0.5)
 
 #opaque
-	+opaque
+  +opaque
 
 #transparent
-	+transparent
+  +transparent

doc-src/content/examples/compass/css3/text_shadow/markup.haml

@@ -2,7 +2,7 @@
     this text has no shadow
 
 #p
-    %span(class="hasShadow") this text does have shadow
+    %span(class="has-shadow") this text has a shadow
 
 #p
-    %span(class="hasCustomShadow") this text has a custom shadow
+    %span(class="has-custom-shadow") this text has a custom shadow

doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass

@@ -1,7 +1,7 @@
 @import compass/css3
 
-.hasShadow
+.has-shadow
-	+text-shadow
+  +text-shadow
 
-.hasCustomShadow
+.has-custom-shadow
-	+text-shadow(red, 3px, 3px, 0)
+  +text-shadow(red, 3px, 3px, 0)

doc-src/content/examples/compass/css3/transform.haml

@@ -0,0 +1,8 @@
+---
+title: Transform
+description: css3 mixin for css transforms
+framework: compass/css3
+stylesheet: compass/css3/_transform.sass
+example: true
+---
+= render "partials/example"

doc-src/content/examples/compass/css3/transform/markup.haml

@@ -0,0 +1,24 @@
+%p
+  this div will change scale on hover
+
+#scale.transform-example
+
+%p
+  this div will rotate on hover
+
+#rotate.transform-example
+
+%p
+  this div will translate on hover
+
+#translate.transform-example
+
+%p
+  this div will skew on hover
+
+#skew.transform-example
+
+%p
+  this div will change scale, rotate, translate and skew on hover
+
+#combo.transform-example

doc-src/content/examples/compass/css3/transform/stylesheet.sass

@@ -0,0 +1,37 @@
+@import compass/css3
+
+.transform-example
+  width: 40px
+  height: 40px
+  background: red
+  margin: 20px
+
+#scale
+  +scale(1)
+
+#scale:hover
+  +scale(2)
+
+#rotate
+  +rotate(0)
+
+#rotate:hover
+  +rotate(45)
+
+#translate
+  +translate(0, 0)
+
+#translate:hover
+  +translate(20px, 20px)
+
+#skew
+  +skew(0, 0)
+
+#skew:hover
+  +skew(20, 20)
+
+#combo
+  +transform(1, 0, 0, 0, 0, 0)
+
+#combo:hover
+  +transform(1, 45, 20px, 20px, 20, 20)

doc-src/content/examples/compass/css3/transition.haml

@@ -0,0 +1,8 @@
+---
+title: Transition
+description: css3 mixin for css transitions
+framework: compass/css3
+stylesheet: compass/css3/_transform.sass
+example: true
+---
+= render "partials/example"

doc-src/content/examples/compass/css3/transition/markup.haml

@@ -0,0 +1,19 @@
+%p
+  this box has a width transition on hover
+
+#width.transition-example
+
+%p
+  this box has a width transition on hover, with a set duration
+
+#width-duration.transition-example
+
+%p
+  this box has a width transition on hover, with a set duration, and uses the 'easein' timing function
+
+#width-duration-easein.transition-example
+
+%p
+  this box has a few seconds delay, so wait a little before the transition occurs
+
+#width-delay.transition-example

doc-src/content/examples/compass/css3/transition/stylesheet.sass

@@ -0,0 +1,35 @@
+@import compass/css3
+
+.transition-example
+  width: 40px
+  height: 40px
+  background: red
+  margin: 20px
+
+#width
+  +transition-property('width')
+
+#width:hover
+  width: 80px
+
+#width-duration
+  +transition-property('width')
+  +transition-duration('2s')
+
+#width-duration:hover
+  width: 80px
+
+#width-duration-easein
+  +transition-property('width')
+  +transition-duration('2s')
+  +transition-timing-function('ease-in')
+
+#width-duration-easein:hover
+  width: 80px
+
+#width-delay
+  +transition-property('width')
+  +transition-delay('2s')
+
+#width-delay:hover
+  width: 80px