Headers para destacar secciones
.app-c-header-main
scss
.app-c-header-main {
background-color: use-color(primary);
background-image: use-color(gradients, balanced);
background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
background-position: 100% -22px, 0 0;
background-repeat: no-repeat;
background-size: 200px, 100%;
color: use-color(base , true-white);
display: flex;
flex-direction: column;
height: 88px;
justify-content: flex-end;
padding: 8px 16px;
position: relative;
text-transform: uppercase;
@include element('content') {
@include use-font('body', 'bold');
display: flex;
justify-content: space-between;
@include modifier('close') {
text-decoration: none;
[class^='icon-'],
[class*=' icon-'] {
color: use-color(base , true-white);
font-size: 16px;
}
}
}
@include element('profile-name') {
@include use-font('body', 'regular');
text-align: center;
text-transform: none;
}
@include element('logo') {
height: 24px;
}
}Header principal de la aplicación de chattigo.
Se puede usar solo con el logo, o texto e icono para cerrar.
Tambien tiene una versión para el perfil del agente.
Examples
html
<div class="app-c-header-main">
<div class="app-c-header-main__title">
<img class="app-c-header-main__logo" src="https://cdn.chattigo.com/assets/img/logo-white.svg" />
</div>
</div>
html
<div class="app-c-header-main">
<div class="app-c-header-main__content">
Soporte
<a href="#" class="app-c-header-main__content--close">
<span class="icon-close"></span>
</a>
</div>
</div>
html
profile name
<div class="app-c-header-main">
<div class="app-c-header-main__profile-name">
NomAgente
</div>
</div>.app-c-header-section
scss
.app-c-header-section {
@include use-font('body', 'bold');
background-color: use-color('grey', light-alt);
color: use-color(base , true-white);
padding: 8px 16px;
text-transform: uppercase;
@include media-breakpoint-up(tablet) {
border-radius: 8px 8px 0 0;
box-sizing: border-box;
margin: auto;
width: 620px;
}
}Este header esta hecho para ser usado sobre la lista de estados en el perfil de la app de chattigo.
Example
html
<div class="app-c-header-section">
estado
</div>.app-c-header-message
scss
.app-c-header-message {
background-color: use-color(primary);
background-image: use-color(gradients, balanced);
background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
background-position: 100% -22px, 0 0;
background-repeat: no-repeat;
background-size: 200px, 100%;
color: use-color(base , true-white);
display: flex;
flex-direction: column-reverse;
height: auto;
padding: 8px;
position: relative;
@include element(content) {
@include use-font('body', 'bold');
display: flex;
justify-content: space-between;
margin-top: 45px;
}
@include element(data) {
margin-right: auto;
max-width: 80%;
@include media-breakpoint-up(tablet) {
max-width: 90%;
}
@include modifier(name) {
@include use-font('body', 'bold');
cursor: default;
line-height: 16px;
margin: 0;
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
text-transform: capitalize;
white-space: nowrap;
width: 100%;
}
@include modifier(id) {
@include use-font('caption', 'regular');
cursor: default;
display: inline-block;
line-height: 10px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: initial;
white-space: nowrap;
width: 100%;
}
}
@include element(action) {
color: use-color(base, true-white);
font-size: 18px;
min-width: 36px;
text-decoration: none;
@include modifier(menu) {
font-size: 31px;
text-align: right;
}
[class^='icon-'],
[class*=' icon-'] {
font-size: inherit;
}
}
}Este es el header que se usara en la pantalla de mensajeria.
Para la lista de info de canal depende del uso de un componente de Lista .app-c-list-channels.
Example
html
<div class="app-c-header-message">
<div class="app-c-header-message__content">
<a class="app-c-header-message__action" href="#">
<span class="icon-arrow-right"></span>
</a>
<div class="app-c-header-message__data">
<h3 class="app-c-header-message__data--name">
client very-large name client very-large name
</h3>
<small class="app-c-header-message__data--id">
Chat ID (15716157161571615716157161571615716123)
</small>
<!-- List component -->
<ul class="app-c-list-channels">
<li class="app-c-list-channels__item">Tipo Canal</li>
<li class="app-c-list-channels__item">descripción del canal: puede contener mucho texto</li>
</ul>
</div>
<a class="app-c-header-message__action app-c-header-message__action--menu" href="#">
<span class="icon-menu-options"></span>
</a>
</div>
</div>