spa_instat_tv/src/features/Common/Input/styled.tsx

import styled, { css } from 'styled-components/macro'

import isNil from 'lodash/isNil'

import { T9n } from 'features/T9n'
import { devices } from 'config/devices'
import { isMobileDevice } from 'config/userAgent'

export type WrapperProps = {
  error?: string | null,
  hasRightIcon?: boolean,
  wrapperWidth?: number,
}

export const wrapperStyles = css<WrapperProps>`
  width: ${({ wrapperWidth }) => (wrapperWidth ? `${wrapperWidth}px` : '100%')};
  height: 2.2rem;
  margin-top: 20px;
  padding-left: 24px;
  padding-right: ${({ hasRightIcon = 24 }) => (hasRightIcon ? '62px' : '24px')};
  padding-top: 0.614rem;
  padding-bottom: 0.519rem;
  display: flex;
  align-items: center;
  background-color: #3F3F3F;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  border: 1px solid ${(({ error }) => (isNil(error) ? 'transparent' : '#E64646'))};
  border-width: 1px;
`

type TitleProps = {
  isUserAccountPage?: boolean,
  labelWidth?: number,
}

export const Label = styled.label`
  width: 100%;
  display: flex;
`

export const LabelTitle = styled.p<TitleProps>`
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  font-size: 0.8rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  padding-top: 2px;
  color: ${({ theme: { colors } }) => colors.secondary};
  width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
  min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};

  @media ${devices.laptop} {
    ${({ isUserAccountPage }) => (!isUserAccountPage
    ? css`
    `
    : '')}
  }

  @media ${devices.tablet} {
    font-size: 1.6rem;
    width: 9rem;
    ${({ isUserAccountPage }) => (isUserAccountPage
    ? css`
      display: none;
    `
    : '')}
  }
  ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        display: block;
        padding-left: 10px;
        font-size: 12px;
        width: auto;
      }
    `
    : ''};
`

type InputProps = {
  inputWidth?: number,
  isUserAccountPage?: boolean,
}

const inputStyles = css<InputProps>`
  flex-grow: 1;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.1rem;
  width: ${({ inputWidth }) => (inputWidth ? `${inputWidth}px` : '')};
  background-color: transparent;
  border: transparent;
  margin-left: 1.1rem;
  color: ${({ theme: { colors } }) => colors.text100};

  &[type='password'] {
    letter-spacing: 6px;
  }

  :focus {
    border-color: transparent;
    outline: none;
  }

  :-webkit-autofill,
  :-webkit-autofill:hover,
  :-webkit-autofill:focus,
  :-webkit-autofill:active  {
    box-shadow: 0 0 0 30px #3F3F3F inset;
    caret-color: ${({ theme: { colors } }) => colors.text100};
    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.text100};
  }
  ${isMobileDevice
    ? css`
      font-size: 12px;
      margin-left: 15px;
    `
    : ''};
  
  @media ${devices.tablet} {
    font-size: 1.8rem;
  }
`

export const InputStyled = styled.input<InputProps>`
  ${inputStyles}
  ::placeholder {
    opacity: 0;
  }
`
export const InputWrapper = styled.div<WrapperProps>`
  position: relative;
  ${wrapperStyles}
`

type ColumnProps = {
  isUserAccountPage?: boolean,
}

export const Column = styled.div<ColumnProps>`
  width: 100%;
  display: flex;
  flex-direction: column;

  @media ${devices.laptop} {
     ${({ isUserAccountPage }) => (!isUserAccountPage
    ? css`
      width: 100%;
    `
    : '')}
  }

  @media ${devices.tablet} {
    ${({ isUserAccountPage }) => (isUserAccountPage
    ? css`
      max-width: 415px;
    `
    : css`
      width: 100%;`)}
  }

  @media ${devices.mobile} {
    width: 100%;
    position: relative;
  }

  ${isMobileDevice
    ? css`
      @media (orientation: landscape){
        max-width: 100%;
      }
    `
    : ''}  
`

type ErrorProps = {
  marginBottom?: number,
}

export const Error = styled(T9n)<ErrorProps>`
  display: block;
  min-height: 0.75rem;
  height: 0.95rem;
  font-style: normal;
  font-weight: normal;
  font-size: 0.567rem;
  line-height: 0.95rem;
  letter-spacing: -0.078px;
  color: ${({ theme }) => theme.colors.error};
  ${isMobileDevice
    ? css`
      font-size: 7.38px;
      line-height: 15px;
      min-height: 15px;
      margin-bottom: 0;
    `
    : ''}

  ${({ marginBottom }) => (
    marginBottom
      ? `margin-bottom: ${marginBottom}rem;`
      : ''
  )}
`

export const Icon = styled.div<{ image: string }>`
  position: absolute;
  right: 22px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background-image: url(/images/${({ image }) => `${image}.svg`});
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  ${isMobileDevice
    ? css`
      width: 18px;
      height: 18px;
      right: 11px; 
    `
    : ''}
`