Iris/src/scss/components/_context-menu.scss

@include responsive($bp_medium){
	body.context-menu-open {
		.body {
			@include blur(10px);
		}
	}
}

#context-menu {
	position: fixed;
	z-index: 99;

	& > .liner {
		width: 190px;
		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
		border-radius: 3px;
		background: $grey;
		font-size: 14px;
		font-weight: 500;
		font-family: "Overpass";

		.title {
			display: none;
			padding: 10px 14px;
			font-weight: bold;
			box-sizing: border-box;
			position: relative;
			overflow: hidden;
			text-decoration: none;
			background: $darkest_grey;

			.background {
				@include blur(5px);
				background-size: cover;
				background-position: 50% 20%;
				opacity: 0.65;
				position: absolute;
				top: -10px;
				left: -10px;
				bottom: -10px;
				right: -10px;
				z-index: 1;

				&.generic {
					opacity: 0.9;
					background: rgba(50,181,242,1);
					background: -moz-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(50,181,242,1)), color-stop(18%, rgba(50,181,242,1)), color-stop(100%, rgba(5,118,166,1)));
					background: -webkit-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: -o-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: -ms-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					background: linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=1 );
				}
			}

			.text {
				@include one_line_text();
				position: relative;
				z-index: 2;
				color: #FFFFFF;
			}

			.type {
				position: relative;
				z-index: 2;
				color: #FFFFFF;
				opacity: 0.5;
				font-weight: 200;
				text-transform: capitalize;
			}
		}

		.menu-item-wrapper {
			display: block;
			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;

				.notouch &:hover {
					&:before {
						opacity: 0.15;
					}
				}

				.notouch &:active {
					background: $black;
					color: $white;
				}
			}

			.icon {
				font-size: 12px;

				&.submenu-icon {
					display: inline-block;
					float: right;
					padding-top: 4px;
				}
			}

			.submenu {
				@include animate();
				position: absolute;
				top: 0;
				right: 0;
				left: 100%;
				height: 100%;
				min-height: 300px;
				max-height: 90vh;
				width: 0;
				height: 100%;
				overflow-y: scroll;			
				background: lighten($grey, 10%);
				z-index: 3;
				border-radius: 3px;

				&.expanded {
					width: 100%;
					left: 0;
				}

				.label {
					.icon {
						margin-bottom: 0.4em;
						padding-right: 6px;
					}
				}

				.menu-item {
					width: 100%;

					&.close-submenu {
						color: $mid_grey;
					}
				}
			}
		}

		.divider {
			height: 1px;
			padding: 0;
			margin: 0;
			background: lighten($grey, 5%);
		}

		& > span {
			display: block;
			margin-bottom: -1px;

			button,
			.button,
			.dropdown-field {
				text-decoration: none;
				display: block;
				margin: 0;
				min-width: 100% !important;
				max-width: 100% !important;
				box-sizing: border-box;
				font-size: inherit;
				text-align: left;
				text-transform: none;
				font-weight: 300;
				color: inherit;
				border-bottom: 1px solid lighten($grey, 5%) !important;

				.icon,
				.icon {
					display: none;
				}

				.notouch &:hover {
					background: lighten($dark_grey, 5%);
				}
			}

			button,
			.button {
				padding: 16px 20px;
				min-width: 100% !important;
				max-width: 100% !important;
			}	

			.dropdown-field {
				padding: 16px 20px;

				.label {
					padding: 0 0 3px 0;
					font-weight: 800;
				}

				.options {
					display: block;
					position: static;
					background: transparent;
					border-radius: 0;
					border: 0;
					box-shadow: none;

					&:before {
						display: none !important;
					}

					& > .liner {
						background: transparent;
						color: $white !important;
						margin: -3px -5px;

						&:before {
							display: none !important;
						}

						.option {
							display: inline-block;
							padding: 3px 5px;
							border-radius: 0;
							opacity: 0.6;
							color: $white !important;

							&:before {
								display: none !important;
							}

							.icon {
								display: inline-block;
								position: static;
								padding-right: 2px;
								padding-bottom: 3px;
								font-size: 0.9em;
							}
						}
					}
				}
			}			
		}
	}

	@include responsive($bp_medium){
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		margin: 0 !important;
		overflow-y: scroll;

		.background {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: $overlay_dark;
			z-index: 1;
		}

		& > .liner {
			width: 250px;
			margin: 30px auto;
			max-width: 90vw;
			position: relative;
			z-index: 2;
			border-radius: 3px;

			.title {
				display: block;			
				padding: 14px 18px;
				box-sizing: border-box;
				border-radius: 3px 3px 0 0;
			}

			& > span {
				button,
				.button {
					color: $white;
					font-weight: 800;
					background: transparent;
				}

				.dropdown-field {
					color: $white;
				}
			}

			.menu-item-wrapper {
				.menu-item {
					padding: 14px 18px;
					box-sizing: border-box;
				}
			}
		}
	}
}

.context-menu-trigger {
	display: inline-block;
	padding: 14px 12px;
	cursor: pointer;
	vertical-align: top;
	margin-top: -1px;
	position: relative;
	border-radius: 3px;
	text-align: center;

	.actions & {
		@include gradient_overlay(3px);
		font-size: 24px;
		padding: 2px 10px 1px;

		&:hover{
			cursor: pointer;
			box-shadow: 2px 3px 6px rgba(0,0,0,0.2);

			&:before {
				opacity: 0.15;
			}
		}

		&:active {
			margin-top: 0px;
			margin-bottom: -1px;
		}
	}

	h4 &,
	h4 &:active {
		margin: -8px 0 0 10px;
	}
}