fk-react-ui-components/lib/StyleComponents/reactDates.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import styled from "styled-components";
import { colors } from '../colorCodes';
const DatePicker = styled.div`
    .DayPicker--horizontal{
        width: 618px !important;
    }
    .transition-container--horizontal{
        width: 608px !important;
        height: 318px !important;
    }
    .CalendarDay--selected-span.CalendarDay--selected-start, .CalendarDay--selected-start, .CalendarDay--selected-end, .CalendarDay--selected {
        background: #027cd5 !important;
        border: 1px double #2e66ff !important;
        color: #fff;
    }
    .CalendarDay--selected-span {
        background: ${colors.datePickerBgColor} !important;
        border: 1px double ${colors.datePickerBorderColor}; !important;
        color: #fff;
    }
    .CalendarDay--selected-span.CalendarDay--hovered, .CalendarDay--selected-span:active {
        background: #2ba3ff;
        border: 1px double #0053a6;
    }
   .CalendarDay--after-hovered-start, .CalendarDay--hovered-span, .CalendarDay--hovered-span:active, .CalendarDay--after-hovered-start:active {
        background: #4bc1ff;
        border: 1px solid ${colors.datePickerBorderColor};
        color: #fff;
    }
    .DateInput__display-text--focused{
        background: ${colors.datePickerBgColor} !important;
    }
`;

export default {
    DatePicker
};
//# sourceMappingURL=reactDates.js.map