plottservice/app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

.animate-job-in {
  animation: fade-in 0.25s ease-out, slide-in 0.25s ease-out;
}

.animate-job-out {
  animation: fade-out 0.25s ease-out, slide-out 0.25s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.25s ease-out;
}

.animate-fade-out {
  animation: fade-out 0.25s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slide-in {
  from {
    transform: translateX(4rem);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(4rem);
  }
}

.animate-job-item-in {
  overflow: hidden;
  animation: slide-down 0.5s ease-out;
}

.animate-job-item-out {
  overflow: hidden;
  animation: slide-up 0.5s ease-out;
}

/* "max-height: auto" unfortunately does not work here, so we set
   to a fixed height that is greater than the expected height. */
@keyframes slide-down {
  from {
    max-height: 0;
  }
  to {
    max-height: 3rem;
  }
}

@keyframes slide-up {
  from {
    max-height: 3rem;
  }
  to {
    max-height: 0;
  }
}

.animate-flash-increase {
  animation: flash-green 0.5s ease-in-out;
}

.animate-flash-decrease {
  animation: flash-red 0.5s ease-in-out;
}

@keyframes flash-green {
  from {
    background-color: #a7f3d0;
  }
  to {
    background-color: transparent;
  }
}

@keyframes flash-red {
  from {
    background-color: #fecaca;
  }
  to {
    background-color: transparent;
  }
}

.animate-add-row {
  transition-duration: 0.25s;
  animation: addRow 0.25s 1 ease-out;
  transform-origin: top;
}

.animate-rem-row {
  transition-duration: 0.25s;
  animation: remRow 0.25s 1 ease-out;
  transform-origin: top;
}

@keyframes addRow {
  0% {
    transform: scale(1, 0);
    line-height: 0px;
    background-color: #fff;
    visibility: collapse;
  }
  50% {
    background-color: orange;
    transform: scale(1, 1);
    line-height: 18px; /* font-size(16px) + border-top(1px) + border-bottom(1px) */
    visibility: visible;
  }
  100% {
    background-color: #fff;
  }
}

@keyframes remRow {
  0% {
    transform: scale(1, 0);
    line-height: 18px; /* font-size(16px) + border-top(1px) + border-bottom(1px) */
    background-color: #fff;
    visibility: collapse;
  }
  50% {
    background-color: orange;
    transform: scale(1, 1);
    line-height: 0px;
    visibility: visible;
  }
  100% {
    background-color: #fff;
  }
}