// Border Radius @mixin border-radius($radius: 5px) {

-webkit-border-radius: $radius;
   -moz-border-radius: $radius;
        border-radius: $radius;

}

// Drop shadows @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {

-webkit-box-shadow: $shadow;
   -moz-box-shadow: $shadow;
        box-shadow: $shadow;

}

@mixin no-box-shadow {

box-shadow: 0 0 0;
-moz-box-shadow: 0 0 0;
-webkit-box-shadow: 0 0 0;

}

// Clearfix for clearing floats like a boss h5bp.com/q @mixin clearfix {

zoom: 1;
&:before,
&:after {
  display: table;
  content: "";
  zoom: 1;
  *display: inline;
}
&:after {
  clear: both;
}

} .clearfix { @include clearfix; }

// Gradients @mixin horizontal-gradient ($startColor: #555, $endColor: #333) {

background-color: $endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down

}

@mixin vertical-gradient ($startColor: #555, $endColor: #333) {

background-color: $endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
background-image: linear-gradient(top, $startColor, $endColor); // The standard
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down

}

// Transitions @mixin transition($transition) {

-webkit-transition: $transition;
   -moz-transition: $transition;
    -ms-transition: $transition;
     -o-transition: $transition;
        transition: $transition;

}

// Opacity @mixin opacity($opacity: 100) {

filter: alpha(opacity=$opacity);
-khtml-opacity: $opacity / 100;
  -moz-opacity: $opacity / 100;
       opacity: $opacity / 100;

}

// Box sizing @mixin box-sizing($boxmodel) {

-webkit-box-sizing: $boxmodel;
   -moz-box-sizing: $boxmodel;
    -ms-box-sizing: $boxmodel;
        box-sizing: $boxmodel;

}

// Background clipping (from bootstrap-sass) // 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;

}

// Font Stacks @mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {

font-size: $size;
font-weight: $weight;
line-height: $lineHeight;

} @mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {

font-family: $sans-body;
font-size: $size;
font-weight: $weight;
line-height: $lineHeight;

} @mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {

font-family: "Georgia", Times New Roman, Times, serif;
font-size: $size;
font-weight: $weight;
line-height: $lineHeight;

} @mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) {

font-family: "Monaco", Courier New, monospace;
font-size: $size;
font-weight: $weight;
line-height: $lineHeight;

}

// form fields

@mixin input-block-level() {

display: block;
width: 100%;
min-height: 28px; // Make inputs at least the height of their button counterpart
@include box-sizing(border-box); // Makes inputs behave like true block-level elements

}

// Horizontal dividers // ——————- // Dividers (basically an hr) within dropdowns and nav lists @mixin nav-divider($top: e5e5e5, $bottom: $white) {

// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
// to negative-margin away, but so it goes.
*width: 100%;
height: 1px;
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
*margin: -5px 0 5px;
overflow: hidden;
background-color: $top;
border-bottom: 1px solid $bottom;

}

// IE7 inline-block // —————- @mixin ie7-inline-block() {

*display: inline; /* IE7 inline-block hack */
*zoom: 1;

}

// IE7 likes to collapse whitespace on either side of the inline-block elements. // Ems because we’re attempting to match the width of a space character. Left // version is for form buttons, which typically come after other elements, and // right version is for icons, which come before. Applying both is ok, but it will // mean that space between those elements will be .6em (~2 space characters) in IE7, // instead of the 1 space in other browsers. @mixin ie7-restore-left-whitespace() {

*margin-left: .3em;

&:first-child {
  *margin-left: 0;
}

}

@mixin ie7-restore-right-whitespace() {

*margin-right: .3em;

&:last-child {
  *margin-left: 0;
}

}

@mixin at2x($image_name, $w: auto, $h: auto, $extention: ‘.png’) {

background-image: image_url($image_name + $extention);
$x2img : $image_name + '@2x' + $extention;

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
  background-image: image_url($x2img);
  background-size: $w $h;
}

}

// The Grid @mixin gridCore($columnWidth, $gutterWidth) {

.row {
  margin-left: $gutterWidth * -1;
  @include clearfix();
}

[class*="span"] {
  float: left;
  margin-left: $gutterWidth;
}

// Set the container width, and override it for fixed navbars in media queries
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); }

@include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth);
@include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);

} @mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {

@for $i from 1 through $cols {
  .span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
}

} @mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {

width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));

} @mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {

@for $i from 1 through $cols {
  .offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
}

} @mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {

margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));

}

// responsive grid

@mixin gridFluid($columnWidth, $gutterWidth) {

.row-fluid {
  width: 100%;
  @include clearfix();
  [class*="span"] {
    @include input-block-level();
    float: left;
    margin-left: $gutterWidth;
    *margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%);
  }
  [class*="span"]:first-child {
    margin-left: 0;
  }

  // generate .spanX
  @include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth);
}

} @mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {

@for $i from 1 through $cols {
  .span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) };
}

} @mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {

width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
*width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);

}

@mixin gridInput($columnWidth, $gutterWidth) {

input, textarea, .uneditable-input {
  margin-left: 0; // override margin-left from core grid system
}

// generate .spanX
@include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);

} @mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {

@for $i from 1 through $cols {
  input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); }
}

} @mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {

width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;

}

@mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {

// This isn't perfect, but it's better than nothing.
float: left;
margin-left: $gutterWidth;
@include gridFluidSpan($columns, $columnWidth, $gutterWidth);

}