Mixins

8/18/2015 - 6:55 AM
///////////////////////////////////////////
/// COLORS
///////////////////////////////////////////

// Project Colors
$green: #8bc629 !default;
$dark-green: #506200 !default;
$dark-gray: #272830 !default;
$light-green: #abce10 !default;
$red: #ff0606 !default;
$yellow: #f6d22f !default;
 
// Cool
$aqua: #7FDBFF !default;
$blue: #0074D9 !default;
$navy: #001F3F !default;
$teal: #39CCCC !default;
// $green: #2ECC40 !default;
$olive: #3D9970 !default;
$lime: #01FF70 !default;

// Warm
// $yellow: #FFDC00 !default;
$orange: #FF851B !default;
// $red: #FF4136 !default;
$fuchsia: #F012BE !default;
$purple: #B10DC9 !default;
$maroon: #85144B !default;

// Gray Scale

$white: #fff !default;
$silver: #ddd !default;
$gray: #aaa !default;
$black: #111 !default;

$darken-1: rgba(0, 0, 0, 0.0625) !default;
$darken-2: rgba(0, 0, 0, 0.125) !default;
$darken-3: rgba(0, 0, 0, 0.25) !default;
$darken-4: rgba(0, 0, 0, 0.5) !default;

// $dark-gray: #333 !default;
$mid-gray: #777 !default;
$light-gray: #ccc !default;
$lighter-gray: #eee !default;

///////////////////////////////////////////
/// VARIABLES
///////////////////////////////////////////

// General html
// $base-font-family: "Helvetica Neue", Helvetica, sans-serif !default;

$base-font-family: 'ITCAvantGardeProMd', sans-serif !default;
$base-font-size: 14px !default;
$base-line-height: 30px !default;
$bold-font-weight: bold !default;

$font-base-color: #333333;;
$bg-color: $white;
$link-color: $black;
$hover-background-color: $darken-1 !default;

$monospace-font-family: "Source Code Pro", Consolas, monospace !default;

// Headings
$h1: 2rem !default; 
$h2: 1.5rem !default;
$h3: 1.25rem !default;
$h4: 1rem !default;
$h5: 0.875rem !default;
$h6: 0.75rem !default;

$heading-base-font-family: $base-font-family !default;
$heading-line-height: 1.25 !default;
$heading-font-weight: bold !default;

// Base buttons
$button-font-size: inherit !default;
$button-font-weight: $bold-font-weight !default;
$button-line-height: 1.125rem !default;
$button-padding-y: 0.5rem !default;
$button-padding-x: 1rem !default;

// Spaces
$space-1: 5px !default;
$space-2: 10px !default;
$space-3: 15px !default;
$space-4: 20px !default;
$space-5: 24px !default;
$space-6: 30px !default;

// In rems
// $space-1: 0.4167rem !default;
// $space-2: 0.8333rem !default;
// $space-3: 1.25rem !default;
// $space-4: 1.667rem !default;
// $space-5: 2.083rem !default;
// $space-6: 2.5rem !default;

// Base 12px
// 5px = 0.4167rem
// 8px = 0.6667rem
// 9px = 0.75rem
// 10px = 0.8333rem
// 11px = 0.9167rem
// 12px = 1rem (base)
// 13px = 1.083rem
// 14px = 1.167rem
// 15px = 1.25rem
// 16px = 1.333rem
// 18px = 1.5rem
// 20px = 1.667rem
// 22px = 1.833rem
// 24px = 2rem
// 25px = 2.083rem
// 26px = 2.167rem
// 28px = 2.333rem
// 30px = 2.5rem
// 32px = 2.667rem
// 34px = 2.833rem
// 36px = 3rem
// 38px = 3.167rem
// 40px = 3.333rem

// Breakpoints for Responsive States
$breakpoint-sm: "(min-width: 40em)" !default;
$breakpoint-md: "(min-width: 52em)" !default;
$breakpoint-lg: "(min-width: 64em)" !default;

// Container
$container-width: 64em !default;

