picker.css 5.44 KB
.rangePicker {
    opacity: 0;
    transition: 0.12s ease-out;
    transition-property: margin, padding, opacity;
}

    .rangePicker > .wrap {
        position: relative;
        min-width: 408px;
        white-space: nowrap;
        background: #FFF;
        border: 1px solid rgba(0,0,0,0.2);
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        overflow: hidden;
        max-height: 0;
        transition: 0.12s ease-out;
        transition-property: margin, padding, max-height;
    }

    .rangePicker::before {
        content: '\25B2';
        position: absolute;
        z-index: 1;
        top: -15px;
        left: 10px;
        font-size: 20px;
        text-shadow: 0 -2px 1px rgba(0,0,0,0.2);
        color: #FFF;
        transform: scaleX(1.5);
    }

    .rangePicker.show {
        z-index: 999;
        bottom: auto;
        margin-top: 10px;
        opacity: 1;
    }

        .rangePicker.show > .wrap {
            max-height: 265px;
        }

        .rangePicker.show.custom > .wrap {
            padding: 0 400px 98px 0;
        }

    .rangePicker.RTL::before {
        left: auto;
        right: 10px;
    }

    .rangePicker.RTL.show.custom > .wrap {
        padding: 0 0 98px 430px;
        margin-left: -430px;
    }

    .rangePicker.RTL > .wrap > .preset > button {
        text-align: right;
    }

        .rangePicker.RTL > .wrap > .preset > button[value="custom"]::after {
            content: '\25C2';
            right: auto;
            left: 5px;
        }

    .rangePicker.RTL > .wrap > .custom {
        left: 0;
        right: auto;
        direction: rtl;
    }

        .rangePicker.RTL > .wrap > .custom > .calendar > strong {
            text-align: right;
        }

        .rangePicker.RTL > .wrap > .custom > .calendar.from {
            float: right;
        }

    .rangePicker > .wrap > .custom > .calendar button, .rangePicker > .wrap > .preset button {
        border: 1px solid transparent;
        border-radius: 3px;
    }

        .rangePicker > .wrap > .custom > .calendar button:hover, .rangePicker > .wrap > .preset button:hover {
            background: rgba(59,122,181,0.1);
        }

        .rangePicker > .wrap > .custom > .calendar button.selected, .rangePicker > .wrap > .preset button.selected {
            background: #d04a02;
            color: #FFF;
            outline: none;
        }

        .rangePicker > .wrap > .custom > .calendar button[disabled], .rangePicker > .wrap > .preset button[disabled] {
            border-color: transparent;
            background: none;
            box-shadow: none;
            opacity: .4;
            cursor: default;
            color: inherit;
        }

    .rangePicker > .wrap .preset {
        display: block;
        text-transform: capitalize;
        min-width: 110px;
        padding: 3px;
        width: 0px;
        box-shadow: 0 100px #FFF;
        position: relative;
        z-index: 1;
        background: #FFF;
        box-sizing: border-box;
        min-height: 250px;
        min-width: 0px;
    }

        .rangePicker > .wrap .preset button {
            display: block;
            width: 100%;
            margin: 0;
            background: none;
            padding: 4px 8px;
            text-align: left;
            position: relative;
        }

            .rangePicker > .wrap .preset button[value="custom"]::after {
                content: '\25B8';
                position: absolute;
                right: 5px;
                font-size: 21px;
                opacity: 0.7;
            }

    .rangePicker > .wrap .custom {
        position: absolute;
        top: 0;
        right: 0;
        padding: 6px;
        transition: 0.4s cubic-bezier(0.77, 0.11, 0.22, 1);
    }

        .rangePicker > .wrap .custom > .calendar {
            display: inline-block;
            margin: 25px 3px 0;
            width: 190px;
            background: rgba(59,122,181,0.1);
            padding: 7px;
        }

        .rangePicker > .wrap .custom strong {
            display: block;
            margin: -30px 0 10px;
        }

            .rangePicker > .wrap .custom strong span {
                text-transform: capitalize;
                opacity: 0.9;
                font-weight: normal;
                display: inline-block;
                margin-left: 6px;
            }

                .rangePicker > .wrap .custom strong span:before {
                    content: '-';
                    margin-right: 6px;
                }

        .rangePicker > .wrap .custom .from strong:before {
            content: 'From';
        }

        .rangePicker > .wrap .custom .to strong:before {
            content: 'To';
        }

    .rangePicker footer {
        display: block;
        max-height: 40px;
        padding: 5px;
        overflow: hidden;
        transition: 0.2s ease-out;
    }

        .rangePicker footer button {
            margin-left: 20px;
            float: right;
        }

    .rangePicker .set ~ footer {
        max-height: 0;
        padding: 0 5px;
        border-color: transparent;
    }

    .rangePicker select {
        margin-bottom: 7px;
        width: 100%;
    }

    .rangePicker .calendar.from > select::after {
        content: 'From - ';
    }

    .rangePicker .calendar.to > select::after {
        content: 'To - ';
    }

    .rangePicker .wrap {
        display: inline-block;
    }

    .rangePicker .months button {
        background: none;
        float: left;
        width: 33%;
        margin: 0 0.15%;
        padding: 5px;
        text-transform: capitalize;
    }