uccser/cs-field-guide

View on GitHub
csfieldguide/static/interactives/fsa-washing-machine/css/fsa-washing-machine.scss

Summary

Maintainability
Test Coverage
#interactive-fsa-washing-machine-images {
  position: relative;
  pointer-events: none !important;
}

#interactive-fsa-washing-machine-images img {
  width: 20em;
  vertical-align: top;
}

#interactive-fsa-washing-machine-images .image-overlay {
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 20em;
  /* Removes jagged edges during animation in Chrome */
  outline: 1px solid transparent;
  transition: none !important;
}

/*#interactive-fsa-washing-machine button {
  text-transform: none;
  margin: 0.5em;
}

#interactive-fsa-washing-machine-buttons {
  font-size: 1.5em;
}*/

#interactive-fsa-washing-machine-state-text {
  font-size: 2em;
}

#interactive-fsa-washing-machine-current-state-text {
  font-weight: bold;
}

@keyframes rotate_clockwise {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#interactive-fsa-washing-machine-fast {
  -webkit-animation: rotate_clockwise 0.4s linear infinite paused;
  -moz-animation: rotate_clockwise 0.4s linear infinite paused;
  -ms-animation: rotate_clockwise 0.4s linear infinite paused;
  -o-animation: rotate_clockwise 0.4s linear infinite paused;
  animation: rotate_clockwise 0.4s linear infinite paused;
}

#interactive-fsa-washing-machine-medium {
  -webkit-animation: rotate_clockwise 0.7s linear infinite paused;
  -moz-animation: rotate_clockwise 0.7s linear infinite paused;
  -ms-animation: rotate_clockwise 0.7s linear infinite paused;
  -o-animation: rotate_clockwise 0.7s linear infinite paused;
  animation: rotate_clockwise 0.7s linear infinite paused;
}

#interactive-fsa-washing-machine-slow {
  -webkit-animation: rotate_clockwise 1.1s linear infinite paused;
  -moz-animation: rotate_clockwise 1.1s linear infinite paused;
  -ms-animation: rotate_clockwise 1.1s linear infinite paused;
  -o-animation: rotate_clockwise 1.1s linear infinite paused;
  animation: rotate_clockwise 1.1s linear infinite paused;
}

.animation-running {
  animation-play-state: running !important;
}