@simpozio/contact-form/lib/presets/Short/styles.ts

Package for Contact Form component

import styled, {css} from 'styled-components';
import Color from 'color';
import {AhaButton} from '@simpozio/aha-button/dist';
import Form from '../../components/Form';
import Field from '../../components/Field';
import Caption from '../../components/Caption';
import {TStyledContainer} from '../../types';

export const FONT = {
  SIZE: {
    BASE: 'calc(10px + (32 - 10) * ((100vw - 320px) / (2550 - 300)))',
    XXXS: '0.6rem',
    XXS: '0.8rem',
    XS: '1rem',
    S: '1.2rem',
    MS: '1.4rem',
    M: '1.6rem',
    ML: '1.8rem',
    MXL: '2rem',
    L: '2.4rem',
    XL: '2.8rem',
    XXL: '3rem',
    XXXL: '3.5rem'
  },
  LINE_HEIGHT: {
    BASE: '1',
    S: '1.3',
    M: '1.5'
  },
  WEIGHT: {
    BASE: '400'
  },
  SPACING: {
    L: '1.6'
  },
  FAMILY: {
    BASE: '"Roboto", sans-serif'
  }
};

export const COLOR = {
  PRIMARY: '#000',
  INVERT: '#fff',
  ERROR: 'rgb(244, 67, 54)',
  WARNING: 'rgb(218, 179, 123)'
};

export const DEFAULT_THEME = {
  FONT,
  COLOR: {
    PRIMARY: COLOR.INVERT,
    INVERT: COLOR.PRIMARY,
    ERROR: COLOR.ERROR,
    WARNING: COLOR.WARNING,
    LIGHT: Color(COLOR.INVERT)
      .alpha(0.45)
      .string()
  },
  BACKGROUND: {
    PRIMARY: COLOR.PRIMARY,
    INVERT: COLOR.INVERT
  }
};

export const Error = styled(Caption)(
  ({theme}) => css`
    color: ${theme.COLOR.ERROR};
  `
);

export const FormText = styled(Caption)(
  ({theme}) => css`
    margin: 0 auto;
    font-size: ${theme.FONT.SIZE.XS};
    line-height: ${theme.FONT.LINE_HEIGHT.M};
    color: ${theme.COLOR.PRIMARY};
    text-align: center;

    a {
      border-bottom: 0.05em solid currentColor;
      transition: color ease-in-out 0.2s;

      &:hover {
        color: ${theme.COLOR.PRIMARY};
      }
    }
  `
);

export const BottomText = styled(Caption)(
  ({theme}) => css`
    margin: 0 auto;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    font-size: ${theme.FONT.SIZE.M};
    font-weight: 300;
    letter-spacing: ${props => props.theme.FONT.SPACING.L};
    line-height: ${theme.FONT.LINE_HEIGHT.M};
    text-align: center;
    color: ${theme.COLOR.LIGHT};

    a {
      border-bottom: 0.05em solid currentColor;
      transition: color ease-in-out 0.2s;

      &:hover,
      &:focus,
      &:active {
        color: ${theme.COLOR.PRIMARY};
      }
    }

    @media (min-width: 768px) {
      white-space: pre-line;
      font-size: ${theme.FONT.SIZE.XS};
    }
  `
);

export const FormGroup = styled.div`
  text-align: center;
  margin-bottom: 1.5em;
`;

