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:
 *
 * Compass Shit
 * Compass Plugins
 * Colors
 * Gradients
 * Typography
 * Global Styles
 *
 */


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

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


/* =============================================================================
   Plugins
   ============================================================================= */

// 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;


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

}


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

@mixin baseline {
    margin: 1.6em 0;
}

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


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