Document Upload & Sort 2

by chrischilcoat

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<div class="container-fluid">
  <div class="col-sm-6">
    <div class="" style="padding:20px;">
      <div class="panel panel-default ui-yakabox-iftty-builder">
        <div class="panel-heading">
          <div class="form-group">
            <label for="iftty-title" class="sr-only">Title</label>
            <input type="text" class="form-control" id="iftty-title" placeholder="Enter Title Here...">
          </div>
        </div>
        <div class="panel-body">      
          <form>
            <fieldset>
              <legend>If <span class="ui-yakabox-iftty-circle"></span></legend>
              <div class="form-group">
                <label for="iftty-trigger-1" class="sr-only">If</label>
                <select class="form-control input-sm" id="iftty-trigger-1">
                  <option>-Select-</option>
                  <option selected>Status</option>
                  <option>Description</option>
                  <option>Due Date</option>
                  <option>Files</option>
                  <option>Formula</option>
                  <option>Assigned To</option>
                  <option>Team</option>
                </select>
              </div>
              <div class="form-group">
                <label for="iftty-trigger-2" class="sr-only">Is</label>     
                <select...

SCSS

.ui-yakabox-iftty-builder {
  /*
  fieldset {
    position:relative;
    margin-left:30%;
    padding-bottom:30px;
    margin-right:10%;
    legend {
      position:absolute;
      left:-52%;
      height:100%;
      width:35%;   
      border-right:6px solid black;
      text-align:right;
       border-bottom:none;
       padding-right:15px;
       font-size:14px;
       color:gray;
       text-transform:uppercase;
       font-weight:bold;

      .ui-yakabox-iftty-circle {
        width:20px;
        height:20px;
        background:black;
        display:block;
        position:absolute;
        border-radius:100%;
        right:-13px;
        top:0px;
      }
    }
  }
  */
}

.ui-yakabox-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

JavaScript

ui-yakabox-iftty-then-wrapper