JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/stylesheets/jquery.sidr.light.min.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <div id="ybx-broadcast" style="border: medium none;" class="ui-dialog-content ui-widget-content"></div>
  <div id="ybx-panel" style="display: none;" class="ui-yakabox-panel ui-bootstrap">
    <div class="ui-yakabox-panel-trigger"><a class="ybx-panel-trigger btn btn-primary"><i class="fa fa-fw fa-2x fa-chevron-left"></i></a></div>
    <div class="ybx-panel-panewrapper ui-yakabox-panel-panewrapper ui-background-flat ui-border-none">
      <div class="ybx-panel-contentpane ui-yakabox-panel-content ui-helper-clearfix">
        <div class="ybx-panel-navpane ui-buttonset-navpane btn-group"><button class="ybx-panel-navback ui-corner-all btn btn-link" title="Back"><i class="fa fa-arrow-right fa-rotate-180 fa-fw"></i></button><button class="ybx-panel-navforward ui-corner-right ui-corner-all btn btn-link" title="Forward"><i class="fa fa-arrow-right fa-fw"></i></button></div>
      </div>
    </div>
  </div>



  <nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <div...

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Open+Sans:400italic,700italic,400,700);

.ui-yakaimage {

display: inline-block;
background-color: rgba(0,0,0,.2);
box-shadow: inset 0 0 2px rgba(0,0,0,.6);
}
.addCondition {
	
	    font-size: 10px;
    text-align: center;
    margin: 0 auot;
    margin-left: -17px;
    margin-top: -10px;
    opacity: .4;
    margin-bottom: 20px;
    display: block;
	
}


.ui-builder {
  
  .form-group {
    border-top: none;
  }
    .form-group:hover {
    background: transparent;
  }
    
.row > div[class^="col-"] {
    background-color: #fff;
    border: 1px solid #fff;
    padding: 15px 0;
    text-align:left;
    flex:1 0 0 ;
    min-height:40px
    }
    

.row.ui-builder-has-layout > div[class^="col-"] {
    box-shadow: inset 15px 0 0 #f5f5f5, inset -15px 0 0 #f5f5f5, inset 0 15px 0 #f5f5f5, inset 0 -15px 0 #f5f5f5;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 15px 0;
    text-align:left;
    flex:1 0 0 ;
    min-height:40px
    }
    
    .row > div[class^="col-"] > .row {
    margin: -15px 0;
    }
    
    .row {
    display:flex;
    flex-direction:row;
}
}

.ui-yakabox-dash-button-wrapper {
  display: none;
}


.ui-builder-has-layout .ui-yakabox-dash-button-wrapper {
  display:block;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 47.5%;
    z-index: 498;
    height: 1px;
    bottom: 8px;
}

.ui-yakabox-dash-button-wrapper button {

    background-color: transparent;
    border:none;
    margin-right: -1px;
    color: #999;
    float: none;

}

.btn-default:hover, .btn-default:hover .fa {
  color:#000;
}

.ui-dash-widget-tools {
right: 4px;
top: 35%;
height: 40px;
width: 13px;
position: absolute;
z-index: 3000;


.ui-dash-widget-menu {
  display:none;
  top: 0;
height: 100%;
}

}

.ui-dash-widget-tools.hover, .ui-dash-widget-tools:focus {
right: 0;
top: 0;
height: 100%;
width: 320px;;
position: absolute;
z-index: 3000;
background-color:...

JavaScript

$('input#checkBoxLayout').on('change', function() {

  $('.ui-builder > div.row').toggleClass('ui-builder-has-layout');
});


$('.thumbnail').click(function() {

    var $thisiffty = $(this);

$thisiffty.addClass('slide-out-fwd-center');
});



$('.ui-proto-new-iftty').click(function() {


  $('.ui-proto-sidr-content-default').toggle();

  $('.ui-proto-sidr-content-iftty').toggle();

});



$('.simple-menu').sidr({
  displace: true
});

$('.closeSidr').click(function() {

			resetUI();
});

$('.ui-condition-carosel').click(function() {

alert('cycle through is, is not, is any, is set...')
});

$('.ui-proto-btn-add-condition').click(function() {

$('.ui-proto-add-condition-conf').toggle();

});






$('.ui-dash-widget-tools').mouseenter(function() {
    var $thisSlideout = $(this);
    var $thisMenu = $thisSlideout.find('.ui-dash-widget-menu');

    $(this).data('timeout', setTimeout(function() {

      $thisSlideout.addClass('hover');
      $('#ybx-proto-row-options').clone().appendTo($thisMenu).css('display', 'block');
      $('.ui-dash-widget-tools .btn-link').click(function() {
        $.sidr('open', 'sidr');

        var $btnClicked = $(this).attr('data-attr');
        var $CellClicked = $(this).closest('.col-xs-12').find('label').text();

 
				var newStr = $CellClicked.substring(0, $CellClicked.length-1);
        var $menuShow = $('.' + $btnClicked)

        $('#sidr .sub').hide();
        $menuShow.show();
        
        
        var $fieldType = $(this).closest('.col-xs-12').find('label').attr('data-type');
        var $configShow = $('.' + $fieldType)
        console.log(newStr);
        $("#fieldPicker_mew").val(newStr);        
        $('#sidr .field_type').hide();
        $configShow.show();
				
      });
    }, 300));
  })
  .mouseleave(function() {
    $(this).removeClass('hover');
    $(this).find('#ybx-proto-row-options').remove();
    clearTimeout($(this).data('timeout'));

  });

$('body').keypress(function(e) {
  if (e.which == 27) {
   ...