metro4/source/components/calendarpicker/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%;
    }

    //&.dialog-mode {
    //    .calendar-for-picker {
    //        position: fixed;
    //        top: 50%!important;
    //        left: 50%!important;
    //        .translate3d(-50%, -50%, 0);
    //        z-index: @zindex-modal;
    //
    //        &.open-up {
    //            top: auto;
    //            bottom: auto;
    //        }
    //    }
    //}
}

.calendar-picker {
    .calendar-wide {
        width: 464px;
        &.compact {
            width: 364px;
        }
    }
}

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

    &.open {
        display: block!important;
    }

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

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

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