CSS Effects

effects.js

import { css, keyframes } from 'styled-components';
import colors from './colors';

const slideUpKeyframe = keyframes`
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
`;

const slideUp = css`
  animation: ${slideUpKeyframe};
  animation-duration: 500ms;
  animation-fill-mode: forwards;
  opacity: 0;
`;

const shakeKeyframe = keyframes`
  0% {
    transform: rotate(20deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0);
  }
`;

const shake = css`
  animation: ${shakeKeyframe};
  animation-duration: 500ms;
  transform: rotate(0);
`;

const loaderKeyFrame = keyframes`
  0% {
    background-position:0% 50%
    }
  50% {
    background-position:100% 50%
  }
  100% {
    background-position:0% 50%
  }
`;

const loader = css`
  background-color: ${colors.background.light};
  background: linear-gradient(
    270deg,
    '${colors.background.light}',
    '${colors.background.clear}',
    '${colors.background.light}'
  );
  background-size: 200% 100%;
  animation: ${loaderKeyFrame};
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
`;

const moveKeyframe = keyframes`
  0%, 100% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
`;

const move = css`
  animation: ${moveKeyframe};
  animation-duration: 1.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
`;

export const Styled = {
  loader,
  slideUp,
  shake,
  move,
};

export default Styled;

fakeloader.js

import * as React from 'react';
import S from './styled';

export default function FakeLoaderTasks() {
  return (
    <>
      {new Array(7).fill(true).map((value: boolean, index: number) => (
        <S.Fake key={`fake_${index}`} width={620} height={50} mb={10} />
      ))}
    </>
  );
}

styled.js

import { effects, styled } from '@cmp/ui';

const Fake = styled.div`
  border-radius: 3px;
  width: ${({ width }: { width: number }) => width}px;
  height: ${({ height }: { height: number }) => height}px;
  margin-bottom: ${({ mb }: { mb: number }) => mb}px;
  margin-right: ${({ mr }: { mr: number }) => mr}px;
  background-color: #eeeeee;
  background: linear-gradient(270deg, #eeeeee, #f5f5f5, #eeeeee);
  background-size: 200% 100%;
  ${effects.loader};
`;

const CardBackup = styled.a`
  display: flex;
  position: relative;
  align-items: center;
  text-decoration: none;
  width: 100%;
  max-width: 620px;
  height: 56px;
  background: #ffffff;
  border-radius: 3px;
  margin-bottom: 8px;
  padding: 18px;
  box-shadow: 0px 2px 2px rgba(223, 225, 235, 0.5);
  ${effects.slideUp};
  &:before {
    content: '';
    position: absolute;
    background: #f26522;
    width: 3px;
    height: 0;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 5px 5px 0;
    transition: height 250ms;
  }
  & .task-issue-key {
    font-size: 14px;
    font-weight: 500;
    color: #252733;
  }
  & .task-pull-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    & .task-time-spent,
    & .task-started {
      display: block;
      font-weight: 500;
      font-size: 12px;
      padding: 6px 8px;
      color: #9fa2b4;
      border-radius: 3px;
      background: #f0f1f7;
    }
    & .task-time-spent {
      margin-right: 16px;
    }
    & .task-icon-content {
      position: relative;
      color: #9fa2b4;
      padding-left: 16px;
      margin-left: 16px;
      height: 24px;
      border-left: 1px solid #dfe1eb;
      display: none;
    }
  }
  &:hover {
    &:before {
      height: 24px;
    }
    & .task-pull-right {
      & .task-icon-content {
        display: block;
        & .task-icon-arrow {
          ${effects.move}
        }
      }
      & .task-time-spent,
      & .task-started {
        display: none;
      }
    }
  }
`;

const CardBackupContent = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 30px 0;
`;

export const Styled = {
  Fake,
  CardBackup,
  CardBackupContent,
};

export default Styled;