openmct/platform/commonUI/general/res/sass/helpers/_bubbles.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, 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.
 *****************************************************************************/

//************************************************* GENERAL


//************************************************* LAYOUT

.l-infobubble-wrapper {
	$arwSize: 5px;
	box-shadow: rgba(black, 0.4) 0 1px 5px;
	position: relative;
	z-index: 50;
	.l-infobubble {
		display: inline-block;
		min-width: $bubbleMinW;
		max-width: $bubbleMaxW;
		padding: 5px 10px;
		&:before {
			content:"";
			position: absolute;
			width: 0;
			height: 0;
		}
		table {
			width: 100%;
			tr {
				td {
					padding: 2px 0;
					vertical-align: top;
					&.label {
						padding-right: $interiorMargin * 2;
						white-space: nowrap;
					}
					&.value {
						//word-wrap: break-word; // Doesn't work in <td>?
						word-break: break-all;
					}
					&.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%;
            // NOTE: [MOBILE] REMOVES TRIANGLE
            // Removes the triangle located on the info
            // bubble for phones only, for tablets and
            // desktops, triangle remains.
            @include desktopandtablet {
                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
            }
		}
	}

	&.arw-right {
        // NOTE: [MOBILE] REMOVES RIGHT MARGIN
        // Removes right margin made for the 
        // triangle on mobile
        @include desktopandtablet {
		  margin-right: $bubbleArwSize*2;
        }
		.l-infobubble::before {
			left: 100%;
            // NOTE: [MOBILE] REMOVES TRIANGLE
            // Removes the triangle located on the info
            // bubble for phones only, for tablets and
            // desktops, triangle remains.
            @include desktopandtablet {
                @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 {
		margin-bottom: $arwSize*2;
		.l-infobubble::before {
			left: 50%;
			top: 100%;
			margin-left: -1 * $arwSize;
			border-left: $arwSize solid transparent;
			border-right: $arwSize solid transparent;
			border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
		}
	}
	.arw {
		z-index: 2;
	}
	&.arw-up .arw.arw-down,
	&.arw-down .arw.arw-up {
		display: none;
	}
}

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

.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%);
	border-radius: $basicCr;
	box-shadow: rgba(black, 0.4) 0 1px 5px;
	background: $colorInfoBubbleBg;
	color: $colorInfoBubbleFg;
	font-size: 0.8rem;
	.title {
		color: $emFg;
		font-weight: bold;
	}
	table {
		tr {
			td {
				border: none;
				border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
				font-size: 0.9em;
			}

			&:first-child td {
				border-top: none !important;
			}
		}
	}
	&:first-child td {
		border-top: none;
	}

	.label {
		color: lighten($emFg, 30%);
	}

	.value {
		color: $emFg;
	}

}

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