mixins

_mixins.scss

@mixin fill($offset: 0) {
  // get a list with 4 numbers
  @if type_of($offset) == 'number' {
    $offset: ($offset $offset $offset $offset);
  } @else if type_of($offset) == 'list' {
    @if length($offset) == 2 {
      $offset: join($offset, $offset);
    } @else if length($offset) == 3 {
      $offset: append($offset, nth($offset, 2));
    }
  } @else {
    $offset: (0 0 0 0);
  }

  top: nth($offset, 1);
  right: nth($offset, 2);
  bottom: nth($offset, 3);
  left: nth($offset, 4);
}

@mixin hideItem {
  visibility: hidden;
  opacity: 0;
}

@mixin showItem {
  visibility: visible;
  opacity: 1;
}

@mixin showOn($breakpoint, $displayType: block) {
  display: none !important;
  @media(#{$breakpoint}) {
    display: $displayType !important;
  }
}

@mixin animUnderline($color: blue, $height: 1px, $activeClass: 'active') {
  > * {
    position: relative;
    &::after {
      content: "";
      background: $color;
      height: $height;
      position: absolute;
      top: 100%;
      left: 100%;
      right: 0;
      //left: 50%;
      //right: 50%;
      //transition: .16s all 0.025s;
      transition: .3s all cubic-bezier(0.86, 0, 0.07, 1);
    }
    &.#{$activeClass} {
      &::after {
        //left: 0;
        //right: 0;
        left: 15%;
        right: 15%;
      }
    }
    &:hover {
      &::after {
        left: 0;
        right: 0;
        //background: $color !important;
      }
      ~ *::after {
        left: 0;
        right: 100%;
      }
    }
  }
}

@mixin addLoaderAnim($loaderImage, $loaderAnimDuration: 0.3s) {
  //&:not(.no-js) {
  &:after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    pointer-events: none;
    z-index: 99990;
    background: #fff url($loaderImage) center 48% no-repeat;
    animation: $loaderAnimDuration removeLoader 0.25s forwards;
    animation-play-state: paused;
  }
  &:not(.loading):after { // class removed by JS
    animation-delay: 0.25s;
    animation-play-state: running;
    animation-fill-mode: forwards;
  }
  &.no-js:after { // JS disabled
    animation-delay: 3s !important;
    animation-play-state: running;
    animation-fill-mode: forwards;
  }

  @keyframes removeLoader {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      display: none !important;
      //content: none;  // !chrome bug
    }
  }
}

@mixin centeredTitle($sizes: 4em 1em, $lineStyle: '1px solid #ccc', $media: 'min-width: 990px') {

  @if type-of($sizes) != 'list' {
    $sizes: ($sizes 1em);
  }

  // 990px is also a number
  @if type-of($media) == 'number' {
    $media: 'min-width: #{$media}';
  }

  $lineWidth: nth($sizes, 1);
  $spacing: nth($sizes, 2);

  @media only screen and (#{$media}) {
    text-align: center;
    &:before,
    &:after {
      content: "";
      display: inline-block;
      transform-origin: right;
      font-family: Arial, sans-serif;
      font-weight: normal;
      font-size: 21px;
      vertical-align: middle;
      margin-right: $spacing;
      width: $lineWidth;
      border-bottom: unquote($lineStyle);
    }
    &:after {
      transform-origin: left;
      margin-left: $spacing;
      margin-right: 0;
    }
  }
}

//https://gabri.me/blog/sass-mixin-for-auto-numbering-with-css
@mixin auto-numbers($numbered-element: 'li', $sep: '', $counter: item, $nested-parent: false, $style: 'decimal') {
  $sel: ();
  @if $nested-parent {
    $sel: append($sel, unquote($nested-parent));

    #{$nested-parent} {
      list-style: none;
      margin-left: 0;
    }
  }

  $sel: append($sel, unquote('&'), comma);

  #{$sel} {
    counter-reset: #{$counter};
    > #{$numbered-element} {
      &:before {
        counter-increment: #{$counter};
        //content: if($nested-parent, counters(#{$counter}, "#{$sep} ") "#{$sep} ", counter(#{$counter}, #{$style}) "#{$sep} ");
        content: if($nested-parent, counters(#{$counter}, "#{$sep}") "#{$sep}", counter(#{$counter}, #{$style}) "#{$sep}");
      }
    }
  }
}

