app/common/styles/base/mixins.scss

//Breakpoints mixin
@mixin mediaQuery($breakpoint) {
  @if $breakpoint == "x-small" {
    @media (min-width: 25.000em) { //400px
      @content;
    }
  }
  @if $breakpoint == "small" {
    @media (min-width: 47.938em) { //767px
      @content;
    }
  } @else if $breakpoint == "medium" {
    @media (min-width: 64.000em) { //1024px
      @content;
    }
  } @else if $breakpoint == "large" {
    @media (min-width: 85.375em) { //1366px
      @content;
    }
  } @else if $breakpoint == "x-large" {
    @media (min-width: 100.000em) { //1600px
      @content;
    }
  }
}

//Fonts mixin
@mixin fontFamily {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-weight: 200;
}

@mixin fontCourierBold {
  font-family: "Courier New", Helvetica, arial, sans-serif;
  font-weight: 700;
}

//Transitions mixin
@mixin fastTransition-all {
  transition: all .5s ease;
}

@mixin slowTransition-all {
  transition: all 1.5s ease;
}

//Custom SVG arrow
@mixin bgImage__arrowDown-primary {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #19273c'></polygon></svg>");
}

@mixin bgImage__arrowDown-accent {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #3c6df0'></polygon></svg>");
}

@mixin bgImage__arrowDown-grey {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
}

@mixin indeterminate-bar {
  background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
  -webkit-animation: progress 2s linear infinite;
  -moz-animation: progress 2s linear infinite;
  animation: progress 2s linear infinite;
  background-size: 130% 100%;

  @-webkit-keyframes progress {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -70px 0;
    }
  }

  @-moz-keyframes progress {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -70px 0;
    }
  }

  @-ms-keyframes progress {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -70px 0;
    }
  }

  @keyframes progress {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -70px 0;
    }
  }
}