_jquery.textshadow.scss

@import "compass/css3/text-shadow";
@import "compass/css3/user-interface";

@mixin jquery-text-shadow-base-styles {
  .ui-text-shadow, .ui-text-shadow-original {
    position: relative;
  }
  .ui-text-shadow-original {
    z-index: 1;
    text-shadow: none;
  }
  .ui-text-shadow-copy {
    position: absolute;
    z-index: 0;
    
    line-height: 110.74235%; // fixes #9

    // default positioning
    left: 0;
    top: 0;
    zoom: 1; // fixes #8 in IE7 and below
    
    // turn off shadow
    text-shadow: none;
    
    // turn off selection
    @include user-select(none);
  }
}

@mixin jquery-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: $default-text-shadow-color $default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur;
  }
  
  $shadows: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);

  // for supported browsers
  @include text-shadow($shadows...);

  $i: 1;
  @each $shadow in $shadows {
    $length: length($shadow);
    
    // some defaults
    $color: inherit;
    $opacity: 100;
    $offset-x: 0;
    $offset-y: 0;
    $blur-radius: 0;
    $spread: 0; // IE10 only, not used

    // pull apart the individual arguments from the list
    @if type-of(nth($shadow, 1)) == color {
      // color first, blur optional, spread optional
      @if $length >= 1 { $color: nth($shadow, 1); }
      @if $length >= 2 { $offset-x: nth($shadow, 2); }
      @if $length >= 3 { $offset-y: nth($shadow, 3); }
      @if $length >= 4 { $blur-radius: nth($shadow, 4); }
      @if $length == 5 { $spread: nth($shadow, 5); }
    } @else {
      // color last or missing, blur optional, spread optional
      @if type-of(nth($shadow, $length)) == color {
        $color: nth($shadow, $length);
      }
      @if $length >= 1 { $offset-x: nth($shadow, 1); }
      @if $length >= 2 { $offset-y: nth($shadow, 2); }
      @if $length >= 3 {
        @if type-of(nth($shadow, 3)) != color { $blur-radius: nth($shadow, 3); }
      }
      @if $length >= 4 {
        @if type-of(nth($shadow, 4)) != color { $spread: nth($shadow, 4); }
      }
    }

    // separate the color from the opacity
    @if $color != inherit {
      $opacity: round(alpha($color) * 100);
      $color: rgb(red($color), green($color), blue($color));
    }
    
    // remove the unit from the radius
    @if unit($blur-radius) == px {
      $blur-radius: $blur-radius / 1px;
    }      

    // for the jQuery text-shadow plug-in
    .ui-text-shadow-copy-#{$i} {
      color: $color;
      filter: if( $opacity < 100, unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity})"), unquote("") )
        if( $blur-radius > 0, unquote("progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=#{$blur-radius})"), unquote("") );
      left: $offset-x - $blur-radius;
      top: $offset-y - $blur-radius;
    }
    $i: $i + 1;
  }
}