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: 160px;
		box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
		border-radius: 3px;
		background: $darkest_grey;
		font-size: 13px;
		font-weight: 600;
		font-family: "Overpass";

		.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.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;
					}
				}

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

			.icon {
				display: none;
			}

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

			.fa {
				font-size: 10px;
			}

			.submenu {
				@include animate();
				position: absolute;
				top: 0;
				right: 0;
				left: 100%;
				height: 100%;
				min-height: 200px;
				width: 0;
				height: 100%;
				overflow-y: scroll;			
				background: $darkest_grey;
				z-index: 3;
				border-radius: 3px;

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

				.menu-item {
					width: 100%;

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

		& > span {
			display: block;

			button,
			.button,
			.dropdown-field {
				text-decoration: none;
				display: block;
				border: 0;
				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;

				&:not(:first-child):not(.dropdown-field){
					border-top: 1px solid lighten($dark_grey, 8%);
				}

				.fa {
					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: 0;
				box-shadow: none;

				.label {
					padding: 16px 20px;
				}

				.options {
					display: block;
					position: static;
					background: $darkest_grey;
					border-radius: 0;
					border: 0;
					color: $white !important;

					.option {
						padding: 12px 20px 12px 50px;
						border-radius: 0;

						.fa {
							display: inline-block;
							left: 25px;
							top: 14px;
						}
					}

					&:before {
						display: none;
					}
				}
			}			
		}
	}

	@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: $overlay_dark;
			z-index: 1;
		}

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

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

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

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

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

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

	.dot {
		width: 6px;
		height: 6px;
		border-radius: 5px;
		background: $white;
		display: inline-block;
		margin: 1px;
	}

	&: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));
	}

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

		&:before {
			opacity: 0.15;
		}
	}
}

.list {	
	&.track-list {

		.context-menu-trigger {	
			display: none;
		}
		
		@include responsive( $bp_medium ){

			.context-menu-trigger {	
				@include gradient_overlay(50%, 0.15);
				display: block;
				position: fixed;
				bottom: 55px;
				right: 5px;
				width: 48px;
				height: 8px;
				padding: 20px 0;
				overflow: hidden;
				z-index: 97;
				background: $blue;

				.dot {
					background: $white;
				}
				
				&:focus,
				&:active {
					background: darken($blue, 10%);
				}
			}
		}
	}
}