diff --git a/doc-src/content/examples/compass/css3/border_radius.haml b/doc-src/content/examples/compass/css3/border_radius.haml new file mode 100644 index 00000000..c6f24876 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/border_radius/markup.haml b/doc-src/content/examples/compass/css3/border_radius/markup.haml new file mode 100644 index 00000000..ae276cc3 --- /dev/null +++ b/doc-src/content/examples/compass/css3/border_radius/markup.haml @@ -0,0 +1 @@ +#border-radius \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass b/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass new file mode 100644 index 00000000..7be1c1a6 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_shadow.haml b/doc-src/content/examples/compass/css3/box_shadow.haml new file mode 100644 index 00000000..90e72fc1 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_shadow/markup.haml b/doc-src/content/examples/compass/css3/box_shadow/markup.haml new file mode 100644 index 00000000..45c30407 --- /dev/null +++ b/doc-src/content/examples/compass/css3/box_shadow/markup.haml @@ -0,0 +1,3 @@ +#box-shadow-default + +#box-shadow-custom \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass b/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass new file mode 100644 index 00000000..dbbbdd55 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_sizing.haml b/doc-src/content/examples/compass/css3/box_sizing.haml new file mode 100644 index 00000000..72cdf334 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_sizing/markup.haml b/doc-src/content/examples/compass/css3/box_sizing/markup.haml new file mode 100644 index 00000000..ee684afe --- /dev/null +++ b/doc-src/content/examples/compass/css3/box_sizing/markup.haml @@ -0,0 +1,3 @@ +#contentBox + +#borderBox diff --git a/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass b/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass new file mode 100644 index 00000000..8167069e --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/columns.haml b/doc-src/content/examples/compass/css3/columns.haml new file mode 100644 index 00000000..deb81eee --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/columns/markup.haml b/doc-src/content/examples/compass/css3/columns/markup.haml new file mode 100644 index 00000000..44249c14 --- /dev/null +++ b/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. diff --git a/doc-src/content/examples/compass/css3/columns/stylesheet.sass b/doc-src/content/examples/compass/css3/columns/stylesheet.sass new file mode 100644 index 00000000..eff8f0e6 --- /dev/null +++ b/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 diff --git a/doc-src/content/examples/compass/css3/inline_block.haml b/doc-src/content/examples/compass/css3/inline_block.haml new file mode 100644 index 00000000..974377a4 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/inline_block/markup.haml b/doc-src/content/examples/compass/css3/inline_block/markup.haml new file mode 100644 index 00000000..ad6d8a70 --- /dev/null +++ b/doc-src/content/examples/compass/css3/inline_block/markup.haml @@ -0,0 +1,3 @@ +%p + this is an + %span(id="inline-block") inline block \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass b/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass new file mode 100644 index 00000000..a818ca34 --- /dev/null +++ b/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 diff --git a/doc-src/content/examples/compass/css3/opacity.haml b/doc-src/content/examples/compass/css3/opacity.haml new file mode 100644 index 00000000..f8036c70 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/opacity/markup.haml b/doc-src/content/examples/compass/css3/opacity/markup.haml new file mode 100644 index 00000000..12b6e13f --- /dev/null +++ b/doc-src/content/examples/compass/css3/opacity/markup.haml @@ -0,0 +1,9 @@ +#opacity10.opacityExample + +#opacity20.opacityExample + +#opacity50.opacityExample + +#opaque.opacityExample + +#transparent.opacityExample \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/opacity/stylesheet.sass b/doc-src/content/examples/compass/css3/opacity/stylesheet.sass new file mode 100644 index 00000000..ec7d8f9b --- /dev/null +++ b/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 diff --git a/doc-src/content/examples/compass/css3/text_shadow.haml b/doc-src/content/examples/compass/css3/text_shadow.haml new file mode 100644 index 00000000..20b82b91 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/text_shadow/markup.haml b/doc-src/content/examples/compass/css3/text_shadow/markup.haml new file mode 100644 index 00000000..987fef1b --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass b/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass new file mode 100644 index 00000000..017c12fc --- /dev/null +++ b/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) \ No newline at end of file diff --git a/doc-src/content/stylesheets/example.sass b/doc-src/content/stylesheets/example.sass index be331c4c..96ac5fc9 100644 --- a/doc-src/content/stylesheets/example.sass +++ b/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 \ No newline at end of file