Touch-device context menu; AddToPlaylist fix

src/scss/components/_context-menu.scss

@@ -3,31 +3,40 @@
 	position: fixed;
 	left: 0;
 	top: 0;
-	z-index: 98;
+	z-index: 99;
 	background: $dark_grey;
 	color: #FFFFFF;
 
-	.menu-item {
+	.menu-item-wrapper {
 		display: block;
-		padding: 8px 12px;
-		width: 120px;
-		box-sizing: border-box;
 		position: relative;
 
-		&:not(:first-child){
-			border-top: 1px solid lighten($dark_grey, 8%);
-		}
-
 		&:hover {
-			cursor: pointer;
-			background: lighten($dark_grey, 5%);
-
+			.menu-item {
+				background: lighten($dark_grey, 5%);
+			}
 			.submenu {
 				display: block;
 			}
 		}
 
-		.fa {
+		.menu-item {
+			cursor: pointer;
+			display: block;
+			padding: 8px 12px;
+			width: 120px;
+			box-sizing: border-box;	
+		}
+
+		&:not(:first-child) .menu-item {
+			border-top: 1px solid lighten($dark_grey, 8%);
+		}
+
+		.icon {
+			display: none;
+		}
+
+		.submenu-icon {
 			font-size: 10px;
 			float: right;
 			padding-top: 4px;
@@ -42,7 +51,7 @@
 			overflow-y: scroll;			
 			background: lighten($dark_grey, 5%);
 
-			.menu-item {
+			.menu-item-wrapper {
 				width: 150px;
 				&:hover {
 					background: lighten($dark_grey, 10%);
@@ -58,16 +67,48 @@
 		top: auto !important;
 		background: $blue;
 
-		.menu-item {
+		.menu-item-wrapper {
 			display: inline-block;
-			width: auto;
-			height: auto;
-			border: 0 !important;
 
-			.fa,
+			.menu-item {
+				display: inline-block;
+				text-align: center;
+				width: 60px;
+				height: 60px;
+				border: 0 !important;
+				vertical-align: top;
+
+				&:hover {
+					background: inherit;
+				}
+
+				&:active,
+				&:focus {
+					background: rgba(255,255,255,0.2);
+				}
+
+				.icon {
+					padding: 5px;
+					display: inline-block;
+				}
+
+				.label {
+					display: block;
+					font-size: 10px;
+				}
+
+				.submenu-icon {
+					display: none !important;
+				}
+			}
+
 			.submenu {
 				display: none !important;
 			}
+
+			&:not(:first-child) .menu-item {
+				border-left: 1px solid rgba(255,255,255,0.2) !important;
+			}
 		}
 	}
 }

src/scss/components/_modal.scss

@@ -100,4 +100,21 @@
 			}
 		}
 	}
+
+	@include responsive( $bp_medium ){
+
+		.content {
+
+			padding: 50px;
+			width: 80%;
+
+			.playlists {
+				.playlist {
+					float: none !important;
+					width: auto;
+				}
+			}
+
+		}
+	}
 }

src/scss/components/_player.scss

@@ -127,10 +127,10 @@
 	.slider-wrapper {
 		display: none;
 		position: absolute;
-		bottom: 0;
+		bottom: -6px;
 		left: -4px;
 		height: 80px;
-		padding: 5px 5px 35px 5px;
+		padding: 10px 5px 35px 5px;
 		background: rgba(0,0,0,0.8);
 		z-index: 98;
 	}

src/scss/components/_slider.scss

@@ -34,7 +34,6 @@
 	}
 
 	&.vertical {
-		margin: 10px 0;
 		width: 20px;
 		height: 100%;