JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by chrischilcoat

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://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<script src="jquery.sidr.light.js"></script>
<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 class="navbar-header">
            <button...

SCSS

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


.nav.nav-boxes li {
  background:red;
  width:50%;
  display:inline-block;
}

.form-group {
  border:none;
}

.carousel-control.right {
  background: none;
  font-size: 12px;
  margin-top: 6px;
  margin-right: -9px;
  color:black
}
.carousel-control.left {
  background: none;
  font-size: 12px;
  margin-top: 6px;
  margin-left: -9px;
  color:black
}

.ui-yakabox-iftty-form-control {
}

.sidr {
  display:block;
  position:fixed;
  top:0;
  height:100%;
  z-index:999999;
  width:260px;
  padding:15px;
  overflow-x:hidden;
  overflow-y:auto;
  font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
  background:#f8f8f8;
  box-shadow:0 0 1px 1px #ebebeb inset;
}

.sidr .sidr-inner {
  padding:15px;
}

.sidr.right {
  left:auto;
  right:-260px;
}

.sidr.left {
  left:-260px;
  right:auto;
}

legend {
  font-weight:bold;
  border:none;
  margin-bottom:0;
  margin-top:10px
}

.nav-tabs li {
  width:25%;
}

.item {
  text-align:center;
}

/*
.form-control.ui-yakabox-iftty-form-control {
  background:none;
  border:none;
  box-shadow:none;
  font-size:20px;
  padding:0;
  -webkit-appearance: none; 
  appearance: none;
  margin-bottom:0;
}
*/

.ui-panel-left-open {
  margin-left:260px;
}
.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-"] {
     ...

JavaScript

(function($) {
  var $oSidr = $('#sidr .row'),
  $oFieldSetupPanel = $('#ui-proto-fieldsetup-panel').clone(),
  $oIfttyPanel = $('#ui-proto-iftty-panel').clone(),
  $oNewIfttyPanel = $('#ui-proto-newiftty-panel').clone(),
  $oViewOptionsPanel = $('#ui-proto-viewoptions-panel').clone(),
  $oNewIfftyFlyout = $('#ui-proto-newiftty-flyout').clone(),
  emptyPanel = function() {
    $oSidr.empty();
  },
  closePanel = function() {
    emptyPanel();
    $.sidr('close', 'sidr');
  },
  openPanel = function(e) {
    emptyPanel();
    $.sidr('open', 'sidr');
    loadContent(e);
  },
  loadContent = function(e) {
    switch (e) {
      case 'fieldsetup':
        loadFieldSetupContent();
        break;
      case 'iftty':
        loadIfttyContent();
        break;
      case 'viewoptions':
        loadViewOptionsContent();
    } 
  },
  loadFieldSetupContent = function() {
    var content = $oFieldSetupPanel.show();
    $oSidr.append(content);
  },
  loadIfttyContent = function() {
    var content = $oIfttyPanel.show(); 
    $oSidr.append(content);  
    var $oNewBtn = $('.ui-proto-btn-addnewiffty'); 
    $oNewBtn.on('click', function(){
      emptyPanel();
      loadNewIfttyContent();
    });
  },
  loadNewIfttyContent = function() {  
  
    var $oIs = $('#ui-proto-newiftty-isblock'), 
    $oThen = $('#ui-proto-newiftty-then'),
    openFlyout = function() {
      $oNewIfttyFlyout
        .show()
        .addClass('show');
    },
    insertIsBlock = function(e){
      var $this = $oIs.clone(),
      $carousel = $this.find('.carousel-inner'),
      v = e, 
      $sSelect =     '<div data-type="select" class="item active">Is</div>' +
                       '<div data-type="select" class="item">Is Not</div>' +
                       '<div data-type="select" class="item">Is Set</div>',             
        $sText =       '<div data-type="text" class="item active">Is Empty</div>' +
                       '<div data-type="text" class="item">Is Not Empty</div>' +
                 ...