Document Upload & Sort

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-2">
    Select Files<br/>
    Confirm & Save
  </div>
  <div class="col-sm-10">
   


<div class="ui-yakabox-media-uploads"> 
  <div class="text-center" style="border:1px dashed gray; padding:10px 20px 30px">
    <h3>Upload a Document</h3>
    <p>Drag'n Drop File Here</p>
    <button class="btn btn-primary">Upload</button>
  </div>
  
  
  <div class="panel panel-warning"> 
    <div class="panel-heading"> 
      <h3 class="panel-title"><strong>Alert!</strong> Please classify your documents.</h3> 
    </div> 
    <div class="panel-body"> 
      <div class="list-group">
        <span class="list-group-item list-group-item-warning"><span class="fa fa-file"></span> Document.pdf </span>
        <span class="list-group-item list-group-item-warning"><span class="fa fa-file"></span> Document.pdf </span>
      </div>
    </div> 
  </div>
  
  <div class="panel panel-default"> 
    <div class="panel-heading"> 
      <h3 class="panel-title"><strong>Top Secret // Secret</strong></h3> 
    </div> 
    <div class="panel-body"> 
      <div class="list-group">
        <span class="list-group-item"><span class="fa fa-file"></span> Document.pdf </span>
        <span class="list-group-item"><span class="fa fa-file"></span> Document.pdf </span>
      </div>
    </div> 
 ...

SCSS

.ui-yakabox-media-uploads{
  padding:10px;
  .media {
    background-color:#f3f3f3;
    .media-left {
      padding-right:0;
      .btn {
        min-width:38px;
      }
      .fa-check {
        padding: 6px 12px;
        color: green;
      }
    }
    .media-body {
      border-right:2px solid white;
      border-left:2px solid white;
      position:relative;
      padding-right:10px;
      padding-left:10px;
      .ui-media-parent {
        position:absolute;
        right:10px;
        left:10px;
        top:7px;
        display: flex;
        justify-content: space-between;
        .ui-media-description {
          width: calc(100% - 50px);
          display: flex;
          .ui-media-text {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .ui-media-size {
            display: inline-block;
            width:90px;
            padding-left:5px;
          }
        }
        .ui-media-percent {
          width: 50px;
        }
      }
      .progress {
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        border-radius:0;
        height:auto;
        margin:0;
        background:transparent;
        box-shadow:none;
        opacity:.2;
      }
    }
    .media-right {
      padding-left:0;
    }
  }
}
.panel {
  margin: 10px 0;
  
  .panel-title {
    font-size:14px;
    font-weight:normal;
  }
  .panel-body {
    padding:0;
    .list-group {
      margin:0;
    }
    .list-group-item {
      border-radius:0;
      border-left:none;
      border-right:none;
    }
  }
}