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-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">
          <button class="btn btn-default btn-xs pull-right" title="Edit Access Settings">
        <span class="fa fa-pencil"></span>
         All
      </button>
          <h3 class="panel-title"><strong>Alert!</strong> Please classify these documents.</h3>
        </div>
        <div class="panel-body">
          <div class="list-group">
            <span class="list-group-item list-group-item-warning">
          <button class="btn btn-default btn-xs pull-right" title="Edit Access Settings">
            <span class="fa fa-pencil"></span>
            </button>
            <span class="fa fa-check-square"></span> Document.pdf
            </span>
            <span class="list-group-item list-group-item-warning">
          <button class="btn btn-default btn-xs pull-right" title="Edit Access Settings">
            <span class="fa...

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;
    }
  }
}
.container-fluid {
  max-width:800px;
}
hr {
    margin-top: 0;
    margin-bottom: 9px;
  }
.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;
      .fa-check-square {
        color:#337ab7;
      }
    }
  }
}