.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; } } } } } }