.app-c-nav
scss
.app-c-nav {
background-color: use-color('grey', light-iii);
border-top: solid 1px use-color('grey', light-alt);
display: flex;
justify-content: space-around;
margin-top: 20px;
padding-top: 5px;
@include element('item') {
@include use-font('caption', 'regular');
color: use-color('grey', light);
height: 50px;
padding: 5px 8px 0;
position: relative;
text-align: center;
text-decoration: none;
text-transform: capitalize;
width: 80px;
&.active {
color: use-color(primary);
}
}
@include element('badge') {
align-items: center;
background-color: use-color(primary);
border: solid 1px use-color(base, true-white);
border-radius: 50%;
color: use-color(base, true-white);
display: flex;
height: 21px;
justify-content: center;
position: absolute;
right: 22px;
text-align: center;
top: -4px;
width: 21px;
}
[class^='icon-'],
[class*=' icon-'] {
display: inline-block;
font-size: 22px;
width: 100%;
}
}Navegacion para la app.
Cada item dentro de la nav consta con un icono y un texto,
puede contener tambien un badge para el contador de notificaciones.
Si se le agrega al item la clase active este queda destacado del color primario de chattigo.
Example
html
<div class="app-c-nav">
<div class="app-c-nav__item">
<span class="icon-message"></span>
<span class="app-c-nav__badge">10</span>
chats
</div>
<div class="app-c-nav__item active">
<span class="icon-user"></span>
perfil
</div>
</div>