diff --git a/examples/css3/config.rb b/examples/css3/config.rb new file mode 100644 index 00000000..cba98086 --- /dev/null +++ b/examples/css3/config.rb @@ -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 diff --git a/examples/css3/src/gradient.sass b/examples/css3/src/gradient.sass new file mode 100644 index 00000000..75a5b8d2 --- /dev/null +++ b/examples/css3/src/gradient.sass @@ -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) \ No newline at end of file diff --git a/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass b/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass index 9e39e053..fca2c261 100644 --- a/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass +++ b/lib/compass/frameworks/compass/stylesheets/compass/_css3.sass @@ -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 \ No newline at end of file diff --git a/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass b/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass index 91e476d0..7b9242a9 100644 --- a/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass @@ -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 \ No newline at end of file diff --git a/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass b/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass new file mode 100644 index 00000000..d67d863a --- /dev/null +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass @@ -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) \ No newline at end of file diff --git a/lib/compass/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass b/lib/compass/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass new file mode 100644 index 00000000..f76f4b9f --- /dev/null +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass @@ -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 \ No newline at end of file