Yangman - module search, selected module color

[dlux.git] / modules / yangman-resources / src / main / resources / yangman / yangman.less

// general
@fontColor : #505050;
@fontColorLight: #a9a9a9;
@fontHighlight: orange;
@listBackColor: #f8f8f8;
@listActiveColor: #E7E7E7;
@appBackColor: #ffffff;
@unactiveTabFontColor: #a9a9a9;
@colorActive: rgb(64,196,255);
@popupHeaderColor: #ffffff;

// yangman
@leftPanelBackColor: #f3f3f3;
@infoBoxBackColor: rgba(255, 255, 255, 0.25);
@infoBoxBorderColor: #aad1f9;
@dataStoreListHoverColor: #dadada;
@dataStoreListShadowColor: rgba(0,0,0,.14);
@dataStoreListBorderColor: rgba(0,0,0,0.12);
@dashedBorderColor: rgba(0,0,0,0.54);
@inputColor: rgba(0,0,0,0.87);
@reqMethodGet: #63d33b;
@reqMethodPut: #6fbad3;
@reqMethodPost: #ea9c30;
@reqMethodDelete: #eabb2f;
@reqError: #ff0000;

// helpers
.pointer{
    cursor: pointer;
    outline: 0 none;
}

.no-wrap{
    white-space: nowrap;
}

.text-center{
    text-align: center;
}

.text-left{
    text-align: left;
}

.h100{
    height: 100%;
}

.mb30{
    margin-bottom: 30px;
}

.nrp{
    padding-right: 0!important;
}

// general
.md-open-menu-container{
    span{
        color: @fontColor;
    }

    h5{
        margin: 0 16px;
        color: @unactiveTabFontColor;

        md-icon{
            color: @unactiveTabFontColor;
            font-size: 18px;
        }
    }

    md-menu-content{
        .info-box{
            position: absolute;
            left: 100%;
            top: 0;
            margin-left: 10px;
            min-width: 300px;
            padding: 0;
            z-index: 10;
            background: #fff;
            -webkit-transition: all 150ms linear;
            -moz-transition: all 150ms linear;
            -ms-transition: all 150ms linear;
            -o-transition: all 150ms linear;
            transition: all 150ms linear;
            opacity: 1;
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;

            &__padding{
                padding: 16px;
            }

            &.ng-hide{
                opacity: 0;
            }
        }
    }

    svg {
         border: none;
         border-radius: 0px;
         background-image: none;
    }

    .icon-wrapper{
        padding: 0 16px;
    }
}

.md-select-menu-container{
    z-index: 1000;
}

.svg-icon{
    width: 24px;
    height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: @dashedBorderColor;
}

md-ink-bar.custom{
    width: 100%;
    color: @colorActive;
    left: 0;
    background: @colorActive;
}

button{
    label{
        font-weight: normal;
    }
}

.ui-resizable-e{
    cursor: e-resize;
    height: 100%;
    width: 7px;
    top: 0;
    position: absolute;
    right: 0;
}

.info-box-container{
    position: relative;

    &__hover-wrapper{
        display: inline-block;
        width: 100%;
    }

    .info-box{
        position: absolute;
        left: 90%;
        top: 0;
        margin-left: 10px;
        min-width: 300px;
        padding: 0;
        z-index: 10;
        background: #fff;
        -webkit-transition: all 150ms linear;
        -moz-transition: all 150ms linear;
        -ms-transition: all 150ms linear;
        -o-transition: all 150ms linear;
        transition: all 150ms linear;
        opacity: 1;
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;

        &__padding{
            padding: 16px;
        }

        &.ng-hide{
            opacity: 0;
        }

        span{
            color: @fontColor;
        }
    }

    md-menu-divider{
        margin-top: 4px;
        margin-bottom: 4px;
        height: 1px;
        min-height: 1px;
        max-height: 1px;
        width: 100%;
        background-color: @dataStoreListBorderColor;
        display: block;
    }
}

