mixins.scss

// Mixins and examples

/* Responsive Breakpoints
   ========================================================================== */
@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (min-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (min-width: 37.5em)  { @content; }
  }
}

/* Usage */

.page-wrap {
  width: 75%;
  @include breakpoint(large) { width: 60%; }
  @include breakpoint(medium) { width: 80%; }
  @include breakpoint(small) { width: 95%; }
}

/* Sub-section comment block
   ========================================================================== */

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

/* Usage */

div.logo {
   background: url("logo.png") no-repeat;
   @include image-2x("logo2x.png", 100px, 25px);
 }

/* Clearfix
  ========================================================================== */

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

/* Usage */

.article {
     @include clearfix();
}

/* Box Model
  ========================================================================== */

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
     -moz-box-sizing: $box-model; // Firefox <= 19
          box-sizing: $box-model;
}

/* Usage */

*,
*:after,
*:before {
  @include box-sizing(border-box);
}

/* Border Radius
  ========================================================================== */

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Single side border-radius

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

/* Usage */

.button {
  @include border-radius(5px);
}

.submit-button{
  @include border-top-radius(10px);
}

/* Opacity
  ========================================================================== */

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

/* Usage */

.article-heading {
  @include opacity(0.8);
}


/* Center-align a block level element
  ========================================================================== */

@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Usage */

.footer-wrap {
  width: 450px;
  @include center-block;
}

/* Text overflow
  ========================================================================== */

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Usage */

.text-truncate {
  @include text-truncate;
}

/* Absolute positioned
  ========================================================================== */

@mixin abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

/* Usage */

.abs {
  @include abs-pos(10px, 10px, 5px, 15px);
}

/* Font Size
  ========================================================================== */

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

/* Usage */

body {
  @include font-size(16);
}

/* Cross browser inline block
  ========================================================================== */

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

/* Usage */

.icon {
  @include inline-block();
}


/* Text replacement (instead of text-indent)
  ========================================================================== */

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

/* Usage */

.header h1 {
  @include text-replacement();
}

/* Line Height
  ========================================================================== */

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

/* Usage */

body {
  @include line-height (16);
}

/* Placeholder
  ========================================================================== */

@mixin placeholder-color($color){
  &.placeholder{
    color: $color
  }

  &:-moz-placeholder{
    color: $color
  }
    
  &::-webkit-input-placeholder{
    color: $color
  }

  &:-ms-input-placeholder{
    color: $color
  }
}

/* Usage */

input{
  @include placeholder-color(#FA4A4A)
}