//Borders
$border-width: 1px !default;
$border-color: #c9c9c9 !default;
$border-radius: 3px !default;

// Button sizes
$button-small-padding-y: 0.25rem !default;
$button-small-padding-x: 0.5rem !default;
$button-big-padding-y: 1rem !default;
$button-big-padding-x: 1.25rem !default;

// Heading sizes
$h1: 2rem !default;
$h2: 1.5rem !default;
$h3: 1.25rem !default;
$h4: 1rem !default;
$h5: 0.875rem !default;
$h6: 0.75rem !default;

$heading-line-height: 1.25 !default;

// Tables
$table-cell-padding-x: $space-2 !default;
$table-cell-padding-y: 0.25rem !default;

// Forms

$form-field-font-size: 1rem !default;
$form-field-height: 2.25rem !default;
$form-field-padding-y: 0.5rem !default;
$form-field-padding-x: 0.5rem !default;

$pre-background-color: $silver !default;
$button-background-color: $blue !default;

///////////////////////////////////////////
/// MIXINS
///////////////////////////////////////////

// Inline block
@mixin inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
}

/// Horizontally and vertically centers block elements
/// Important: you must have a parent element with `position: relative`.
/// @example scss - Usage
///   .foo {
///     @include center-both;
///   }
@mixin center-both {
    position: absolute;
    top: 50%;
    left: 50%;
    @include prefix(transform, translate(-50%, -50%), "webkit" "ms");
}

/// Vertically centers block elements with known height.
/// @access public
/// @param {Length} $height - Element's height
/// @example scss - Usage
///   .foo {
///     @include center-h(42px);
///   }
/// @example css - Result
///   .foo {
///     position: absolute;
///     top: 50%;
///     height: 42px;
///     margin-top: -21px;
///   }
@mixin center-h($height) {
    position: absolute;
    top: 50%;
    height: $height;
    margin-top: -($height / 2);
}

// Vertically centers block elements with unknown height.
// @access public
// @example scss - Usage
   // .foo {
   //   @include center-h--unk;
   // }
 // @example css - Result
 //   .foo {
 //     position: relative;
 //     top: 50%;
 //     -webkit-transform: translateY(-50%);
 //     -ms-transform: translateY(-50%);
 //     transform: translateY(-50%);
 //   }
@mixin center-h--unk {
    position: relative;
    top: 50%;
    @include prefix(transform, translateY(-50%), "webkit" "ms");
}

// Clearfix extend
// @access public
// @example scss - Usage
//   .foo {
//     @extend %clearfix;
//   }
%clearfix {
    *zoom: 1;

    &:before, &:after {
        content: ' ';
        display: table;
    }

    &:after {
        clear: both;
    }
}

// HIDE TEXT
// @include hide-text;

@mixin hide-text {
    overflow: hidden;
    text-indent: -9000px;
    display: block;
}

// @mixin hide-text() {
//   font: 0/0 a;
//   color: transparent;
//   text-shadow: none;
//   background-color: transparent;
//   border: 0;
// }

// Horizontal Navigation Lists
@mixin navigation-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    > li {
        display: block;
        float: left;
        &:last-child {
            margin-right: 0px;
        }
    }
}

// FONT SIZE
// @include font-size(16);
// This mixin sets the font size in rem's with a px fallback.

@mixin font-size($sizeValue: 12) {
    font-size: $sizeValue + px;
    //fallback for old browsers
    font-size: 0.125 * $sizeValue + rem;
}

// LINE HEIGHT 
// @include line-height (16);
// This mixin sets the line height in rem's with a px fallback.

@mixin line-height($heightValue: 12) {
    line-height: $heightValue + px;
    //fallback for old browsers
    line-height: 0.125 * $heightValue + rem;
}


// BORDER BOX
@mixin border-box {
    -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

// RETINA.JS


@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);

  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($file + '@2x.' + $type); 
          -moz-background-size: $width $height;
    -o-background-size: $width $height;
    -webkit-background-size: $width $height;
    background-size: $width $height;
    }
  }
}
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Mixins
