ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 13:17:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1318 from nasa/open1315

Browse Source 
Add styling for .s-status-missing
This commit is contained in:
Victor Woeltjen 2016-11-15 12:56:26 -08:00 committed by GitHub
commit 3dade275d4
2 changed files with 87 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
platform/commonUI/general/res/sass/_global.scss
View File

@ -21,18 +21,18 @@
*****************************************************************************/ *****************************************************************************/
/************************** FONTS */ /************************** FONTS */
@font-face { @font-face {
/* /*
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json * Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json
* to generate font files * to generate font files
*/ */
font-family: 'symbolsfont'; font-family: 'symbolsfont';
src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.eot'); src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.eot');
src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.eot?#iefix') format('embedded-opentype'), src: url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.eot?#iefix') format('embedded-opentype'),
url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.woff') format('woff'), url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.woff') format('woff'),
url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.ttf') format('truetype'), url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.ttf') format('truetype'),
url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.svg') format('svg'); url($dirCommonRes + 'fonts/symbols/openmct-symbols-16px.svg') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
@ -52,53 +52,53 @@
/************************** HTML ENTITIES */ /************************** HTML ENTITIES */
a { a {
color: $colorA; color: $colorA;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $colorAHov; color: $colorAHov;
} }
} }
body, html { body, html {
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
background-color: $colorBodyBg; background-color: $colorBodyBg;
color: $colorBodyFg; color: $colorBodyFg;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%; font-size: 100%;
font-weight: 200; font-weight: 200;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
em { em {
font-style: normal; font-style: normal;
} }
input, textarea { input, textarea {
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
} }
input[type="text"], input[type="text"],
input[type="search"] { input[type="search"] {
vertical-align: baseline; vertical-align: baseline;
padding: $inputTextP; padding: $inputTextP;
} }
h1, h2, h3 { h1, h2, h3 {
margin: 0; margin: 0;
} }
h1 { h1 {
font-size: 1.7em; font-size: 1.7em;
font-weight: normal !important; font-weight: normal !important;
line-height: 120%; line-height: 120%;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 0; margin-top: 0;
} }
p { p {
margin-bottom: $interiorMarginLg; margin-bottom: $interiorMarginLg;
} }
ol, ul { ol, ul {
@ -108,30 +108,30 @@ ol, ul {
} }
mct-container { mct-container {
display: block; display: block;
} }
.abs { .abs {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: auto; height: auto;
width: auto; width: auto;
} }
.code { .code {
font-family: "Lucida Console", monospace; font-family: "Lucida Console", monospace;
font-size: 0.7em; font-size: 0.7em;
line-height: 150%; line-height: 150%;
white-space: pre; white-space: pre;
} }
.codehilite { .codehilite {
@extend .code; @extend .code;
background-color: rgba($colorBodyFg, 0.1); background-color: rgba($colorBodyFg, 0.1);
padding: 1em; padding: 1em;
} }
.disabled, .disabled,
@ -141,12 +141,41 @@ a.disabled {
cursor: default !important; cursor: default !important;
} }
.s-status-missing {
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
// .t-object-label
.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 { .align-right {
text-align: right; text-align: right;
} }
.centered { .centered {
text-align: center; text-align: center;
} }
.ellipsis { .ellipsis {
@ -155,24 +184,24 @@ a.disabled {
.scrolling, .scrolling,
.scroll { .scroll {
overflow: auto; overflow: auto;
} }
.vscroll { .vscroll {
overflow-y: auto; overflow-y: auto;
} }
.no-margin { .no-margin {
margin: 0; margin: 0;
} }
.ds { .ds {
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px; box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
} }
.hide, .hide,
.hidden { .hidden {
display: none !important; display: none !important;
} }
.off { .off {
@ -186,7 +215,7 @@ a.disabled {
} }
.sep { .sep {
color: rgba(#fff, 0.2); color: rgba(#fff, 0.2);
} }
.test-stripes { .test-stripes {

2
platform/commonUI/general/res/sass/_main.scss
View File

@ -20,9 +20,9 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@import "effects"; @import "effects";
@import "global";
@import "glyphs"; @import "glyphs";
@import "animations"; @import "animations";
@import "global";
@import "archetypes"; @import "archetypes";
@import "about"; @import "about";
@import "text"; @import "text";