openmct/platform/commonUI/general/res/sass/_autoflow.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.
 *****************************************************************************/
.autoflow {
	$headerH: $formInputH;
	$colMargin: $interiorMargin;
	$colW: 225px;
	$valW: 70px;
	$valPad: 5px;
	$rowH: 15px;
	font-size: 0.75rem;

	&:hover {
		.l-autoflow-header .s-btn.change-column-width {
			@include trans-prop-nice-fade(50ms);
			opacity: 1;
		}
	}



	.l-autoflow-header {
		bottom: auto;
		height: $headerH;
		line-height: $headerH;
		min-width: $colW;
		span {
			vertical-align: middle;
		}
		.s-btn.change-column-width {
			@include trans-prop-nice-fade(500ms);
			opacity: 0;
		}
		.l-filter {
			margin-left: $interiorMargin;
			input.t-filter-input {
				width: 100px;
			}
		}
	}

	.l-autoflow-items {
		//		@include test(green);
		overflow-x: scroll;
		overflow-y: hidden;
		top: $headerH + $interiorMargin * 2;
		white-space: nowrap;
		.l-autoflow-col {
//			@include test();
			@include box-sizing(border-box);
			border-left: 1px solid $colorInteriorBorder;
			display: inline-block;
//			height: 100%;
			padding-left: $colMargin;
			padding-right: $colMargin;
			vertical-align: top;
			width: $colW;
			.l-autoflow-row {
				//				@include test(red);
				@include box-sizing(border-box);
				border-bottom: 1px solid rgba(#fff,0.05);
				display: block;
				height: $rowH;
				line-height: $rowH;
				margin-bottom: 1px; margin-top: 1px;
				position: relative;
				&:first-child {
					border-top: none;
				}
				&:hover {
					background: rgba(#fff, 0.1);
				}
				&.s-stale {
					//color: darken($colorBodyFg, 20%);
					.l-autoflow-item.l { @include s-stale(0.3); };
					.l-autoflow-item.r { @include s-stale(); };
				}
				&:not(.s-stale) {
					.l-autoflow-item.r {
						color: lighten($colorBodyFg, 10%);
					}
				}
				&.first-in-group {
					border-top: 1px solid lighten($colorInteriorBorder, 20%);
				}
				.l-autoflow-item {
					display: block;
					&.l {
						float: none;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: auto;
					}
					&.r {
						@include border-radius($smallCr);
						float: right;
						margin-left: $interiorMargin;
						padding-left: $valPad;
						padding-right: $valPad;
						text-align: right;
					}
				}
			}

			&:first-child {
				border-left: none;
				padding-left: 0;
			}
		}
	}
}