dylanburkey
3/2/2015 - 10:34 PM

Mixins to use in 2015.

Mixins to use in 2015.

base-font-size: 16px !default;
$base-line-height: 24px !default;
$lincoln-red: #be1e2d;
$black: rgb(0,0,0);
$white: rgb(255,255,255);
$red: rgb(190,30,45);

$tan: rgb(228,227,207);
$dark-red: rgb(139,14,26);

$dark-black: #333;
$b75: rgb(102,102,102);
$b50: rgb(153,153,153);
$b25: rgb(204,204,204);
$b10: rgb(230,230,230);

/**
 * Functions
 */

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

@mixin rem-size($size,$context) {
  #{$context}: $size; //Fallback in px
  #{$context}: calculateRem($size);
}


@function rem($size){
	$remValue: $size / $base-font-size;
	@return #{$remValue}rem;
}

@mixin box-sizing($type: border-box) {
	&,&:before,&:after {
		-moz-box-sizing: $type;
		-webkit-box-sizing: $type;
		box-sizing: $type;
	}
}

@mixin font-size($font-size, $line-height:true){
    font-size:$font-size;
    font-size:($font-size / $base-font-size)*1rem;
    @if $line-height == true{
        line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
    }
}

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

@mixin large-desktop-style {
	@media (min-width: $large-desktop-style){
		@content;
	}
}

@mixin desktop-style {
	@media (min-width: $desktop-bp){
		@content;
	}
}

@mixin tablet-style {
	@media (min-width: $tablet-bp){
		@content;
	}
}