jobiqo-cl/lib/es/src/components/02-atoms/01-forms/06-date/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled, { createGlobalStyle } from 'styled-components';
import * as reactDatePickerStyles from '../../../../../node_modules/react-datepicker/dist/react-datepicker.css.js';

// Use injectGlobal only for fonts or very special cases like @font-face.
const datePickerGlobalStyles = () => createGlobalStyle `
  ${reactDatePickerStyles}
`;
const DateWrapper = styled.div `
  .react-datepicker-wrapper:not(:first-child) {
    margin-top: 0.5rem;
    ${props => props.theme.mediaQueries.small} {
      margin-left: 1rem;
      margin-top: 0;
    }
  }

  input {
    box-sizing: border-box;
    background: ${props => props.theme.input.background};
    font-size: ${props => props.theme.input.fontSize};
    line-height: ${props => props.theme.input.lineHeight};
    margin: ${props => props.theme.input.margin};
    padding: ${props => props.theme.input.padding};
    border-radius: ${props => props.theme.input.borderRadius};
    border-width: ${props => props.theme.input.borderWidth};
    border-top-width: ${props => props.theme.input.borderTopWidth};
    border-left-width: ${props => props.theme.input.borderLeftWidth};
    border-right-width: ${props => props.theme.input.borderRightWidth};
    border-bottom-width: ${props => props.theme.input.borderBottomWidth};
    border-style: ${props => props.theme.input.borderStyle};
    border-color: ${props => props.error ? props.theme.colors.danger : props.theme.input.borderColor};
    max-width: ${props => props.theme.input.width};
    &:focus,
    &:active {
      outline: 0;
      border-color: ${props => props.theme.colors.focusRingColor};
      box-shadow: ${props => props.theme.input.focus.boxShadowType},
        ${props => `${props.theme.input.focus.boxShadowVals} ${props.theme.colors.focusRingColor}`};
    }
  }

  .react-datepicker {
    font-family: ${props => props.theme.font.body};
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
    border-radius: ${props => props.theme.input.borderRadius};
    border-color: ${props => props.theme.colors.gray1};
    border-width: 1px;
    border-style: ${props => props.theme.input.borderStyle};
  }

  .react-datepicker__navigation {
    top: 1.25rem;
  }

  .react-datepicker__current-month {
    margin-bottom: 1rem;
  }

  .react-datepicker__header {
    border: none;
    background: white;
    padding: 1rem;
  }

  .react-datepicker__day--selected {
    background-color: ${props => props.theme.button.backgroundColor.primary};
    color: ${props => props.theme.button.color.primary};
  }

  .react-datepicker__day--in-range {
    background: ${props => props.theme.colors.primaryLight};
  }

  .react-datepicker__day--in-selecting-range {
    background: ${props => props.theme.colors.primaryLight};
  }

  .react-datepicker__day--in-selecting-range:hover {
    background-color: ${props => props.theme.button.backgroundColor.primary};
    color: ${props => props.theme.button.color.primary};
  }

  .react-datepicker__day--selected:hover {
    background: ${props => props.theme.colors.primaryLight};
  }

  .react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item--selected {
    background-color: ${props => props.theme.button.backgroundColor.primary};
  }
`;

export { DateWrapper, datePickerGlobalStyles };