openmct/platform/commonUI/general/res/sass/helpers/_bubbles.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.
 *****************************************************************************/
//************************************************* LAYOUT

.l-bubble-wrapper {
	position: absolute;
	z-index: 70;
	.l-bubble {
		padding: $bubblePad $bubblePad*2;
		.l-btn.close {
			padding: 0 2px;
			position: absolute;
			right: $interiorMargin;
			top: $interiorMargin;
		}
	}
	.arw {
		position: absolute;
		&.arw-up {
			bottom: 100%;

		}
		&.arw-down {
			top: 100%;
		}
	}

	.l-infobubble {
		display: inline-block;
		max-width: 250px;
		//padding: 5px 10px;
		&:before {
			content:"";
			position: absolute;
			width: 0;
			height: 0;
		}
		table {
			width: 100%;
			tr {
				td {
					//max-width: 150px;
					padding: 2px 0;
					vertical-align: top;
					//white-space: nowrap;
					//overflow: hidden;
					//text-overflow: ellipsis;
					&.label {
						padding-right: $interiorMargin * 2;
						white-space: nowrap;
					}
					&.value {
						white-space: nowrap;
						//width: 90%;
					}
					&.align-wrap {
						white-space: normal;
					}
				}
			}
		}
		.title {
			@include ellipsize();
			margin-bottom: $interiorMargin;
			//max-width: 200px;
		}
	}

	&.arw-left {
		margin-left: $bubbleArwSize*2;
		.l-infobubble::before {
			right: 100%;
			@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
		}
	}

	&.arw-right {
		margin-right: $bubbleArwSize*2;
		.l-infobubble::before {
			left: 100%;
			@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
		}
	}

	&.arw-top {
		.l-infobubble::before {
			top: $bubbleArwSize * 2;
		}
	}

	&.arw-btm {
		.l-infobubble::before {
			bottom: $bubbleArwSize * 2;
		}
	}

	&.arw-down {

	}
}

.l-thumbsbubble-wrapper {
	$closeBtnD: 15px;
	position: absolute;
	left: $interiorMarginLg;
	right: $interiorMarginLg;
	height: $imageThumbsWrapperH + $bubblePad*2 + $interiorMargin;
	width: auto;
	.l-thumbsbubble {
		@include absPosDefault();
		.l-image-thumbs-wrapper {
			height: auto;
			top: $bubblePad !important; right: $closeBtnD + ($interiorMargin*2); bottom: $bubblePad !important; left: $bubblePad;
		}
	}
	.arw {
		//left: 50%;
		//margin-left: $bubbleArwSize / -2;
		z-index: 2;
	}
	&.arw-up .arw.arw-down,
	&.arw-down .arw.arw-up { display: none; }
}

//************************************************* LOOK AND FEEL

.s-bubble-wrapper {
	//@include box-shadow(rgba(black, 0.4) 0 1px 5px);
}

.s-bubble {
	@include border-radius($basicCr);
	@include box-shadow(rgba(black, 0.4) 0 1px 5px);
}

.l-thumbsbubble-wrapper {
	.arw-up {
		@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
	}
	.arw-down {
		@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
	}
}
.s-infobubble {
	$emFg: darken($colorInfoBubbleFg, 20%);
	background: $colorInfoBubbleBg;
	color: $colorInfoBubbleFg;
	font-size: 0.8rem;
	.title {
		color: $emFg;
		font-weight: bold;
	}
	tr {
		td {
			border-top: 1px solid darken($colorInfoBubbleBg, 10%);
			font-size: 0.9em;
		}
		&:first-child td {
			border-top: none;
		}
	}
	.value {
		color: $emFg;
	}
}

.s-thumbsbubble {
	background: $colorThumbsBubbleBg;
	color: $colorThumbsBubbleFg;
}