From ec7be709c2dd2e40b022b176da03e12663aa0fa4 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 11:10:23 -0600 Subject: [PATCH 1/9] rewrote box shadow to have optional arguments, and defaults --- .../stylesheets/compass/css3/_box_shadow.sass | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) 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..d1711bad 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 horizontal 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, !hoff = !default_box_shadow, !voff = !default_box_shadow, !blur = !default_box_shadow) + /* 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 From 483af9ac319d691c4868def66433839268136919 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 11:11:34 -0600 Subject: [PATCH 2/9] added linear gradient mixin --- .../stylesheets/compass/css3/_gradient.sass | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass 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..b8cc79f8 --- /dev/null +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass @@ -0,0 +1,19 @@ +=gradient(!type, !coords, !color_start, !color_end, !stop_1 = 0, !stop_1_pos = .3, !stop_2 = 0, !stop_2_pos = .6, !stop_3 = 0, !stop_3_pos = .9) + !gradient: #{!coords}, from(#{!color_start}), to(#{!color_end}) + @if !stop_1 != 0 + !gradient= !gradient + color-stop(#{!stop_1_pos}, #{!stop_1}) + @if !stop_2 != 0 + !gradient= !gradient + color-stop(#{!stop_2_pos}, #{!stop_2}) + @if !stop_3 != 0 + !gradient= !gradient + color-stop(#{!stop_3_pos}, #{!stop_3}) + background: -webkit-gradient(#{!type}, #{!gradient}) + background: -moz-#{!type}-gradient(#{!gradient}) + +=linear-gradient(!coords, !color1, !color2) + +gradient("linear", !coords, !color1, !color2) + +=v-gradient(!color1, !color2) + =linear-gradient("left top, left bottom", !color1, !color2) + +=h-gradient(!color1, !color2) + =linear-gradient("left top, right top", !color1, !color2) \ No newline at end of file From 9d8253fa051d39215315f138f902716829c9b915 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sat, 21 Nov 2009 09:26:54 -0800 Subject: [PATCH 3/9] Added a color-stop function to simplify the creation of gradients with multiple stop points. --- lib/compass/sass_extensions/functions.rb | 3 ++- lib/compass/sass_extensions/functions/color_stop.rb | 10 ++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 lib/compass/sass_extensions/functions/color_stop.rb diff --git a/lib/compass/sass_extensions/functions.rb b/lib/compass/sass_extensions/functions.rb index a945b59d..f80445b5 100644 --- a/lib/compass/sass_extensions/functions.rb +++ b/lib/compass/sass_extensions/functions.rb @@ -1,7 +1,7 @@ module Compass::SassExtensions::Functions end -%w(selectors enumerate urls display inline_image).each do |func| +%w(selectors enumerate urls display inline_image color_stop).each do |func| require "compass/sass_extensions/functions/#{func}" end @@ -11,6 +11,7 @@ module Sass::Script::Functions include Compass::SassExtensions::Functions::Urls include Compass::SassExtensions::Functions::Display include Compass::SassExtensions::Functions::InlineImage + include Compass::SassExtensions::Functions::ColorStop end # Wierd that this has to be re-included to pick up sub-modules. Ruby bug? diff --git a/lib/compass/sass_extensions/functions/color_stop.rb b/lib/compass/sass_extensions/functions/color_stop.rb new file mode 100644 index 00000000..a0902dfe --- /dev/null +++ b/lib/compass/sass_extensions/functions/color_stop.rb @@ -0,0 +1,10 @@ +module Compass::SassExtensions::Functions::ColorStop + def color_stop(*args) + raise Sass::SyntaxError, "An even number of arguments must be passed to color-stop()" unless args.size % 2 == 0 + stops = [] + while args.size > 0 + stops << "color-stop(#{args.shift}, #{args.shift})" + end + Sass::Script::String.new(stops.join(", ")) + end +end From a3b52a23ee44c362e6ac7fb3177549e2e4a8e747 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 14:47:32 -0600 Subject: [PATCH 4/9] updated gradient example to use sass script color stop function, added radial gradient support --- .../stylesheets/compass/css3/_gradient.sass | 49 +++++++++++++------ 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass b/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass index b8cc79f8..d67d863a 100644 --- a/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_gradient.sass @@ -1,19 +1,40 @@ -=gradient(!type, !coords, !color_start, !color_end, !stop_1 = 0, !stop_1_pos = .3, !stop_2 = 0, !stop_2_pos = .6, !stop_3 = 0, !stop_3_pos = .9) - !gradient: #{!coords}, from(#{!color_start}), to(#{!color_end}) - @if !stop_1 != 0 - !gradient= !gradient + color-stop(#{!stop_1_pos}, #{!stop_1}) - @if !stop_2 != 0 - !gradient= !gradient + color-stop(#{!stop_2_pos}, #{!stop_2}) - @if !stop_3 != 0 - !gradient= !gradient + color-stop(#{!stop_3_pos}, #{!stop_3}) +=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}) -=linear-gradient(!coords, !color1, !color2) - +gradient("linear", !coords, !color1, !color2) +//* + // 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) -=v-gradient(!color1, !color2) - =linear-gradient("left top, left bottom", !color1, !color2) +//* + // This yields a linear gradient spanning from !start to !end coordinates + +linear-gradient("left top", "left bottom", #fff, #ddd) -=h-gradient(!color1, !color2) - =linear-gradient("left top, right top", !color1, !color2) \ No newline at end of file +=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 From 8ddebad39d696b110ea70aa2a8ac7721c4693dd9 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 14:50:42 -0600 Subject: [PATCH 5/9] added example to demonstrate and test gradient mixin --- examples/css3/config.rb | 6 ++++++ examples/css3/src/gradient.sass | 10 ++++++++++ 2 files changed, 16 insertions(+) create mode 100644 examples/css3/config.rb create mode 100644 examples/css3/src/gradient.sass 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 From 858227ab0f1fe1b8fd9c5ee3daaf8089cafb2ebe Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 14:57:10 -0600 Subject: [PATCH 6/9] fixed typo on box_shadow mixin --- .../compass/stylesheets/compass/css3/_box_shadow.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 d1711bad..6647f388 100644 --- a/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass @@ -1,6 +1,6 @@ //** Provides cross-browser css box shadows for Webkit, Gecko, and CSS3 standard - arguments are horizontal color, horizontal offset, vertical offset, and blur + arguments are color, horizontal offset, vertical offset, and blur //** These defaults make the arguments optional for this mixin From 4b26355dc076d0ea98d72b4c92909a95e1154dc7 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 15:05:43 -0600 Subject: [PATCH 7/9] fixed variables in box shadow mixin --- .../compass/stylesheets/compass/css3/_box_shadow.sass | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 6647f388..7b9242a9 100644 --- a/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass +++ b/lib/compass/frameworks/compass/stylesheets/compass/css3/_box_shadow.sass @@ -11,7 +11,7 @@ !default_box_shadow_v_offset ||= 1px !default_box_shadow_blur ||= 5px -=box-shadow(!color = !default_box_shadow, !hoff = !default_box_shadow, !voff = !default_box_shadow, !blur = !default_box_shadow) +=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) */ From 31dab72ff32cc06bc519c75cfb6d7090a93ad5ce Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 15:06:00 -0600 Subject: [PATCH 8/9] added text shadow mixin --- .../stylesheets/compass/css3/_text_shadow.sass | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 lib/compass/frameworks/compass/stylesheets/compass/css3/_text_shadow.sass 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 From 8ab06aa1838cb2d2a34aa0a63cd38f5d86670673 Mon Sep 17 00:00:00 2001 From: B Mathis Date: Sat, 21 Nov 2009 15:07:41 -0600 Subject: [PATCH 9/9] added box shadow and text shadow to default css3 partial --- lib/compass/frameworks/compass/stylesheets/compass/_css3.sass | 2 ++ 1 file changed, 2 insertions(+) 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