Merge branch 'edge' of git://github.com/imathis/compass into edge

This commit is contained in:
Eric Meyer 2009-11-23 10:40:19 -07:00
commit 5d812effd6
6 changed files with 91 additions and 10 deletions

6
examples/css3/config.rb Normal file
View File

@ -0,0 +1,6 @@
# Require any additional compass plugins here.
project_type = :stand_alone
css_dir = "stylesheets"
sass_dir = "src"
images_dir = "images"
relative_assets = true

View File

@ -0,0 +1,10 @@
@import compass/css3/gradient.sass
div
width: 200px
height: 100px
border: 1px solid #777
.linear
+v-gradient(#fff, #aaa, color_stop(50%, #ccc, 50%, #bbb))
.radial
+radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue)

View File

@ -4,3 +4,5 @@
@import css3/box_shadow.sass
@import css3/columns.sass
@import css3/box_sizing.sass
@import css3/box_shadow.sass
@import css3/text_shadow.sass

View File

@ -1,12 +1,20 @@
//**
Provides cross-browser css box shadows
for Webkit and the future
arguments are horizontal offset, vertical offset, blur and color
Provides cross-browser css box shadows for Webkit, Gecko, and CSS3 standard
arguments are color, horizontal offset, vertical offset, and blur
=box-shadow(!ho, !vo, !b, !c )
/* Webkit (Safari, Chrome)
-webkit-box-shadow= !ho !vo !b !c
/* Mozilla (Firefox, Camino)
-moz-box-shadow= !ho !vo !b !c
/* CSS3
box-shadow= !ho !vo !b !c
//**
These defaults make the arguments optional for this mixin
If you like, set different defaults in your project
!default_box_shadow_color ||= #333
!default_box_shadow_h_offset ||= 1px
!default_box_shadow_v_offset ||= 1px
!default_box_shadow_blur ||= 5px
=box-shadow(!color = !default_box_shadow_color, !hoff = !default_box_shadow_h_offset, !voff = !default_box_shadow_v_offset, !blur = !default_box_shadow_blur)
/* Webkit (Safari, Chrome) */
-webkit-box-shadow= !color !hoff !voff !blur
/* Gecko (Firefox, Camino) */
-moz-box-shadow= !color !hoff !voff !blur
/* CSS3 */
box-shadow= !color !hoff !voff !blur

View File

@ -0,0 +1,40 @@
=gradient(!type, !coords, !color_start, !color_end, !color_stop = false)
!gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})"
@if !color_stop
!gradient= !gradient + ", " + !color_stop
background: -webkit-gradient(#{!type}, #{!gradient})
background: -moz-#{!type}-gradient(#{!gradient})
//*
// This will yeild a radial gradient with an apparent specular highlight
+radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue)
=radial-gradient(!coords, !color1, !color2, !color_stop = false)
+gradient("radial", !coords, !color1, !color2, !color_stop)
//*
// This yields a linear gradient spanning from !start to !end coordinates
+linear-gradient("left top", "left bottom", #fff, #ddd)
=linear-gradient(!start, !end, !color1, !color2, !color_stop = false)
!coords = !start + ", " + !end
+gradient("linear", !coords, !color1, !color2, !color_stop)
//*
// This yields a gradient starting at the top with #fff, ending in #aaa
+v-gradient(#fff, #aaa)
// Same as above but with a #ccc at the halfway point
+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(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb))
=v-gradient(!color1, !color2, !color_stop = false)
+linear-gradient("left top", "left bottom", !color1, !color2, !color_stop)
//*
// This yields a horizontal linear gradient spanning from left to right
// It can be used just like v-gradient above
h-gradient(#fff, #ddd)
=h-gradient(!color1, !color2, !color_stop = false)
+linear-gradient("left top", "right top", !color1, !color2, !color_stop)

View File

@ -0,0 +1,15 @@
//**
Provides css text shadows
arguments are color, horizontal offset, vertical offset, and blur
//**
These defaults make the arguments optional for this mixin
If you like, set different defaults in your project
!default_text_shadow_color ||= #aaa
!default_text_shadow_h_offset ||= 1px
!default_text_shadow_v_offset ||= 1px
!default_text_shadow_blur ||= 1px
=text-shadow(!color = !default_text_shadow_color, !hoff = !default_text_shadow_h_offset, !voff = !default_text_shadow_v_offset, !blur = !default_text_shadow_blur)
text-shadow= !color !hoff !voff !blur