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

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: 3px;
    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.white {
    position: relative;
    background: white;
    margin-top: 10px;
    padding: 5px 10px;
   ...

JavaScript

$('.ybx-acceptSuggested').change(function () {
      var $this = $(this),
          $inputGroup = $this.closest('.input-group'),
          $inputBox = $inputGroup.find('.ybx-defaultPlaceholder'),
          $inputBoxPlaceholder = $inputBox.attr('placeholder');

    if ($this.is(':checked')) {

        $inputBox.val($inputBoxPlaceholder);
        $inputGroup.addClass('has-success');
         
        // checked
        return;
    }
      $inputBox.val('');
      $inputGroup.removeClass('has-success');

    // not checked
});

var $thisProto = "";

$('.proto-typeahead .ui-autocomplete-input').focus(function() {
  $thisProto = $(this).closest('.proto-typeahead');
   
  showHelpBlock($thisProto)
  
});


$('.proto-typeahead .ui-autocomplete-input').blur(function() {
  $thisProto = $(this).closest('.proto-typeahead');


   if ( $('.ui-results').is(':visible') || $('.typeahead-help-block').is(':visible')) {
			//what to do

      }
else {
   		resetAll($thisProto);
   }

});


$('.proto-typeahead .ui-autocomplete-input').keyup(function() {
  $thisProto = $(this).closest('.proto-typeahead');


  if (this.value.length < 1) {
    clearResults($thisProto);

  } else {
    showResults($thisProto);
  }

});


$('.proto-chooseme').click(function() {
  var selected = $(this),
    $thisProto = $(this).closest('.proto-typeahead');

   showSelected(selected, $thisProto);
   resetAll($thisProto);

});


$('.proto-typeahead .ui-autocomplete-input').blur(function() {
  $thisProto = $(this).closest('.proto-typeahead');


   if ( $('.ui-results').is(':visible')) {
			//highlight?
	}
   else {
   		resetAll($thisProto);
   }

});

$('.proto-typeahead .fa-close').click(function() {
  $thisProto = $(this).closest('.proto-typeahead');
  removeSelected($thisProto);


});



function showResults($thisProto) {
  setTimeout(
    function() {
      $thisProto.find('.typeahead-help-block').hide();

      $thisProto.find('.ui-results').hide();

      $thisProto.find('.ui-searching').show();
   ...