github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clean up the gradient demo page.

Browse Source
This commit is contained in:
Chris Eppstein 2010-11-12 22:01:26 -08:00
parent 354efcbde9
commit cd49bd4bbd
3 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,10 +1,18 @@
@import compass/css3 @import compass
.ex
width: 48%
margin-right: 2%
float: left
+clearfix
.gradient-example .gradient-example
width: 80px width: 80px
height: 80px height: 80px
background: red background: red
margin: 20px margin: 20px
border: 1px solid #111
float: left
margin: 1em 1em 0 0
// This will yield a radial gradient with an apparent specular highlight // This will yield a radial gradient with an apparent specular highlight
#radial-gradient #radial-gradient

2
doc-src/content/stylesheets/_examples.sass
View File

@ -4,6 +4,8 @@
h1 h1
text-align: center text-align: center
#demo
+clearfix
#how #how
+full(12) +full(12)
+pie-clearfix +pie-clearfix