// yangman
.yangmanModule{
    background-color: @appBackColor;
    color: @fontColor;
    height: 100%;

    .ui-resizable-s{
        height: 13px;
    }

    .box-container{
        padding: 16px;
        margin: 8px 0;
    }

    .historyTab{
        height: calc(~'100% - 62px');
    }

    .collectionsTab{
        height: calc(~'100% - 62px');
    }


    p{
        margin: 0;
    }

    h1, h2, h3, h4, h5, h6{
        color: @fontColor;
    }

    .scrollableY{
        overflow-y: auto;
        height: 100%;
    }

    .scrollableX{
        overflow-x: auto;
        //width: 100%;
    }

    .highlight{
        color: @fontHighlight;
    }
    md-tabs-content-wrapper{
        top: 0!important;
    }

    // modules switcher -> list && detail
    .arrow-switcher{
        position: absolute;
        top: 2px;
        cursor: pointer;
        outline: 0 none;
        z-index: 10;
        font-size: 2.5em;
        left: -11px;
        -webkit-transition: all 250ms ease-out;
        -moz-transition: all 250ms ease-out;
        -ms-transition: all 250ms ease-out;
        -o-transition: all 250ms ease-out;
        transition: all 250ms ease-out;

        &__left{
            //right: -11px;
            left: calc(~'100% - 24px');
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        &.ng-hide{
            opacity: 0;
        }
    }

    md-dialog{
        h2{
            color: @popupHeaderColor;
        }

        &-actions{
            button{
                span{
                    color: @fontColor;
                }
            }
        }
    }
    // left panel
    &__left-panel{
        overflow-x: hidden;
        background: @leftPanelBackColor;
        position: relative;

        &__search{
            padding: 10px 13px;
            background: @listBackColor;
            min-height: 62px;

            .md-errors-spacer{
                display: none;
            }

            md-icon{
                color: @dashedBorderColor;
            }

            .md-has-icon.modules-list-search{
                padding: 2px 25px;
                margin: 0;

                .md-input{
                    width: auto;
                    order: 0;
                }

                button{
                    margin: 0;
                    padding: 0;
                    min-width: 0;
                    min-height: 0;
                    line-height: normal;

                    &:hover, &:focus, &:active, &:visited{
                        background: transparent;
                    }

                    .md-ripple-container{
                        display: none;
                    }
                }
            }
        }

        md-tabs,
        md-tab-content > div,
        md-content,
        .h100{
            height: 100%;
        }

        md-tabs-canvas{
            border-bottom: 1px solid #dbdbdb;
            padding-top: 30px;
            height: 78px;
        }

        md-ink-bar{
            height: 4px;
        }

        md-content{
            background: transparent;
        }

        .md-tab{
            span{
                color: @unactiveTabFontColor;
            }

            &.md-active{
                span{
                    color: @fontColor;
                }
            }
        }

        &__detail-list-tabs-container{
            > md-tabs-wrapper{
                display: none;
            }

            .inline-tabs > md-tabs-wrapper{
                display: inline;
            }
        }

        .searchBox{
            height: auto;
            padding: 10px 13px;
            font-size: 14px;

            #importCollection{
                display: none;
            }

            label{
                margin-bottom: 0;
            }

            md-icon.clickable{
                cursor: pointer;
            }

            #importParameters{
                display: none;
            }

            > button{
                margin: 6px 10px 0 0;
                height: 30px;
                min-width: 30px;
                padding: 0;
            }

            md-menu{
                margin: 0;
                height: 30px;
                min-width: 30px;
                padding: 0;

                > button{
                    min-width: 30px;
                }
            }


        }

        //loading panel
        &__loading-container {
            display: block;
            position: relative;
            border: 2px solid @infoBoxBorderColor;
            transition: opacity  0.1s linear;
            border-top: 0px;
            margin: 10px;

            .bottom-block {
                display: block;
                position: relative;
                background-color: @infoBoxBackColor;
                height: 85px;

                > span {
                    display: inline-block;
                    margin-top: 10px;
                    padding: 25px;
                    font-size: 0.9em;
                }
            }
        }
    }

    // right panel
    &__right-panel{
        height: 100%;

        .bottom-content{
            height: calc(~'100% - 195px');
            overflow-y: auto;

            .codemirror-container{
                height: 100%;
            }
        }

        &__header{
            margin-bottom: 30px;

            > md-content{
                background: @leftPanelBackColor;

                md-content{
                    background: transparent;
                }
            }

            md-input-container{
                margin: 0;
            }

            .md-errors-spacer{
                display: none;
            }

            .input-span{
                padding-top: 3px;
            }

            .input-identifier{
                max-width: 80px;
                border-color: @colorActive;
                padding-left: 0;
            }

            md-divider{
                margin-top: 20px;
            }

            .status-bar{
                min-height: 60px;

                .status-text{
                    span span{
                        color: @colorActive;
                    }
                }
            }
        }

        &__request-progress{

            margin-top: 12px;
            margin-bottom: 12px;

            &__loading-container {
                display: block;
                position: relative;
                border: 2px solid @infoBoxBorderColor;
                transition: opacity  0.1s linear;
                border-top: 0px;
                margin: 0;

                .bottom-block {
                    display: block;
                    position: relative;
                    background-color: @infoBoxBackColor;
                    height: 85px;

                    > span {
                        display: inline-block;
                        margin-top: 10px;
                        padding: 25px;
                        font-size: 0.9em;
                    }
                }
            }
        }

        &__req-data{

            > div{
                height: 100%;
                padding-right: 2px;
                padding-bottom: 10px;
                position: relative;


                > div:not(.ui-resizable-handle) {
                    height: calc(~'100% - 25px');
                    overflow-y: auto;
                }

                h5{
                    margin-top: 0;
                }

                &.half-size{
                    height: 50%;
                }
            }

            .paramsBox{
                position: absolute;
                top: 30px;
                right: 26px;
                background-color: rgba(235, 235, 228, 0.62);
                padding: 15px;
            }

            .CodeMirror { height: 100%; }

            md-toast{
                margin-top: 24px;
            }
        }

        &__form{

            .box-container.union{
                padding: 0;
            }

            .union-tabs{
                margin: 8px 0;

                md-content{
                    min-width: 250px;
                }

                .md-tab{
                    padding: 6px 12px;
                }

                md-pagination-wrapper,
                md-tabs-canvas{
                    height: 36px;
                }
            }

            md-input-container{
                margin: 0;

                > md-icon {
                    left: auto;
                    right: 2px;
                    color: @dashedBorderColor;
                }

                &.md-has-icon{
                    padding-right: 36px;
                    padding-left: 0px;
                }

                .md-errors-spacer{
                    display: none;
                }
            }

            .md-menu.menu-container{
                padding: 0;

                .md-button{
                    height: 22px;
                    min-height: 22px;

                    &.md-icon-button{
                        padding: 0 8px;
                    }
                }
            }

            .menu-placeholder{
                padding: 11px 26px;
            }

            p.top-element{
                margin: 0 10px 0 0;
                min-width: 80px;

                &.list-label{
                    color: @colorActive;
                }
            }

            &__element-container{
                margin: 25px 5px 5px 15px;
                padding: 5px;

                &.expanded{
                    border-left: 1px dashed @dashedBorderColor;
                }

                md-input-container{
                    &.input-icon-container{
                        margin-left: 15px;

                        md-icon{
                            margin: 0;
                        }
                    }
                }

                .container-label{
                    margin: -20px 0 10px -17px;

                    md-icon{
                        margin: 0;
                    }
                }
            }

            &__leaf-container{
                padding-left: 10px;

                md-input-container,
                md-switch,
                md-checkbox{
                    margin: 5px 0;
                }
            }

            &__list{
                &__paginator{
                    //margin-left: 40px;
                    button {
                        background: transparent;
                        border: 0;
                        outline: 0 none;
                    }
                }
            }

            &__list-item{
                margin: 0 5px;

                md-tab-item{
                    position: relative;

                    &.md-tab{
                        padding: 6px 12px;
                    }
                }
            }
        }
    }


    //modules list
    &__modules-list{
        padding: 0;
        background: @listBackColor;
        height: calc(~"100% - 62px")!important;

        h4{
            margin: 0;
            padding: 10px 20px;
        }

        &__item{
            padding: 0!important;

            .title{
                -webkit-transition: all 150ms ease;
                -moz-transition: all 150ms ease;
                -ms-transition: all 150ms ease;
                -o-transition: all 150ms ease;
                transition: all 150ms ease;
            }

            &.expanded{
                background: @listActiveColor;
            }

            &.selected{
                .title{
                    background-color: @colorActive!important;
                    color: #fff!important;
                }
            }

            md-icon{
                margin: 12px 16px;
            }

            &:hover{
                .title{
                    background: @listActiveColor;
                }
            }
        }
    }

    // datastore list
    &__datastore-list{
        padding: 0;
        border-top: 1px solid @dataStoreListBorderColor;
        background: @listBackColor;
        -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
        box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;

        md-list-item {
            min-height: 0;
            padding: 0;
            font-size: .85em;

            &:hover{
                background: @dataStoreListHoverColor;
            }

            md-icon{
                margin: 6px 16px 6px 48px;
                font-size: 20.4px;
            }
        }
    }

    // module history collections tabs
    &__mhc-tabs{

        md-list-item{
            .md-no-style{
                padding: 0;
            }
        }

        > md-tabs-content-wrapper{
            height: calc(~'100% - 78px');

            > md-tab-content{
                height: 100%;
            }
        }
    }

    // module detail
    &__module-detail{
        h4{
            padding-top: 30px;
            margin: 0 15px;
        }

        .tabs{
            height: calc(~'100% - 49px');

            md-tabs-canvas{
                padding-top: 0;
                height: 48px;
            }

            > md-tabs-content-wrapper{
                height: calc(~'100% - 48px');

                > md-tab-content{
                    height: 100%;
                }
            }

            .md-tab{
                padding: 0;
            }

            md-tab-item{
                span{
                    outline: 0 none;
                    padding: 12px 24px;
                }
            }
        }

        > div{
            height: 100%;

            > md-content{
                overflow-y: hidden;
            }
        }
    }

    &__requests-list{
        background: @listBackColor;
        padding: 0;

        .md-subheader{
            background: none;

        }

        md-list{
            padding-top: 0;
        }

        &__group{

            padding: 0!important;

            &__item{

                &__path{
                    white-space: -webkit-pre-wrap; /*Chrome & Safari */
                    word-break: break-all;
                    white-space: normal;
                    line-height: 18px;
                    color: @fontColor;

                    p{
                        padding-right: 9px;
                    }
                }

                &__method{

                    padding-left: 17px;

                    .GET{
                        color: @reqMethodGet;
                    }
                    .PUT{
                        color: @reqMethodPut;
                    }
                    .POST{
                        color: @reqMethodPost;
                    }
                    .DELETE{
                        color: @reqMethodDelete;
                    }
                    .error{
                        color: @reqError;
                    }
                }
            }

            &__itemMenu{
                position: relative;
                margin-left: -52px;
                padding-top: 0;

                > button{
                    min-width: 0;
                    margin: 2px 5px;

                    i.material-icons{
                        vertical-align: middle;
                        color: @fontColorLight;

                    }
                }

            }

            &__collectionMenu{
                position: relative;
                margin-left: -52px;
                margin-right: 6px;

                > button{
                    min-width: 0;
                    margin: 2px 5px;

                    i.material-icons{
                        vertical-align: middle;
                        color: @fontColorLight;
                    }
                }

            }

            .selected{
                button{
                    background-color: rgba(158,158,158,0.2);
                }
            }

        }

        &__collections-list{
            padding: 0;
            background: @listBackColor;
            height: 100%;

            .selected{
                button{
                    background-color: rgba(158,158,158,0.2);
                }
            }
        }

        &__collection{
            padding: 0;
            background: @listBackColor;

            &__requests{
                padding: 0;
                border-top: 1px solid @dataStoreListBorderColor;
                background: @listBackColor;
                -webkit-box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
                box-shadow:inset 0 7px 7px -5px @dataStoreListShadowColor;
            }

            .md-subheader{
                background: none;
            }

            .md-subheader-inner{
                padding: 0;
            }

            .material-icons{
                margin: 15px 25px;
            }

            p{
                line-height: 18px;
                padding: 12px 0;

                .desc{
                    color: @fontColorLight;
                }
            }

        }

    }
}
.reqMenu{
    button{
        span{
            color: @fontColor

        }
        i.material-icons{
            vertical-align: middle;
            margin-right: 5px;
            margin-bottom: 5px;
        }
    }
}


