morning-ui/src/lib/components/private-timepicker/index.less

modern efficient user interface, using human-friendly HTML

mor-private-timepicker{
    display: block;
    width: 100%;
    position: relative;

    .setup-form();

    &.st-normal{}

    &.st-disabled{}

    // default status
    &{
        .st-normal;
    }
}

.mor-private-timepicker-popover{
    width: @fontSize*10;
    top: @formHeight + 3;
    box-sizing: border-box;

    .popover-con .popover-body{
        padding: 0;
    }

    .select{
        width: 100%;
        background: @colorFormBackground;
        // border: 1px @colorFormBorder solid;
        border-radius: @borderRadius;
        font-size: 0;
        user-select: none;
        z-index: 1;

        &:hover{
            border-color: @colorFormBorderHover;
        }

        .time-box{
            position: relative;

            > ul{
                list-style: none;
                padding: 0;
                font-size: 0;
                margin: 0;
                width: 33.3333%;
                display: inline-block;
                vertical-align: top;
                height: @fontSize*0.75*2.5*6;
                overflow-y: auto;
                position: relative;
                z-index: 1;

                .setup-hover-scrollbar();

                li{
                    display: block;
                    font-size: @fontSize*0.75;
                    padding: 0.5em 0;
                    text-align: center;
                    margin: 0;
                    height: 1.5em;
                    line-height: 1.5em;
                    box-sizing: content-box;
                    color: darken(@colorFormPlaceholderHover, 10%);

                    &.current{
                        color: @colorFormTextFocus;
                        font-weight: 700;
                    }

                    &.block{
                        color: @colorFormTextLight !important;
                        font-weight: 400 !important;
                        background-color: @colorFormBackgroundFocus;
                    }

                    &:first-child{
                        margin-top: 6.25em;
                    }

                    &:last-child{
                        margin-bottom: 6.25em;
                    }

                    &:hover{
                        background-color: @colorFormBackgroundHover;
                        cursor: pointer;
                    }

                    &.current:hover{
                        background-color: rgba(0, 0, 0, 0);
                        cursor: default;
                    }

                    &.block:hover{
                        background-color: @colorFormBackgroundFocus;
                        cursor: not-allowed;
                    }
                }
            }

            .selected{
                position: absolute;
                top: 50%;
                left: 8%;
                transform: translateY(-50%);
                border-top: 1px @colorFormBorderHover solid;
                border-bottom: 1px @colorFormBorderHover solid;
                padding: 0.5em 0;
                font-size: @fontSize*0.75;
                width: 84%;
                pointer-events: none;
                height: 2.5em;
                box-sizing: border-box;
                line-height: calc(1.5em - 2px);
                z-index: 2;
            }
        }
    }

    &.si-m {
        top: @formHeight + 3;
    }

    &.si-s {
        top: @formHeightS + 3;
    }

    &.si-xs {
        top: @formHeightXs + 3;
    }
}