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,
  wrapperHeight?: number,
  wrapperWidth?: number,
}

export const wrapperStyles = css<WrapperProps>`
  width: ${({ wrapperWidth }) => (wrapperWidth ? `${wrapperWidth}px` : '100%')};
  height: ${({ wrapperHeight }) => (wrapperHeight ? `${wrapperHeight}px` : '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(43, 30, 30, 0.3);
  border-radius: 2px;
  border: 1px solid ${(({ error }) => (isNil(error) ? 'transparent' : '#E64646'))};
  border-width: 1px;

  ${isMobileDevice
    ? css`
      padding-left: 0;
    `
    : ''};
`

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` : '')};

  &:hover{
    .Highlight__Tooltip {
      display: block;
    }
  }

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

type InputProps = {
  disabled?: boolean,
  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.white};

  &[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.white};
    -webkit-text-fill-color: ${({ theme: { colors } }) => colors.white};
  }
  ${isMobileDevice
    ? css`
      font-size: 12px;
      margin-left: 15px;
    `
    : ''};

  @media ${devices.tablet} {
    font-size: 1.8rem;
  }
`

export const InputStyled = styled.input<InputProps>`
  ${inputStyles}
  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
  ::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;  
  ${({ isUserAccountPage }) => (isUserAccountPage
    ? css`
      max-width: 560px;
    `
    : '')}

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

  ${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 LabelAfter = styled.span<TitleProps>`
  margin-left: 10px;
  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.tablet} {
    font-size: 1.6rem;
    width: 9rem;
  }
  ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        display: block;
        padding-left: 10px;
        font-size: 12px;
        width: auto;
      }
    `
    : ''};
`

export const LabelBefore = styled(LabelAfter)`
  margin-left: -30px;
  padding-top: 5px;
`

export const ScTooltip = styled.div`
  display: none;
  position: absolute;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 18px;

  color: #000000;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 3px 6px;
  max-width: 292px;
  overflow-wrap: break-word;
  white-space: normal;
  z-index: 10;

  ${isMobileDevice
    ? css`
      font-size: 12px;
    `
    : ''};
`