mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 07:16:39 +00:00
Markup / scss refactor WIP
- Add some initial theme files; pull back from theme "override" approach; - Splitters refined; - Style cleanups;
This commit is contained in:
charlesh88
parent
32cdecebce
commit
d35aed2d62
@ -33,7 +33,6 @@ define([
|
||||
'./ui/registries/ToolbarRegistry',
|
||||
'./adapter/indicators/legacy-indicators-plugin',
|
||||
'./styles-new/core.scss',
|
||||
'./styles-new/theme-snow.scss',
|
||||
'./ui/components/layout/Layout.vue',
|
||||
'vue'
|
||||
], function (
|
||||
@ -49,7 +48,6 @@ define([
|
||||
ToolbarRegistry,
|
||||
LegacyIndicatorsPlugin,
|
||||
coreStyles,
|
||||
themeSnow,
|
||||
Layout,
|
||||
Vue
|
||||
) {
|
||||
|
||||
276
src/styles-new/_constants-snow.scss
Normal file
276
src/styles-new/_constants-snow.scss
Normal file
@ -0,0 +1,276 @@
|
||||
// Mixins
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
}
|
||||
|
||||
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
// Global
|
||||
$colorBodyBg: #fcfcfc;
|
||||
$colorBodyFg: #666;
|
||||
$colorGenBg: #fff;
|
||||
$colorStatusBarBg: #000;
|
||||
$colorStatusBarFg: #999;
|
||||
$colorStatusBarFgHov: #aaa;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: #00c0f6;
|
||||
$colorEditAreaBg: #eafaff;
|
||||
$colorEditAreaFg: #4bb1c7;
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #999;
|
||||
$colorAHov: $colorKey;
|
||||
$contrastRatioPercent: 40%;
|
||||
$hoverRatioPercent: 10%;
|
||||
$basicCr: 4px;
|
||||
$controlCr: $basicCr;
|
||||
$smallCr: 3px;
|
||||
$overlayCr: 11px;
|
||||
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnFgHov: $colorBtnFg;
|
||||
$colorBtnIcon: #eee;
|
||||
$colorBtnIconHov: $colorBtnFgHov;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
|
||||
$colorClickIcon: $colorKey;
|
||||
$colorClickIconHov: $colorKeyHov;
|
||||
$colorToggleIcon: rgba($colorClickIcon, 0.5);
|
||||
$colorToggleIconActive: $colorKey;
|
||||
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
|
||||
$colorInvokeMenu: #000;
|
||||
$contrastInvokeMenuPercent: 40%;
|
||||
$shdwBtns: none;
|
||||
$shdwBtnsOverlay: none;
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: pushBack($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
$timeControllerToiLineColor: $colorBodyFg;
|
||||
$timeControllerToiLineColorHov: #0052b5;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
|
||||
// Foundation Colors
|
||||
$colorAlt1: #776ba2;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#000, 0.05);
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
|
||||
$colorTick: rgba(black, 0.2);
|
||||
$colorSelectableSelectedPrimary: $colorKey;
|
||||
$colorSelectableHov: rgba($colorBodyFg, 0.4);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||
$colorMenuIc: $colorKey;
|
||||
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
|
||||
$colorMenuHovFg: $colorMenuFg;
|
||||
$colorMenuHovIc: $colorMenuIc;
|
||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||
$shdwMenuText: none;
|
||||
$colorCreateMenuLgIcon: $colorKey;
|
||||
$colorCreateMenuText: $colorBodyFg;
|
||||
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
$colorFormLines: rgba(#000, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.05);
|
||||
$colorInputBg: $colorGenBg;
|
||||
$colorInputFg: $colorBodyFg;
|
||||
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
|
||||
$colorFormText: pushBack($colorBodyFg, 10%);
|
||||
$colorInputIcon: pushBack($colorBodyFg, 25%);
|
||||
$colorFieldHint: pullForward($colorBodyFg, 40%);
|
||||
|
||||
// Inspector
|
||||
$colorInspectorBg: pullForward($colorBodyBg, 5%);
|
||||
$colorInspectorFg: $colorBodyFg;
|
||||
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
|
||||
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusBtnBg: #666;
|
||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||
$colorProgressBarAmt: #0a0;
|
||||
$progressBarHOverlay: 15px;
|
||||
$progressBarStripeW: 20px;
|
||||
$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
|
||||
$animPausedPulseDur: 1s;
|
||||
|
||||
// Indicator colors
|
||||
$colorIndicatorAvailable: $colorKey;
|
||||
$colorIndicatorDisabled: #444;
|
||||
$colorIndicatorOn: $colorOk;
|
||||
$colorIndicatorOff: #666;
|
||||
|
||||
// Selects
|
||||
$colorSelectBg: $colorBtnBg;
|
||||
$colorSelectFg: $colorBtnFg;
|
||||
|
||||
// Limits and staleness colors//
|
||||
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
||||
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
||||
$styleTelemStale: italic;
|
||||
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
|
||||
$colorLimitYellowIc: #ffaa00;
|
||||
$colorLimitRedBg: rgba(red, 0.3);
|
||||
$colorLimitRedIc: red;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleBg: $colorMenuBg;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
||||
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);//
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
||||
$durLargeViewExpand: 250ms;
|
||||
|
||||
// Items
|
||||
$colorItemBg: #ddd;
|
||||
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
|
||||
$colorItemFg: $colorBodyFg;
|
||||
$colorItemFgDetails: pushBack($colorItemFg, 15%);
|
||||
$colorItemIc: $colorKey;
|
||||
$colorItemSubIcons: $colorItemFgDetails;
|
||||
$colorItemOpenIcon: $colorItemFgDetails;
|
||||
$shdwItemText: none;
|
||||
$colorItemBgSelected: $colorKey;
|
||||
|
||||
// Tabular
|
||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
|
||||
$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBorder: $colorBodyBg;
|
||||
|
||||
// Plot
|
||||
$colorPlotBg: rgba(black, 0.05);
|
||||
$colorPlotFg: $colorBodyFg;
|
||||
$colorPlotHash: black;
|
||||
$opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: #f5f5f5;
|
||||
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
||||
$colorItemTreeIcon: $colorKey;
|
||||
$colorItemTreeIconHover: $colorItemTreeIcon;
|
||||
$colorItemTreeFg: $colorBodyFg;
|
||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||
$colorItemTreeSelectedFg: $colorBodyBg;
|
||||
$colorItemTreeEditingBg: #caf1ff;
|
||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||
$colorItemTreeVC: $colorBodyFg;
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
$colorThumbHoverBg: $colorItemTreeHoverBg;
|
||||
|
||||
// Scrollbar
|
||||
$scrollbarTrackSize: 7px;
|
||||
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.2);
|
||||
$scrollbarThumbColor: darken($colorBodyBg, 50%);
|
||||
$scrollbarThumbColorHov: $colorKey;
|
||||
$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
|
||||
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
|
||||
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
|
||||
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
|
||||
|
||||
// Splitter
|
||||
// All splitterD* values MUST both be either odd or even numbers
|
||||
$splitterD: 16px;
|
||||
$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
|
||||
$splitterHandleD: 4px;
|
||||
$colorSplitterBaseBg: $colorBodyBg;
|
||||
$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
|
||||
$splitterShdw: none;
|
||||
$splitterEndCr: none;
|
||||
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
|
||||
$colorSplitterActive: $colorKey;
|
||||
|
||||
// Minitabs
|
||||
$colorMiniTabBg: $colorSplitterBg;
|
||||
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
|
||||
$colorMiniTabBgHov: $colorSplitterHover;
|
||||
$colorMiniTabFgHov: #fff;
|
||||
|
||||
// Mobile
|
||||
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
||||
$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
|
||||
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
|
||||
|
||||
// Datetime Picker, Calendar
|
||||
$colorCalCellHovBg: $colorKey;
|
||||
$colorCalCellHovFg: $colorKeyFg;
|
||||
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
||||
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
||||
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
|
||||
|
||||
// Palettes
|
||||
$colorPaletteFg: pullForward($colorMenuBg, 30%);
|
||||
$colorPaletteSelected: #333;
|
||||
$shdwPaletteFg: none;
|
||||
$shdwPaletteSelected: inset 0 0 0 1px #fff;
|
||||
|
||||
// About Screen
|
||||
$colorAboutLink: #84b3ff;
|
||||
|
||||
// Loading
|
||||
$colorLoadingFg: $colorAlt1;
|
||||
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
||||
0
src/styles-new/_controls.scss
Normal file
0
src/styles-new/_controls.scss
Normal file
@ -48,8 +48,6 @@ a {
|
||||
|
||||
body, html {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
//background-color: $colorBodyBg;
|
||||
//color: $colorBodyFg;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
@ -57,6 +55,11 @@ body, html {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $colorBodyBg;
|
||||
color: $colorBodyFg;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import "vendor/normalize.min.css";
|
||||
@import "constants";
|
||||
@import "constants-snow";
|
||||
@import "global";
|
||||
@import "glyphs";
|
||||
@ -6,45 +6,44 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/constants";
|
||||
@import "~styles/constants-snow";
|
||||
|
||||
.c-splitter {
|
||||
$c: #06f;
|
||||
$s: 10px;
|
||||
$size: $splitterHandleD;
|
||||
$margin: 0px;
|
||||
$hitMargin: 7px;
|
||||
|
||||
background: $colorSplitterBg;
|
||||
|
||||
&:before {
|
||||
// Bigger hit area
|
||||
content: '';
|
||||
display: block;
|
||||
background: #ccc;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($c, 0.3);
|
||||
&:before {
|
||||
background: $c;
|
||||
}
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&-vertical {
|
||||
cursor: col-resize;
|
||||
width: $s;
|
||||
width: $size;
|
||||
margin: 0 $margin;
|
||||
&:before {
|
||||
// Divider line
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0; right: $hitMargin * -1; bottom: 0; left: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
cursor: row-resize;
|
||||
height: $s;
|
||||
height: $size;
|
||||
margin: $margin 0;
|
||||
&:before {
|
||||
// Divider line
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
top: $hitMargin * -1; right: 0; bottom: $hitMargin * -1; left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/constants";
|
||||
@import "~styles/constants-snow";
|
||||
|
||||
/******************************* SHELL */
|
||||
.l-shell {
|
||||
@ -40,8 +41,7 @@
|
||||
|
||||
/********** STATUS AREA */
|
||||
&__status {
|
||||
background: #666;
|
||||
color: #ccc;
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
flex: 0 1 auto;
|
||||
height: 40px;
|
||||
order: 1;
|
||||
@ -57,13 +57,12 @@
|
||||
}
|
||||
|
||||
&__object-view {
|
||||
background: #cc0;
|
||||
flex: 1 1 auto;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__time-conductor {
|
||||
background: #cac;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
min-height: 50px;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
@ -83,7 +82,7 @@
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
background: #f90;
|
||||
background: $colorTreeBg;
|
||||
padding: $interiorMarginLg;
|
||||
width: 300px
|
||||
}
|
||||
|
||||
@ -20,7 +20,6 @@
|
||||
height: 100%;
|
||||
|
||||
> [class*="__"] {
|
||||
background: #f9c;
|
||||
min-height: 50px;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user