JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by chrischilcoat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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-app-inverse ui-app-dash " ui-app-id="39" role="application">

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">

                <div class="container-fluid ui-builder ui-yakabox-dash-row">
                    <div class="row ui-builder-has-layout">
                        <div class="col-xs-12 col-md-12">
                          <div style="">
                            <h1>Headline</h1>
                            <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>
                            <div class="btn-group ui-yakabox-dash-button-wrapper">
                              <button class="btn btn-xs btn-circle btn-default ybx-column-split ui-yakabox-dash-split-cell " title="Split Column" type="button"><i class="fa fa-scissors"></i></button>
                              <button class="btn btn-sm btn-default btn-xs btn-circle ui-yakabox-dash-remove-cell ybx-delete-dashboard-row" title="Delete Row" type="button"><i class="fa fa-remove"></i></button>
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="row ui-builder-has-layout">
                        <div class="col-xs-12 col-sm-6 col-md-6">
    ...

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);

}


.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: 250px;
position: absolute;
z-index: 3000;
background-color: #f5f5f5;
transition: width .2s ease-in;
border-radius: 0;
color: #fff;
border-left: 1px solid #e5e5e5;
box-shadow: 0px 0px 1px #ccc;

.fa {display: none}

.ui-dash-widget-menu {
  display:inline-block;
 ...

JavaScript

$('.carousel').carousel('pause');

$('.js-btn-single-field').on('click', function() {
  $('.btn-show-carasel').hide();
  $('.js-carasel-wrapper').show()
});
$('.btnSW').on('click', function() {
  $('.carousel').carousel('next');
});
$('.ui-contenteditable').on('focus', function() {
  $(this).html(' ');
});
$('.ui-contenteditable2').on('focus', function() {
  $(this).html(' ');
});
$('.ui-resource').on('click', function() {
  $('.carousel').carousel('next');
});
$('.ui-field').on('click', function() {
  $('.carousel').carousel('next');
});
$('.btn-save').on('click', function() {
  $('.ybx-editmode').hide();
});