[SCSS] Mixins

_mixins.scss

/**
  * @license
  * Copyright (c) 2017-present, Luca Bertolasi. All Rights Reserved.
  *
  * This software is licensed under the terms of the MIT license,
  * a copy of which can be found at https://opensource.org/licenses/MIT
  */

@mixin background($attachment: scroll,
                  $clip: border-box,
                  $colour: null,
                  $image: null,
                  $origin: padding-box,
                  $pos-x: center,
                  $pos-y: center,
                  $repeat: no-repeat,
                  $size: contain) {
  background-attachment: $attachment;
  background-clip: $clip;
  background-color: $colour;
  @if $image != null {
    background-image: url($image);
  }
  background-origin: $origin;
  background-position: $pos-x $pos-y;
  background-repeat: $repeat;
  background-size: $size;
} // background

@mixin font($family: null,
            $size: null,
            $style: null,
            $weight: null) {
  font-family: $family;
  font-size: $size;
  font-style: $style;
  font-weight: $weight;
} // font

@mixin ellipsis() {
  overflow: hidden; // needed for 'ellipsis' to work
  text-overflow: ellipsis;
  white-space: nowrap; // needed for 'ellipsis' to work
} // ellipsis

@mixin overflow-scrolling() {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
} // overflow-scrolling

@mixin absolute($width: null,
                $height: null,
                $top: null,
                $right: null,
                $bottom: null,
                $left: null,
                $line-height: null,
                $margin: null,
                $margin-top: null,
                $margin-right: null,
                $margin-bottom: null,
                $margin-left: null,
                $padding: null,
                $padding-top: null,
                $padding-right: null,
                $padding-bottom: null,
                $padding-left: null,
                $overflow: null,
                $z-index: null,
                $translate-x: 0,
                $translate-y: 0,
                $translate-z: 0) {
  position: absolute;
  width: $width;
  height: $height;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  line-height: $line-height;
  margin: $margin;
  margin-top: $margin-top;
  margin-right: $margin-right;
  margin-bottom: $margin-bottom;
  margin-left: $margin-left;
  padding: $padding;
  padding-top: $padding-top;
  padding-right: $padding-right;
  padding-bottom: $padding-bottom;
  padding-left: $padding-left;
  overflow: $overflow;
  z-index: $z-index;
  @if $translate-x != 0 or $translate-y != 0 or $translate-z != 0 {
    transform: translate3d($translate-x, $translate-y, $translate-z);
  }
} // absolute

@mixin flexbox($margin: auto,
              //  $align-content: space-around,
               $align-content: flex-start,
               $align-items: center,
               $direction: row,
               $wrap: wrap,
              //  $justify-content: space-around) {
               $justify-content: flex-start) {
  display: flex;
  margin: $margin;
  align-content: $align-content;
  align-items: $align-items;
  flex-direction: $direction;
  flex-wrap: $wrap;
  justify-content: $justify-content;
} // flexbox

@mixin animation($delay: 0s,
                 $direction: normal,
                 $duration: get($animations, sidebar),
                 $count: 1,
                 $timing: ease,
                 $name: null) {
  animation-delay: $delay;
  animation-direction: $direction;
  animation-duration: $duration;
  animation-iteration-count: $count;
  animation-timing-function: $timing;
  animation-name: $name;
} // animation