winter/modules/system/assets/ui/less/inspector.less

//
// Dependencies
// --------------------------------------------------

@import "global.less";
@import "popover.less";
@import "tooltip.less";
@import "checkbox.less";
@import "select.less";

//
// Inspector
// --------------------------------------------------

@color-inspector-bg:                         #f2f2f2;
@color-inspector-active-bg:                  #ffffff;
@color-inspector-text:                       #333333;
@color-inspector-grid:                       #c8cccd;
@color-inspector-changed:                    #c03f31;

//
// Inspector
// --------------------------------------------------

.inspector-fields {
    min-width: 220px;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    .border-bottom-radius(2px);

    td, th {
        padding: 5px 12px;
        color: @color-inspector-text;
        font-size: 12px;
        width: 50%;
        border-bottom: 1px solid @color-inspector-grid;
        text-align: left;
    }

    tr:last-child {
        td, th { border-bottom: none; }

        td {
            &, input[type=text] {
                .border-radius(0 0 2px 0);
            }
        }
    }

    tr.group {
        .user-select(none);

        th {
            background: #e0e4e5;
            font-weight: 600;
            cursor: pointer;
        }
    }

    tr {
        &.collapsed {display: none;}
        &.expanded {display: table-row;}
    }

    &.has-groups {
        th {
            padding-left: 20px;
        }

        tr.grouped th {
            padding-left: 35px;
        }
    }

    td {
        font-weight: 300;
        border-left: 1px solid @color-inspector-bg;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;

        &.text {
            input[type=text] {
                background: transparent;

                &::-webkit-input-placeholder {
                    font-weight: normal!important;
                    color: #b5babd;
                } 
                &:-moz-placeholder {
                    font-weight: normal!important;
                    color: #b5babd;
                }
                &::-moz-placeholder {
                    font-weight: normal!important;
                    color: #b5babd;
                }
                &:-ms-input-placeholder {
                    font-weight: normal!important;
                    color: #b5babd;
                }
            }

            &.active {
                background: @color-inspector-active-bg;
                border-left: 1px solid @color-inspector-grid;
            }
        }

        &.dropdown {
            padding: 0!important;
        }

        select {
            width: 90%;
        }

        div.external-param-editor-container {
            position: relative;
            padding-right: 30px;

            div.external-editor {
                bottom: 0;
                margin: -5px -12px;
                right: 30px;
                left: auto;
                top: 0;
                position: absolute;

                .transition(left 0.2s);
                .transform( ~'translateZ(0)');
                will-change: transform;

                div.controls {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;

                    a {
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: inline-block;
                        height: 100%;
                        width: 30px;
                        color: #2b3e50;
                        outline: none;

                        i {
                            display: inline-block;
                            position: relative;
                            left: 10px;
                            top: 4px;
                            font-size: 15px;
                        }
                    }

                    input {
                        position: absolute;
                        display: block;
                        border: none;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        padding-left: 30px;
                        padding-right: 12px;
                        background: transparent;
                    }
                }
            }

            &.editor-visible {
                div.external-editor {
                    div.controls {
                        input {
                            background: @color-inspector-bg;
                        }
                    }
                }
            }
        }

        &.active {
            div.external-param-editor-container {
               div.external-editor {
                    div.controls {
                        input {
                            background: white;
                        }
                    }
                }
            }
        }

        &.dropdown div.external-param-editor-container div.external-editor {
            height: 100%;
            margin: 0;
            bottom: auto;
        }
    }

    th {
        font-weight: 500;

        > div {
            position: relative;

            > div {
                white-space: nowrap;
                padding-right: 10px;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 100%;

                span.info {
                    display: inline-block;
                    position: absolute;
                    right: -1px;
                    top: 3px;
                    font-size: 14px;
                    width: 10px;
                    height: 12px;
                    line-height: 80%;
                    .opacity(0.4);
                    &:before {
                        margin-left: 3px;
                    }
                    &:hover {
                        .opacity(1);
                    }
                }
            }

            a.expandControl {
                display: block;
                position: absolute;
                width: 12px;
                height: 12px;
                left: -15px;
                top: 2px;
                text-indent: -100000em;

                span {
                    position: absolute;
                    display: inline-block;
                    left: 0;
                    top: 0;
                    width: 12px;
                    height: 12px;

                    &:after {
                        .icon(@angle-right);
                        position: absolute;
                        left: 4px;
                        top: -2px;
                        width: 12px;
                        height: 12px;
                        font-size: 13px;
                        color: #333333;
                        text-indent: 0;
                    }
                }

                &.expanded span:after {
                    .icon(@angle-down);
                    left: 2px;
                }
            }
        }
    }

    input[type=text] {
        display: block;
        width: 100%;
        border: none;
        outline: none;
    }

    div.custom-checkbox {
        margin-top: 0;
        margin-bottom: 0;

        label:before {
            top: -12px;
        }
    }

    .select2-container {
        width: 100% !important;

        .select2-selection {
            background: transparent;
            height: 30px;
            line-height: 29px;
            padding: 0 3px 0 12px;
            .border-radius(0) !important;
            border: none !important;
            font-size: 12px;

            &.select2-default {
                font-weight: normal !important;
            }
        }

        .loading-indicator {
            > span {
                top: 15px;
            }
        }

        &.select2-container--open {
            .border-radius(0) !important;
            border: none !important;

            .select2-selection {
                background: white;
            }
        }
    }

    tr.changed {
        td {
            font-weight: 600;
            input[type=text] {
                font-weight: 600;
            }

            .select2-container .select2-selection {
                font-weight: 600;
            }
        }
    }

}

div.control-popover {
    &.control-inspector {
        > div {
            background: @color-inspector-bg;
            border: none;
            .box-shadow(none);

            &:before, &:after {
                display: none;
            }
        }
    }

    &.hero {
        .inspector-fields {
            th, td {
                padding: 9px 12px;
                font-weight: 600!important;
                font-size: 13px;
            }

            td {
                font-weight: 400!important;
            }

            div.custom-select.select2-container .select2-selection {
                height: 36px;
                line-height: 36px;
            }
        }
    }
}

.select2-dropdown {
    &.ocInspectorDropdown {
        font-size: 12px;
        .border-radius(0) !important;
        border: none !important;

        > .select2-results {
            > .select2-results__options {
                font-size: 12px;
            }
            > li > div {
                padding: 5px 12px 5px;
            }

            li.select2-no-results {
                padding: 5px 12px 5px;
            }
        }

        .select2-search {
            min-height: 26px;
            position: relative;

            &:after {
                position: absolute;
                .icon(@search);
                right: 10px;
                top: 10px;
                color: #95a5a6;
            }

            input.select2-input {
                min-height: 26px;
                background: transparent !important;
                padding-left: 12px;
                padding-right: 12px;
            }
        }
    }
}