openmct/platform/commonUI/general/res/sass/controls/_menus.scss

/*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT Web is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT Web includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
/******************************************************** MENU BUTTONS */
.s-menu {
	// Formerly .btn-menu
	@extend .s-btn;
	span.l-click-area {
		// In markup, this element should not enclose anything.
		@extend .abs;
	}

	.icon {
		font-size: 120%;
	}

	.title-label {
		margin-left: $interiorMarginSm;
	}

	&:after {
		// Adds the downward facing arrow element
		color: rgba($colorInvokeMenu, 0.2);
		content: '\76';
		display: inline-block;
		font-family: 'symbolsfont';
		margin-left: $interiorMarginSm;
		@include text-shadow(none);
		vertical-align: top;
	}
	&.create-btn {
		.title-label {
			font-size: 1rem;
		}
		&:after {
			color: rgba($colorInvokeMenu, 0.5);
		}
	}

	.menu {
		left: 0;
		text-align: left;
		.ui-symbol.icon {
			width: 12px;
		}
	}
}

/******************************************************** MENUS THEMSELVES */
.menu-element {
	$bg: lighten($colorBodyBg, 5%);
	$bgHover: lighten($bg, 20%);
	$iconColor: $colorKey;
	cursor: pointer;
	position: relative;
	.menu {
		@include border-radius($basicCr);
		@include containerSubtle($bg);
		@include txtShdwSubtle(0.2);
		display: block; // set to block via jQuery
		padding: $interiorMarginSm 0;
		position: absolute;
		z-index: 10;
		ul {
			@include menuUlReset();
			li {
				@include box-sizing(border-box);
				border-top: 1px solid lighten($bg, 20%);
				color: lighten($bg, 60%);
				line-height: $menuLineH;
				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
				position: relative;
				white-space: nowrap;
				&:first-child {
					border: none;
				}
				&:hover {
					background: $bgHover;
					color: $colorKeyFg;
					//a {
					//	color: $colorKeyFg;
					//}
					.icon {
						color: lighten($iconColor, 20%);
					}
				}
				//a {
				//	color: lighten($bg, 60%);
				//	display: block;
				//}
				.type-icon {
					left: $interiorMargin * 2;
				}
			}
		}
	}

	.context-menu,
	.super-menu {
		$bg: $colorMenuBg;
		$fg: $colorMenuFg;
		$ic: $colorMenuIc;
		//font-size: 0.80rem;
		pointer-events: auto;
		@include containerSubtle($bg);
		ul li {
			padding-left: 25px;
			a {
				color: $fg;
			}
			.icon {
				color: $ic;
			}
			.type-icon {
				left: $interiorMargin;
			}
			&:hover .icon {
				color: lighten($ic, 5%);
			}
		}
	}

	.checkbox-menu {
		// Used in search dropdown in tree
		@extend .context-menu;
		ul li {
			padding-left: 50px;
			.checkbox {
				$d: 0.7rem;
				position: absolute;
				left: $interiorMargin;
				top: ($menuLineH - $d) / 1.5;
				em {
					height: $d;
					width: $d;
					&:before {
						font-size: 7px !important;// $d/2;
						height: $d;
						width: $d;
						line-height: $d;
					}
				}
			}
			.type-icon {
				left: 25px;
			}
		}
	}

	.super-menu {
		$w: 500px;
		$h: $w - 20;
		$plw: 50%; //$w * 0.5;
		$prw: 50%; //$w - $plw;
		$fg: #fff; //lighten($colorBodyFg, 40%);
		$bgHover: $colorKey; //$bg;
		display: block;
		width: $w;
		height: $h;
		.contents {
			@include absPosDefault($interiorMargin);
		}
		.pane {
			@include box-sizing(border-box);
			&.left {
				//@include test();
				border-right: 1px solid rgba(white, 0.2);
				left: 0;
				padding-right: $interiorMargin;
				right: auto;
				width: $plw;
				overflow-x: hidden;
				overflow-y: auto;
				ul {
					li {
						@include border-radius($controlCr);
						padding-left: 30px;
						border-top: none;
					}
				}
			}
			&.right {
				//@include test(red);
				left: auto;
				right: 0;
				padding: $interiorMargin * 5;
				width: $prw;
				.icon {
					color: $fg;
				}
			}
		}
		.menu-item-description {
			.desc-area {
				&.icon {
					$h: 150px;
					position: relative;
					font-size: 8em;
					left: 0;
					height: $h;
					line-height: $h;
					margin-bottom: $interiorMargin * 5;
					text-align: center;
				}
				&.title {
					color: $fg;
					font-size: 1.2em;
					margin-bottom: 0.5em;
				}
				&.description {
					//color: lighten($bg, 30%);
					color: $fg;
					font-size: 0.8em;
					line-height: 1.5em;
				}
			}
		}
	}
	.context-menu {
		font-size: 0.80rem;
	}
}

.context-menu-holder {
	pointer-events: none;
	position: absolute;
	height: 200px;
	width: 170px;
	z-index: 70;
	.context-menu-wrapper {
		position: absolute;
		height: 100%;
		width: 100%;
		.context-menu {
		}
	}
	&.go-left .context-menu {
		right: 0;
	}
	&.go-up .context-menu {
		bottom: 0;
	}
}

.btn-bar.right .menu,
.menus-to-left .menu {
	left: auto;
	right: 0;
	width: auto;
}