/* ==========================================================================
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;
}