/* ==========================================================================

Mixins.scss
========================================================================== */

// TODO: split all mixins into their own partials under the `/mixin` directory

// TODO: sort this out // this is temp @mixin primary-font {

font-family: 'Open Sans', sans-serif;

}

@mixin secondary-font {

font-family: 'Droid Serif', serif;

}

@mixin secondary-font-black {

font-family: 'Droid Serif', serif;

}

//*TODO-sort this out, used somewhere… @mixin button-theme($button-color) {

border-color: $button-color;
background-color: $button-color;

&:hover {
   background-color: darken($button-color, 6%);
}

&:active {
   background-color: darken($button-color, 6%);
}

&.ghost {
  background-color: transparent;
  border: 2px solid $button-color;
  color: $button-color;
}

}

// Clearfix Mixin // ————– // You can @include clearfix(); on any element // to clear floats and such. Why not @extend? // Because @extend doesn't work inside of media // queries and will eventually bite you in the butt @mixin clearfix() {

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

}

// Clearfix Class // ————– // here ya go, if you really want to add a .clearfix // class in the markup you can, but it's always better // to pass something like this symantically with Sass .clearfix {

@include clearfix();

}

// Content Shadow // ————– // to add a box shadow with depth to a content block, pass // this mixin to an element, like this @include content-shadow(2) // where the parameter number is the shadow depth you want to add @mixin content-shadow($depth) {

box-shadow: 0 (1px * $depth) (4px * $depth) rgba(#1d1e1f, 0.1);

}

// Background Image // —————- // a simple straight forward mixin for adding a background image // to an element without having to write all lines of bg code @mixin background-image( $bg-color, $bg-image, $bg-repeat, $bg-position, $bg-size ) {

background-color: $bg-color;
background-image: $bg-image;
background-repeat: $bg-repeat;
background-position: $bg-position;
background-size: $bg-size;

}