Bootstrap Panel

by Meredith Crow

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>




<div class="container-fluid">
  <div class="row">
    <div class="col-sm-7">
      <div class="row">
        <div class="col-sm-12 text-center">
          <h3>Form Visibility</h3>
          <p>Who can see the form and submit.</p>
          <hr/>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <a href="#" class="thumbnail" data-group="1" data-toggle="tooltip" data-placement="top" title="Select" data-delay='{"show":"100", "hide":"0"}'>
           <div class="caption text-center">
             <i class="fa fa-check-circle"></i>
             <i class="fa fa-globe fa-3x"></i>
             <h5>Everyone</h5>
             <p>This form is visible to <span>all <strong>Users</strong> and <strong>Website Visitors</strong></span></p>
           </div>
          </a>
        </div>
        <div class="col-md-4">
          <a href="#" class="thumbnail active" data-group="1">
           <div class="caption text-center">
             <i class="fa fa-check-circle"></i>
             <i class="fa fa-square fa-3x"></i>
             <h5>All Yakabox Users</h5>
             <p>This form is visible to <span class="proto-thumbnail-text">all <strong>Yakabox Users</strong></span></p>
             <p class="ui-yakabox-hr-text"><span>OR</span></p>
   
             <div class="proto-js-buttongroups">
               
             </div>
             
     
             <div class="input-group">
             <span class="input-group-addon dropdown"...

SCSS

body {padding:20px}

.ui-yakabox-thumbnail-buttons {
.thumbnail {
  opacity:.8;
  padding-top:20px;
  padding-bottom:20px;
   transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -webkit-transition: all .25s ease-in-out;
  .ui-yakabox-hr-text {
    display:none;
  }
  .input-group {
    display:none;
  }
  .btn-group {
    margin:0 1px 4px;
  }
  .fa-check-circle {
    display:none;
  }
  &.active,
  &:hover {
    opacity:1;
    text-decoration:none;
    background-color:#d9edf7;
  }
  &.active {
    background: #d9edf7;
    color: #31708f;
    .fa-check-circle {
      display:block;
      position: absolute;
      top: -13px;
      left: 50%;
      margin-left: -12px;
      font-size: 21px;
      background: #337ab7;
      border-radius: 100%;
      border: 2px solid #337ab7;
      color: white;
      text-align: center;
      padding: 0;
      border-left-width: 1px;
      border-top-width: 2px;
      box-shadow: 0px 0px 3px #337ab7;
      border-bottom-width: 1px;
    }
    .input-group {
      display:table;
    }
    .ui-yakabox-hr-text {
      display:block;
    }
  }
}


.ui-yakabox-hr-text {
  border-top: 1px solid #337ab7;
  margin: 22px 0;
  span {
    margin-top: -9px;
    position: absolute;
    background: #d9edf7;
    color: #337ab7;
    font-weight: bold;
    font-size: 12px;
    padding: 0 11px;
    margin-left: -20px;
  }
}

JavaScript

?/