diff --git a/doc-src/content/examples/compass/css3/gradient/markup.haml b/doc-src/content/examples/compass/css3/gradient/markup.haml index ab893e81..efd72744 100644 --- a/doc-src/content/examples/compass/css3/gradient/markup.haml +++ b/doc-src/content/examples/compass/css3/gradient/markup.haml @@ -1,35 +1,37 @@ -%p - this box has no gradients +.ex + .gradient-example + %p + This box has no gradients -.gradient-example +.ex + #radial-gradient.gradient-example + %p + This will yield a radial gradient with an apparent specular highlight -%p - This will yield a radial gradient with an apparent specular highlight +.ex + #linear-gradient.gradient-example + %p + This yields a linear gradient spanning from $start to $end coordinates -#radial-gradient.gradient-example +.ex + #v-gradient.gradient-example + %p + This yields a gradient starting at the top with #fff, ending in #aaa -%p - This yields a linear gradient spanning from $start to $end coordinates +.ex + #v-gradient-2.gradient-example + %p + Same as above but with a #ccc at the halfway point -#linear-gradient.gradient-example +.ex + #v-gradient-3.gradient-example + %p + Same as the first example but with #ccc at the + 30% from the top, and #bbb at 70% from the top -%p - This yields a gradient starting at the top with #fff, ending in #aaa -#v-gradient.gradient-example +.ex + #h-gradient.gradient-example + %p + This yields a horizontal linear gradient spanning from left to right. -%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. - -#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 index a827b866..5e07c757 100644 --- a/doc-src/content/examples/compass/css3/gradient/stylesheet.sass +++ b/doc-src/content/examples/compass/css3/gradient/stylesheet.sass @@ -1,10 +1,18 @@ -@import compass/css3 +@import compass +.ex + width: 48% + margin-right: 2% + float: left + +clearfix .gradient-example width: 80px height: 80px background: red margin: 20px + border: 1px solid #111 + float: left + margin: 1em 1em 0 0 // This will yield a radial gradient with an apparent specular highlight #radial-gradient diff --git a/doc-src/content/stylesheets/_examples.sass b/doc-src/content/stylesheets/_examples.sass index 125b9a7e..1cb6f1f4 100644 --- a/doc-src/content/stylesheets/_examples.sass +++ b/doc-src/content/stylesheets/_examples.sass @@ -4,6 +4,8 @@ h1 text-align: center + #demo + +clearfix #how +full(12) +pie-clearfix