mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
Bring in legacy CSS
- Legacy styles from old _global.scss moved into section of new _global file; - Most UI elements are working - TODO: fix Inspector grid
This commit is contained in:
charlesh88
parent
8d4734ef5b
commit
5aa2be9761
@ -15,5 +15,7 @@ $interiorMarginLg: 10px;
|
||||
$inputTextPTopBtm: 2px;
|
||||
$inputTextPLeftRight: 5px;
|
||||
$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
|
||||
|
||||
$treeTypeIconW: 18px;
|
||||
|
||||
/************************** VISUAL */
|
||||
$controlDisabledOpacity: 0.3;
|
||||
@ -37,7 +37,7 @@ div {
|
||||
}
|
||||
|
||||
/******************************* BROWSER ELEMENTS */
|
||||
body {
|
||||
body.desktop {
|
||||
::-webkit-scrollbar {
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset $scrollbarTrackShdw;
|
||||
@ -69,20 +69,24 @@ body {
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $colorAHov;
|
||||
}
|
||||
}
|
||||
|
||||
body, html {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
background-color: $colorBodyBg;
|
||||
color: $colorBodyFg;
|
||||
}
|
||||
@ -113,7 +117,7 @@ h1, h2, h3 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7em;
|
||||
font-size: 1em;
|
||||
font-weight: normal !important;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 120%;
|
||||
@ -130,3 +134,165 @@ ol, ul {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/************************** LEGACY? */
|
||||
|
||||
mct-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", monospace;
|
||||
font-size: 0.7em;
|
||||
line-height: 150%;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.codehilite {
|
||||
@extend .code;
|
||||
background-color: rgba($colorBodyFg, 0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.disabled,
|
||||
a.disabled {
|
||||
opacity: $controlDisabledOpacity;
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.s-status-missing {
|
||||
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
|
||||
.t-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
|
||||
.item .t-item-icon-glyph:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Object header. Expects .s-status-missing to be applied to mct-representation.object-header
|
||||
&.object-header {
|
||||
.type-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree item. Expects .s-status-missing to be applied to .tree-item,
|
||||
// and mct-representation.search-item
|
||||
&.tree-item,
|
||||
&.search-item {
|
||||
> .rep-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
// aka selection = "None". Used in palettes and their menu buttons.
|
||||
$c: red; $s: 48%; $e: 52%;
|
||||
background-image: linear-gradient(-45deg,
|
||||
transparent $s - 5%,
|
||||
$c $s,
|
||||
$c $e,
|
||||
transparent $e + 5%
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
|
||||
.scrolling,
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
&.scroll-pad {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll--persist {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.slidable {
|
||||
cursor: move; // Fallback
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
&.horz {
|
||||
cursor: col-resize;
|
||||
}
|
||||
&.vert {
|
||||
cursor: row-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ds {
|
||||
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden,
|
||||
.t-main-view .hide-in-t-main-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide-nice {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: rgba(#fff, 0.2);
|
||||
}
|
||||
|
||||
.comma-list span {
|
||||
&:not(:first-child) {
|
||||
&:before { content: ', '; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,3 +4,9 @@
|
||||
/******************** RENDERS CSS */
|
||||
@import "global";
|
||||
@import "controls";
|
||||
|
||||
/******************** LEGACY CSS */
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "bourbon";
|
||||
@import "legacy-styles";
|
||||
|
||||
|
||||
79
src/styles-new/legacy-styles.scss
Normal file
79
src/styles-new/legacy-styles.scss
Normal file
@ -0,0 +1,79 @@
|
||||
@import "../styles/mixins";
|
||||
@import "../styles/mobile/mixins";
|
||||
@import "../styles/themes/snow/mixins";
|
||||
|
||||
@import "../styles/constants";
|
||||
@import "../styles/mobile/constants";
|
||||
@import "../styles/themes/snow/constants";
|
||||
|
||||
@import "../styles/animations";
|
||||
@import "../styles/effects";
|
||||
@import "../styles/glyphs";
|
||||
@import "../styles/animations";
|
||||
//@import "../styles/global";
|
||||
@import "../styles/archetypes";
|
||||
//@import "../styles/about";
|
||||
//@import "../styles/text";
|
||||
@import "../styles/icons";
|
||||
@import "../styles/status";
|
||||
@import "../styles/data-status";
|
||||
@import "../styles/helpers/bubbles";
|
||||
//@import "../styles/helpers/splitter";
|
||||
@import "../styles/helpers/wait-spinner";
|
||||
@import "../styles/inspector";
|
||||
//
|
||||
//!********************************* CONTROLS *!
|
||||
//@import "../styles/controls/breadcrumb";
|
||||
@import "../styles/controls/buttons";
|
||||
@import "../styles/controls/palette";
|
||||
@import "../styles/controls/controls";
|
||||
@import "../styles/controls/lists";
|
||||
@import "../styles/controls/menus";
|
||||
@import "../styles/controls/messages";
|
||||
@import "../styles/controls/indicators";
|
||||
@import "../styles/mobile/controls/menus";
|
||||
//
|
||||
//!********************************* FORMS *!
|
||||
@import "../styles/forms/elems";
|
||||
@import "../styles/forms/channel-selector";
|
||||
@import "../styles/forms/datetime";
|
||||
@import "../styles/forms/validation";
|
||||
@import "../styles/forms/filter";
|
||||
//
|
||||
//!********************************* USER ENVIRON *!
|
||||
@import "../styles/user-environ/layout";
|
||||
@import "../styles/mobile/layout";
|
||||
@import "../styles/edit/editor";
|
||||
//@import "../styles/search/search";
|
||||
//@import "../styles/mobile/search/search";
|
||||
@import "../styles/overlay/overlay";
|
||||
//@import "../styles/tree/tree";
|
||||
@import "../styles/object-label";
|
||||
//@import "../styles/mobile/tree";
|
||||
@import "../styles/user-environ/frame";
|
||||
@import "../styles/user-environ/top-bar";
|
||||
@import "../styles/user-environ/tool-bar";
|
||||
@import "../styles/user-environ/selecting";
|
||||
//
|
||||
//!********************************* VIEWS *!
|
||||
@import "../styles/fixed-position";
|
||||
@import "../styles/lists/tabular";
|
||||
@import "../styles/plots/plots-main";
|
||||
@import "../styles/plots/legend";
|
||||
@import "../styles/iframe";
|
||||
@import "../styles/views";
|
||||
@import "../styles/items/item";
|
||||
@import "../styles/mobile/item";
|
||||
@import "../styles/table";
|
||||
@import "../styles/notebook/notebook";
|
||||
//
|
||||
//!********************************* TO BE MOVED *!
|
||||
@import "../styles/autoflow";
|
||||
@import "../styles/features/imagery";
|
||||
@import "../styles/features/time-display";
|
||||
@import "../styles/widgets";
|
||||
//
|
||||
//!********************************* APP STARTUP *!
|
||||
//@import "../styles/app-start";
|
||||
|
||||
@import "../styles/conductor/time-conductor-snow";
|
||||
@ -72,6 +72,7 @@
|
||||
&__main-container {
|
||||
// Wrapper for main views
|
||||
$m: $interiorMargin;
|
||||
font-size: 16px; // TEMP FOR LEGACY STYLING
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user