Q
Version: 0.11.6
Source on Github

Compass Box Shadow

This module is fairly new and is currently in BETA (β).

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. Shared Utilities

Configurable Variables help

#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.

false

The default spread length.

false

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

Mixins

view source

=box-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)
  // This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
  $legacy: type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and type-of(if($shadow-5, $shadow-5, 0)) == number and ($shadow-6 == inset or type-of($shadow-6) == bool) and ($shadow-2 or $shadow-3 or $shadow-4 or $shadow-5 or $shadow-6)
  @if $legacy
    @warn "Passing separate arguments for a single shadow to box-shadow is deprecated. " + "Pass the values as a single space-separated list, or use the single-box-shadow mixin. " + "See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info."
    +single-box-shadow(if($shadow-1, $shadow-1, $default-box-shadow-color), if($shadow-2, $shadow-2, $default-box-shadow-h-offset), if($shadow-3, $shadow-3, $default-box-shadow-v-offset), if($shadow-4, $shadow-4, $default-box-shadow-blur), if($shadow-5, $shadow-5, $default-box-shadow-spread), if($shadow-6, $shadow-6, $default-box-shadow-inset))
  @else
    @else if $shadow-1 == default
      $shadow-1: -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color))
    $shadow: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    +experimental(box-shadow, $shadow, -moz, -webkit, -o, not -ms, not -khtml, official)
@mixin box-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) {
  // This has to be on a single line due to a bug in the scss parser: https://github.com/nex3/sass/issues/issue/26
  $legacy: type-of($shadow-1) == color and type-of(if($shadow-2, $shadow-2, 0)) == number and type-of(if($shadow-3, $shadow-3, 0)) == number and type-of(if($shadow-4, $shadow-4, 0)) == number and type-of(if($shadow-5, $shadow-5, 0)) == number and ($shadow-6 == inset or type-of($shadow-6) == bool) and ($shadow-2 or $shadow-3 or $shadow-4 or $shadow-5 or $shadow-6);
  @if $legacy {
    @warn "Passing separate arguments for a single shadow to box-shadow is deprecated. " + "Pass the values as a single space-separated list, or use the single-box-shadow mixin. " + "See http://beta.compass-style.org/help/tutorials/upgrading/antares/ for more info.";
    @include single-box-shadow(if($shadow-1, $shadow-1, $default-box-shadow-color), if($shadow-2, $shadow-2, $default-box-shadow-h-offset), if($shadow-3, $shadow-3, $default-box-shadow-v-offset), if($shadow-4, $shadow-4, $default-box-shadow-blur), if($shadow-5, $shadow-5, $default-box-shadow-spread), if($shadow-6, $shadow-6, $default-box-shadow-inset)); }
  @else {
    @else if $shadow-1 == default {
      $shadow-1: -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color)); }
    $shadow: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
    @include experimental(box-shadow, $shadow, -moz, -webkit, -o, not -ms, not -khtml, official); } }

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($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur, $spread: $default-box-shadow-spread, $inset: $default-box-shadow-inset)
  @if not ($inset == true or $inset == false or $inset == inset)
    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset"
  @if $color == none
    +box-shadow(none)
  @else
    $full: $hoff $voff
    @else 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($color: $default-box-shadow-color, $hoff: $default-box-shadow-h-offset, $voff: $default-box-shadow-v-offset, $blur: $default-box-shadow-blur, $spread: $default-box-shadow-spread, $inset: $default-box-shadow-inset) {
  @if not ($inset == true or $inset == false or $inset == inset) {
    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset"; }
  @if $color == none {
    @include box-shadow(none); }
  @else {
    $full: $hoff $voff;
    @else 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.