Context menu dropdowns to new style, fixes #139

src/scss/components/_context-menu.scss

@@ -69,30 +69,13 @@
 			overflow-x: hidden;
 
 			.menu-item {
+				@include gradient_overlay(3px);
 				cursor: pointer;
 				display: block;
 				padding: 9px 12px 8px;
 				box-sizing: border-box;
 				position: relative;
 				color: $white;
-				border-radius: 3px;
-			
-				&:before {
-					@include animate();
-					content: '';
-					display: block;
-					position: absolute;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					opacity: 0;
-					z-index: 9;
-					background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-					background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-					background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-					background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
-				}
 
 				.notouch &:hover {
 					&:before {
@@ -124,13 +107,15 @@
 				position: absolute;
 				top: 0;
 				right: 0;
-				bottom: 0;
 				left: 100%;
+				height: 100%;
+				min-height: 200px;
 				width: 0;
 				height: 100%;
 				overflow-y: scroll;			
-				background: $faint_grey;
+				background: $darkest_grey;
 				z-index: 3;
+				border-radius: 3px;
 
 				&.expanded {
 					width: 100%;
@@ -166,7 +151,7 @@
 				font-weight: 300;
 				color: inherit;
 
-				&:not(:first-child){
+				&:not(:first-child):not(.dropdown-field){
 					border-top: 1px solid lighten($dark_grey, 8%);
 				}
 
@@ -188,6 +173,7 @@
 
 			.dropdown-field {
 				padding: 0;
+				box-shadow: none;
 
 				.label {
 					padding: 16px 20px;
@@ -196,11 +182,14 @@
 				.options {
 					display: block;
 					position: static;
-					background: darken($dark_grey, 5%);
+					background: $darkest_grey;
+					border-radius: 0;
+					border: 0;
+					color: $white !important;
 
 					.option {
 						padding: 12px 20px 12px 50px;
-						border-top: 1px solid $dark_grey;
+						border-radius: 0;
 
 						.fa {
 							display: inline-block;
@@ -208,6 +197,10 @@
 							top: 14px;
 						}
 					}
+
+					&:before {
+						display: none;
+					}
 				}
 			}			
 		}
@@ -254,7 +247,6 @@
 			}
 
 			& > span {
-
 				button,
 				.button {
 					color: $white;

src/scss/components/_dropdown-field.scss

@@ -10,7 +10,7 @@
 		padding: 14px 10px;		
 		cursor: pointer;
 
-		&:hover {
+		.notouch &:hover {
 			color: $blue;
 		}
 	}
@@ -79,7 +79,7 @@
 				font-size: 10px;
 			}
 
-			&:hover {
+			.notouch &:hover {
 				color: $black;
 
 				&:before {

src/scss/global/_forms.scss

@@ -57,9 +57,9 @@ input[type="submit"] {
 	vertical-align: middle;
 	position: relative;
 	border: 0 !important;
+	cursor: pointer;
 
-	&:hover{
-		cursor: pointer;
+	.notouch &:hover{
 		box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
 
 		&:before {
@@ -148,7 +148,7 @@ input[type="submit"] {
 		cursor: not-allowed !important;
 
 		&,
-		&:hover,
+		.notouch &:hover,
 		&:active {
 			color: $mid_grey;
 			border-color: $mid_grey;

src/scss/global/_variables.scss

@@ -206,6 +206,7 @@ $bp_shallow: 650px;
 		left: 0;
 		opacity: $opacity;
 		z-index: 9;
+		pointer-events: none;
 		background: -webkit-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
 		background: -moz-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
 		background: -o-linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));