3246480f82
* [API] Added Indicators API * [Indicators] Converted Follow Indicator to new Indicators API * [Indicators] Converted URL Indicator to new Indicators API * [Indicators] Changes to some legacy indicators for compatibility with new Indicators API * [Indicators] Addressed code review items from https://github.com/nasa/openmct/pull/1837 * Updated tests for URL Indicator * Adding Indicator API spec * Address linting issues * Switched to direct DOM manipulation rather than template compilation to avoid an unnecessary extra holder element * Updated documentation to reflect changes to API * Indicators api styling (#2076) Updated styling for Indicators * Update API TOC * Fix color of items w-mct-example areas of Style Guide Fixes #1837 * Status class refactoring and cleanups Fixes #1837 - Significant cleanups and name refactoring to allow more concise selector definitions, with changes in js, html and scss files; - Updates in Style Guide > Status page, with some content reorganization and clarification; * Corrected out of date API * de-zeptoed Indicator API test spec * Remove promise from URLIndicator * Separated legacy indicators support * Updated Indicator specs to Jasmine 3 * Fixed checkstyle and lint issues * Moved legacy indicators support to adapter folder * Various fixes for Indicators Fixes #1837 - Added SASS constants for Indicator colors; - Removed commented code; - Removed unused indicator classes from _messages.scss - Fixed missing s-status-on class; * Significant revisions to Style Guide Indicators content Fixes #1837 - Better documentation including recommendations; - Better and more concrete examples; * Style Guide example tweaks Fixes #1837 * Refinement to Style Guide Status and Limits content Fixes #1837 - More detail and clarification on Status and Limits; * Cleanup code Fixes #1837 - Remove commented styles; - Line return refinements;
264 lines
8.5 KiB
SCSS
264 lines
8.5 KiB
SCSS
// Global
|
|
$colorBodyBg: #333;
|
|
$colorBodyFg: #999;
|
|
$colorGenBg: #222;
|
|
$colorStatusBarBg: #000;
|
|
$colorStatusBarFg: #999;
|
|
$colorStatusBarFgHov: #aaa;
|
|
$colorKey: #0099cc;
|
|
$colorKeySelectedBg: #005177;
|
|
$colorKeyFg: #fff;
|
|
$colorKeyHov: #00c0f6;
|
|
$colorEditAreaBg: #31363e;
|
|
$colorEditAreaFg: #587ab5;
|
|
$colorInteriorBorder: rgba($colorBodyFg, 0.1);
|
|
$colorA: #ccc;
|
|
$colorAHov: #fff;
|
|
$contrastRatioPercent: 7%;
|
|
$hoverRatioPercent: 10%;
|
|
$basicCr: 3px;
|
|
$controlCr: 2px;
|
|
$smallCr: 2px;
|
|
$overlayCr: 11px;
|
|
|
|
// Buttons and Controls
|
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
|
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
|
$colorBtnFg: $colorBodyFg;
|
|
$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
|
|
$colorBtnIcon: $colorBtnFg;
|
|
$colorBtnIconHov: $colorBtnFgHov;
|
|
$colorBtnMajorBg: $colorKey;
|
|
$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
|
|
$colorBtnMajorFg: $colorKeyFg;
|
|
$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
|
|
$colorClickIcon: $colorKey;
|
|
$colorClickIconHov: $colorKeyHov;
|
|
$colorToggleIcon: rgba($colorBodyFg, 0.5);
|
|
$colorToggleIconActive: $colorKey;
|
|
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
|
|
$colorInvokeMenu: #fff;
|
|
$contrastInvokeMenuPercent: 30%;
|
|
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
|
|
$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
|
|
$sliderColorBase: $colorKey;
|
|
$sliderColorRangeHolder: rgba(black, 0.1);
|
|
$sliderColorRange: rgba($sliderColorBase, 0.3);
|
|
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
|
|
$sliderColorKnob: $sliderColorBase;
|
|
$sliderColorKnobHov: pullForward($sliderColorKnob, $ltGamma);
|
|
$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
|
|
$sliderColorRangeValHovFg: $colorKeyFg;
|
|
$sliderKnobW: 15px;
|
|
$sliderKnobR: 2px;
|
|
$timeControllerToiLineColor: #00c2ff;
|
|
$timeControllerToiLineColorHov: #fff;
|
|
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
|
|
|
// Foundation Colors
|
|
$colorAlt1: #ffc700;
|
|
$colorAlert: #ff9900;
|
|
$colorWarningHi: #cc0000;
|
|
$colorWarningLo: #ff9900;
|
|
$colorDiagnostic: #a4b442;
|
|
$colorCommand: #3693bd;
|
|
$colorInfo: #2294a2;
|
|
$colorOk: #33cc33;
|
|
$colorIconLink: #49dedb;
|
|
$colorPausedBg: #c56f01;
|
|
$colorPausedFg: #fff;
|
|
$colorCreateBtn: $colorKey;
|
|
$colorGridLines: rgba(#fff, 0.05);
|
|
$colorInvokeMenu: #fff;
|
|
$colorObjHdrTxt: $colorBodyFg;
|
|
$colorObjHdrIc: lighten($colorObjHdrTxt, 20%);
|
|
$colorTick: rgba(white, 0.2);
|
|
$colorSelectableSelectedPrimary: $colorKey;
|
|
$colorSelectableHov: rgba($colorBodyFg, 0.3);
|
|
|
|
// Menu colors
|
|
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
|
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
|
$colorMenuIc: pullForward($colorKey, 17%);
|
|
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
|
|
$colorMenuHovFg: #fff;
|
|
$colorMenuHovIc: $colorMenuHovFg;
|
|
$shdwMenu: none;
|
|
$shdwMenuText: rgba(black, 0.1) 0 1px 2px;
|
|
$colorCreateMenuLgIcon: $colorMenuFg;
|
|
$colorCreateMenuText: $colorMenuFg;
|
|
|
|
// Form colors
|
|
$colorCheck: $colorKey;
|
|
$colorFormRequired: $colorAlt1;
|
|
$colorFormValid: $colorOk;
|
|
$colorFormError: $colorWarningHi;
|
|
$colorFormInvalid: #ff3300;
|
|
$colorFormFieldErrorBg: $colorFormError;
|
|
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
|
$colorFormLines: rgba(#fff, 0.1);
|
|
$colorFormSectionHeader: rgba(#fff, 0.1);
|
|
$colorInputBg: rgba(#000, 0.1);
|
|
$colorInputFg: pullForward($colorBodyFg, 20%);
|
|
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
|
|
$colorFormText: rgba(#fff, 0.5);
|
|
$colorInputIcon: pushBack($colorBodyFg, 15%);
|
|
$colorFieldHint: pullForward($colorBodyFg, 20%);
|
|
|
|
// Inspector
|
|
$colorInspectorBg: pullForward($colorBodyBg, 3%);
|
|
$colorInspectorFg: $colorBodyFg;
|
|
$colorInspectorPropName: pushBack($colorBodyFg, 15%);
|
|
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
|
$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
|
|
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
|
|
|
// Status colors, mainly used for messaging and item ancillary symbols
|
|
$colorStatusFg: #ccc;
|
|
$colorStatusDefault: #999;
|
|
$colorStatusInfo: $colorInfo;
|
|
$colorStatusAlert: $colorAlert;
|
|
$colorStatusError: #da0004;
|
|
$colorStatusBtnBg: $colorBtnBg;
|
|
$colorProgressBarOuter: rgba(#000, 0.1);
|
|
$colorProgressBarAmt: $colorKey;
|
|
$progressBarHOverlay: 15px;
|
|
$progressBarStripeW: 20px;
|
|
$shdwStatusIc: rgba(black, 0.4) 0 1px 2px;
|
|
$animPausedPulseDur: 500ms;
|
|
|
|
// Indicator colors
|
|
$colorIndicatorAvailable: $colorKey;
|
|
$colorIndicatorDisabled: #444;
|
|
$colorIndicatorOn: $colorOk;
|
|
$colorIndicatorOff: #666;
|
|
|
|
// Selects
|
|
$colorSelectBg: $colorBtnBg;
|
|
$colorSelectFg: $colorBtnFg;
|
|
|
|
// Limits, status and staleness colors
|
|
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
|
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
|
$styleTelemStale: italic;
|
|
$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
|
|
$colorLimitYellowIc: $colorWarningLo;
|
|
$colorLimitRedBg: rgba($colorWarningHi, 0.3);
|
|
$colorLimitRedIc: $colorWarningHi;
|
|
|
|
// Bubble colors
|
|
$colorInfoBubbleBg: #ddd;
|
|
$colorInfoBubbleFg: #666;
|
|
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
|
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
|
|
|
// Overlay
|
|
$colorOvrBlocker: rgba(black, 0.7);
|
|
$colorOvrBg: pullForward($colorBodyBg, 10%);
|
|
$colorOvrFg: pullForward($colorBodyFg, 30%);
|
|
$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
|
|
$colorOvrBtnFg: #fff;
|
|
$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
|
|
$durLargeViewExpand: 250ms;
|
|
|
|
// Items
|
|
$colorItemBg: lighten($colorBodyBg, 5%);
|
|
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
|
|
$colorItemFg: lighten($colorItemBg, 50%);
|
|
$colorItemFgDetails: lighten($colorItemBg, 30%);
|
|
$colorItemIc: $colorKey;
|
|
$colorItemSubIcons: $colorItemFgDetails;
|
|
$colorItemOpenIcon: $colorItemFgDetails;
|
|
$shdwItemText: rgba(black, 0.1) 0 1px 2px;
|
|
$colorItemBgSelected: $colorKey;
|
|
|
|
// Tabular
|
|
$colorTabBorder: pullForward($colorBodyBg, 5%);
|
|
$colorTabBodyBg: darken($colorBodyBg, 10%);
|
|
$colorTabBodyFg: lighten($colorTabBodyBg, 40%);
|
|
$colorTabHeaderBg: rgba(white, 0.1);
|
|
$colorTabHeaderFg: $colorBodyFg;
|
|
$colorTabHeaderBorder: $colorBodyBg;
|
|
|
|
// Plot
|
|
$colorPlotBg: rgba(black, 0.1);
|
|
$colorPlotFg: $colorBodyFg;
|
|
$colorPlotHash: $colorTick;
|
|
$stylePlotHash: dashed;
|
|
$colorPlotAreaBorder: $colorInteriorBorder;
|
|
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
|
$legendCollapsedNameMaxW: 50%;
|
|
$legendHoverValueBg: rgba($colorBodyFg, 0.1);
|
|
|
|
// Tree
|
|
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
|
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
|
$colorItemTreeIcon: $colorKey;
|
|
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
|
|
$colorItemTreeFg: $colorBodyFg;
|
|
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
|
$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
|
|
$colorItemTreeEditingBg: #344154;
|
|
$colorItemTreeEditingFg: $colorEditAreaFg;
|
|
$colorItemTreeVC: $colorBodyFg;
|
|
$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
|
|
$colorItemTreeSelectedVC: $colorItemTreeVC;
|
|
$shdwItemTreeIcon: 0.6;
|
|
|
|
// Images
|
|
$colorThumbHoverBg: $colorItemTreeHoverBg;
|
|
|
|
// Scrollbar
|
|
$scrollbarTrackSize: 7px;
|
|
$scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
|
|
$scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
|
|
$scrollbarThumbColor: pullForward($colorBodyBg, 10%);
|
|
$scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
|
|
$scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
|
|
$scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
|
|
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%);
|
|
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
|
|
|
|
// Splitter
|
|
// All splitterD* values MUST both be either odd or even numbers
|
|
$splitterD: 20px;
|
|
$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
|
|
$splitterHandleD: 2px;
|
|
$colorSplitterBaseBg: pullForward($colorBodyBg, 10%);
|
|
$colorSplitterBg: $colorSplitterBaseBg;
|
|
$splitterShdw: rgba(black, 0.4) 0 0 3px;
|
|
$splitterEndCr: none;
|
|
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
|
|
$colorSplitterActive: $colorKey;
|
|
|
|
// Minitabs
|
|
$colorMiniTabBg: $colorSplitterBg;
|
|
$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
|
|
$colorMiniTabBgHov: $colorSplitterHover;
|
|
$colorMiniTabFgHov: #fff;
|
|
|
|
// Mobile
|
|
$colorMobilePaneLeft: darken($colorBodyBg, 5%);
|
|
$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
|
|
$colorMobileSelectListTreeItemBg: rgba(#fff, 0.05);
|
|
|
|
// Datetime Picker
|
|
$colorCalCellHovBg: $colorKey;
|
|
$colorCalCellHovFg: $colorKeyFg;
|
|
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
|
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
|
$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
|
|
|
|
// Palettes
|
|
$colorPaletteFg: pullForward($colorMenuBg, 30%);
|
|
$colorPaletteSelected: #fff;
|
|
$shdwPaletteFg: black 0 0 2px;
|
|
$shdwPaletteSelected: inset 0 0 0 1px #000;
|
|
|
|
// About Screen
|
|
$colorAboutLink: #84b3ff;
|
|
|
|
// Loading
|
|
$colorLoadingFg: $colorAlt1;
|
|
$colorLoadingBg: rgba($colorBodyFg, 0.2);
|