ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-16 07:26:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Style Guide updates for status classes

Browse Source 
Fixes #1677
WIP, needs regression unit testing
This commit is contained in:
Charles Hacskaylo 2017-08-22 10:09:01 -07:00
parent 747afa6200
commit e6c78f6d8b
1 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
example/styleguide/res/templates/status.html
View File

@ -80,18 +80,29 @@
<div class="col">
<p>Classes here can be applied to elements as needed.</p>
<ul>
<li><code>s-status-warning-hi</code>: Nuke the entire site from orbit - it's the only way to be sure.</li>
<li><code>s-status-warning-lo</code>: Pay attention to this.</li>
<li><code>s-status-diagnostic</code>: Something in the code wants to talk to you.</li>
<li><code>s-status-info</code>: What?! What?! Oh, ok.</li>
<li><code>s-status-ok</code>: Whew! Hand me a beer would'ya?</li>
<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>
<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>
</div>
<mct-example><div class="s-status-warning-hi-icon">WARNING HI</div>
<div class="s-status-warning-lo-icon">WARNING LOW</div>
<div class="s-status-diagnostic-icon">DIAGNOSTIC</div>
<div class="s-status-info-icon">INFO</div>
<div class="s-status-ok-icon">OK</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>