This document describes the steps needed to refactor the back-office components to eliminate embedded styling and make better use of CSS styling.
The following CSS styles are deprecated and should be removed:
inputBox - not needed
selectBox - not needed
textAreaBox - not needed
tabletext - not needed
sepbar - not needed
treeitem - not needed
The following CSS styles are deprecated and should be refactored/replaced. Each instance needs to be evaluated to determine the best way to refactor its usage.
tableheadtext - If it's used in a <td> element, then use the basic-table CSS class on the table and the header-row CSS class on its enclosing <tr> element -OR- convert the <td> element to a <th> element. If it is being used without a table to make text bold, then use <b></b> instead.
col-right - Use one of the new container CSS styles, then change this to opposed.
tabContainer - convert menu to new CSS style "button-bar" plus one of its decorators.
tabButtonSelected - perform above step, then change this to selected.
head1, head2, head3 - can be replaced with <h> elements in many, but not all cases.
Example:
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><div class="tableheadtext">Column 1 Header</div></td>
...
</tr>
</table>
becomes
<table class="basic-table dark-grid" cellspacing="0">
<tr class="header-row">
<td>Column 1 Header</td>
...
</tr>
</table>
or
<table class="basic-table dark-grid" cellspacing="0">
<tr>
<th>Column 1 Header</th>
...
</tr>
</table>
Example:
<div>
<div class="tableheadtext">Some bold text</div>
</div>
becomes
<div>
<b>Some bold text</b>
</div>
Example:
<div class="head1">Big bold text</div>
becomes
<h1>Big bold text</h1>