Add styles for bottom navigation component

[joneff]

Meta

* Aha item -- [KUI-466](https://progresssoftware.aha.io/features/KUI-466) * Cross-team issue -- telerik/k2#263 * Design issue -- telerik/kendo-ux-private#197

Design

• Default theme
• Bootstrap theme
• Material theme

Assignee(s)

• @Juveniel is the main developer

---

Markup

<nav class="k-bottom-nav k-bottom-nav-primary k-bottom-nav-flat k-bottom-nav-border k-bottom-nav-item-flow-vertical k-pos-fixed">
    <!-- Item element can be one of the following - BUTTON, A, SPAN -->
    <span class="k-bottom-nav-item k-state-selected">
        <span class="k-bottom-nav-item-icon k-icon k-i-email"></span>
        <span class="k-bottom-nav-item-text">Prices</span>
    </span>
    <span class="k-bottom-nav-item k-state-disabled">
        <span class="k-bottom-nav-item-icon k-icon k-i-email"></span>
        <span class="k-bottom-nav-item-text">Heat Map</span>
    </span>
    <span class="k-bottom-nav-item" href="#">
        <span class="k-bottom-nav-item-icon k-icon k-i-email"></span>
        <span class="k-bottom-nav-item-text">Portfolio</span>
    </span>
    <span class="k-bottom-nav-item">
        <span class="k-bottom-nav-item-icon k-icon k-i-email"></span>
        <span class="k-bottom-nav-item-text">Search</span>
    </span>
</nav>

Framework specific markup

Markup is unified across frameworks.

API

• BottomNav.fill= 'solid -> <nav class="k-bottom-nav-solid" /> | ('solid' or 'flat') | Default: 'flat'
• BottomNav.themeColor = 'secondary' -> <nav class="k-bottom-nav-secondary" /> | Default: 'primary' |
• BottomNav.itemFlow= 'horizontal -> <nav class="k-bottom-nav-item-flow-horizontal" /> | Default: 'vertical' |
• BottomNav.border = 'true -> <nav class="k-bottom-nav-border" />
• BottomNav.shadow = 'true -> <nav class="k-bottom-nav-shadow" />

Remarks

• Item element can be one of the following - BUTTON, A, SPAN (<element class="k-bottom-nav-item"></element>)
• Although the design features light and dark color variants, the styles of the Bottom Navigation include all the solid theme colors. These can be observed in the tests.

[Juveniel]

~As the main purpose of the component is to provide navigation, I suggest utilizing the following rendering:~

~https://dojo.telerik.com/ICuveJEl/14~

~As different product flavors handle navigation in a different manner (e.g there is built-in routing in Angular, React and Blazor vs none in jQuery), we could utilize similar markup to the Breadcrumb and Menu components that suits both use cases. The main difference is that jQuery will utilize an anchor that wraps the item text and icon, while other products will utilize the built-in routing mechanisms.~

~@telerik/kendo-front-end thoughts and suggestions?~

All relevant information is moved to the issue description for better visibility.