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

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2016, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT 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 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-button {
	// Formerly .btn-menu
	@extend .s-button;
	span.l-click-area {
		// In markup, this element should not enclose anything.
		@extend .abs;
	}

	.icon {
		font-size: 16px; //120%;
	}

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

    .color-swatch {
        // Used in color menu buttons in toolbar
        $d: 10px;
        display: inline-block;
        border: 1px solid rgba($colorBtnFg, 0.2);
        height: $d; width: $d;
        vertical-align: middle;
        margin-left: $interiorMarginSm;
        margin-top: -2px;
    }

	&:after {
		// Adds the downward facing 'context available / invoke menu' arrow element
		@include contextArrow();
		color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
	}

	&.create-button {
        @extend .icon-plus;
		.title-label {
			font-size: 1rem;
		}
	}

	.menu {
		left: 0;
		text-align: left;
	}
}

/******************************************************** MENUS THEMSELVES */
.menu-element {
	cursor: pointer;
	position: relative;
}

.s-menu {
	border-radius: $basicCr;
	@include containerSubtle($colorMenuBg, $colorMenuFg);
	@include boxShdw($shdwMenu);
	@include txtShdw($shdwMenuText);
	padding: $interiorMarginSm 0;
}

.menu {
    // TODO: reduce size of icons
	@extend .s-menu;
	display: block;
	position: absolute;
	z-index: 10;
	ul {
		@include menuUlReset();
		li {
			box-sizing: border-box;
			border-top: 1px solid pullForward($colorMenuBg, 10%);
            color: $colorMenuFg;
			//color: pullForward($colorMenuBg, 60%);
			line-height: $menuLineH;
			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
			position: relative;
			white-space: nowrap;
			&:first-child {
				border: none;
			}
			&:hover {
				background: $colorMenuHovBg;
				color: $colorMenuHovFg;
                &:before {
                    color: $colorMenuHovIc;
                }
			}
            &:before {
                @extend .ui-symbol;
                @extend .type-icon;
                @extend .icon;
                display: inline-block;
                left: $interiorMargin * 2;
            }
		}
	}
}

.menu,
.icon-menu,
.context-menu,
.super-menu,
.s-menu-button .menu {
	pointer-events: auto;
	ul li {
		a.menu-item-a {
            color: $colorMenuFg;
            display: block;
		}
        &:before,
        a.menu-item-a:before {
            color: $colorMenuIc;
            left: $interiorMargin;
        }
	}
}

.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;
					height: $d;
					width: $d;
					line-height: $d;
				}
			}
		}
		&:before {
            // Type icon
			left: 25px;
		}
	}
}

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

.context-menu-holder,
.menu-holder {
	position: absolute;
	z-index: 70;
	.context-menu-wrapper {
		position: absolute;
		height: 100%;
		width: 100%;
	}
	&.go-left .context-menu,
	&.go-left .menu {
		right: 0;
	}
	&.go-up .context-menu,
	&.go-up .menu {
		bottom: 0;
	}
}

.context-menu-holder {
	pointer-events: none;
	height: 200px;
	width: 170px;
}

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