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 fontFamilyBold {
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-weight: 700;
}

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

//Navigation icons
@mixin navIcons {
  color: $white;
  fill: $white;
  max-height: 40px;
  stroke-width: .5;
  display: block;
  width: 40px;
  margin: 0 auto .5em auto;
  .st0 {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-miterlimit: 10;
  }
  .st1 {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-miterlimit: 10;
  }
}

//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 calcColumn-5 {
  min-width: calc(100% * (1/5) - 5px);
}

@mixin calcColumn-4 ($offset: 0) {
  min-width: calc(100% * (1/4) - #{$offset});
}

@mixin calcColumn-3 {
  min-width: calc(100% * (1/3) - 5px);
}

@mixin calcSplitColumn {
  min-width: calc(100% * (1/2) - 5px);
}

@mixin vertCenter {
  top: 50%;
  transform: translateY(-50%);
}

@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: 165% 100%;

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

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

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

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

@mixin table-row-save {
  @-webkit-keyframes row-flash {
    from { background-color: $lightblue; }
    to { background-color: inherit; }
  }
  @-moz-keyframes row-flash {
    from { background-color: $lightblue; }
    to { background-color: inherit; }
  }
  @-o-keyframes row-flash {
    from { background-color: $lightblue; }
    to { background-color: inherit; }
  }
  @keyframes row-flash {
    from { background-color: $lightblue; }
    to { background-color: inherit; }
  }
  .row-flash {
    -webkit-animation: row-flash 1s infinite; /* Safari 4+ */
    -moz-animation:    row-flash 1s infinite; /* Fx 5+ */
    -o-animation:      row-flash 1s infinite; /* Opera 12+ */
    animation:         row-flash 1s infinite; /* IE 10+ */
  }
}