Sass Mixins

_mixins.scss

// iOS style background blurring
// TODO: update as more support available
@mixin blur-bg($blur-amount: 10px) {
  -webkit-backdrop-filter: blur($blur-amount);
  backdrop-filter: blur($blur-amount);
}
// Usage:
// @include blur-bg;
// @include blur-bg(4px);


// Make divs go on angles properly.
// Based off: https://www.hongkiat.com/blog/skewed-edges-css/
@mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null) {
  // background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
  position: relative;
  width: 100%;
  &:before,
  &:after{
    background: inherit;
    content: '';
    height: 100%;
    position: absolute;
    transition: ease all .5s;
    width: 100%;
    z-index: -1;
  }

  @if $pos-top{
    &:before{
      @if $pos-top == 'topleft'{
        top: 0;
        transform: skewY($angle-top);
        transform-origin: right top;
      }
      @if $pos-top == 'topright' {
        top: 0;
        transform: skewY(-$angle-top);
        transform-origin: left top;
      } 
    }
  }

  @if $pos-btm{
    &:after{
      @if $pos-btm == 'bottomleft' {
        bottom: 0;
        transform: skewY(-$angle-btm);
        transform-origin: right bottom;
      } 

      @if $pos-btm == 'bottomright' {
        bottom: 0;
        transform: skewY($angle-btm);
        transform-origin: left bottom;
      } 
    }
  }
}
// Usage:
// @include angle-edge(topright, $angle);
// @include angle-edge(topright, $angle, bottomright, $angle);
// @include angle-edge(topleft, $angle, bottomright, $angle);
// @include angle-edge(bottomleft, $angle);


// Create an animated background gradient on an angle
@mixin background-gradient($colour) {
  background-color: $colour;
  background: linear-gradient(
    25deg, darken($colour, 18%), lighten($colour, 8%) );
  background-size: 400% 400%;
  -webkit-animation: bg 30s ease infinite;
  -moz-animation: bg 30s ease infinite;
  animation: bg 30s ease infinite;
  @-webkit-keyframes bg {
    0%{background-position:90% 0%}
    50%{background-position:11% 100%}
    100%{background-position:90% 0%}
  }
  @-moz-keyframes bg {
    0%{background-position:90% 0%}
    50%{background-position:11% 100%}
    100%{background-position:90% 0%}
  }
  @keyframes bg {
    0%{background-position:90% 0%}
    50%{background-position:11% 100%}
    100%{background-position:90% 0%}
  }
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


// Colour text (or font icons) with a gradient
// WebKit Only :( 
// + watch out for MS Edge's stupidity
@mixin color-gradient($colour) {
  color: $colour;
  background: -webkit-linear-gradient( 25deg, darken($colour, 8%), lighten($colour, 8%) );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


// Retina Images
@mixin image-2x($image, $width, $height) {
  @include hidpi {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}
// Usage: @include image-2x("logo2x.png", 100px, 25px);


// HiDPI (Retina) Mixin
// Examples: `@include hidpi(1.5)` or simply `@include hidpi`
@mixin hidpi($ratio: 1.3) {
  @media  screen and (-webkit-min-device-pixel-ratio: $ratio),
          screen and (min--moz-device-pixel-ratio: $ratio),
          screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
          screen and (min-resolution: round($ratio * 96dpi)),
          screen and (min-resolution: $ratio * 1dppx) {
            @content;
          }
}
// example - retina or not retina?
// Resetting retina--visible class to be hidden on regular displays
// .retina--visible {
//   display: none;
// }
// On hidpi
// @include hidpi {  
//   .retina--visible {
//     display: block;
//   }
//   .retina--hidden {
//     display: none;
//   }
// }


// Globally used body font declaration
@mixin body-font() {
  // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
// Usage:
// body {
//   @include body-font();
// }


// Flyout underlines
@mixin flyout-underline($colour: currentColor, $thickness: 0.125rem) {
  a.menu__link {
    position: relative;
    &:after {
      content: '';
      width: 0;
      height: $thickness;
      background: $colour;
      position: absolute;
      left: 0;
      bottom: -$thickness;
      transition: width 0.15s ease-in;
    }
    &:hover,
    &:active,
    &:focus {
      &:after {
        width: 100%;
      }
    }
  }
}
// Usage:
// @include flyout-underline();
// @include flyout-underline($colour-primary, 2px);



// Center vertically and horizontally
// From: https://css-tricks.com/centering-the-newest-coolest-way-vs-the-oldest-coolest-way/
%center-align {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}