CSS

Main Commands

<div id="rocket-page-controls">
    <ul class="rocket-partial-controls">
        <li class="rocket-control" title="{tooltip}">
            <a href="{target}">
                <i class="fa-plus-sign"></i><span>{label}</span>
            </a>
        </li>
        <li class="rocket-control">
            <i class="fa-plus-sign">
            <input type="submit" name="blablabla" value="Löschen" />
        </li>
        <li class="rocket-control-modify">
            <button type="submit"><i class="fa-plus-sign"/> Klick Mich!</button>
        </li>
    </ul>
    <ul class="rocket-main-controls">
        <li class="rocket-control-critical">
            <button type="submit"><i class="fa-plus-sign" /> Klick Mich!</button>
        </li>
    </ul>
    <div class="rocket-additional-controls">
    
    </div>
</div>

Content

<div class="rocket-content-panel">
    <h3>{title}</h3>
    
    ...
</div>

<section class="rocket-content-panel">
    <h1>{title}</h1>
    
    ...
</section>

Table

<table class="rocket-list">
    <thead>
        <tr>
            <th>{col1}</th>
            <th>{col2}</th>
            <th class="rocket-list-item-controls"></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>{col1}</td>
            <td>{col3}</td>
            <td class="rocket-list-item-controls">
                {controls}
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>{col1}</td>
            <td>{col2}</td>
            <td class="rocket-list-item-controls">
                {controls}
            </td>
        </tr>
    </tbody>
</table>

Option Collection

<ul class="rocket-option-collection (rocket-aside-container)?">
    <li class="(rocket-editable|rocket-read-only) rocket-required rocket-block rocket-script-{entityScriptId} rocket-field-{scriptFieldId}">
        <label>Label</label>
        <div class="rocket-controls">
            ...
        </div>
    </li>
    <li>
        <label>Label</label>
        <div class="rocket-controls">
            ...
        </div>
    </li>
    
    <li class="rocket-control-group">
        <label>Label</label>
        <div class="rocket-controls">
            ...
            <ul class="rocket-option-collection">
                <li>..</li>
                <li>..</li>
            </ul>
        </div>
    </li>
    
    <li class="rocket-control-group-main">
        ...
    </li>
    <li class="rocket-control-group-main">
        ...
    </li>
    <li class="rocket-control-group-aside">
    </li>
    
    <li class="rocket-control-group">
        <label></label>
        <div class="rocket-controls">
            <ul class="rocket-option-array">
                <li class="rocket-controls">
                    ...
                </li>
                <li class="rocket-controls">
                    ...
                </li>
                <li></li>
            <ul>
        </div>
    </li>
</ul>

<ul class="rocket-option-array">
    <li class="rocket-controls">
        ...
    </li>
    <li class="rocket-controls">
        ...
    </li>
    <li></li>
<ul>

rocket-option-collection ALIAS n2n-option-collection

rocket-control-group ALIAS n2n-option-collection-option n2n-array-option

rocket-option-array ALIAS n2n-option-collection-array n2n-option-array

rocket-controls ALIAS n2n-array-option-element

Simple Controls

<ul class="rocket-simple-controls">
   <li class="rocket-control-modify" title="{tooltip}">
        <a href="{href}">
            <i class="icon-file"></i><span>Detail</span>
        </a>
    </li>
    
   ...
</ul>