Sass mixins

_mixins.scss

// By David Pedersen (@davidpdrsn)
// https://gist.github.com/davidpdrsn/3101105
// Version 0.2

//////////////////////////////////////
/// Media queries ////////////////////
//////////////////////////////////////

// Foundation 3
@mixin small {
  @media (max-width: 767px) {
    @content;
  }
}
@mixin big {
  @media (min-width: 767px) {
    @content;
  }
}
@mixin bigger_than_page_width {
  @media (min-width: 1020px) {
    @content;
  }
}
@mixin page_width {
  @media (max-width: 1020px) {
    @content;
  }
}
@mixin page_width_to_small {
  @media (max-width: 1020px) and (min-width: 767px) {
    @content;
  }
}

// Pixel density
@mixin retina {
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    @content;
  }
}
@mixin non_retina {
  @media screen and (-webkit-min-device-pixel-ratio: 1) {
    @content;
  }
}


//////////////////////////////////////
/// Shapes ///////////////////////////
//////////////////////////////////////

@mixin arrow($width: 20px, $height: 20px, $direction: up, $color: red) {
  width: 0;
  height: 0;
  // Right
  @if $direction == right {
    border-top: $height / 2 solid transparent;
    border-bottom: $height / 2 solid transparent;
    border-left: $width solid $color;
  }
  // Left
  @if $direction == left {
    border-top: $height / 2 solid transparent;
    border-bottom: $height / 2 solid transparent;
    border-right: $width solid $color;
  }
  // Up
  @if $direction == up {
    border-left: $width / 2 solid transparent;
    border-right: $width / 2 solid transparent;
    border-bottom: $height solid $color;
  }
  // Down
  @if $direction == down {
    border-left: $width / 2 solid transparent;
    border-right: $width / 2 solid transparent;
    border-top: $height solid $color;
  }
}

//////////////////////////////////////
/// REMOVING DEFAULT STYLES //////////
//////////////////////////////////////

@mixin reset_link {
  a {
    color: inherit;
    border: none;
    text-decoration: none;
    &:hover, &:visited {
      color: inherit;
    }
  }
}

// Remove default submit button styles
@mixin reset_button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  background: none;
  border: none;
  -webkit-border-radius: none;
     -moz-border-radius: none;
          border-radius: none;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

@mixin reset_select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  border: none;
  -webkit-border-radius: none;
     -moz-border-radius: none;
          border-radius: none;
}

@mixin reset_input {
  -webkit-appearance: none;
  margin: 0;
  border-radius: 0;
  border: none;
  padding: 0;
  height: auto;
  box-shadow: none;
}

//////////////////////////////////////
/// CSS3 VENDOR PREFIXES /////////////
//////////////////////////////////////

@mixin border_box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

@mixin content_box {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

@mixin box_shadow($arg) {
  -webkit-box-shadow: $arg;
          box-shadow: $arg;
}

@mixin opacity($a) {
  opacity: $a;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" $a * 100 ")";
  filter: alpha(opacity= $a * 100 );
  zoom: 1;
}

@mixin linear_gradient($from, $to, $start: 'top') {
  background: mix($from, $to);
  @if $start == 'top' {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
    background: -webkit-linear-gradient(top, $from, $to);
    background:         linear-gradient(to bottom, $from, $to);
  } @else if $start == 'bottom' {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,$from), color-stop(100%,$to));
    background: -webkit-linear-gradient(bottom, $from, $to);
    background:         linear-gradient(to top, $from, $to);
  }
}

@mixin radial_gradient($from, $to) {
  background: mix($from, $to);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$from), color-stop(100%, $to));
  background: -webkit-radial-gradient($from, $to);
  background:         radial-gradient($from, $to);
}

@mixin transition($arg) {
  -webkit-transition: $arg;
          transition: $arg;
}

@mixin transform($arg) {
  -webkit-transform: $arg;
          transform: $arg;
}

//////////////////////////////////////
/// Helpers //////////////////////////
//////////////////////////////////////

@mixin clearfix {
  zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin image_replacement {
  display: block;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }
}

@mixin image_replacement_2 {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

// Set width and height both at once
@mixin size($dimensions) {
  width: $dimensions;
  height: $dimensions;
}

// Remove margin and padding
@mixin mp0 {
  padding: 0;
  margin: 0;
}

// Make a ul horizontal
@mixin horizontal_list {
  list-style: none;
  overflow: hidden;
  @include clearfix;
  > li {
    display: block;
    float: left;
  }
}

// absolutely position an element in the center
@mixin abs_center_vert($width) {
  position: absolute;
  top: 50%;
  margin-top: -($width / 2);
}

@mixin abs_center_hori($height) {
  position: absolute;
  left: 50%;
  margin-left: -($height / 2);
}

// Make a pseudo element absolutely positioned
@mixin pseudo_element_absolute {
  content: "";
  display: block;
  position: absolute;
}

@mixin arrow($width: 20px, $height: 20px, $direction: up, $color: red) {
  width: 0;
  height: 0;
  // Right
  @if $direction == right {
    border-top: $height / 2 solid transparent;
    border-bottom: $height / 2 solid transparent;
    border-left: $width solid $color;
  }
  // Left
  @if $direction == left {
    border-top: $height / 2 solid transparent;
    border-bottom: $height / 2 solid transparent;
    border-right: $width solid $color;
  }
  // Up
  @if $direction == up {
    border-left: $width / 2 solid transparent;
    border-right: $width / 2 solid transparent;
    border-bottom: $height solid $color;
  }
  // Down
  @if $direction == down {
    border-left: $width / 2 solid transparent;
    border-right: $width / 2 solid transparent;
    border-top: $height solid $color;
  }
}

//////////////////////////////////////
/// FUNCTIONS ////////////////////////
//////////////////////////////////////

// Calculate the width of something using the responsive formular
@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

@function rem($size) {
  @return 14px * $size;
}