//==|== decoration mixin ===================================================== // For more information on mixins go here: // sass-lang.com/#mixins // or here: // sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins // Author: // ========================================================================== */ @import “../functions/linear-gradient-colors”;

//This mixin will add border at given position. If no position is given (or position is all) //then the border will be applied to all sides @mixin add-border($border-position: all, $border-size: 1px, $border-pattern: solid, $border-color: #000) {

@if $border-position == 'all' {
        border: $border-size $border-pattern $border-color;
} @else {
        border-#{$border-position}: $border-size $border-pattern $border-color;
}

}

//this mixin will set the border-radius for either all sides or a specified //side @mixin add-border-radius($border-radius-position: all, $border-radius: 2px) {

@if $border-radius-position == 'all' {
        border-radius: $border-radius;
} @else {
        border-#{$border-radius-position}-radius: $border-radius;
}

}

//this mixin will create a linear-gradient. The parameters passed here are: //$pos: position of the gradient which defaults to top but can take bottom, left, or right //$stop-colors: these allow for any number of color stops values, color and length/percentage @mixin linear-gradient($pos, $stop-colors…) {

// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1));

// If $pos is missing from mixin, reassign vars and add default position
@if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
  $pos: top; // Default position
      }

$pos: unquote($pos);

$full: lgc($stop-colors...);

// Set the first stop-color as the default fallback color
$fallback-color: nth(nth($stop-colors, 1), 1);

background: $fallback-color;
background:  -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
background:     -moz-linear-gradient($pos, $full);
background:      -ms-linear-gradient($pos, $full);
background:       -o-linear-gradient($full);
background: unquote("linear-gradient(#{$full})");

}

//this mixin will create background image attached to a linear gradient background @mixin add-background-image-gradient($url, $position, $repeat, $gradient-pos, $stop-colors…){

$full: lgc($stop-colors...);
background: $url $position $repeat, nth(nth($stop-colors, 1), 1);
background: $url $position $repeat, -webkit-linear-gradient($gradient-pos, $full);
background: $url $position $repeat, -moz-linear-gradient($gradient-pos, $full);
background: $url $position $repeat, -ms-linear-gradient($gradient-pos, $full);
background: $url $position $repeat, -o-linear-gradient($full);
background: $url $position $repeat, unquote("linear-gradient(#{$full})");

}

//this mixin will set the box-shadow values. It will also allow for the felxibility of //doing an inset shadow. @mixin box-shadow ($isInset: false, $hOffset: 0, $vOffset: 0, $blur: 0, $spread: 0, $color: ccc) {

@if $isInset {
        -moz-box-shadow: inset $hOffset $vOffset $blur $spread $color;
        -webkit-box-shadow: inset $hOffset $vOffset $blur $spread $color;
        box-shadow: inset $hOffset $vOffset $blur $spread $color;
} @else {
        -moz-box-shadow: $hOffset $vOffset $blur $spread $color;
        -webkit-box-shadow: $hOffset $vOffset $blur $spread $color;
        box-shadow: $hOffset $vOffset $blur $spread $color;
}

}

// Background clipping // Heads up: FF 3.6 and under need “padding” instead of “padding-box” @mixin background-clip($clip) {

-webkit-background-clip: $clip;
   -moz-background-clip: $clip;
        background-clip: $clip;

}

//A mixin that creates a text stroke @mixin text-stroke ($stroke-width: 1px, $stroke-color: #000) {

-webkit-text-stroke: $stroke-width $stroke-color;
$negative-stroke-width: $stroke-width * -1;
text-shadow: 
  $negative-stroke-width $negative-stroke-width 0 #000,  
  $stroke-width $negative-stroke-width 0 #000,
  $negative-stroke-width $stroke-width 0 #000,
  $stroke-width $stroke-width 0 #000;

}