metro4/less/calendarpicker.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

.calendar-picker {
    position: relative;
}

.calendar-picker {
    input {
        width: 100%;
    }

    .calendar {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        z-index: @zindex-absolute;

        &.open {
            display: block!important;
        }

        &.open-up {
            top: auto;
            bottom: 100%;
        }
    }

    &.dialog-mode {
        .calendar {
            position: fixed;
            top: 50%!important;
            left: 50%!important;
            .translate3d(-50%, -50%, 0);
            z-index: @zindex-modal;

            &.open-up {
                top: auto;
                bottom: auto;
            }
        }
    }
}