Value Chain Row Element

by Erik Bartlow

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic&#39;"></script>
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-clear.css">
<link rel="stylesheet" href="http://thebartlows.com/scripts/iconsprite/vc-theme-main.css">
<div class="vc-row-group">
    <div class="vc-row vc-row-time vc-color-base-border">
        <div class="vc-header">
            <div class="vc-title vc-rotate">Title</div>
        </div>
        <div class='vc-add-row vc-color-base-border'>
             <h2>+</h2>

        </div>
        <div class='vc-row-section' whenNew='Click to Add'></div>
    </div>
    <div class="vc-row vc-row-area vc-color-base-border">
        <div class="vc-header">
            <div class="vc-title vc-rotate">Title</div>
        </div>
        <div class='vc-add-row vc-color-base-border'>
             <h2>+</h2>

        </div>
        <div class='vc-row-section' whenNew='Click to Add'></div>
    </div>
    <div class="vc-row vc-row-topic vc-color-base-border">
        <div class="vc-header">
            <div class="vc-title vc-rotate">Title</div>
        </div>
        <div class='vc-add-row vc-color-base-border'>
             <h2>+</h2>

        </div>
        <div class='vc-row-section' whenNew='Click to Add'></div>
    </div>
</div>

CSS

body {
    font-family:'Open Sans Condensed', sans-serif;
    margin-left: 1em;
}
h3 {
    margin-top: 1em;
    margin-bottom: 2em;
}
.vc-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.vc-flex-vertical {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.vc-center {
    justify-content: center;
    align-items: center;
}
.vc-flex-left {
    align-content: flex-start;
}
.vc-flex-right {
    justify-content: flex-end;
    align-items: center;
}
.vc-hidden {
    display: none;
}
.vc-row-group {
    padding: 3px;
}
.vc-row-group .vc-header {
    border-radius: 0px;
}
.vc-row-group > div {
    border-radius: 0px;
}
.vc-row-group > div:first-child {
    border-top-left-radius: 10px !Important;
    border-top-right-radius: 10px !Important;
    border-top-width: 1px;
}
.vc-row-group > div:first-child .vc-header {
    border-top-left-radius: 10px !Important;
}
.vc-row-group > div:last-child {
    border-bottom-right-radius: 10px !Important;
    border-bottom-left-radius: 10px !Important;
}
.vc-row-group > div:last-child .vc-header {
    border-bottom-left-radius: 10px !Important;
}
.vc-row {
    position: relative;
    width: 100%;
    border-width: 0px 1px 1px;
    background-color: #F5F5F5;
    border-style: solid;
    height: 175px;
}
.vc-header {
    width: 40px;
    position: relative;
    display: inline-block;
    height: 100%;
    padding: 2px 4px;
}
.vc-title {
    font-size: .8em;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 200%;
    min-width: 150px;
    margin: 0px 2px;
}
.vc-row-time {
}
.vc-row-area {
}
.vc-row-topic {
}
.vc-row-time > .vc-header {
    background-color: #eee8e0;
    width: 40px;
    position: relative;
    display: inline-block;
    height: 100%;
    padding: 2px 4px;
}
.vc-row-time > .vc-header >...

JavaScript

$(function () {

    $('.vc-add-row').hover(function (e) {
        $(this).parent().addClass('vc-action-glow');
        $(this).addClass('vc-action-glow');
    }, function (e) {
        $(this).parent().removeClass('vc-action-glow');
        $(this).removeClass('vc-action-glow');
    });

    vcv.initialize();

    var templates = {
        contextMenu: function () {
            var ctx = $('<div />', {
                class: 'vc-element-menu',
                id: 'ctxMenu'
            });
            var ctxMenuHtml = [
                '    <div class="vc-menu-header">Item Options</div>',
                '    <ul class="vc-menu-items">',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-delete-18"></div><span>Delete</span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-reoccurring-18"></div><span>Set as Reoccurring</span>',
                '        </li>',
                '        <li class="vc-flex vc-menu-item-sep">',
                '            <div class="vc-icons-18 vc-icon-blank-18"></div><span></span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-start-group-18"></div><span>Start Item Group</span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-end-group-18"></div><span>End Item Group</span>',
                '        </li>',
                '        <li class="vc-flex vc-menu-item-sep">',
                '            <div class="vc-icons-18 vc-icon-blank-18"></div><span></span>',
                '        </li>',
                '        <li class="vc-flex">',
                '            <div class="vc-icons-18 vc-icon-add-right-18"></div><span>Insert Right</span>',
                '        </li>',
           ...