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.
 *****************************************************************************/
/******************************************************** MENUS */
.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 border-radius($controlCr);
                @include box-sizing(border-box);
				border-top: 1px solid lighten($bg, 20%);
				line-height: $menuLineH;
				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
				white-space: nowrap;
				&:first-child {
					border: none;
				}
				&:hover {
					background: $bgHover;
					a {
						color: $colorKeyFg;
					}
					.icon {
						color: lighten($iconColor, 20%);
					}
				}
				a {
					color: lighten($bg, 60%);
					display: block;
				}
				.type-icon {
                    left: $interiorMargin * 2;
				}
			}
		}
	}
    .super-menu {
        $w: 450px;
        $h: $w - 20;
        $plw: 50%; //$w * 0.5;
        $prw: 50%; //$w - $plw;
        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);
//                        @include test(red);
                        border-top: none;
//                        font-size: 0.85em;
//                        line-height: 20px;
                        &:hover {
                            background: $bgHover;
                        }
                        .icon {
                            @include txtShdwSubtle(0.4);
                            left: $interiorMargin;
                        }
                    }
                }
            }
            &.right {
	            //@include test(red);
	            left: auto;
                right: 0;
                padding: $interiorMargin * 5;
                width: $prw;
            }
        }
    }
    .menu-item-description {
        .desc-area {
//            @include test(green);
            &.icon {
                //@include test(red);
                $h: 150px;
                position: relative;
                color: lighten($bg, 30%);
                font-size: 8em;
                left: 0;
                height: $h;
                line-height: $h;
	            margin-bottom: $interiorMargin * 5;
//                top: 0; right: 0; bottom: 5em; left: 0;
//                height: 5em;
                text-align: center;
            }
            &.title {
                color: lighten($bg, 60%);
                font-size: 1.2em;
                margin-bottom: 0.5em;
            }
	        &.description {
		        color: lighten($bg, 30%);
		        font-size: 0.8em;
	        }
        }
    }
    .context-menu {
        $bg: lighten($colorBodyBg, 25%);
        $fg: lighten($bg, 70%);
        $ic: lighten($colorKey, 15%);
        font-size: 0.80rem;
        pointer-events: auto;
        &.menu {
            @include containerSubtle($bg);
            ul li {
                padding-left: 30px;
                a { color: $fg; }
                .icon {
                    color: $ic;
                }
                .type-icon {
                    left: $interiorMargin;
                }
                &:hover .icon {
                    color: lighten($ic, 5%);
                }
            }
        }
    }
}

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