Mixin to convert photoshop shadows to css rules
// The above require the mathsass library
//--------------------------------
// Photoshop Drop Shadow
//--------------------------------
@mixin photoshop-drop-shadow($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $opacity: 50, $inner: false) {
$angle: deg-to-rad($angle);
$h-shadow: cos($angle) * $distance;
$v-shadow: sin($angle) * $distance;
$css-spread: $size * $spread / 100;
$blur: $size - $css-spread;
$inset: if($inner != false, "inset", "");
$opacity: $opacity / 100;
$color: rgba($color, $opacity);
@include box-shadow($h-shadow $v-shadow $blur $css-spread $color unquote($inset));
}
//--------------------------------
// Photoshop Inner Shadow
//--------------------------------
@mixin photoshop-inner-shadow($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $opacity: 50) {
@include photoshop-drop-shadow($angle, $distance, $spread, $size, $color, $opacity, true);
}
//--------------------------------
// Photoshop Text Shadow
//--------------------------------
@mixin photoshop-text-shadow($angle: 0, $distance: 0, $spread: 0, $size: 0, $color: #000, $opacity: 50) {
$angle: deg-to-rad($angle);
$h-shadow: round(cos($angle) * $distance);
$v-shadow: round(sin($angle) * $distance);
$css-spread: $size * $spread / 100;
$blur: $size - $css-spread;
$opacity: $opacity / 100;
$color: rgba($color, $opacity);
@include text-shadow($h-shadow $v-shadow $blur $color);
}