Added examples for compass/css3: border radius, box shadow, box sizing, columns, inline block, opacity, text shadow. Slighty modified example CSS for better display.

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

@@ -0,0 +1,8 @@
+---
+title: Border-radius
+description: css3 mixin for border-radius
+framework: compass/css3
+stylesheet: compass/css3/_border_radius.sass
+example: true
+---
+= render "partials/example"

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

@@ -0,0 +1 @@
+#border-radius

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

@@ -0,0 +1,7 @@
+@import compass/css3
+
+#border-radius
+	+border-radius('10px')
+	:width 40px
+	:height 40px
+	:background red

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

@@ -0,0 +1,8 @@
+---
+title: Box-shadow
+description: css3 mixin for box-shadow
+framework: compass/css3
+stylesheet: compass/css3/_box_shadow.sass
+example: true
+---
+= render "partials/example"

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

@@ -0,0 +1,3 @@
+#box-shadow-default
+
+#box-shadow-custom

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

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

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

@@ -0,0 +1,8 @@
+---
+title: Box-sizing
+description: css3 mixin for box-sizing
+framework: compass/css3
+stylesheet: compass/css3/_box_sizing.sass
+example: true
+---
+= render "partials/example"

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

@@ -0,0 +1,3 @@
+#contentBox
+
+#borderBox

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

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

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

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

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

@@ -0,0 +1,8 @@
+%div(id="twoColumn")
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+%div(id="threeColumn")
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+%div(id="fourColumnWithRule")
+    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

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

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

@@ -0,0 +1,8 @@
+---
+title: Inline-block
+description: css3 mixin for inline-block
+framework: compass/css3
+stylesheet: compass/css3/_inline_block.sass
+example: true
+---
+= render "partials/example"

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

@@ -0,0 +1,3 @@
+%p
+    this is an
+    %span(id="inline-block") inline block

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

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

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

@@ -0,0 +1,8 @@
+---
+title: Opacity
+description: css3 mixin for opacity
+framework: compass/css3
+stylesheet: compass/css3/_opacity.sass
+example: true
+---
+= render "partials/example"

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

@@ -0,0 +1,9 @@
+#opacity10.opacityExample
+
+#opacity20.opacityExample
+
+#opacity50.opacityExample
+
+#opaque.opacityExample
+
+#transparent.opacityExample

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

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

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

@@ -0,0 +1,8 @@
+---
+title: Text-shadow
+description: css3 mixin for text-shadow
+framework: compass/css3
+stylesheet: compass/css3/_text_shadow.sass
+example: true
+---
+= render "partials/example"

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

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

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

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

doc-src/content/stylesheets/example.sass

@@ -1,3 +1,6 @@
+body
+  font-family: "Lucida Grande", Arial, sans-serif
+
 #example
   width: 100%
   td
@@ -5,7 +8,7 @@
     padding: 6px 4px
     vertical-align: top
     width: 48%
+    max-width: 400px
     pre
       margin: 0
-      height: 200px
       overflow: auto