Sass mixins

mixins.scss

// Variables.

$small-range:   (0em, 40em);       /* 0, 640px */
$medium-range:  (40.063em, 64em);  /* 641px, 1024px */
$large-range:   (64.063em, 90em);  /* 1025px, 1440px */
$xlarge-range:  (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em);       /* 1921px */

@function lower-bound($range) {
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range, 1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

// Defining media queries
$screen:       "only screen" !default;
$landscape:    "#{$screen} and (orientation: landscape)" !default;
$portrait:     "#{$screen} and (orientation: portrait)" !default;
$small-up:     $screen !default;
$small-only:   "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
$medium-up:    "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only:  "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
$large-up:     "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only:   "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
$xlarge-up:    "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only:  "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
$xxlarge-up:   "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

@mixin breakpoint($point) {

    @if $point == 'small-up' {
        @media #{$small-up} { @content; }
    }
    @else if $point == 'small-only' {
        @media #{$small-only} { @content; }
    }
    @else if $point == 'medium-up' {
        @media #{$medium-up} { @content; }
    }
    @else if $point == 'medium-only' {
        @media #{$medium-only} { @content; }
    }
    @else if $point == 'large-up' {
        @media #{$large-up} { @content; }
    }
    @else if $point == 'large-only' {
        @media #{$large-only} { @content; }
    }
    @else if $point == 'xlarge-up' {
        @media #{$xlarge-up} { @content; }
    }
    @else if $point == 'xlarge-only' {
        @media #{$xlarge-only} { @content; }
    }
    @else if $point == 'xxlarge-up' {
        @media #{$xxlarge-up} { @content; }
    }
    @else if $point == 'xxlarge-only' {
        @media #{$xxlarge-only} { @content; }
    }
}

// Clearfix

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

// 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: */
}

@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;
}

// Opacity

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

// Text truncate

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

// Absolute position

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

// Font Size

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

// Line Height

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

// CSS Triangles

@mixin cssTriangle($size, $borderWidth, $borderColor, $direction, $bg:$white) {
    position:relative;
    background:$bg;
    border:$borderWidth solid $borderColor;

    $d:top;
    $margin:left;

    @if $direction == top {
        $d: bottom;
    } @else if $direction == bottom {
        $d: top;
    } @else if $direction == left {
        $d: right;
    } @else {
        $d: left;
    }

    @if $direction == top or $direction == bottom {
        $margin: left;
    } @else {
        $margin: top;
    }

    &:after, &:before {
        #{$d}: 100%;
        border: solid transparent;
        content: " ";
        width:0;
        height:0;
        position: absolute;
        pointer-events: none;
    }

    &:after {
        border-color: rgba(119, 100, 213, 0);
        border-#{$d}-color: $bg;
        border-width: $size;
        #{$margin}: 50%;
        margin-#{$margin}: -$size;
        z-index:3;
    }

    &:before {
        border-color: rgba(194, 225, 245, 0);
        border-#{$d}-color: $borderColor;
        border-width: $size + (round($borderWidth*1.41421356));
        #{$margin}: 50%;
        margin-#{$margin}: -($size + (round($borderWidth*1.41421356)));
        z-index:2;
    }
}

// Input Placeholder

@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

// Z-Index

$z-indexes: (
    "outdated-browser",
    "modal",
    "site-header",
    "page-wrapper",
    "site-footer"
);

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @return null;
    }
}

// Margin/Padding

@mixin push($spacing: $spacing-unit) { margin: $spacing; }
@mixin push--top($spacing: $spacing-unit) { margin-top: $spacing; }
@mixin push--bottom($spacing: $spacing-unit) { margin-bottom: $spacing; }
@mixin push--left($spacing: $spacing-unit) { margin-left: $spacing; }
@mixin push--right($spacing: $spacing-unit) { margin-right: $spacing; }
@mixin push--ends($spacing: $spacing-unit) { margin: { top: $spacing; bottom: $spacing; } }
@mixin push--sides($spacing: $spacing-unit) { margin: { left: $spacing; right: $spacing; } }

@mixin push--auto { margin: { left: auto; right: auto; } }
@mixin offset--sides($spacing: $spacing-unit) { margin: { left: -$spacing; right: -$spacing; } }

@mixin flush { margin: 0; }
@mixin flush--top { margin-top: 0; }
@mixin flush--bottom { margin-bottom: 0; }
@mixin flush--left { margin-left: 0; }
@mixin flush--right { margin-right: 0; }
@mixin flush--ends { margin: { top: 0; bottom: 0; } }
@mixin flush--sides { margin: { left: 0; right: 0; } }

// add/remove paddings

@mixin soft($spacing: $spacing-unit) { padding: $spacing; }
@mixin soft--top($spacing: $spacing-unit) { padding-top: $spacing; }
@mixin soft--bottom($spacing: $spacing-unit) { padding-bottom: $spacing; }
@mixin soft--left($spacing: $spacing-unit) { padding-left: $spacing; }
@mixin soft--right($spacing: $spacing-unit) { padding-right: $spacing; }
@mixin soft--ends($spacing: $spacing-unit) { padding: { top: $spacing; bottom: $spacing; } }
@mixin soft--sides($spacing: $spacing-unit) { padding: { left: $spacing; right: $spacing; } }

@mixin hard { padding: 0; }
@mixin hard--top { padding-top: 0; }
@mixin hard--bottom { padding-bottom: 0; }
@mixin hard--left { padding-left: 0; }
@mixin hard--right { padding-right: 0; }
@mixin hard--ends { padding: { top: 0; bottom: 0; } }
@mixin hard--sides { padding: { left: 0; right: 0; } }

//

@for $l from 1 through 10{

    $i: #{$l * 5}px;

    .push#{$i}{ @include push($i); }
    .push--top#{$i}{ @include push--top($i); }
    .push--bottom#{$i}{ @include push--bottom($i); }
    .push--left#{$i}{ @include push--left($i); }
    .push--right#{$i}{ @include push--right($i); }
    .push--ends#{$i}{ @include push--ends($i); }
    .push--sides#{$i}{ @include push--sides($i); }

    .soft#{$i}{ @include soft($i); }
    .soft--top#{$i}{ @include soft--top($i); }
    .soft--bottom#{$i}{ @include soft--bottom($i); }
    .soft--left#{$i}{ @include soft--left($i); }
    .soft--right#{$i}{ @include soft--right($i); }
    .soft--ends#{$i}{ @include soft--ends($i); }
    .soft--sides#{$i}{ @include soft--sides($i); }

}

.hard{ @include hard(); }
.hard--top{ @include hard--top(); }
.hard--bottom{ @include hard--bottom(); }
.hard--left{ @include hard--left(); }
.hard--right{ @include hard--right(); }
.hard--ends{ @include hard--ends(); }
.hard--sides{ @include hard--sides(); }

.flush{ @include flush(); }
.flush--top{ @include flush--top(); }
.flush--bottom{ @include flush--bottom(); }
.flush--left{ @include flush--left(); }
.flush--right{ @include flush--right(); }
.flush--ends{ @include flush--ends(); }
.flush--sides{ @include flush--sides(); }