From 371e2103a7f5cc0dd73e1ee078f1128b8a394e29 Mon Sep 17 00:00:00 2001 From: Eric Meyer Date: Tue, 9 Nov 2010 00:09:20 -0700 Subject: [PATCH] text shadows v2, supports multiple shadows --- doc-src/content/upgrading/css3-v2.markdown | 8 +++ .../compass/css3/_text-shadow-v2.scss | 72 +++++++++++++++++++ .../stylesheets/compass/css3/_version-2.scss | 2 +- 3 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss diff --git a/doc-src/content/upgrading/css3-v2.markdown b/doc-src/content/upgrading/css3-v2.markdown index 499f85d4..6d520b7e 100644 --- a/doc-src/content/upgrading/css3-v2.markdown +++ b/doc-src/content/upgrading/css3-v2.markdown @@ -57,6 +57,14 @@ To upgrade, you have two choices: @include box-shadow(inset 5px 5px 2px 3px darken($border_color, 40)) + +## Text-Shadow + +The `text-shadow` mixin API has been changed in the exact same ways as the `box-shadow` mixin. +The available mixins are now `single-text-shadow` which functions as before, with `text-shadow` +and `multiple-text-shadows` accepting up to 10 space-delimited shadow arguments. Upgrade by following +the process listed above. + ## Transform diff --git a/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss b/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss new file mode 100644 index 00000000..2b796676 --- /dev/null +++ b/frameworks/compass/stylesheets/compass/css3/_text-shadow-v2.scss @@ -0,0 +1,72 @@ +@import "shared"; + +// These defaults make the arguments optional for this mixin +// If you like, set different defaults in your project + +$default-text-shadow-color: #aaa !default; +$default-text-shadow-h-offset: 1px !default; +$default-text-shadow-v-offset: 1px !default; +$default-text-shadow-blur: 1px !default; + +// Provides CSS text shadows. +// Arguments are color, horizontal offset, vertical offset, and blur +@mixin single-text-shadow( + $color: $default-text-shadow-color, + $hoff: $default-text-shadow-h-offset, + $voff: $default-text-shadow-v-offset, + $blur: $default-text-shadow-blur +) { + // XXX I'm surprised we don't need experimental support for this property. + @if $color == none { + text-shadow: none; + } @else { + text-shadow: $color $hoff $voff $blur; + } +} + +// Provides cross-browser text shadows when one or more shadows are needed. +@mixin multiple-text-shadows( + $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur, + $shadow-2 : false, + $shadow-3 : false, + $shadow-4 : false, + $shadow-5 : false, + $shadow-6 : false, + $shadow-7 : false, + $shadow-8 : false, + $shadow-9 : false, + $shadow-10: false +) { + // Ugh. Sass needs variable argument support. + $shadow : $shadow-1; + @if $shadow-2 { $shadow: $shadow, $shadow-2; } + @if $shadow-3 { $shadow: $shadow, $shadow-3; } + @if $shadow-4 { $shadow: $shadow, $shadow-4; } + @if $shadow-5 { $shadow: $shadow, $shadow-5; } + @if $shadow-6 { $shadow: $shadow, $shadow-6; } + @if $shadow-7 { $shadow: $shadow, $shadow-7; } + @if $shadow-8 { $shadow: $shadow, $shadow-8; } + @if $shadow-9 { $shadow: $shadow, $shadow-9; } + @if $shadow-10 { $shadow: $shadow, $shadow-10; } + // Anticlimactic, we know. + text-shadow: $shadow +} + +@mixin text-shadow( + $shadow-1 : $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur, + $shadow-2 : false, + $shadow-3 : false, + $shadow-4 : false, + $shadow-5 : false, + $shadow-6 : false, + $shadow-7 : false, + $shadow-8 : false, + $shadow-9 : false, + $shadow-10: false +) { + @include multiple-text-shadows( + $shadow-1, $shadow-2, $shadow-3, + $shadow-4, $shadow-5, $shadow-6, + $shadow-7, $shadow-8, $shadow-9, $shadow-10 + ); +} \ No newline at end of file diff --git a/frameworks/compass/stylesheets/compass/css3/_version-2.scss b/frameworks/compass/stylesheets/compass/css3/_version-2.scss index ebe2eb81..54f7681c 100644 --- a/frameworks/compass/stylesheets/compass/css3/_version-2.scss +++ b/frameworks/compass/stylesheets/compass/css3/_version-2.scss @@ -2,7 +2,7 @@ @import "inline-block"; @import "opacity"; @import "box-shadow-v2"; -@import "text-shadow"; +@import "text-shadow-v2"; @import "columns"; @import "box-sizing"; @import "box";