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

.context-menu {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;

	.liner {
		background: $dark_grey;
		color: #FFFFFF;
		width: 160px;

		&.right-align {
			margin-left: -160px;
		}

		&.right-align-submenu .submenu {
			left: auto !important;
			right: 160px !important;
		}

		&.bottom-align-submenu .submenu {
			top: auto !important;
			bottom: 0 !important;
		}

		.title {
			display: block;
			padding: 8px 12px;
			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.5;
				position: absolute;
				top: -10px;
				left: -10px;
				bottom: -10px;
				right: -10px;
				z-index: 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;
			}

			.notouch &:hover{
				.background {
					opacity: 0.7;
				}
			}
		}

		.menu-item-wrapper {
			display: block;

			.menu-item {
				cursor: pointer;
				display: block;
				padding: 8px 12px;
				box-sizing: border-box;

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

			.icon {
				display: none;
			}

			.submenu-icon {
				font-size: 10px;
				float: right;
				padding-top: 4px;
			}

			.submenu {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				min-height: 200px;
				overflow-y: scroll;			
				background: lighten($dark_grey, 10%);
				z-index: 3;

				.menu-item {
					width: 100%;

					&.close-submenu {
						background: $dark_grey;
						border-top: 0;
						color: $mid_grey;
					}

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

			.menu-item {
				border-top: 1px solid lighten($dark_grey, 8%);
			}
		}
	}

	@include responsive( null, $bp_medium ){
		.liner {
			.title {
				display: none;
			}
		}
	}

	@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: rgba(10, 10, 10, 0.95);
			z-index: 1;
		}

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

			.title {				
				padding: 16px 20px;
				box-sizing: border-box;
			}

			.menu-item-wrapper {
				.menu-item {
					padding: 16px 20px;
					box-sizing: border-box;
				}
			}
		}
	}
}