openmct/platform/commonUI/general/res/sass/items/_item.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.
 *****************************************************************************/
.items-holder {
    @include clearfix;
    overflow-y: auto;
	.contents {
		top: 0;
	}
    .item {
        &.grid-item {
            //div { @include test() }
            $d: $ueBrowseGridItemLg;
            //$iconD: 100px;
            $iconMargin: 40px;
            $iconD: ($d - ($iconMargin * 2)) * 0.85;
            $transTime: 200ms;
            @include btnSubtle($colorItemBase);
            box-sizing: border-box;
            cursor: pointer;
            float: left;
            height: $d;
            width: $d;
            margin-bottom: $interiorMarginSm;
            margin-right: $interiorMarginSm;
            position: relative;
            &:hover .item-main {
	            .item-type {
		            color: lighten($colorKey, 10%) !important;
                    .l-icon-link {
                        color: $colorIconLink;
                    }
                }
	            .item-open {
		            //display: block;
                    opacity: 1;
	            }
            }
	        .contents {
                //@include test(red);
                $m: $interiorMarginLg;
		        top: $m; right: $m; bottom: $m; left: $m;
	        }
            .bar {
                &.top-bar {
                    bottom: auto;
                    height: $ueBrowseGridItemTopBarH;
                    line-height: $ueBrowseGridItemTopBarH;
                    text-align: right;
	                z-index: 5;
	                .left, .right {
		                width: auto;
		                .icon {
			                margin-left: $interiorMarginSm;
                            &.l-icon-link {
                                color: $colorIconLink;
                            }
		                }
	                }
                }
                &.bottom-bar {
                    top: auto;
                    height: $ueBrowseGridItemBottomBarH;
                }
            }
            .item-main {
	            $h: $ueBrowseGridItemLg;
	            $lh: $h * 0.8;
                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;
                line-height: $lh;
	            z-index: 1;
                .item-type {
                    //@include trans-prop-nice("color", $transTime);
                    @include absPosDefault($iconMargin, false);
                    //@include test(red);
                    //color: $colorItemFg;
                    text-align: center;
                    font-size: $iconD * 0.95; //6em;
                    line-height: $iconD;
                    bottom: auto;
                    height: $iconD;
                    top: $iconMargin - 10;
                    //line-height: $lh;
                    .l-icon-link {
                        // When the link icon is in the item-type icon holder
                        //color: darken($colorIconLink, 25%);
                        color: $colorIconLink;
                        height: auto;
                        line-height: 100%;
                        position: absolute;
                        font-size: 0.3em;
                        left: 0px;
                        bottom: 10px;
                        z-index: 2;
                    }
                }
                .item-open {
                    //@include test();
                    @include trans-prop-nice("opacity", $transTime);
                    opacity: 0;
	                //display: none;
                    font-size: 3em;
                    //line-height: $lh;
                    left: auto; width: 50px;
                    pointer-events: none;
                    text-align: right;
                }
            }
            .title {
	            @include txtShdwSubtle();
                @include ellipsize();
                color: lighten($colorBodyFg, 20%);
            }
            .details {
                font-size: 0.8em;
            }
	        &.selected {
		        $cfg: lighten($colorItemSelected, 35%);
		        $cfgh: lighten($cfg, 30%);
		        @include btnSubtle($colorItemSelected);
		        color: $cfg;
		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
		        .item-main .item-open { color: $cfg }
		        .title { color: $cfgh; }
		        &:hover {
			        .item-main .item-type { color: $cfgh !important; }
		        }
	        }
        }
    }

}