A Pen by Jovin Cronin-Wilesmith.

CMIS-Browser-UI.markdown

CMIS Browser UI

A Pen by Jovin Cronin-Wilesmith on CodePen.

License.

index.html

<div class="newFolder">
    <div class="form-item form-type-textfield form-item-folder-name">
        <label for="edit-folder-name">Folder name</label>
        <input type="text" id="edit-folder-name" name="folder_name" value="" placeholder="Enter Folder Name"  class="form-text">
    </div>
    <input type="submit" id="edit-folder-create-button" name="folder_create_action" value="Create new folder" class="form-submit">
</div>

<div class="newFile">
    <div class="form-item form-type-textfield form-item-content-name">
        <label for="edit-content-name">File Name</label>
        <input type="text" id="edit-content-name" name="content_name" placeholder="Enter File Name" value="" class="form-text">
    </div>
    <div class="form-item form-type-textarea form-item-content-body">
        <label for="edit-content-body">Content</label>
        <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea">
            <textarea id="edit-content-body" name="content_body" placeholder="Enter Content" class="form-textarea"></textarea>
        </div>
    </div>
    <input type="submit" id="edit-content-create-button" name="content_create_action" value="Create New File" class="form-submit">
</div>


<div class="uploadFile">
    <div class="form-item form-type-file form-item-files-file">
        <label for="edit-file">Local file</label>
        <input type="file" id="edit-file" name="files[file]"
        class="form-file">
    </div>
    <input type="submit" id="edit-content-upload-button" name="content_upload_action" value="Upload" class="form-submit">
</div>


<table class="fileBrowser">
    <thead>
        <tr>
            <th>name</th>
            <th>type</th>
            <th>size</th>
            <th>author</th>
            <th>last modified</th>
            <th>actions</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>
             IMAP Home
            </td>
            <td>Directory</td>
            <td>Space</td>
            <td>System</td>
            <td>7/1/2014 8:14 AM</td>
            <td>
                <ul class="actions">
                    <li><a href="#" class="action properties">properties</a>
                    </li>
                    <li><a href="#">download</a></li>
                    <li><a href="#">delete</a>
                    </li>
                    
                </ul>
            </td>
        </tr>
        <tr>
            <td>
               <a href="">Sites</a>
            </td>
            <td>Directory</td>
            <td>Space</td>
            <td>System</td>
            <td>7/1/2014 8:15 AM</td>
            <td>
                <ul class="actions">
                    <li><a href="#" class="action properties">properties</a>
                    </li>
                    <li><a href="#">download</a></li>
                    <li><a href="#">delete</a>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
               <a href="#">test</a>
            </td>
            <td>Directory</td>
            <td>Space</td>
            <td>admin</td>
            <td>8/12/2014 10:29 AM</td>
            <td>
                <ul>
                    <li><a href="#" class="action properties">properties</a>
                    </li>
                  <li><a href="#">download</a></li>
                    <li><a href="#">delete</a>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

style.scss

$bg-grey:#c2c2c0;
$body-grey:#4E4D4B;
$mo-blue:#00A4F0;
$wht:#fff;
$width:99%;
$mar:(100% - $width) / 2;

%col-3 {
  width:31%;
  float:left;
  margin:10px 5px;
  padding:5px;
  min-height:200px;
  height:100%;
}

body {
  font-family: 'Abel', sans-serif;
  width: 100%;
  text-align:left;
  margin: 0 auto;
}

input, textarea {
     border:0; 
     outline:0;
     font-family: 'Abel', sans-serif;
     padding: 5px 5px ;
     display: block;
     margin:5px 0;
     width: 90%;
     resize: none;
}

input[type=submit] {
  background: $mo-blue;
  color:$wht;
  text-transform:uppercase;
}

input[type=text] {
  border: 1px solid $bg-grey;
}

textarea {
  border: 1px solid $bg-grey;
}

body {
	font-family:'Abel', sans-serif;
	background:$bg-grey;
	text-transform: uppercase;
}

ul {
  list-style: none;
  text-align:left;
  margin: 0 auto;
  li {
    margin-left:-40px;
    padding:0;
  }
}

td, a {transition: color 333ms ease-in-out;}

a {
	color:$mo-blue;
	text-decoration: none;
	font-weight: 400;
}

table {
	width:$width;
	margin:0 $mar 50px $mar;
}
tr {
  height:40px;
	transition: background 3ms ease-in-out;
  &:nth-child(even) {background: #e6e4e5;}
  &:nth-child(odd) {background:#fff;}
  th {
   background:$wht;
   color:$body-grey;
   padding:10px;
  }
  td {
    color:#4E4D4B;
    padding:10px;
	  font-size: 0.78em;
	  font-weight: 300;
	  letter-spacing: 0.2em;
  }
}

.newFolder {
 @extend %col-3;
 background:$wht ;
 color:$body-grey;
}

.newFile {
 @extend %col-3;
 background:$wht ;
 color:$body-grey;
}

.uploadFile {
 @extend %col-3;
 background:$wht;
 color:$body-grey;
}