@mixin listWithSeparator($separator: '|', $spacing: 0.33em, $color: inherit, $addFirst: false, $addLast: false) {

  @if $addLast == true {
    $selector: '&:after';
  } @else {
    $selector: '&:not(:last-child):after';
  }

  @if $addFirst == true {
    $selector: #{$selector} + ', &:first-child:before';
  }

  > * {
    display: inline-block;
    #{$selector} {
      content: $separator;
      padding-right: $spacing;
      padding-left: $spacing;
      color: $color;
      display: inline-block;
    }
    @if $addFirst == true {
      &:first-child:before {
        padding-left: 0;
      }
    }
  }
}

@mixin fill($offset: 0) {

  // get a list with 4 numbers
  @if type_of($offset) == 'number' {
    $offset: ($offset $offset $offset $offset);
  } @else if type_of($offset) == 'list' {
    @if length($offset) == 2 {
      $offset: join($offset, $offset);
    } @else if length($offset) == 3 {
      $offset: append($offset, nth($offset, 2));
    }
  } @else {
    $offset: (0 0 0 0);
  }

  top: nth($offset, 1);
  right: nth($offset, 2);
  bottom: nth($offset, 3);
  left: nth($offset, 4);
}

@mixin gutter($margin) {
  margin: $margin;
}

@mixin highlightLines($size, $color) {
  display: inline;
  background: $color;
  box-shadow: $size 0 0 $color, $size*-1 0 0 $color;
}

@mixin linear-gradient($pos, $g1, $g2: null,
                       $g3: null, $g4: null,
                       $g5: null, $g6: null,
                       $g7: null, $g8: null,
                       $g9: null, $g10: null,
                       $fallback: null) {
  // Detect what type of value exists in $pos
  $pos-type: type-of(nth($pos, 1));
  $pos-spec: null;
  $pos-degree: null;

  // If $pos is missing from mixin, reassign vars and add default position
  @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
    $g10: $g9;
    $g9: $g8;
    $g8: $g7;
    $g7: $g6;
    $g6: $g5;
    $g5: $g4;
    $g4: $g3;
    $g3: $g2;
    $g2: $g1;
    $g1: $pos;
    $pos: null;
  }

  @if $pos {
    $positions: _linear-positions-parser($pos);
    $pos-degree: nth($positions, 1);
    $pos-spec: nth($positions, 2);
  }

  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;

  // Set $g1 as the default fallback color
  $fallback-color: nth($g1, 1);

  // If $fallback is a color use that color as the fallback color
  @if (type-of($fallback) == color) or ($fallback == "transparent") {
    $fallback-color: $fallback;
  }

  background-color: $fallback-color;
  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}

@mixin media($size) {
  @media only screen and ($size) {
    @content;
  }
}

@mixin lazy-anim() {
  @media($desktop) {
    html:not(.no-js) & {
      opacity: 0;
      transition: opacity 0.33s;
      &.lazyloaded {
        opacity: 1;
      }
    }
  }
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin maintain-ratio($ratio: 1 1) {
  @if length($ratio) < 2 or length($ratio) > 2 {
    @warn "$ratio must be a list with two values.";
  }

  $width: 100%;
  $height: percentage(nth($ratio, 2) / nth($ratio, 1));

  width: $width;
  height: 0;
  padding-bottom: $height;
}

@mixin arrow($size: 1em, $color: #bbb, $direction: right) {
  position: relative;
  z-index: 0;
  &:before {
    content: "";
    position: absolute;
    border: $size solid transparent;
    z-index: -1;
    @if $direction == right {
      top: 50%;
      left: 100%;
      border-left-color: $color;
      transform: translate3d(0, -50%, 0);
    } @else if $direction == left {
      top: 50%;
      left: 0;
      border-right-color: $color;
      transform: translate3d(-100%, -50%, 0);
    } @else if $direction == down {
      top: 100%;
      left: 50%;
      border-top-color: $color;
      transform: translate3d(-50%, 0, 0);
    } @else if $direction == up {
      top: 0;
      left: 50%;
      border-bottom-color: $color;
      transform: translate3d(-50%, -100%, 0);
    }
  }
}

/// Mixin to place items on a circle
/// @author Hugo Giraudel
/// @author Ana Tudor
/// @param {Integer} $item-count - Number of items on the circle
/// @param {Length} $circle-size - Large circle size
/// @param {Length} $item-size - Single item size
@mixin on-circle($item-count, $circle-size, $item-size, $rotation: 0) {
  position: relative;
  width: $circle-size;
  height: $circle-size;
  //border-radius: 50%;
  padding: 0;
  list-style: none;

  > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -($item-size / 2);
    width: $item-size;
    height: $item-size;

    $angle: (360 / $item-count);
    $rot: $rotation;
    //$rot: 14;
    //$rot: 0;

    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg);
      }

      $rot: $rot + $angle;
    }
  }
}

