_tools.scss

// Media queries
@mixin from($size: "medium") {
  $width: 768px;
  @if $size == "medium" {
    $width: 768px;
  } @else if $size == "large" {
    $width: 1200px;
  } @else if $size == "xlarge" {
    $width: 1350px;
  } @else {
    $width: $size;
  }
  @media (min-width: $width) {
    @content;
  }
}

// Common box glow style
@mixin glow($color, $spread, $opacity) {
  box-shadow: rgba($color, $opacity) 0 0 $spread ($spread*0.25);
}

// Animations
@keyframes fade-in-and-blink {
  0% { opacity: 0; }
  50% { opacity: 0.33; }
  75% { opacity: 1; }
  80% { opacity: 0.5; }
  85% { opacity: 1; }
  89% { opacity: 0.75; }
  93% { opacity: 1; }
  97% { opacity: 0.8; }
  100% { opacity: 1; }
}
@keyframes fade-to-red {
  0% {
    box-shadow: rgba($color__focus, 0.75) 0 0 2rem 1rem,
                rgba($color__dark, 1) 0 1rem 2rem;
  }
  75% {
    border-color: $color__red;
    box-shadow: rgba($color__red, 0.75) 0 0 2rem 1rem,
                rgba($color__dark, 1) 0 1rem 2rem;
  }
  100% {
    background: darken($color__red, 15);
    border-color: $color__red;
    box-shadow: rgba($color__red, 0.75) 0 0 2rem 1rem,
                rgba($color__dark, 1) 0 1rem 2rem;
  }
}
@keyframes tap-feedback {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  75% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes blink-and-fade-out {
  0% {
    transform: scale(1.3) translateY(100%);
    opacity: 0;
  }
  20% {
    transform: scale(1) translate(0%);
    opacity: 1;
  }
  65% {
    transform: scale(1) translate(0%);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(0%);
    opacity: 0;
  }
}