@buffetjs/styles/src/components/DatePicker/index.js

Buffetjs Styles - The styling solution of Buffetjs

/**
 *
 * DatePicker
 *
 */

import styled from 'styled-components';
import PropTypes from 'prop-types';
import 'react-dates/lib/css/_datepicker.css';

import colors from '../../assets/styles/colors';
import sizes from '../../assets/styles/sizes';

const DatePicker = styled.div`
  position: relative;

  ${({ isOpen }) =>
    isOpen &&
    `
    z-index: 9;
  `}

  * {
    font-family: 'Lato';

    outline: 0;
    box-sizing: border-box;
  }

  .DateInput {
    width: 100%;
  }

  svg.fa-calendar-alt {
    font-size: 14px;
  }

  input {
    font-weight: ${sizes.fontWeight.regular};
    position: relative;
    z-index: 1;
    width: 100%;
    height: ${sizes.input.height};
    padding: 0 ${sizes.input.padding};
    font-size: ${sizes.input.fontSize};
    cursor: pointer;
    border: 1px solid ${colors.lightGrey};
    border-radius: ${sizes.borderRadius};
    color: ${colors.black};
    background-color: transparent;
    padding-left: 42px;
    &::-webkit-input-placeholder {
      color: ${colors.greyPlaceholder};
    }
    &:disabled {
      background-color: transparent;
      cursor: not-allowed;
    }
  }

  .SingleDatePicker,
  .SingleDatePickerInput__withBorder {
    width: 100%;
  }

  .SingleDatePickerInput__withBorder {
    border: 0;
  }

  .DateInput_input__focused {
    border-color: ${colors.blueBorder};
  }

  .DayPicker_weekHeader {
    color: ${colors.black};
    border-top: 1px solid #f9f9f9;
    margin-top: -10px;
    li {
      padding-top: 7px;
      padding-bottom: 5px;
      small {
        font-size: 1.3rem;
      }
    }
  }

  .DayPicker__withBorder {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f9f9f9;
    background: white;
    position: absolute;
  }

  .DateInput_fang {
    display: none;
  }

  .CalendarMonth_caption {
    font-size: 1.3rem;
    padding-bottom: 45px;
    padding-top: 23px;
  }

  .DayPicker_transitionContainer {
    padding: 4px;
  }

  .DayPickerKeyboardShortcuts_show {
    display: none;
  }

  .DayPickerNavigation {
    div[role='button'] {
      font-size: 21px;
      width: 35px;
      height: 33px;
      color: ${colors.black};
      border-radius: 0;
      text-align: center;
      top: 20px;
      &,
      &:hover {
        border: 0;
      }
      &.DayPickerNavigation_leftButton__horizontalDefault {
        &::before {
          content: '‹';
        }
      }
      &.DayPickerNavigation_rightButton__horizontalDefault {
        &::before {
          content: '›';
        }
      }
      svg {
        display: none;
      }
      &:hover {
        background: #eee;
      }
    }
  }

  td {
    position: relative;
    cursor: pointer;
    width: 34px;
    height: 18px;
    font-size: 1.3rem;

    &,
    &.CalendarDay__selected,
    &.CalendarDay__selected:active,
    &.CalendarDay__selected:hover,
    &.CalendarDay__default:hover {
      border: 0;
    }
    &.CalendarDay__today {
      &::before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-bottom: 7px solid #005fea;
        border-top-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 4px;
        right: 4px;
      }
    }
    &.CalendarDay__selected {
      background-color: #007eff;
      color: #fff;
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
      &.CalendarDay__today {
        &::before {
          border-bottom: 7px solid white;
        }
      }
    }
  }
`;

DatePicker.defaultProps = {
  isOpen: false,
};

DatePicker.propTypes = {
  isOpen: PropTypes.bool,
};

export default DatePicker;