@mixin addButtonIcon($icon) {
  &:before {
    background: url('/site/templates/images/icons/#{$icon}') center center no-repeat;
  }
}

//@include addButtonIcon($icon: 'edit.svg');

////
// A collection of function for advanced type checking
// @author Hugo Giraudel
////

@function is-number($value) {
  @return type-of($value) == 'number';
}

@function is-time($value) {
  @return is-number($value) and index('ms' 's', unit($value)) != null;
}

@function is-duration($value) {
  @return is-time($value);
}

@function is-angle($value) {
  @return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value)) != null;
}

@function is-frequency($value) {
  @return is-number($value) and index('Hz' 'kHz', unit($value)) != null;
}

@function is-integer($value) {
  @return is-number($value) and round($value) == $value;
}

@function is-relative-length($value) {
  @return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null;
}

@function is-absolute-length($value) {
  @return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null;
}

@function is-percentage($value) {
  @return is-number($value) and unit($value) == '%';
}

@function is-length($value) {
  @return is-relative-length($value) or is-absolute-length($value);
}

@function is-resolution($value) {
  @return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null;
}

@function is-position($value) {
  @return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null;
}

@function strip-units($value) {
  @return $value / ($value * 0 + 1);
}

@mixin animUnderline($color: blue, $height: 1px, $activeClass: 'active') {
  > * {
    position: relative;
    &::after {
      content: "";
      background: $color;
      height: $height;
      position: absolute;
      top: 100%;
      left: 100%;
      right: 0;
      //left: 50%;
      //right: 50%;
      //transition: .16s all 0.025s;
      transition: .3s all cubic-bezier(0.86, 0, 0.07, 1);
    }
    &.#{$activeClass} {
      &::after {
        //left: 0;
        //right: 0;
        left: 15%;
        right: 15%;
      }
    }
    &:hover {
      &::after {
        left: 0;
        right: 0;
        //background: $color !important;
      }
      ~ *::after {
        left: 0;
        right: 100%;
      }
    }
  }
}


//https://gabri.me/blog/sass-mixin-for-auto-numbering-with-css
@mixin auto-numbers($numbered-element: 'li', $sep: '', $counter: item, $nested-parent: false, $style: 'decimal') {
  $sel: ();
  @if $nested-parent {
    $sel: append($sel, unquote($nested-parent));

    #{$nested-parent} {
      list-style: none;
      margin-left: 0;
    }
  }

  $sel: append($sel, unquote('&'), comma);

  #{$sel} {
    counter-reset: #{$counter};
    > #{$numbered-element} {
      &:before {
        counter-increment: #{$counter};
        //content: if($nested-parent, counters(#{$counter}, "#{$sep} ") "#{$sep} ", counter(#{$counter}, #{$style}) "#{$sep} ");
        content: if($nested-parent, counters(#{$counter}, "#{$sep}")"#{$sep}", counter(#{$counter}, #{$style})"#{$sep}");
      }
    }
  }
}

/**
 * Return width-height, optionally modified with a multiplier.
 */
@mixin sizes($sizes, $multiplier: 1) {

  @if type_of($sizes) == 'number' {
    $sizes: ($sizes $sizes);
  } @else if type_of($sizes) != 'list' {
    $sizes: (0 0);
  }

  width: round(nth($sizes, 1) * $multiplier);
  height: round(nth($sizes, 2) * $multiplier);
}



@mixin arrow($size: 1em, $color: #bbb, $direction: right) {
  position: relative;
  z-index: 0;
  &:before {
    content: "";
    position: absolute;
    border: $size solid transparent;
    z-index: -1;
    @if $direction == right {
      top: 50%;
      left: 100%;
      border-left-color: $color;
      transform: translate3d(0, -50%, 0);
    } @else if $direction == left {
      top: 50%;
      left: 0;
      border-right-color: $color;
      transform: translate3d(-100%, -50%, 0);
    } @else if $direction == down {
      top: 100%;
      left: 50%;
      border-top-color: $color;
      transform: translate3d(-50%, 0, 0);
    } @else if $direction == up {
      top: 0;
      left: 50%;
      border-bottom-color: $color;
      transform: translate3d(-50%, -100%, 0);
    }
  }
}