/***************************************************************************** * Open MCT, Copyright (c) 2014-2018, 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. *****************************************************************************/ /******************************************************** TABLE */ table { $minW: 50px; width: 100%; thead { background: $colorTabHeaderBg; th + th { border-left: 1px solid $colorTabHeaderBorder; } } tbody { tr + tr { border-top: 1px solid $colorTabBorder; } } th, td { white-space: nowrap; min-width: $minW; padding: $tabularTdPadTB $tabularTdPadLR; } td { vertical-align: top; } } .c-table { // Can be used by any type of table, scrolling, LAD, etc. $min-w: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; &__control-bar, &__headers-w { flex: 0 0 auto; } /******************************* ELEMENTS */ &__control-bar { margin-bottom: $interiorMarginSm; } thead tr, [class*="__header"] { background: $colorTabHeaderBg; th { &:not(:first-child) { border-left: 1px solid $colorTabHeaderBorder; } } } tbody, &__body { tr:not(.c-table__group-header) + tr:not(.c-table__group-header) { border-top: 1px solid $colorTabBorder; } } &__group-header { // tr element found in LAD Table Sets border-top: 1px solid $colorTabHeaderBorder; background: $colorTabGroupHeaderBg; td { color: $colorTabGroupHeaderFg; } } &--sortable { .is-sorting { &:after { color: $colorIconAlias; content: $glyph-icon-arrow-tall-up; font-family: symbolsfont; font-size: 8px; display: inline-block; margin-left: $interiorMarginSm; } &.desc:after { content: $glyph-icon-arrow-tall-down; } } .is-sortable { cursor: pointer; } } } .c-lad-table { th, td { width: 33%; // Needed to prevent size jumping as values dynamically update } }