diff --git a/doc-src/content/examples/compass/css3/border_radius/markup.haml b/doc-src/content/examples/compass/css3/border_radius/markup.haml index ae276cc3..46466fb6 100644 --- a/doc-src/content/examples/compass/css3/border_radius/markup.haml +++ b/doc-src/content/examples/compass/css3/border_radius/markup.haml @@ -1 +1,49 @@ -#border-radius \ No newline at end of file +%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 diff --git a/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass b/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass index 7be1c1a6..ac159974 100644 --- a/doc-src/content/examples/compass/css3/border_radius/stylesheet.sass +++ b/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') - :width 40px - :height 40px - :background red \ No newline at end of file + +border-radius("10px") + +#border-radius-top-left + +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") \ 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 index 45c30407..9ea50518 100644 --- a/doc-src/content/examples/compass/css3/box_shadow/markup.haml +++ b/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 \ No newline at end of file +#box-shadow-custom.box-shadow-example \ 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 index dbbbdd55..6edab9f5 100644 --- a/doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass +++ b/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 - :width 40px - :height 40px - :background #EEE - :margin 20px + +box-shadow // 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 + +box-shadow(red, 2px, 2px, 10px) \ 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 index ee684afe..a053d6c4 100644 --- a/doc-src/content/examples/compass/css3/box_sizing/markup.haml +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass b/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass index 8167069e..5be4cd9f 100644 --- a/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass @@ -1,17 +1,14 @@ @import compass/css3 -#contentBox - +box-sizing('content-box') - :background red - :padding 20px - :border 10px solid green - :margin 20px - :width 200px +.box-sizing-example + 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 +#content-box + +box-sizing('content-box') + +#border-box + +box-sizing('border-box') \ 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 index 44249c14..666f62a8 100644 --- a/doc-src/content/examples/compass/css3/columns/markup.haml +++ b/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. diff --git a/doc-src/content/examples/compass/css3/columns/stylesheet.sass b/doc-src/content/examples/compass/css3/columns/stylesheet.sass index eff8f0e6..3db347e7 100644 --- a/doc-src/content/examples/compass/css3/columns/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/columns/stylesheet.sass @@ -1,17 +1,17 @@ @import compass/css3 -#twoColumn - +column-count(2) - :width 300px - :margin-bottom 20px +#two-column + +column-count(2) + width: 300px + margin-bottom: 20px -#threeColumn - +column-count(3) - :width 300px - :margin-bottom 20px +#three-column + +column-count(3) + width: 300px + margin-bottom: 20px -#fourColumnWithRule - +column-count(4) - +column-rule(1px, solid, red) - :width 300px - :margin-bottom 20px +#four-column-with-rule + +column-count(4) + +column-rule(1px, "solid", red) + width: 300px + margin-bottom: 20px diff --git a/doc-src/content/examples/compass/css3/gradient.haml b/doc-src/content/examples/compass/css3/gradient.haml new file mode 100644 index 00000000..b1785b35 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/gradient/markup.haml b/doc-src/content/examples/compass/css3/gradient/markup.haml new file mode 100644 index 00000000..41248093 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/gradient/stylesheet.sass b/doc-src/content/examples/compass/css3/gradient/stylesheet.sass new file mode 100644 index 00000000..39d5ac8f --- /dev/null +++ b/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) \ 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 index a818ca34..7c337f95 100644 --- a/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/inline_block/stylesheet.sass @@ -1,7 +1,7 @@ @import compass/css3 #inline-block - +inline-block - :padding 4px 10px - :background red - :color white + +inline-block + padding: 4px 10px + background: red + color: white diff --git a/doc-src/content/examples/compass/css3/opacity/markup.haml b/doc-src/content/examples/compass/css3/opacity/markup.haml index 12b6e13f..e0bab6f4 100644 --- a/doc-src/content/examples/compass/css3/opacity/markup.haml +++ b/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 \ No newline at end of file +#transparent.opacity-example \ 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 index ec7d8f9b..1e12cb6f 100644 --- a/doc-src/content/examples/compass/css3/opacity/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/opacity/stylesheet.sass @@ -1,22 +1,22 @@ @import compass/css3 -.opacityExample - :background red - :width 40px - :height 40px - :float left +.opacity-example + background: red + width: 40px + height: 40px + float: left -#opacity10 - +opacity(0.1) +#opacity-10 + +opacity(0.1) -#opacity20 - +opacity(0.2) +#opacity-20 + +opacity(0.2) -#opacity50 - +opacity(0.5) +#opacity-50 + +opacity(0.5) #opaque - +opaque + +opaque #transparent - +transparent + +transparent \ 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 index 987fef1b..afd6fdbb 100644 --- a/doc-src/content/examples/compass/css3/text_shadow/markup.haml +++ b/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 \ No newline at end of file + %span(class="has-custom-shadow") 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 index 017c12fc..dec2707c 100644 --- a/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass @@ -1,7 +1,7 @@ @import compass/css3 -.hasShadow - +text-shadow +.has-shadow + +text-shadow -.hasCustomShadow - +text-shadow(red, 3px, 3px, 0) \ No newline at end of file +.has-custom-shadow + +text-shadow(red, 3px, 3px, 0) \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transform.haml b/doc-src/content/examples/compass/css3/transform.haml new file mode 100644 index 00000000..7a21d4eb --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transform/markup.haml b/doc-src/content/examples/compass/css3/transform/markup.haml new file mode 100644 index 00000000..f85cb2d8 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transform/stylesheet.sass b/doc-src/content/examples/compass/css3/transform/stylesheet.sass new file mode 100644 index 00000000..bbb975bf --- /dev/null +++ b/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) \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transition.haml b/doc-src/content/examples/compass/css3/transition.haml new file mode 100644 index 00000000..e56d7ff5 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transition/markup.haml b/doc-src/content/examples/compass/css3/transition/markup.haml new file mode 100644 index 00000000..b6086953 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/doc-src/content/examples/compass/css3/transition/stylesheet.sass b/doc-src/content/examples/compass/css3/transition/stylesheet.sass new file mode 100644 index 00000000..9b71b263 --- /dev/null +++ b/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 \ No newline at end of file