formstone/src/less/checkpoint.less

Library of modular front end components.

/**
 * @component
 * @name Checkpoint
 */

@import "imports/utils.less";

// Config

@fs-checkpoint-offset: 50px;
@fs-checkpoint-duration: 0.5s;
@fs-checkpoint-scale-in: 0.5;
@fs-checkpoint-scale-out: 1.25;
@fs-checkpoint-rotate: 91deg;
@fs-checkpoint-perspective: 3000px;


.fs-checkpoint {

  // FADE

  &[data-checkpoint-animation="fade-in"],
  &[data-checkpoint-animation="fade-up"],
  &[data-checkpoint-animation="fade-down"],
  &[data-checkpoint-animation="fade-left"],
  &[data-checkpoint-animation="fade-right"] {
    opacity: 0;
    transition:
      opacity @fs-checkpoint-duration linear,
      transform @fs-checkpoint-duration ease;

    &.fs-checkpoint-active {
      opacity: 1;
    }
  }

  &[data-checkpoint-animation="fade-up"] {
    transform: translateY(@fs-checkpoint-offset);
  }

  &[data-checkpoint-animation="fade-down"] {
    transform: translateY(-@fs-checkpoint-offset);
  }

  &[data-checkpoint-animation="fade-up"],
  &[data-checkpoint-animation="fade-down"] {

    &.fs-checkpoint-active {
      transform: translateY(0);
    }
  }

  &[data-checkpoint-animation="fade-left"] {
    transform: translateX(-@fs-checkpoint-offset);
  }

  &[data-checkpoint-animation="fade-right"] {
    transform: translateX(@fs-checkpoint-offset);
  }

  &[data-checkpoint-animation="fade-left"],
  &[data-checkpoint-animation="fade-right"] {

    &.fs-checkpoint-active {
      transform: translateX(0);
    }
  }

  // ZOOM IN

  &[data-checkpoint-animation="zoom-in"],
  &[data-checkpoint-animation="zoom-in-up"],
  &[data-checkpoint-animation="zoom-in-down"],
  &[data-checkpoint-animation="zoom-in-left"],
  &[data-checkpoint-animation="zoom-in-right"] {
    opacity: 0;
    transition:
      opacity @fs-checkpoint-duration linear,
      transform @fs-checkpoint-duration ease;

    &.fs-checkpoint-active {
      opacity: 1;
    }
  }

  &[data-checkpoint-animation="zoom-in"] {
    transform: translateY(0) scale(@fs-checkpoint-scale-in);
  }

  &[data-checkpoint-animation="zoom-in-up"] {
    transform: translateY(@fs-checkpoint-offset) scale(@fs-checkpoint-scale-in);
  }

  &[data-checkpoint-animation="zoom-in-down"] {
    transform: translateY(-@fs-checkpoint-offset) scale(@fs-checkpoint-scale-in);
  }

  &[data-checkpoint-animation="zoom-in"],
  &[data-checkpoint-animation="zoom-in-up"],
  &[data-checkpoint-animation="zoom-in-down"] {

    &.fs-checkpoint-active {
      transform: translateY(0) scale(1);
    }
  }

  &[data-checkpoint-animation="zoom-in-left"] {
    transform: translateX(-@fs-checkpoint-offset) scale(@fs-checkpoint-scale-in);
  }

  &[data-checkpoint-animation="zoom-in-right"] {
    transform: translateX(@fs-checkpoint-offset) scale(@fs-checkpoint-scale-in);
  }

  &[data-checkpoint-animation="zoom-in-left"],
  &[data-checkpoint-animation="zoom-in-right"] {

    &.fs-checkpoint-active {
      transform: translateX(0) scale(1);
    }
  }

  // ZOOM OUT

  &[data-checkpoint-animation="zoom-out"],
  &[data-checkpoint-animation="zoom-out-up"],
  &[data-checkpoint-animation="zoom-out-down"],
  &[data-checkpoint-animation="zoom-out-left"],
  &[data-checkpoint-animation="zoom-out-right"] {
    opacity: 0;
    transition:
      opacity @fs-checkpoint-duration linear,
      transform @fs-checkpoint-duration ease;

    &.fs-checkpoint-active {
      opacity: 1;
    }
  }

  &[data-checkpoint-animation="zoom-out"] {
    transform: translateY(0) scale(@fs-checkpoint-scale-out);
  }

  &[data-checkpoint-animation="zoom-out-up"] {
    transform: translateY(@fs-checkpoint-offset) scale(@fs-checkpoint-scale-out);
  }

  &[data-checkpoint-animation="zoom-out-down"] {
    transform: translateY(-@fs-checkpoint-offset) scale(@fs-checkpoint-scale-out);
  }

  &[data-checkpoint-animation="zoom-out"],
  &[data-checkpoint-animation="zoom-out-up"],
  &[data-checkpoint-animation="zoom-out-down"] {

    &.fs-checkpoint-active {
      transform: translateY(0) scale(1);
    }
  }

  &[data-checkpoint-animation="zoom-out-left"] {
    transform: translateX(-@fs-checkpoint-offset) scale(@fs-checkpoint-scale-out);
  }

  &[data-checkpoint-animation="zoom-out-right"] {
    transform: translateX(@fs-checkpoint-offset) scale(@fs-checkpoint-scale-out);
  }

  &[data-checkpoint-animation="zoom-out-left"],
  &[data-checkpoint-animation="zoom-out-right"] {

    &.fs-checkpoint-active {
      transform: translateX(0) scale(1);
    }
  }

  // FLIP

  &[data-checkpoint-animation="flip-up"],
  &[data-checkpoint-animation="flip-down"],
  &[data-checkpoint-animation="flip-left"],
  &[data-checkpoint-animation="flip-right"] {
    backface-visibility: hidden;
    transition:
      opacity @fs-checkpoint-duration linear,
      transform @fs-checkpoint-duration ease;
  }

  &[data-checkpoint-animation="flip-up"] {
    transform: perspective(@fs-checkpoint-perspective) rotateX(-@fs-checkpoint-rotate);
  }

  &[data-checkpoint-animation="flip-down"] {
    transform: perspective(@fs-checkpoint-perspective) rotateX(@fs-checkpoint-rotate);
  }

  &[data-checkpoint-animation="flip-up"],
  &[data-checkpoint-animation="flip-down"] {

    &.fs-checkpoint-active {
      transform: perspective(@fs-checkpoint-perspective) rotateX(0);
    }
  }

  &[data-checkpoint-animation="flip-left"] {
    transform: perspective(@fs-checkpoint-perspective) rotateY(@fs-checkpoint-rotate);
  }

  &[data-checkpoint-animation="flip-right"] {
    transform: perspective(@fs-checkpoint-perspective) rotateY(-@fs-checkpoint-rotate);
  }

  &[data-checkpoint-animation="flip-left"],
  &[data-checkpoint-animation="flip-right"] {

    &.fs-checkpoint-active {
      transform: perspective(@fs-checkpoint-perspective) rotateY(0);
    }
  }

}