export const StyledField = styled(Field)(
  ({theme, type}) => css`
    .smpz-form-mui-control-input-root {
      font-size: 1em;
      height: 2.5em;
      padding: 0.5em 0;
      color: ${theme.COLOR.PRIMARY};
      font-family: ${theme.FONT.FAMILY.BASE};

      &:after {
        border-bottom-color: ${theme.COLOR.PRIMARY};
      }

      &:before {
        border-bottom-color: ${Color(theme.COLOR.PRIMARY)
          .alpha(0.42)
          .string()};
      }

      &:hover:not(.Mui-disabled):before {
        border-bottom-color: ${Color(theme.COLOR.PRIMARY)
          .alpha(0.6)
          .string()};
      }

      &.Mui-error:after {
        border-bottom-color: ${theme.COLOR.WARNING};
      }
    }
    & .smpz-form-mui-control-label {
      font-family: ${theme.FONT.FAMILY.BASE};
      font-size: 1em;
      z-index: 2;
      top: 0.5em;
      left: ${type === 'tel' ? '3em' : '0'};
      transition: all 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
      color: ${theme.COLOR.LIGHT};
      pointer-events: none;

      &--focused.Mui-focused {
        top: 0;
        left: 0;
        color: ${theme.COLOR.PRIMARY};
      }

      &.MuiFormLabel-filled {
        top: 0;
        left: 0;
      }

      &.Mui-error {
        color: ${theme.COLOR.WARNING};
      }
    }
    & .react-phone-number-input {
      padding: 0;
      height: 2.5em;
      font-weight: 300;
    }
    .smpz-form-mui-control-input--focused {
      color: ${theme.COLOR.PRIMARY};

      &:before,
      &:after {
        border-bottom-color: ${theme.COLOR.PRIMARY};
      }
    }
    & .react-phone-number-input__icon--international {
      width: 1em;
    }
    & .react-phone-number-input__input {
      padding: 0.5em 0;
      height: auto;
      font-size: 1em;
      font-family: ${theme.FONT.FAMILY.BASE};
      font-weight: inherit;
      border-bottom: 0;
      background: none;
      color: inherit;
    }
    & .react-phone-number-input__row {
      height: 100%;
    }
    & .react-phone-number-input__icon svg {
      fill: ${theme.COLOR.PRIMARY};
    }
    & .react-phone-number-input__country-select-arrow {
      font-size: 0.5em;
    }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
      font-size: 1em;
      -webkit-text-fill-color: ${theme.COLOR.PRIMARY};
      -webkit-box-shadow: 0 0 0 1000px ${theme.BACKGROUND.PRIMARY} inset;
      transition: background-color 5000s ease-in-out 0s;
    }

    input::-webkit-input-placeholder {
      color: ${theme.COLOR.LIGHT};
      opacity: 1;
    }
    input::-moz-placeholder {
      color: ${theme.COLOR.LIGHT};
      opacity: 1;
    }
    input:-ms-input-placeholder {
      color: ${theme.COLOR.LIGHT};
      opacity: 1;
    }
    input:-moz-placeholder {
      color: ${theme.COLOR.LIGHT};
      opacity: 1;
    }

    @media (min-width: 768px) {
      .smpz-form-mui-control-input-root {
        padding: 0.5em ${type === 'tel' ? '0' : '1.5em'};
        height: 2.9em;
      }

      & .react-phone-number-input {
        height: 2.9em;
      }

      & .react-phone-number-input__input {
        padding: 0.5em 0;
      }

      & .smpz-form-mui-control-label {
        left: ${type === 'tel' ? '3em' : '1.5em'};

        &--focused.Mui-focused {
          left: 1.5em;
        }

        &.MuiFormLabel-filled {
          left: 1.5em;
        }
      }
    }
  `
);

export const StyledButton = styled(AhaButton)`
  margin-top: 5rem;
  align-self: center;

  @media (min-width: 768px) {
    margin-top: 3rem;
  }

  @media (min-width: 1024px) {
    margin-top: 3rem;
  }
`;

export const buttonStyles = css(
  ({theme}) => css`
    font-size: ${theme.FONT.SIZE.XXL};

    @media (min-width: 768px) {
      font-size: ${theme.FONT.SIZE.MXL};
    }
  `
);

export const StyledForm = styled(Form)(
  ({theme}) => css`
    margin: auto;
    width: 100%;
    max-width: 28em;
    height: auto;
    box-sizing: border-box;
    font-size: ${theme.FONT.SIZE.ML};
    font-weight: 300;
    padding-bottom: 5rem;

    @media (min-width: 768px) {
      padding: 3rem;
      font-size: ${theme.FONT.SIZE.S};
    }
  `
);

export const Container = styled.div.attrs(() => ({
  Form: StyledForm,
  FormGroup: FormGroup,
  FormText: FormText,
  BottomText: BottomText,
  Field: StyledField,
  Button: StyledButton,
  Error: Error
}))<TStyledContainer>(
  ({styles}) => css`
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;

    @media (min-width: 768px) {
      justify-content: center;
    }

    ${styles}
  `
);