@talentsoft-opensource/hylia/atoms/input-datepicker.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.input-datepicker {
    position: relative;
    width: 100%;
    display: inline-block;

    &:before {
        font-family: "talentsoft-font-icons" !important;
        font-size: 1.4rem;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        line-height: 1;

        position: absolute;
        z-index: 2;
        top: 0;
        right: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 3.4rem;
        height: 3.4rem;

        content: "\E93F";
        cursor: pointer;
        text-align: center;
        text-transform: none;

        color: @smart;

        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        speak: none;

        &:hover {
            color: @stormtrooper;
            background-color: @smart;
        }
    }

    // Override React Date Picker
    .react-datepicker-wrapper,
    .react-datepicker__input-container {
        width: 100%;
    }

    .react-datepicker__month-container {
        font-family: @regular_regular;
        font-size: 1.1rem;
    }

    .react-datepicker__current-month {
        font-family: @condensed_regular;
        font-size: 1.3rem;
    }

    .react-datepicker__day--selected {
        background-color: @terran;

        &:hover {
            background-color: @terran;
        }
    }

    .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
        right: 10px;
        left: auto;
    }
}