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
Configurable Variables help
$default-box-shadow-color
#333333
The default color for box shadows
$default-box-shadow-h-offset
0px
The default horizontal offset. Positive is to the right.
$default-box-shadow-v-offset
0px
The default vertical offset. Positive is down.
$default-box-shadow-blur
5px
The default blur length.
$default-box-shadow-spread
false
The default spread length.
$default-box-shadow-inset
false
The default shadow inset: inset or false (for standard shadow).
Mixins
view sourcebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
=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.
single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset)
=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.