_mixins.scss

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}

@mixin text-field {
 display: inline-block;
  outline: none;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  @include rounded();
  @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));
}

@mixin button($color: $red, $text_color: $white) {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font: 14px/100% Arial, Helvetica, sans-serif;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  @include rounded();
  @include box-shadow(0, 1px, 2px, rgba(0, 0, 0, 0.2));

  color: $text_color !important;
  font-weight: bold;
  border: solid 1px darken($color, 18%);
  background: $color;
  @include gradient(saturate($color, 15%), darken($color, 15%));

  &:hover {
    text-decoration: none;
    background: saturate($color, 10%);
    @include gradient(saturate($color, 5%), darken($color, 5%));
  }

  &:active {
    position: relative;
    top: 1px;
    color: saturate($color, 15%);
    @include gradient(saturate($color, 15%), lighten($color, 15%));
  }
}

@mixin rounded($radius: 0.5em) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin gradient($from, $to) {
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

$break-xsmall: 200px;
$break-small: 320px;
$break-medium: 768px;
$break-large: 992px;
$break-xlarge: 1200px;

@mixin breakpoint($point) {
    @if $point == xlarge {
        @media (max-width: $break-xlarge) {
            @content;
        }
    }
    @else if $point == large {
        @media (max-width: $break-large) {
            @content;
        }
    }
    @else if $point == medium {
        @media (max-width: $break-medium) {
            @content;
        }
    }
    @else if $point == small {
        @media (max-width: $break-small) {
            @content;
        }
    }
    @else if $point == xsmall {
        @media (max-width: $break-xsmall) {
            @content;
        }
    }
    @else if $point == halfscreen {
        @media (max-height: 800px) {
            @content;
        }
    }

    @else if $point == tablet-landscape {
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
            @content;
        }
    }
    @else if $point == tablet-portrait {
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
            @content;
        }
    }
}

/*Set a rem font size with pixel fallback*/

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

@mixin font-size($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

/* useage 
    p {
        @include font-size(14px)
    }
*/


/* Animations and Keyframes */
@mixin animation($animate...) {
    $max: length($animate);
    $animations: '';

    @for $i from 1 through $max {
        $animations: #{$animations + nth($animate, $i)};

        @if $i < $max {
            $animations: #{$animations + ", "};
        }
    }

    -webkit-animation: $animations;
    -moz-animation: $animations;
    -o-animation: $animations;
    animation: $animations;
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }

    @-moz-keyframes #{$animationName} {
        @content;
    }

    @-o-keyframes #{$animationName} {
        @content;
    }

    @keyframes #{$animationName} {
        @content;
    }
}

/*usage

@include keyframes(move-the-object) {
  0%   { left: 100px; }
  100% { left: 200px; }
}

.object-to-animate {
  @include animation('move-the-object .5s 1', 'move-the-object-again .5s 1 .5s');
} 
*/


@mixin transition($args...) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

/*
    a {
  color: gray;
  @include transition(color .3s ease);
  &:hover {
    color: black;
  }
}
*/

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

%clearfix {
    *zoom: 1;

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

    &:after {
        clear: both;
    }
}

/*
    .container-with-floated-children {
  @extend %clearfix;
}
*/

%visuallyhidden {
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    position: absolute;
}

/*Usage 

<button class="mobile-navigation-trigger">
  <b class="visually-hidden">Open the navigation</b>
  <img src="img/mobile-navigation-icon.svg">
</button>

.visually-hidden {
  @extend %visuallyhidden;
}
*/