JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by chrischilcoat

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sidr/2.2.1/jquery.sidr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.0.1/tinymce.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="jquery.sidr.light.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">


<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"...

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 {
  background:none;
  color:black;
}

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

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

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

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

.sidr.left {
  left:-275px;
  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-"] {
      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;
     ...

JavaScript

/* Setup Sidr Flyout Menu */
$('.simple-menu').sidr({
  displace: true
});

/* Setup Close Menu Button */
$('.closeSidr').click(function() {
  resetUI();
});

/* Add New Iffty Button */
$('.ui-proto-btn-addnewiffty').click(function() {
  resetPanels();
  $('.ui-proto-sidr-iftty-add').show();
  $('#carousel-is').carousel();
});

/* Open Aside Panel */
$('.ui-yakabox-iffty-open-aside').click(function() {
  $('.ui-yakabox-iffty-open-aside').removeClass('btn-primary').addClass('btn-default')
  $(this).removeClass('btn-default').addClass('btn-primary');
  $('.ui-proto-sidr-aside-iftty').show();
  $('.ui-proto-sidr-aside-iftty').find('.tab-content').addClass('show');  
});

/* If Control */
$('.ui-proto-iftty-form-control-if').change(function() {
  var val =	$(this).val();
  
  updateCarousel(val);
});

function updateCarousel(e) {
/*
  $('#carousel-is').find('.item').hide();
  $('#carousel-is').find('[data-type="'+e+'"]').show();
  */
  $('#carousel-is').carousel();
  //$('.carousel').carousel();
  
  //$("#carousel-example-generic .item[data-type='"e"']").show();
  
};

/*

$('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();

});

*/


$('.js-thumbnail-btn-edit').on('click', function(){
  $(this).hide().parent('.ui-yakabox-iftty-thumbnail').addClass('fullsize');
});

$('.js-thumbnail-btn-save').on('click', function(){
 ...