This document describes the new CSS classes and the HTML element collections (or compounds) that they style.
Note: [] = style decorators.
masthead:
<div id="masthead">
<ul>
<li> | <li class="logo-area | control-area | opposed">Masthead Content</li>
</ul>
</div>
main-navigation:
<div id="main-navigation">
<ul>
<li> | <li class="disabled | selected">Menu Item</li>
</ul>
</div>
app-navigation:
<div id="app-navigation">
<h1 | h2 | h3>Application Title</h1 | h2 | h3>
<ul>
<li> | <li class="disabled | selected | opposed">Menu Item</li>
</ul>
</div>
screenlet-title-bar:
<div class="screenlet-title-bar">
<!-- No menu -->
<h1 | h2 | h3>Screenlet Title</h1 | h2 | h3>
</div>
<div class="screenlet-title-bar">
<!-- With menu -->
<ul>
<li class="h1 | h2 | h3">Screenlet Title</li>
<li> | <li class="disabled">Menu Item</li>
</ul>
</div>
basic-nav:
<div class="basic-nav">
<ul>
<li> | <li class="selected | disabled">Menu Item</li>
</ul>
</div>
button-bar:
<div class="button-bar [button-style-1 | button-style-2 | tool-bar | tab-bar]">
<ul>
<li> | <li class="selected">Menu Item</li>
</ul>
</div>
basic-table:
<table class="basic-table [hover-bar | dark-grid | light-grid]">
<tr> | <tr class="header-row | header-row-2 | alternate-row">
<td> | <td class="button-col | group-label | label"></td>
</tr>
</table>
basic-tree:
<ul class="basic-tree">
<li> | <li class="collapsed | expanded">Tree Item</li>
<li>
<ul class="basic-tree">
...
</ul>
</li>
</ul>
basic-form:
<form class="basic-form">
<table class="basic-table [hover-bar | dark-grid | light-grid]">
<tr> | <tr class="header-row | alternate-row">
<td> | <td class="group-label | label"></td>
<td><a class="smallSubmit"></a></td>
</tr>
</table>
</form>
Semantic link (<a> element) styles:
view-calendar
field-lookup
nav-first
nav-last
nav-next
nav-previous