Documentation for CRM window component, including headers, sections and footer.

Files

app/styles/modules/_crm_window.scss

Windows

CRM Window is component which will be shown out of the app, as standalone window, containing same elements as app can, including new ones specific for crm window. It consist of .crm-window wrapper, .crm-window_header, sections and .crm-window_footer. Most basic crm window can be created with following HTML code shown bellow.

Note

To create space from all sides in window content use class .crm-window_content-space.

Example:code

Headline

Lorem ipsum Cillum eu anim dolor esse occaecat Excepteur tempor dolor mollit nulla commodo est cupidatat ad ex ullamco dolor eiusmod.

Lorem ipsum Sed est aliquip in quis.

Code:
<article class="crm-window">

  <header class="crm-window_header">
    <h3 class="crm-window_header_headline no-mrg text-left">Headline</h3>
  </header>

  <section class="crm-window_content .crm-window_content-spacecrm-window_content-space">
    <p class="no-mrg-bottom">Lorem ipsum In deserunt incididunt.</p>
  </section>

  <footer class="crm-window_footer">
    <p class="text-small no-mrg">Lorem ipsum Sed est aliquip in quis.</p>
  </footer>

</article>

Window sizes

There are four sizes of window: small .crm-window-small, default, large .crm-window-large and extra large .crm-window-xlarge.

Example:code
Code:
<!-- small -->
<article class="crm-window crm-window-small crm-window-no-footer">
  ...
</article>

<!-- default -->
<article class="crm-window crm-window-no-footer">
  ...
</article>

<!-- large -->
<article class="crm-window crm-window-large crm-window-no-footer">
  ...
</article>

<!-- extra large -->
<article class="crm-window crm-window-xlarge crm-window-no-footer">
  ...
</article>

Multiple windows

You can create multiple CRM windows by wrapping them to .crm-window_wrap container and using .tabs with additional class .tabs-crm to control windows.

Example:code
Code:
<div class="crm-window_wrap crm-window_wrap-xlarge">
  <article class="crm-window crm-window-xlarge crm-window-no-footer">
    <aside class="crm-window_header crm-window_header-tabs">
      <section class="crm-window_header_sec-primary">
        <ul class="tabs tabs-crm">
          <li class="tabs_item"><a class="tabs_link">#01</a></li>
          <li class="tabs_item"><a class="tabs_link active">#02</a></li>
          <li class="tabs_item"><a class="tabs_link">#03</a></li>
        </ul>
      </section>
      <section class="crm-window_header_sec-secondary no-pad"><a class="btn btn-flat crm-window_header_close pull-right"><i class="icon icon-m">close</i></a></section>
    </aside>
    <header class="crm-window_header">
      <section class="crm-window_header_sec-primary">
        <h2 class="no-mrg text-normal">Headline</h2>
      </section>
    </header>
    <section class="crm-window_content crm-window_content-space">
      <p class="no-mrg">Lorem ipsum Occaecat ut officia incididunt laboris mollit consectetur ullamco fugiat ea ullamco nisi occaecat in eu.</p>
    </section>
  </article>
</div>

Sections

Content of CRM window should be wrapped into sections. There are two types of sections: default .crm-window_content and secondary .crm-window_content-secondary. There can be more content sections in one CRM window.

Example:code
Code:
<article class="crm-window crm-window-small crm-window-no-footer">
  ...
  <section class="crm-window_content-secondary">
    ...
  </section>

  <section class="crm-window_content">
    ...
  </section>
</article>