Provides a mixin for CSS text shadows. See CSS3 spec: text-shadow.
This file can be imported using:
@import "compass/css3/text-shadow"
#aaaaaa
These defaults make the arguments optional for this mixin If you like, set different defaults in your project
0px
0px
1px
false
=text-shadow($shadow-1: default, $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)
@if $shadow-1 == default
$shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color)
$shadows-without-spread: join((), (), comma)
$shadows: join((), (), comma)
$has-spread: false
@each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
@if length($shadow) > 4
$has-spread: true
$shadows-without-spread: append($shadows-without-spread, nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) nth($shadow, 5))
$shadows: append($shadows, $shadow)
else
$shadows-without-spread: append($shadows-without-spread, $shadow)
$shadows: append($shadows, $shadow)
@if $has-spread
text-shadow: $shadows-without-spread
text-shadow: $shadows
@mixin text-shadow($shadow-1: default, $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) {
@if $shadow-1 == default {
$shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
}
$shadows-without-spread: join((), (), comma);
$shadows: join((), (), comma);
$has-spread: false;
@each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
@if length($shadow) > 4 {
$has-spread: true;
$shadows-without-spread: append($shadows-without-spread, nth($shadow, 1) nth($shadow, 2) nth($shadow, 3) nth($shadow, 5));
$shadows: append($shadows, $shadow);
}
else {
$shadows-without-spread: append($shadows-without-spread, $shadow);
$shadows: append($shadows, $shadow);
}
}
@if $has-spread {
text-shadow: $shadows-without-spread;
}
text-shadow: $shadows;
}
Provides cross-browser text shadows when one or more shadows are needed. Each shadow argument should adhere to the standard css3 syntax for the text-shadow property.
Note: if any shadow has a spread parameter, this will cause the mixin to emit the shadow declaration twice, first without the spread, then with the spread included. This allows you to progressively enhance the browsers that do support the spread parameter.
=single-text-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false)
// A lot of people think the color comes first. It doesn't.
@if type-of($hoff) == color
$temp-color: $hoff
$hoff: $voff
$voff: $blur
$blur: $spread
$spread: $color
$color: $temp-color
// Can't rely on default assignment with multiple supported argument orders.
$hoff: if($hoff, $hoff, $default-text-shadow-h-offset)
$voff: if($voff, $voff, $default-text-shadow-v-offset)
$blur: if($blur, $blur, $default-text-shadow-blur)
$spread: if($spread, $spread, $default-text-shadow-spread)
$color: if($color, $color, $default-text-shadow-color)
// We don't need experimental support for this property.
@if $color == none or $hoff == none
+text-shadow(none)
@else
+text-shadow(compact($hoff $voff $blur $spread $color))
@mixin single-text-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false) {
// A lot of people think the color comes first. It doesn't.
@if type-of($hoff) == color {
$temp-color: $hoff;
$hoff: $voff;
$voff: $blur;
$blur: $spread;
$spread: $color;
$color: $temp-color;
}
// Can't rely on default assignment with multiple supported argument orders.
$hoff: if($hoff, $hoff, $default-text-shadow-h-offset);
$voff: if($voff, $voff, $default-text-shadow-v-offset);
$blur: if($blur, $blur, $default-text-shadow-blur);
$spread: if($spread, $spread, $default-text-shadow-spread);
$color: if($color, $color, $default-text-shadow-color);
// We don't need experimental support for this property.
@if $color == none or $hoff == none {
@include text-shadow(none);
}
@else {
@include text-shadow(compact($hoff $voff $blur $spread $color));
}
}
Provides a single cross-browser CSS text shadow.
Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread according to the configuration defaults above.