Content Containers

Should be used for any content container to create uniform and smooth surfaces, with the same spaces and colors. The general class to start with is “evan-content”.

.evan-content

Example

<div class="evan-content">
  <h2 class="content-header m-b-0 m-t-0">{{ 'im-a-header' | translate }}</h2>
</div>

View Example

.evan-full-content

Use always 100% of width.

<div class="evan-content evan-full-content">
  <h2 class="content-header m-b-0 m-t-0">{{ 'im-a-header' | translate }}</h2>
</div>

.evan-small-content

Use a small view with responsive sizes.

• min-width 993px : width 70%;
• min-width 1201px : width 60%;
• min-width 1501px : width 50%;

View Example

.evan-mini-content

Use a very small view with responsive sizes.

• min-width 1201px : width 40%;

evan-mini-left

Use a very small view with responsive sizes. Perfect in combination with evan-mini-content for a responsive 3 column layout.

• min-width 1201px : width 30%;
• position: fixed (used within dapp-wrapper)
• left: 0

evan-mini-right

Use a very small view with responsive sizes. Perfect in combination with evan-mini-content for a responsive 3 column layout.

• min-width 1201px : width 30%;
• position: fixed
• top: 56px (used within dapp-wrapper)
• right: 0

Example

<div class="evan-tabs evan-content evan-small-content" *ngIf="core.utils.screenSize < 1201">
  <button ion-button icon-left clear
    [class.active]="activeTab === 0"
    (click)="activateTab(0);">
    <ion-icon name="person"></ion-icon>
   Tab 1
  </button>

  <button ion-button icon-left clear
    [class.active]="activeTab === 1"
    (click)="activateTab(1);">
    <ion-icon name="people"></ion-icon>
    {{ '_dappprofile.accounts' | translate }}
  </button>

  <button ion-button icon-left clear
    [class.active]="activeTab === 2"
    (click)="activateTab(2);">
    <ion-icon name="settings"></ion-icon>
    {{ '_dappprofile.settings' | translate }}
  </button>
</div>

<div class="evan-tabs-container" [@tabSlideTransition]="activeTab">
  <div class="evan-content evan-mini-left" *ngIf="activeTab === 0 || core.utils.screenSize > 1200">
    Content left
  </div>
  <div class="evan-content evan-mini-content" *ngIf="activeTab === 1 || core.utils.screenSize > 1200">
    Content center
  </div>
  <div class="evan-content evan-mini-right" *ngIf="activeTab === 2 || core.utils.screenSize > 1200">
    Content right
  </div>
</div>

View Example

• On big screens

• On small screens

.evan-twoline-content

Display two content containers next to each other using display inline-block. On small devices they will move one under another.

Example

<div class="evan-content evan-twoline-content">left</div>
<div class="evan-content evan-twoline-content">right</div>

.evan-threeline-content

Display three content containers next to each other using display inline-block. On small devices they will move one under another.

Example

<div class="evan-content evan-threeline-content">left</div>
<div class="evan-content evan-threeline-content">center</div>
<div class="evan-content evan-threeline-content">right</div>

.evan-info-button

Display a button on the top right corner with the fixed size of 35px:35px.

Example

<div class="evan-content">
  <button class="evan-info-button" ion-button icon-only>
    <ion-icon name="info"></ion-icon>
  </div>
</div>

Custom botton positions

button.top-right

Display a button on the top right corner of the evan-content. Be sure, thath the evan-content element hash the “position:relative” style.

<div class="evan-content evan-relative">
  <button class="top-right" ion-button icon-only>
    <ion-icon name="info"></ion-icon>
  </div>
</div>

button.bottom-right

Display a button on the bottom right corner of the evan-content. Be sure, thath the evan-content element hash the “position:relative” style.

<div class="evan-content evan-relative">
  <button class="bottom-right" ion-button icon-only>
    <ion-icon name="info"></ion-icon>
  </div>
</div>

button.bottom-center

Display a button in the bottom center of the evan-content. Be sure, thath the evan-content element hash the “position:relative” style.

<div class="evan-content evan-relative">
  <button class="bottom-center" ion-button icon-only>
    <ion-icon name="info"></ion-icon>
  </div>
</div>

.evan-left-panel

Shows a small left panel for displaying a inner app navigation list.

<div class="evan-content evan-left-panel" *ngIf="core.utils.isMD">
  <b class="content-header m-t-0">
    {{ '...' | translate }}
  </b>

  <ion-list>
    <button ion-item menuClose
      color="light"
      [class.active]="activeGroup === group"
      *ngFor="let group of navigation"
      (click)="activeGroup = group; ref.detectChanges()">
      <h2>{{ group.header }}</h2>
      <h3>{{ group.desc }}</h3>
    </button>
  </ion-list>
</div>

.evan-right-panel

Shows a large panel for display content that was managed using the evan-left-panel

<div class="evan-content evan-right-panel evan-relative" text-left>
  ....
</div>