marc-leopold/cms/plugins/rainlab/builder/assets/less/menus.less

.builder-menu-editor {
    background: white;
    
    .builder-menu-editor-workspace {
        padding: 30px;
    }

    ul.builder-menu {
        font-size: 0;
        padding: 0;
        cursor: pointer;

        > li {
            .border-radius(4px);

            div.item-container:hover, &.inspector-open > div.item-container {
                background: @builder-hover-color!important;
                color: white!important;

                a {
                    color: white!important;
                }
            }

            div.item-container {
                position: relative;

                .close-btn {
                    color: white;
                    position: absolute;
                    display: none;
                    width: 15px;
                    height: 15px;
                    right: 5px;
                    top: 5px;
                    font-size: 14px;
                    text-align: center;
                    line-height: 14px;
                }

                &:hover .close-btn {
                    display: block;
                    text-decoration: none;
                    .opacity(0.5);

                    &:hover {
                        .opacity(1);
                    }
                }
            }

            &.add {
                font-size: 16px;
                text-align: center;
                border: 2px dotted #dde0e2;

                a {
                    text-decoration: none;
                    color: #bdc3c7;
                }

                span.title {
                    font-size: 14px;
                }

                &:hover {
                    border: 2px dotted @builder-hover-color;
                    background: @builder-hover-color!important;

                    a {
                        color: white;
                    }
                }
            }

            &.list-sortable-placeholder {
                border: 2px dotted @builder-hover-color;
                height: 10px;
                background: transparent;
            }
        }

        &.builder-main-menu {
            > li {
                display: inline-block;
                vertical-align: top;

                &.item {
                    margin: 0 20px 20px 0;
                }

                > div.item-container {
                    background: #ecf0f1;
                    color: #708080;
                    padding: 20px 25px;
                    height: 64px;
                    white-space: nowrap;

                    i {
                        font-size: 24px;
                        margin-right: 10px;
                    }

                    span.title {
                        font-size: 14px;
                        line-height: 100%;
                        position: relative;
                        top: -3px;
                    }
                }

                &.add {
                    height: 64px;

                    a {
                        padding: 20px 15px;
                        height: 60px;
                        display: block;

                        i {
                            margin-right: 5px;
                        }

                        span {
                            position: relative;
                            top: -1px;
                        }
                    }
                }
            }
        }

        &.builder-submenu {
            margin-top: 1px;

            > li {
                display: block;
                width: 120px;

                i {
                    display: block;
                    margin-bottom: 7px;
                }

                span.title {
                    display: block;
                    font-size: 12px;
                }

                &.item {
                    margin: 0 0 1px 0;
                }

                > div.item-container {
                    background: #f3f5f5;
                    color: #94a5a6;
                    padding: 18px 13px;
                    text-align: center;

                    i {
                        font-size: 24px;
                    }
                }

                &.add {
                    margin-top: 20px;

                    a {
                        padding: 10px 20px;
                        display: block;
                    }

                }
            }
        }
    }
}