asset library styles

cms/static/sass/_assets.scss

@@ -1,11 +1,160 @@
 .assets {
   input.asset-search-input {
-    position: absolute;
-    right: 0;
-    top: 5px;
+    float: left;
     width: 260px;
     background-color: #fff;
   }
 
-  
+  .upload-button {
+    @include blue-button;
+    float: left;
+    margin-right: 20px;
+    font-size: 12px;
+  }
+
+  .asset-library {
+    @include clearfix;
+
+    table {
+      width: 100%;
+      border-radius: 3px 3px 0 0;
+      border: 1px solid #c5cad4;
+
+      td,
+      th {
+        padding: 10px 20px;
+        text-align: left;
+        vertical-align: middle;
+      }
+
+      thead th {
+        background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db;
+        font-size: 12px;
+        font-weight: 700;
+        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
+      }
+
+      tbody {
+        background: #fff;
+
+        tr {
+          border-top: 1px solid #c5cad4;
+
+          &:first-child {
+            border-top: none;
+          }
+        }
+      }
+
+      .thumb-col {
+        width: 100px;
+      }
+
+      .date-col {
+        width: 200px;
+      }
+
+      .embed-col {
+        width: 70px;
+      }
+
+      .thumb {
+        width: 100px;
+        max-height: 80px;
+
+        img {
+          width: 100%;
+        }
+      }
+    }
+
+    .pagination {
+      float: right;
+      margin: 15px 10px;
+
+      ol, li {
+        display: inline;
+      }
+
+      a {
+        display: inline-block;
+        height: 25px;
+        padding: 0 4px;
+        text-align: center;
+        line-height: 25px;
+      }
+    }
+  }
+}
+
+.upload-modal {
+	display: none;	
+	width: 640px !important;
+	margin-left: -320px !important;
+
+	.modal-body {
+		height: auto !important;
+		overflow-y: auto !important;
+		text-align: center;
+	}
+
+	.file-input {
+		display: none;
+	}
+
+	.choose-file-button {
+		@include blue-button;
+		padding: 10px 82px 12px;
+		font-size: 17px;
+	}
+
+	.progress-bar {
+		display: none;
+		width: 350px;
+		height: 50px;
+		margin: 30px auto 10px;
+		border: 1px solid $blue;
+
+		&.loaded {
+			border-color: #66b93d;
+
+			.progress-fill {
+				background: #66b93d;
+			}
+		}
+	}
+
+	.progress-fill {
+		width: 0%;
+		height: 50px;
+		background: $blue;
+		color: #fff;
+		line-height: 48px;
+	}
+
+	h1 {
+		float: none;
+		margin: 40px 0 30px;
+		font-size: 34px;
+		font-weight: 300;
+	}
+
+	.close-button {
+		@include white-button;
+		position: absolute;
+		top: 0;
+		right: 15px;
+		width: 29px;
+		height: 29px;
+		padding: 0 !important;
+		border-radius: 17px !important;
+		line-height: 29px;
+		text-align: center;
+	}
+
+	.copy-button {
+		@include white-button;
+		display: none;
+		margin-bottom: 100px;
+	}
 }

cms/static/sass/_base.scss

@@ -24,10 +24,16 @@ a {
 }
 
 h1 {
+    float: left;
     font-size: 28px;
     margin: 36px 6px;
 }
 
+.page-actions {
+    float: right;
+    margin-top: 42px;
+}
+
 .main-wrapper {
     position: relative;
     margin: 0 40px;
@@ -37,6 +43,10 @@ h1 {
     position: relative;
     max-width: 1280px;
     margin: auto;
+
+    > article {
+        clear: both;
+    }
 }
 
 .window {
@@ -189,20 +199,21 @@ label {
     }
 }
 
-.wip {
-    outline: 1px solid #f00 !important;
-    position: relative;
-}
-
-.wip-box {
-    @extend .wip;
-    &:after {
-        content: "WIP";
-        font-size: 8px;
-        padding: 2px;
-        background: #f00;
-        color: #fff;
-        @include position(absolute, 0px 0px 0 0);
+body.show-wip {
+    .wip {
+        outline: 1px solid #f00 !important;
+        position: relative;
     }
-}
 
+    .wip-box {
+        @extend .wip;
+        &:after {
+            content: "WIP";
+            font-size: 8px;
+            padding: 2px;
+            background: #f00;
+            color: #fff;
+            @include position(absolute, 0px 0px 0 0);
+        }
+    }
+}

cms/static/sass/_cms_mixins.scss

@@ -72,7 +72,7 @@
 
 	&:hover {
 		background-color: #d9e3ee;
-		color: #6d788b;		
+		color: #6d788b;
 	}
 }
 

cms/static/sass/_graphics.scss

@@ -41,6 +41,13 @@
 	background: url(../img/list-icon.png) no-repeat;
 }
 
+.close-icon {
+	display: inline-block;
+	width: 13px;
+	height: 12px;
+	background: url(../img/close-icon.png) no-repeat;
+}
+
 .home-icon {
 	display: inline-block;
 	width: 19px;

cms/static/sass/_modal.scss

@@ -9,7 +9,7 @@
 	background: rgba(0, 0, 0, .8);
 }
 
-.history-modal {
+.modal {
 	display: none;
 	position: fixed;
 	top: 60px;