Extending new design

src/scss/components/_lists.scss

@@ -11,8 +11,8 @@
 
 		display: block;
 		position: relative;
-		margin: 0 -10px 0 -10px;
-		padding: 0 10px;
+		margin: 0 -20px 0 -20px;
+		padding: 0 20px;
 		border-radius: 3px;
 
 		&:not(.no-click){
@@ -33,6 +33,10 @@
 			opacity: 0;
 		}
 
+		&:not(:first-child){
+			border-top: 1px solid rgba(128,128,128,0.05);
+		}
+
 		:root .notouch:not(.dragging) &:not(.no-click).list__item--hover {
 			background: rgba(255,255,255,0.03);
 			cursor: pointer;
@@ -86,11 +90,12 @@
 		}
 
 		&__content {
-			padding: 14px 0;
+			padding: 16px 0 12px;
 		}
 
 		&__name {
 			padding-bottom: 2px;
+			font-size: 15px;
 
 			.light-theme & .flag {
 				background: colour(light_grey);
@@ -104,7 +109,8 @@
 			opacity: 0.5;
 
 			&__item {
-				display: inline-block;
+				display: inline;
+				overflow-wrap: break-word;
 
 				&:not(:first-child) {
 					@include bullet();
@@ -127,11 +133,24 @@
 						display: none !important;
 					}
 				}
+			}
+		}
 
-				&--added {
+		&--has-extra-detail {
+			.list__item {
+				&__content {
+					width: 65%;
+					float: left;
 				}
 			}
 		}
+
+		&__extra-detail {
+			float: left;
+			width: 25%;
+			padding-top: 26px;
+			opacity: 0.5;
+		}
 	}
 
 	&.track-list {
@@ -151,12 +170,13 @@
 				.drag-zone {
 					position: absolute;
 					top: 0;
-					left: 0;
+					left: 5px;
 					height: 100%;
 					width: 34px;
 					font-size: 14px;
 					display: block;
 					color: colour(mid_grey);
+					padding: 0;
 					
 					.icon {
 						position: absolute;
@@ -213,37 +233,39 @@
 	@include responsive($bp_medium){
 
 		&__item {
-			padding: 12px !important;
 
-			&__details {
-				&__item {
+			&__content {
+				padding: 10px 0;
+			}
 
-					&--source {
+			&__name {
+				font-size: 14px;
+			}
+
+			&__actions {
+				padding-top: 10px;
+			}
+
+			&__extra-detail {
+				padding-top: 14px;
+
+				&--source {
+					display: none;
+				}
+
+				&--added {
+
+					.by,
+					.by-label {
 						display: none;
 					}
 
-					&--added {
-						width: auto !important;
-						float: none !important;
-						padding-left: 0.25em;
+					.from {
+						text-transform: capitalize;
+					}
 
-						.by,
-						.empty {
-							display: none;
-						}
-
-						.from {
-							@include bullet();
-							text-transform: capitalize;
-
-							&:after {
-								display: none !important;
-							}
-
-							.label {
-								display: none;
-							}
-						}
+					.from-label {
+						display: none;
 					}
 				}
 			}