Ghost/core/client/assets/sass/modules/mixins.scss

/*
 * These are Sass variables used to make our CSS more dynamic by re-using
 * common property values throughout our styles. Don't overdo it.
 *
 * Table of Contents:
 *
 * Bourbon
 * Breakpoint
 * Typography
 * Colors
 * Gradients
 * Global Styles
 *
 */


/* =============================================================================
   Bourbon 
   ============================================================================= */

// Bourbon - http://bourbon.io/
@import "bourbon/_bourbon";
$rounded: 2px;
$shadow: rgba(0,0,0,0.05) 0 1px 5px;
$default-transition-duration: 0.3s;


/* =============================================================================
   Breakpoint
   ============================================================================= */

// Breakpoint - http://breakpoint-sass.com/
@import "breakpoint";
$breakpoint-default-feature: max-width;

// Max widths
$netbook: 1000px;
$tablet: 800px;
$mobile: 400px;

// Min widths
$biggerthan-widescreen: min-width 1500px, min-width 1500px;
$biggerthan-netbook: min-width 1000px, min-width 1000px;
$biggerthan-tablet: min-width 800px, min-width 800px;
$biggerthan-mobile: min-width 400px, min-width 400px;

// Heights
$letterbox: max-height 600px, max-height 600px;

// Pixel Densities
$retina: 2 device-pixel-ratio;


/* =============================================================================
   Typography
   ============================================================================= */

$font-family: 'Open Sans', sans-serif;
$font-family-serif: serif;
$font-family-mono: Inconsolata, monospace;

@mixin baseline {
    margin: 1.6em 0;
}

//Does this really need to be a mixin?
@mixin hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}


/* =============================================================================
   Colors
   ============================================================================= */

$darkgrey: #242628;
$grey: #35393b;
$midgrey: #7d878a;
$lightgrey: #e2edf2;

$brown: #aaa9a2;
$midbrown: #c0bfb6;
$lightbrown: #edece4;

$blue: #5BA4E5;
$red: #e25440;
$orange: #F2A925;
$green: #9FBB58;


/* =============================================================================
   Gradients
   ============================================================================= */

/*
 * Auto Gradients
 *
 * If the gradient mixin is called with 1 value: gradient(#444) - then a second
 * color which is 10% lighter than the entered value will be auto-generated. If
 * the gradient mixin is called with 2 values: gradient(#444,#666) - then those
 * two values will be used instead, as normal.
 */

@mixin gradient($color1: #aaa, $color2: none) {

    @if $color2 == 'none' {
        background-color: lighten($color1, 10%);
        background-image: -webkit-linear-gradient(bottom, $color1, lighten($color1, 10%));
        background-image:    -moz-linear-gradient(bottom, $color1, lighten($color1, 10%));
        background-image:     -ms-linear-gradient(bottom, $color1, lighten($color1, 10%));
        background-image:         linear-gradient(bottom, $color1, lighten($color1, 10%));
    } @else {
        background-color: $color2;
        background-image: -webkit-linear-gradient(bottom, $color1, $color2);
        background-image:    -moz-linear-gradient(bottom, $color1, $color2);
        background-image:     -ms-linear-gradient(bottom, $color1, $color2);
        background-image:         linear-gradient(to top, $color1, $color2);
    }

}

// The same as the above, but with the colours reversed.

@mixin inversegradient($color1: #aaa, $color2: none) {

    @if $color2 == 'none' {
        background-color: $color1;
        background-image: -webkit-linear-gradient(bottom, lighten($color1, 10%), $color1);
        background-image:    -moz-linear-gradient(bottom, lighten($color1, 10%), $color1);
        background-image:     -ms-linear-gradient(bottom, lighten($color1, 10%), $color1);
        background-image:         linear-gradient(bottom, lighten($color1, 10%), $color1);
    } @else {
        background-color: $color1;
        background-image: -webkit-linear-gradient(bottom, $color2, $color1);
        background-image:    -moz-linear-gradient(bottom, $color2, $color1);
        background-image:     -ms-linear-gradient(bottom, $color2, $color1);
        background-image:         linear-gradient(to top, $color2, $color1);
    }

}


/* =============================================================================
   Global Elements
   ============================================================================= */

%box, .box {
    padding: 15px;
    margin-bottom: 15px;
    background: #fff;
    position: relative;
    box-shadow: $shadow;

    header {
        height:14px;
        border-bottom: 1px solid $lightbrown;
        padding-bottom: 15px;
        margin-bottom: 15px;
        text-transform: uppercase;
        font-size:0.85em;
        color: $brown;
    }

    footer {
        height:14px;
        border-top: 1px solid $lightbrown;
        padding-top: 10px;
        margin-top:15px;
        text-transform: uppercase;
        font-size:0.85em;
        color: $brown;
    }

    header a,
    footer a {
        color:$brown;

        &:hover {
            color:$darkgrey;
            text-decoration: none;
        }
    }
}

/* =============================================================================
   Animations
   ============================================================================= */

@include keyframes(fade-out) {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}