Documentation for navigation components.
Files
app/styles/modules/_navigation.scssPagination
Pagination is build with .btn-line element and text information about current page is inside .btn-line_text.
<div class="btn-line">
<a disabled="true" class="btn btn-secondary btn-square"><i class="icon icon-m">page_first</i>
</a>
<a class="btn btn-secondary btn-square"><i class="icon icon-m">chevronleft</i></a>
<div class="btn-line_text">1 / 12</div>
<a class="btn btn-secondary btn-square"><i class="icon icon-m">chevronright</i></a>
<a class="btn btn-secondary btn-square"><i class="icon icon-m">page_last</i></a>
</div>
Top Bar
Top bar is designed as page header with name and sub pages as shown in examples below.
<article class="top-bar">
<section class="top-bar_section-secondary">
<figure class="avatar"><img src="/images/app/avatar-settings.png" alt="Settings" class="img-fluid img-circle"></figure>
</section>
<section class="top-bar_section-primary">
<div class="top-bar_menu">
<h2 class="no-mrg text-color-theme text-normal">Settings</h2>
</div>
<div class="top-bar_divider"></div>
<div class="top-bar_menu"><a class="top-bar_menu-item active">Profile</a><a class="top-bar_menu-item">Advanced</a></div>
</section>
</article>
Top bar with actions
Top bar can contain additional actions inside .top-bar_section-actions.
<article class="top-bar">
...
<section class="top-bar_section-actions">
<a class="btn btn-flat"><i class="icon icon-m">settings</i></a>
<a class="btn btn-flat"><i class="icon icon-m">logout</i></a></section>
</article>