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

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

import { Sizes, Colors, TextHelper } from '../index';
import { IProps } from './Input';

const bounceUp = keyframes`
  from { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.1618, 1.1618, 1.1618); }
  to { transform: scale3d(1, 1, 1); }
`;

const shake = keyframes`
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(3px, 0, 0); }
`;

const bounceUpRule = css`${bounceUp} .4s forwards;`;

const shakeRule = (props: any) => css`${props.isInvalid && shake} 1s forwards;`;

const GroupInput = styled.div`
  position: relative;
  height: 75px;
  @media screen and (max-width: 600px) {
    width: 100%;
  }

`;

const opacityAndTransition = (opacity: number, transition: string) => `
  opacity: ${opacity};
  transition: ${transition};
`;

const Input = styled.input<IProps>`
  position: relative;
  font-weight: 500;
  color: ${Colors.codGray};
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
  border: 0;
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
  background-color: transparent;
  font-family: ${TextHelper.fontVariant('medium')};

  &:disabled {
    opacity: 0.5;
    border-bottom-color: ${Colors.line};
  }

  &:not(:placeholder-shown) ~ label {
    top: -16px;
    color: ${Colors.support};
    z-index: 1; 
    ${opacityAndTransition(1, '0.3s')};
  }

  ::placeholder {
    color: ${Colors.support};
    ${opacityAndTransition(1, '0.2s')};
    font-family: ${TextHelper.fontVariant('medium')};
  }

  &:focus::placeholder {
    ${opacityAndTransition(0, '0.2s')};
  }

  &:focus {
    outline: none;

    & ~ .bar {
      width: 100%;
      transition: 0.4s;
    }

    & ~ label {
      top: -16px;
      color: ${Colors.mongeral};
      opacity: 1;
      z-index: 1;
      animation: ${bounceUpRule};
    }
  }

  & ~ .bar {
    position: relative;
    display: inherit;
    top: -2px;
    width: 0;
    height: 2px;
    background-color: ${Colors.mongeral};
    transition: 0.4s;
  }

  ~ label {
    position: absolute;
    font-size: ${TextHelper.pxToEm(Sizes.s2)}em;
    font-family: ${TextHelper.fontVariant('medium')};
    font-weight: 500;
    left: 0;
    top: -16px;
    z-index: -1;
    letter-spacing: 0.5px;
    ${opacityAndTransition(0, 'all .2s ease')};
    animation: ${shakeRule};
    text-transform: uppercase;
  }

  ~ .feedback {
    position: absolute;
    font-size: ${TextHelper.pxToEm(Sizes.s2)}em;
    font-family: ${TextHelper.fontVariant('medium')};
    overflow: hidden;
    font-style: italic;

    ${({comment}) => comment && `
      font-style: italic;
    `}
  }

  ${({ isInvalid, isWarning }) => (isInvalid || isWarning) && `
    border-color: ${isInvalid ? Colors.chestnut : Colors.goldDrop};
    ~ .feedback,
    ~ label,
    &:focus ~ label, &:not(:placeholder-shown) ~ label {
      color: ${isInvalid ? Colors.chestnut : Colors.goldDrop}
    }

    ~ label { opacity: 1; }
  `}

  ${({ type }) => type === 'search' && `
    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }
    ~ .search-icon {
      position: absolute;
      height: 25px;
      fill:none;
      stroke: ${Colors.regalBlue};
      stroke-width: 2px;
      top: 0;
      right: 0;
      padding: 2px;
      z-index: 2;
    }
  `}

  ${({ type }) => type === 'number' && `
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  `}
`;

export default {
  Input,
  GroupInput,
};