react-life-design/src/Checkbox/Checkbox.styled.tsx

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

import Colors from '../Colors';
import Sizes from '../Sizes';
import TextHelper from '../TextHelper';

import { IProps } from './Checkbox';

const bounceUp = keyframes`
  0%,
  20%,
  50%,
  80%,
  100% { transform: scale(1); }
  40% { transform: scale(1.3); }
  60% { transform: scale(1.1); }
`;

const check = keyframes`
  from { stroke-dashoffset: 31.26; }
  to { stroke-dashoffset: 0; }
`;

export const CheckBox = styled.input.attrs<IProps>(() => ({
  type: 'checkbox',
}))`
  opacity: 0;
  position: absolute;

  & + label .check {
    position: absolute;
    stroke-width: 2px;
    stroke: #fff;
    fill: none;
    top: 5px;
    left: 2px;
    height: 16px;
    opacity: 0;
    transition: all .2s ease;
    stroke-dasharray: 31.26;
    stroke-dashoffset: 0;
  }

  &:checked + label .check {
    opacity: 1;
    animation: ${css`${check}`} 0.3s linear forwards;
  }

  &:checked + label::before {
    animation: ${css`${bounceUp}`} .5s forwards;
    background-color: ${Colors.mongeral};
    border-color: ${Colors.mongeral};
  }
`;

export const Label = styled.label<{htmlFor: string, css?: string}>`
  position: relative;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding-left: ${Sizes.s4 + 8}px;
  font-family: ${TextHelper.fontVariant('medium')};
  cursor: pointer;

  &:before, &:after {
    content: '';
    display: inline-block;
    position: absolute;
  }

  &:before {
    width: ${Sizes.s4 - 3}px;
    height: ${Sizes.s4 - 3}px;

    border: 2px solid ${Colors.mongeral};
    left: 0;
    top: 3px;
  }
`;