UNPKG

formstone

Version:

Library of modular front end components.

223 lines (175 loc) 5.94 kB
@fs-checkpoint-offset: 50px; @fs-checkpoint-duration: 0.5s; @fs-checkpoint-scale-in: 0.5; @fs-checkpoint-scale-out: 1.25; @fs-checkpoint-rotate: 90deg; @fs-checkpoint-perspective: 3000px; .fs-checkpoint { --fs-checkpoint-duration: @fs-checkpoint-duration; --fs-checkpoint-offset: @fs-checkpoint-offset; --fs-checkpoint-scale-in: @fs-checkpoint-scale-in; --fs-checkpoint-scale-out: @fs-checkpoint-scale-out; --fs-checkpoint-rotate: @fs-checkpoint-rotate; --fs-checkpoint-perspective: @fs-checkpoint-perspective; @media (prefers-reduced-motion) { & { --fs-checkpoint-duration: 0s; } } } // 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 var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease; &.fs-checkpoint-active { opacity: 1; } } [data-checkpoint-animation="fade-up"] { transform: translateY(var(--fs-checkpoint-offset)); } [data-checkpoint-animation="fade-down"] { transform: translateY(calc(var(--fs-checkpoint-offset) * -1)); } [data-checkpoint-animation="fade-up"], [data-checkpoint-animation="fade-down"] { &.fs-checkpoint-active { transform: translateY(0); } } [data-checkpoint-animation="fade-left"] { transform: translateX(calc(var(--fs-checkpoint-offset) * -1)); } [data-checkpoint-animation="fade-right"] { transform: translateX(var(--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 var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease; &.fs-checkpoint-active { opacity: 1; } } [data-checkpoint-animation="zoom-in"] { transform: translateY(0) scale(var(--fs-checkpoint-scale-in)); } [data-checkpoint-animation="zoom-in-up"] { transform: translateY(var(--fs-checkpoint-offset)) scale(var(--fs-checkpoint-scale-in)); } [data-checkpoint-animation="zoom-in-down"] { transform: translateY(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--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(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--fs-checkpoint-scale-in)); } [data-checkpoint-animation="zoom-in-right"] { transform: translateX(var(--fs-checkpoint-offset)) scale(var(--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 var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease; &.fs-checkpoint-active { opacity: 1; } } [data-checkpoint-animation="zoom-out"] { transform: translateY(0) scale(var(--fs-checkpoint-scale-out)); } [data-checkpoint-animation="zoom-out-up"] { transform: translateY(var(--fs-checkpoint-offset)) scale(var(--fs-checkpoint-scale-out)); } [data-checkpoint-animation="zoom-out-down"] { transform: translateY(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--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(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--fs-checkpoint-scale-out)); } [data-checkpoint-animation="zoom-out-right"] { transform: translateX(var(--fs-checkpoint-offset)) scale(var(--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 var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease; } [data-checkpoint-animation="flip-up"] { transform: perspective(var(--fs-checkpoint-perspective)) rotateX(calc(var(--fs-checkpoint-rotate) * -1)); } [data-checkpoint-animation="flip-down"] { transform: perspective(var(--fs-checkpoint-perspective)) rotateX(var(--fs-checkpoint-rotate)); } [data-checkpoint-animation="flip-up"], [data-checkpoint-animation="flip-down"] { &.fs-checkpoint-active { transform: perspective(var(--fs-checkpoint-perspective)) rotateX(0); } } [data-checkpoint-animation="flip-left"] { transform: perspective(var(--fs-checkpoint-perspective)) rotateY(var(--fs-checkpoint-rotate)); } [data-checkpoint-animation="flip-right"] { transform: perspective(var(--fs-checkpoint-perspective)) rotateY(calc(var(--fs-checkpoint-rotate) * -1)); } [data-checkpoint-animation="flip-left"], [data-checkpoint-animation="flip-right"] { &.fs-checkpoint-active { transform: perspective(var(--fs-checkpoint-perspective)) rotateY(0); } }