.md-autocomplete-suggestions{
    span{
        color: @fontColor;
    }
}

md-dialog{

    .md-toolbar-tools{
        button{
            min-width: auto;
        }
    }

    md-dialog-content, md-dialog-actions{
        h2, span{
            color: @fontColor;
        }

    }

}

// directives
.directive{
    &__abn-tree{
        padding: 0;
        display:inline-block;
        white-space: nowrap;
        min-width: 100%;

        md-icon{
            margin: 6px 16px!important;
        }

        md-list-item{
            min-height: 0;

            &.active{
                background: @listActiveColor;
            }

            .md-no-style{
                padding: 0;

                &.md-button{
                    white-space: nowrap;
                }
            }

            .md-list-item-inner{
                min-height: 0;
            }

            .empty-box{
                display: inline-block;
                margin-top: -10px;
                margin-left: 27px;
                border-left: 1px dashed @dashedBorderColor;
                height: 36px;
                width: 1px;
            }

            .md-button{
                overflow: visible;
            }

            .tree-label{
                padding-right: 15px;
            }
        }
    }
}

.paramsAdminDialog{

    .md-dialog-content{

        height: 400px;

        button{
            height: 30px;
            min-width: 30px;
            margin-top: 15px;
            i{
                vertical-align: middle;
            }
        }


    }
    &__searchBox{

        height: 80px;

        > button{
            margin-top: 13px!important;
            margin-right: 0px!important;
        }

        #importParameters{
            display: none;
        }

        label{
            md-icon{
                color: @fontColor;
            }
        }

        md-menu{
            button{
                margin-top: 5px!important;
            }
        }

        input{
            border: none;
            height: auto;
            outline: none;
        }
    }
    &__paramsList{
        width: 450px;
        padding-top: 35px;

        > div{
            min-height: 60px;
            margin-top: 10px;
        }


    }
}