Q
Version: 1.1.alpha.0
Source on Github

Compass Box Shadow

The box-shadow mixins are used to apply an inset or drop shadow to a block element.

This file can be imported using: @import "compass/css3/box-shadow"

Examples

Box-shadow
css3 mixin for box-shadow

Imports

  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help

$graceful-usage-threshold

The prefixed support threshold for box-shadow. Defaults to the $graceful-usage-threshold.

#333333

The default color for box shadows

0px

The default horizontal offset. Positive is to the right.

0px

The default vertical offset. Positive is down.

5px

The default blur length.

null

The default spread length.

null

The default shadow inset: inset or null (for standard shadow).

Functions

view source 

@function default-box-shadow()
  @return compact(if($default-box-shadow-inset, inset, null) $default-box-shadow-h-offset $default-box-shadow-v-offset $default-box-shadow-blur $default-box-shadow-spread $default-box-shadow-color)

@function default-box-shadow() {
  @return compact(if($default-box-shadow-inset, inset, null) $default-box-shadow-h-offset $default-box-shadow-v-offset $default-box-shadow-blur $default-box-shadow-spread $default-box-shadow-color);
}

Mixins

view source 

=box-shadow($shadow...)
  $shadow: set-arglist-default($shadow, default-box-shadow())
  +prefixed-properties(css-boxshadow, $box-shadow-support-threshold, (box-shadow: $shadow))

@mixin box-shadow($shadow...) {
  $shadow: set-arglist-default($shadow, default-box-shadow());
  @include prefixed-properties(css-boxshadow, $box-shadow-support-threshold, (box-shadow: $shadow));
}

Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box shadows are needed. Each shadow argument should adhere to the standard css3 syntax for the box-shadow property.

view source 

=single-box-shadow($hoff: null, $voff: null, $blur: null, $spread: null, $color: null, $inset: $default-box-shadow-inset)
  // Handle legacy argument order
  @if not ($hoff == none or $hoff == null) and type-of($hoff) != number
    @warn "The $color argument for single-box-shadow is now the 5th argument instead of the 1st."
    $tmp-color: $color
    $color: $hoff
    $hoff: $voff
    $voff: $blur
    $blur: $spread
    $spread: $tmp-color
  // Need to set these defaults here instead of the arglist to support the above backwards compat handling
  @if $hoff == null
    $hoff: $default-box-shadow-h-offset
  @if $voff == null
    $hoff: $default-box-shadow-v-offset
  @if $blur == null
    $blur: $default-box-shadow-blur
  @if $spread == null
    $spread: $default-box-shadow-spread
  @if $color == null
    $color: $default-box-shadow-color
  @if not ($inset == true or $inset == false or $inset == null or $inset == inset)
    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset"
  @if $hoff == none
    +box-shadow(none)
  @else
    $full: $hoff $voff
    @if $blur
      $full: $full $blur
    @if $spread
      $full: $full $spread
    @if $color
      $full: $full $color
    @if $inset
      $full: inset $full
    +box-shadow($full)

@mixin single-box-shadow($hoff: null, $voff: null, $blur: null, $spread: null, $color: null, $inset: $default-box-shadow-inset) {
  // Handle legacy argument order
  @if not ($hoff == none or $hoff == null) and type-of($hoff) != number {
    @warn "The $color argument for single-box-shadow is now the 5th argument instead of the 1st.";
    $tmp-color: $color;
    $color: $hoff;
    $hoff: $voff;
    $voff: $blur;
    $blur: $spread;
    $spread: $tmp-color;
  }
  // Need to set these defaults here instead of the arglist to support the above backwards compat handling
  @if $hoff == null {
    $hoff: $default-box-shadow-h-offset;
  }
  @if $voff == null {
    $hoff: $default-box-shadow-v-offset;
  }
  @if $blur == null {
    $blur: $default-box-shadow-blur;
  }
  @if $spread == null {
    $spread: $default-box-shadow-spread;
  }
  @if $color == null {
    $color: $default-box-shadow-color;
  }
  @if not ($inset == true or $inset == false or $inset == null or $inset == inset) {
    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
  }
  @if $hoff == none {
    @include box-shadow(none);
  }
  @else {
    $full: $hoff $voff;
    @if $blur {
      $full: $full $blur;
    }
    @if $spread {
      $full: $full $spread;
    }
    @if $color {
      $full: $full $color;
    }
    @if $inset {
      $full: inset $full;
    }
    @include box-shadow($full);
  }
}

Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3. Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset.