[Frontend] IN-PROGRESS Major restructuring of /platform/commonUI/ to add themes structure

open #95
New themes bundle files, .scss and directories;
Moved constants definitions (mainly colors) from commonUI/.../_constants
to individual themes _constants files;
tweaks to mixins files;
changed pathways to font and images in commonUI/.../_constants;
This commit is contained in:
Charles Hacskaylo
2015-09-03 15:34:39 -07:00
parent 62898c921f
commit 37c34c668c
24 changed files with 7237 additions and 1145 deletions

View File

@@ -0,0 +1,68 @@
/************************** COLORS AND SHADING */
$colorBodyBg: #333;
$colorBodyFg: #999;
$colorFooterBg: #000;
$colorKey: #0099cc;
$colorKeySelectedBg: #005177;
$colorKeyFg: #fff;
$contrastRatio: 7%;
$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
$colorBtnFg: $colorBodyFg;
$colorBtnIcon: $colorKey;
$colorInvokeMenu: #fff;
$colorAlt1: #ffc700;
$colorAlert: #ff3c00;
$colorIconLink: #49dedb;
$colorPausedBg: #c56f01;
$colorPausedFg: #fff;
$colorCreateBtn: $colorKey;
$colorGridLines: rgba(#fff, 0.05);
$colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#000, 0.2);
$colorInvokeMenu: #fff;
// Menu colors
$colorMenuBg: lighten($colorBodyBg, 23%);
$colorMenuFg: lighten($colorMenuBg, 70%);
$colorMenuIc: lighten($colorKey, 17%);
$colorInteriorBorder: lighten($colorBodyBg, 10%);
$colorObjFrameBg: darken($colorBodyBg, 5%);
// Form colors
$colorCheck: $colorKey;
$colorFormRequired: #ffc700;
$colorFormValid: #33cc33;
$colorFormError: #cc0000;
$colorFormInvalid: #ff9900;
// Limits and staleness colors
$colorLimitYellow: #9d7500;
$colorLimitRed: #aa0000;
$colorTelemFresh: #fff;
$colorTelemStale: #888;
$styleTelemStale: italic;
// Bubble colors
$colorInfoBubbleFg: #666;
$colorInfoBubbleBg: #ddd;
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
// Overlay
$colorOvrBlocker: rgba(black, 0.7);
$colorOvrBg: $colorBodyBg;
$colorOvrFg: $colorBodyFg;
// Items
$colorItemBase: lighten($colorBodyBg, 5%);
$colorItemFg: lighten($colorItemBase, 20%);
$colorItemSelected: $colorKey;
// Tabular
$tabularColorBorder: rgba(white, 0.1);
$tabularColorBodyBg: darken($colorBodyBg, 10%);
$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
$tabularColorHeaderBorder: $colorBodyBg;
// Tree
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
// Scrollbar
$scrollbarTrackColorBg: rgba(#000, 0.4);

View File

@@ -0,0 +1,9 @@
@function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces
@return lighten($c, $p);
}
@function pushBack($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, darker things move back - opposite for light interfaces
@return darken($c, $p);
}

View File

@@ -0,0 +1,36 @@
/*****************************************************************************
* 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.
*****************************************************************************/
@import "compass";
@import "compass/reset";
@import "compass/css3";
@import "compass/utilities";
@import "../../../../general/res/sass/_mixins";
@import "../../../../general/res/sass/mobile/mixins";
@import "mixins";
@import "../../../../general/res/sass/constants";
@import "../../../../general/res/sass/mobile/constants";
@import "constants";
@import "../../../../general/res/sass/main";