JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by Dug Sohn

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">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <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 type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/activityViewer"><img src="https://yakabod.yakabox.com/images/yakaboxHeaderLogo.png" class="img-responsive"> <span class="bold text-white">Yakabod</span></a> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">
            <div class="ui-yakabox-searchBox  ui-helper-clearfix">
              <form onsubmit="return false;">
                <div class="input-group  bias-input-group" style="padding-top:3px;">
                  <input class="ybx-searchBox-text form-control input-sm" placeholder="Enter Keywords">
                  <div class="ybx-searchBox-wrapper input-group-btn bs-dropdown-to-select-group">
                 ...

SCSS

.ui-yakaimage {

display: inline-block;
background-color: rgba(0,0,0,.2);
box-shadow: inset 0 0 2px rgba(0,0,0,.6);

}

.ui-yakabox-dropdown-menu-browse>.fa-caret-up {
    position: absolute;
    right: 46%;
    top: 0;
    font-size: 50px;
    top: -30px;
    text-align: center;
    color: #222;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
}

.ui-builder {
  
  .form-group {
    border-top: none;
  }
    
.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;
}
}

.btn-tilebar {
  

    
    .fa { 
    display:block;



  }
      



 .btn-tile {
      padding:20px;
      width:125px;
      height:125px;

  }
  
  .btn-tile-sm {
    height: 25px;
    transition: height ease-in .05s;
    padding: 13px;
    line-height:1px;
  }
  
  
  }
  
  
  
 .form-group {
   padding-top:8px;
 } 
     .fa-blue {
      
      color:#05a5d1;
      
    }
         .fa-white {
      
      color:#fff;
      
    }
    .fa-stack-addon {
      padding-top: 4px;
    padding-bottom: 0;
    }
    
.arrow_box {
    position: relative;
    background: #05a5d1;
    margin-top: 10px;
    padding: 5px 10px;
    color: #FFF;
    font-size: 13px;
}
.arrow_box:after {
    bottom: 100%;
    left: 91%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(5, 165, 209, 0);
    border-bottom-color: #05a5d1;
    border-width: 10px;
    margin-left: 0;
        transistion: left ease .5s;

}

.arrow_box.left:after {
  -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	       ...

JavaScript

$('.btn-tile').click(function() {
  var $this = $(this);

  $this.closest('.btn-tilebar').find('.fa').toggle();
  $this.closest('.btn-tilebar').find('.btn-tile').toggle();

  $this.closest('.btn-tilebar').find('.btn-back').toggle();

});


$('.proto-typeahead .ui-autocomplete-input').focus(function() {
   $('.proto-typeahead .typeahead-help-block').show();
  });
  
 $('.proto-typeahead .ui-autocomplete-input').keyup(function() {

   if( this.value.length < 1 ) {
   $('.proto-typeahead .typeahead-help-block').show();
	 $('.proto-typeahead .ui-searching').hide();
  }
   else {
     spinResults();
   }  

  });
  
 


$('.proto-typeahead .ui-autocomplete-input').blur(function() {
   $('.proto-typeahead-dropdown > div ').hide();
  });

function spinResults() {
  setTimeout(
    function() {
  $('.proto-typeahead .typeahead-help-block').hide();
	 $('.proto-typeahead .ui-searching').show();
    }, 100);
}

function showBlock() {

    $('.proto-typeahead > div').show();
    $('.proto-typeahead .typeahead-help-block').show();
}
function showResuls() {
    setTimeout(
        function() {
          $('.proto-typeahead .typeahead-help-block').hide();
          $('.proto-typeahead .ui-searching').show();
            }, 100);
    }


function hideResuls() {

   $('.proto-typeahead .typeahead-help-block').show();
	 $('.proto-typeahead .ui-searching').hide();
}
function resetAll() {
    $('.proto-typeahead > div').show();
}


$('.btn-back').click(function() {
  var $tileBar = $('.btn-tilebar');
  var $this = $(this);
  
  
  
  

  $tileBar.find('.fa').toggle();
  $tileBar.closest('.btn-tilebar').find('.btn-tile').toggle();
  
  $(this).closest('.panel-collapse').removeClass('in');

});

$('.btn-select-form').click( function() {
  var $this = $(this);
 
  var $lable = $(this).html();
 
 
 $('.form-group-template').clone().appendTo(".new-form-group").removeClass('form-group-template').find('.control-label').html($lable);
 
});