ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-18 15:18:12 +00:00
Code Issues Actions 4 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
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"> <div class="col">
<p>Classes here can be applied to elements as needed.</p> <p>Classes here can be applied to elements as needed.</p>
<ul> <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-hi</code></li>
<li><code>s-status-warning-lo</code>: Pay attention to this.</li> <li><code>s-status-warning-lo</code></li>
<li><code>s-status-diagnostic</code>: Something in the code wants to talk to you.</li> <li><code>s-status-diagnostic</code></li>
<li><code>s-status-info</code>: What?! What?! Oh, ok.</li> <li><code>s-status-info</code></li>
<li><code>s-status-ok</code>: Whew! Hand me a beer would'ya?</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> </ul>
</div> </div>
<mct-example><div class="s-status-warning-hi-icon">WARNING HI</div> <mct-example><div class="s-status-warning-hi">WARNING HI</div>
<div class="s-status-warning-lo-icon">WARNING LOW</div> <div class="s-status-warning-lo">WARNING LOW</div>
<div class="s-status-diagnostic-icon">DIAGNOSTIC</div> <div class="s-status-diagnostic">DIAGNOSTIC</div>
<div class="s-status-info-icon">INFO</div> <div class="s-status-info">INFO</div>
<div class="s-status-ok-icon">OK</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> </mct-example>
</div> </div>
</div> </div>