mirror of
https://github.com/nasa/openmct.git
synced 2025-01-18 18:57:01 +00:00
Merge pull request #1683 from nasa/limits-1677
Review limit and status CSS classes
This commit is contained in:
Victor Woeltjen
GitHub
commit
a4d8e8ff90
@ -16,6 +16,7 @@ define([
|
||||
{ "key": "styleguide.intro", "name": "Introduction", "cssClass": "icon-page", "description": "Introduction and overview to the style guide" },
|
||||
{ "key": "styleguide.standards", "name": "Standards", "cssClass": "icon-page", "description": "" },
|
||||
{ "key": "styleguide.colors", "name": "Colors", "cssClass": "icon-page", "description": "" },
|
||||
{ "key": "styleguide.status", "name": "status", "cssClass": "icon-page", "description": "Limits, telemetry paused, etc." },
|
||||
{ "key": "styleguide.glyphs", "name": "Glyphs", "cssClass": "icon-page", "description": "Glyphs overview" },
|
||||
{ "key": "styleguide.controls", "name": "Controls", "cssClass": "icon-page", "description": "Buttons, selects, HTML controls" },
|
||||
{ "key": "styleguide.input", "name": "Text Inputs", "cssClass": "icon-page", "description": "Various text inputs" },
|
||||
@ -25,6 +26,7 @@ define([
|
||||
{ "key": "styleguide.intro", "type": "styleguide.intro", "templateUrl": "templates/intro.html", "editable": false },
|
||||
{ "key": "styleguide.standards", "type": "styleguide.standards", "templateUrl": "templates/standards.html", "editable": false },
|
||||
{ "key": "styleguide.colors", "type": "styleguide.colors", "templateUrl": "templates/colors.html", "editable": false },
|
||||
{ "key": "styleguide.status", "type": "styleguide.status", "templateUrl": "templates/status.html", "editable": false },
|
||||
{ "key": "styleguide.glyphs", "type": "styleguide.glyphs", "templateUrl": "templates/glyphs.html", "editable": false },
|
||||
{ "key": "styleguide.controls", "type": "styleguide.controls", "templateUrl": "templates/controls.html", "editable": false },
|
||||
{ "key": "styleguide.input", "type": "styleguide.input", "templateUrl": "templates/input.html", "editable": false },
|
||||
@ -47,6 +49,7 @@ define([
|
||||
"intro",
|
||||
"standards",
|
||||
"colors",
|
||||
"status",
|
||||
"glyphs",
|
||||
"styleguide:ui-elements"
|
||||
]
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
color: $colorKey;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: pullForward($colorBodyFg, 20%);
|
||||
h1, h2, strong, b {
|
||||
color: pullForward($colorBodyFg, 50%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -45,6 +45,10 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
strong, b {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.w-markup {
|
||||
//Wrap markup example "pre" element
|
||||
background-color: $colorCode;
|
||||
@ -54,6 +58,12 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.w-mct-example {
|
||||
div {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
font-size: 0.8rem;
|
||||
|
||||
@ -4,5 +4,5 @@
|
||||
<pre></pre>
|
||||
</span>
|
||||
<h3>Example</h3>
|
||||
<div></div>
|
||||
<div class="w-mct-example"></div>
|
||||
</div>
|
||||
|
||||
142
example/styleguide/res/templates/status.html
Normal file
142
example/styleguide/res/templates/status.html
Normal file
@ -0,0 +1,142 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2016, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT 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 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.
|
||||
-->
|
||||
<style>
|
||||
.w-mct-example div[class*="s-limit"],
|
||||
.w-mct-example div[class*="s-status"],
|
||||
.w-mct-example div[class*="s-unsynced"],
|
||||
.w-mct-example span[class*="s-limit"] {
|
||||
border-radius: 4px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
.w-mct-example table {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<div class="l-style-guide s-text">
|
||||
<p class="doc-title">Open MCT Style Guide</p>
|
||||
<h1>Status Indication</h1>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Overview</h2>
|
||||
<p>Many elements in Open MCT need to articulate a dynamic status; Open MCT provides the following styles and conventions to handle this:</p>
|
||||
<ul>
|
||||
<li><strong>Limits</strong>: when telemetry values exceed minimum or maximum values, they can be violating limits. Limit styles include both color and iconography; color is used to indicate severity while icons are used to indicate direction, upper or lower.</li>
|
||||
<li><strong>Status</strong>: Open MCT also provides a number or built-in Status styles allowing telemetry or other displayed information to be visually classified by type. Common uses for these classes are to visually denote event records.</li>
|
||||
<li><strong>Synchronization</strong>: When the system is displaying real-time data, it is very important that displays clearly indicate when they are not doing so, such as when a plot if frozen while panning or zooming. Open MCT provides a style for this.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Limits</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Limit CSS classes can be applied to any block or inline element. Open MCT limit classes set color and optionally an icon, but don't effect other properties. Yellow and red limit classes can be used as is, or allow the application of any custom icon available in Open MCT's glyphs library. "Level" limit classes - upper and lower - always use an icon in addition to a color; Open MCT doesn't support level limits without color.</p>
|
||||
<ul>
|
||||
<li>Color only</li>
|
||||
<ul>
|
||||
<li><code>s-limit-yellow</code>: A yellow limit.</li>
|
||||
<li><code>s-limit-red</code>: A red limit.</li>
|
||||
</ul>
|
||||
<li>Color and icon</li>
|
||||
<ul>
|
||||
<li><code>s-limit-yellow-icon</code>: A yellow limit with icon.</li>
|
||||
<li><code>s-limit-red-icon</code>: A red limit with icon.</li>
|
||||
</ul>
|
||||
<li>Upper and lower limit indicators. Must be used with a color limit class to be visible.</li>
|
||||
<ul>
|
||||
<li><code>s-limit-upr</code>: Upper limit.
|
||||
</li>
|
||||
<li><code>s-limit-lwr</code>: Lower limit.
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
<mct-example><div class="s-limit-yellow">Yellow limit</div>
|
||||
<div class="s-limit-red">Red limit</div>
|
||||
<div class="s-limit-yellow-icon">Yellow limit with icon</div>
|
||||
<div class="s-limit-red-icon">Red limit with icon</div>
|
||||
<div class="s-limit-yellow s-limit-lwr">Lower yellow limit</div>
|
||||
<div class="s-limit-red s-limit-upr">Upper red limit</div>
|
||||
<div class="s-limit-red icon-bell">Red Limit with a custom icon</div>
|
||||
<div>Some text with an <span class="s-limit-yellow-icon">inline element</span> showing a yellow limit.</div>
|
||||
|
||||
<!-- Limits applied in a table -->
|
||||
<table>
|
||||
<tr class='header'><td>Name</td><td>Value 1</td><td>Value 2</td></tr>
|
||||
<tr><td>ENG_PWR 4991</td><td>7.023</td><td class="s-limit-yellow s-limit-upr">70.23</td></tr>
|
||||
<tr><td>ENG_PWR 4992</td><td>49.784</td><td class="s-limit-red s-limit-lwr">-121.22</td></tr>
|
||||
<tr><td>ENG_PWR 4993</td><td class="s-limit-yellow icon-bell">0.451</td><td>1.007</td></tr>
|
||||
</table>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Status</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>Classes here can be applied to elements as needed.</p>
|
||||
<ul>
|
||||
<li>Color only</li>
|
||||
<ul>
|
||||
<li><code>s-status-warning-hi</code></li>
|
||||
<li><code>s-status-warning-lo</code></li>
|
||||
<li><code>s-status-diagnostic</code></li>
|
||||
<li><code>s-status-info</code></li>
|
||||
<li><code>s-status-ok</code></li>
|
||||
</ul>
|
||||
<li>Color and icon</li>
|
||||
<ul>
|
||||
<li><code>s-status-warning-hi-icon</code></li>
|
||||
<li><code>s-status-warning-lo-icon</code></li>
|
||||
<li><code>s-status-diagnostic-icon</code></li>
|
||||
<li><code>s-status-info-icon</code></li>
|
||||
<li><code>s-status-ok-icon</code></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
<mct-example><div class="s-status-warning-hi">WARNING HI</div>
|
||||
<div class="s-status-warning-lo">WARNING LOW</div>
|
||||
<div class="s-status-diagnostic">DIAGNOSTIC</div>
|
||||
<div class="s-status-info">INFO</div>
|
||||
<div class="s-status-ok">OK</div>
|
||||
<div class="s-status-warning-hi-icon">WARNING HI with icon</div>
|
||||
<div class="s-status-warning-lo-icon">WARNING LOW with icon</div>
|
||||
<div class="s-status-diagnostic-icon">DIAGNOSTIC with icon</div>
|
||||
<div class="s-status-info-icon">INFO with icon</div>
|
||||
<div class="s-status-ok-icon">OK with icon</div>
|
||||
<div class="s-status-warning-hi icon-gear">WARNING HI with custom icon</div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="l-section">
|
||||
<h2>Synchronization</h2>
|
||||
<div class="cols cols1-1">
|
||||
<div class="col">
|
||||
<p>When the system is operating in real-time streaming mode, it is important for views that display real-time data to clearly articulate when they are not, such as when a user zooms or pans a plot view, freezing that view. In that case, the CSS class <code>s-unsynced</code> should be applied to that view.</p>
|
||||
</div>
|
||||
<mct-example><div class="s-unsynced">This element is unsynced</div>
|
||||
</mct-example>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -34,6 +34,7 @@ define(
|
||||
pages['standards'] = { name: "Standards", type: "styleguide.standards", location: "styleguide:home" };
|
||||
pages['colors'] = { name: "Colors", type: "styleguide.colors", location: "styleguide:home" };
|
||||
pages['glyphs'] = { name: "Glyphs", type: "styleguide.glyphs", location: "styleguide:home" };
|
||||
pages['status'] = { name: "Status Indication", type: "styleguide.status", location: "styleguide:home" };
|
||||
pages['controls'] = { name: "Controls", type: "styleguide.controls", location: "styleguide:ui-elements" };
|
||||
pages['input'] = { name: "Text Inputs", type: "styleguide.input", location: "styleguide:ui-elements" };
|
||||
pages['menus'] = { name: "Menus", type: "styleguide.menus", location: "styleguide:ui-elements" };
|
||||
|
||||
@ -1,3 +1,24 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
@mixin glyphBefore($unicode, $family: 'symbolsfont') {
|
||||
&:before {
|
||||
content: $unicode;
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
@mixin limitGlyph($iconColor, $glyph: $glyph-icon-alert-triangle) {
|
||||
&:before {
|
||||
color: $iconColor;
|
||||
content: $glyph;
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.8em;
|
||||
display: inline;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.s-limit-red { background: $colorLimitRedBg !important; }
|
||||
.s-limit-yellow { background: $colorLimitYellowBg !important; }
|
||||
|
||||
// Handle limit when applied to a tr
|
||||
tr[class*="s-limit"] {
|
||||
&.s-limit-red td:first-child {
|
||||
@include limitGlyph($colorLimitRedIc);
|
||||
}
|
||||
&.s-limit-yellow td:first-child {
|
||||
@include limitGlyph($colorLimitYellowIc);
|
||||
}
|
||||
&.s-limit-upr td:first-child:before { content: $glyph-icon-arrow-double-up; }
|
||||
&.s-limit-lwr td:first-child:before { content: $glyph-icon-arrow-double-down; }
|
||||
}
|
||||
|
||||
// Handle limit when applied directly to a non-tr element
|
||||
// Assume this is applied to the element that displays the limit value
|
||||
:not(tr)[class*="s-limit"] {
|
||||
&.s-limit-red {
|
||||
@include limitGlyph($colorLimitRedIc);
|
||||
}
|
||||
&.s-limit-yellow {
|
||||
@include limitGlyph($colorLimitYellowIc);
|
||||
}
|
||||
&.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
|
||||
&.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
|
||||
}
|
||||
@ -27,7 +27,7 @@
|
||||
@import "about";
|
||||
@import "text";
|
||||
@import "icons";
|
||||
@import "limits";
|
||||
@import "status";
|
||||
@import "data-status";
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
|
||||
86
platform/commonUI/general/res/sass/_status.scss
Normal file
86
platform/commonUI/general/res/sass/_status.scss
Normal file
@ -0,0 +1,86 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2017, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
/*************************************************** MIXINS */
|
||||
@mixin formulateStatusColors($c) {
|
||||
// Sets bg and icon colors for elements
|
||||
background: rgba($c, 0.4) !important;
|
||||
&:before { color: $c !important; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*************************************************** GENERAL */
|
||||
.s-limit-yellow,
|
||||
.s-limit-red,
|
||||
.s-limit-yellow-icon,
|
||||
.s-limit-red-icon,
|
||||
.s-status-warning-lo,
|
||||
.s-status-warning-hi,
|
||||
.s-status-diagnostic,
|
||||
.s-status-command,
|
||||
.s-status-info,
|
||||
.s-status-ok,
|
||||
.s-status-warning-lo-icon,
|
||||
.s-status-warning-hi-icon,
|
||||
.s-status-diagnostic-icon,
|
||||
.s-status-command-icon,
|
||||
.s-status-info-icon,
|
||||
.s-status-ok-icon {
|
||||
@include trans-prop-nice($props: background, $dur: 500ms);
|
||||
&:before {
|
||||
content:'';
|
||||
font-family: symbolsfont;
|
||||
font-size: 0.8em;
|
||||
display: inline;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************************************************** LIMITS */
|
||||
.s-limit-yellow, .s-limit-yellow-icon {
|
||||
@include formulateStatusColors($colorWarningLo);
|
||||
}
|
||||
|
||||
.s-limit-red, .s-limit-red-icon {
|
||||
@include formulateStatusColors($colorWarningHi);
|
||||
}
|
||||
|
||||
.s-limit-upr:before { content: $glyph-icon-arrow-double-up; }
|
||||
.s-limit-lwr:before { content: $glyph-icon-arrow-double-down; }
|
||||
.s-limit-yellow-icon:before,
|
||||
.s-limit-red-icon:before { content: $glyph-icon-alert-triangle; }
|
||||
|
||||
/*************************************************** STATUS */
|
||||
.s-status-warning-hi, .s-status-warning-hi-icon { @include formulateStatusColors($colorWarningHi); }
|
||||
.s-status-warning-lo, .s-status-warning-lo-icon { @include formulateStatusColors($colorWarningLo); }
|
||||
.s-status-diagnostic, .s-status-diagnostic-icon { @include formulateStatusColors($colorDiagnostic); }
|
||||
.s-status-info, .s-status-info-icon { @include formulateStatusColors($colorInfo); }
|
||||
.s-status-ok, .s-status-ok-icon { @include formulateStatusColors($colorOk); }
|
||||
|
||||
.s-status-warning-hi-icon:before { content: $glyph-icon-alert-triangle; }
|
||||
.s-status-warning-lo-icon:before { content: $glyph-icon-alert-rect; }
|
||||
.s-status-diagnostic-icon:before { content: $glyph-icon-eye-open; }
|
||||
.s-status-info-icon:before { content: $glyph-icon-info; }
|
||||
.s-status-ok-icon:before { content: $glyph-icon-check; }
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
// Status coloring
|
||||
.ok, .info {
|
||||
.status-indicator {
|
||||
color: $colorStatusInfo;
|
||||
color: $colorInfo;
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,15 +224,15 @@
|
||||
}
|
||||
&.ok,
|
||||
&.info {
|
||||
@include statusBannerColors($colorStatusInfo);
|
||||
@include statusBannerColors($colorInfo);
|
||||
}
|
||||
&.caution,
|
||||
&.warning,
|
||||
&.alert {
|
||||
@include statusBannerColors($colorStatusAlert);
|
||||
@include statusBannerColors($colorWarningLo);
|
||||
}
|
||||
&.error {
|
||||
@include statusBannerColors($colorStatusError);
|
||||
@include statusBannerColors($colorWarningHi);
|
||||
}
|
||||
}
|
||||
|
||||
@ -248,15 +248,15 @@
|
||||
|
||||
.message-severity-info .type-icon.message-type {
|
||||
@extend .icon-info;
|
||||
color: $colorStatusInfo;
|
||||
color: $colorInfo;
|
||||
}
|
||||
.message-severity-alert .type-icon.message-type {
|
||||
@extend .icon-bell;
|
||||
color: $colorStatusAlert;
|
||||
color: $colorWarningLo;
|
||||
}
|
||||
.message-severity-error .type-icon.message-type {
|
||||
@extend .icon-alert-rect;
|
||||
color: $colorStatusError;
|
||||
color: $colorWarningHi;
|
||||
}
|
||||
}
|
||||
/* Paths:
|
||||
|
||||
@ -53,9 +53,15 @@ $timeControllerToiLineColor: #00c2ff;
|
||||
$timeControllerToiLineColorHov: #fff;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
|
||||
// General Colors
|
||||
// Foundation Colors
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #cc0000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
@ -84,8 +90,8 @@ $colorCreateMenuText: $colorMenuFg;
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorAlt1;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #990000;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormInvalid: #ff3300;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
@ -109,8 +115,8 @@ $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #ccc;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #62ba72;
|
||||
$colorStatusAlert: #ffa66d;
|
||||
$colorStatusInfo: $colorInfo;
|
||||
$colorStatusAlert: $colorAlert;
|
||||
$colorStatusError: #d4585c;
|
||||
$colorStatusAvailable: $colorKey;
|
||||
$colorStatusBtnBg: $colorBtnBg;
|
||||
@ -125,14 +131,14 @@ $animPausedPulseDur: 500ms;
|
||||
$colorSelectBg: $colorBtnBg;
|
||||
$colorSelectFg: $colorBtnFg;
|
||||
|
||||
// Limits and staleness colors
|
||||
// Limits, status 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;
|
||||
$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
|
||||
$colorLimitYellowIc: $colorWarningLo;
|
||||
$colorLimitRedBg: rgba($colorWarningHi, 0.3);
|
||||
$colorLimitRedIc: $colorWarningHi;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
|
||||
@ -13,3 +13,10 @@
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
}
|
||||
|
||||
@function bgFg($c) {
|
||||
// Given a single color, return valid background and foreground versions of that color
|
||||
$bg: darken($c, 20%);
|
||||
$fg: lighten($c, 20%);
|
||||
@return $bg, $fg;
|
||||
}
|
||||
|
||||
@ -53,9 +53,15 @@ $timeControllerToiLineColor: $colorBodyFg;
|
||||
$timeControllerToiLineColorHov: #0052b5;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
|
||||
// General Colors
|
||||
// Foundation Colors
|
||||
$colorAlt1: #776ba2;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
@ -84,8 +90,8 @@ $colorCreateMenuText: $colorBodyFg;
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: #33cc33;
|
||||
$colorFormError: #990000;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
@ -107,7 +113,7 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #fff;
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
|
||||
@ -12,3 +12,11 @@
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
@function bgFg($c) {
|
||||
// Given a single color, return valid background and foreground versions of that color
|
||||
$bg: darken($c, 20%);
|
||||
$fg: lighten($c, 20%);
|
||||
@return $bg, $fg;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user