.c-transfer-card
scss
.c-transfer-card {
background-color: use-color(base, true-white);
border: 1px solid use-color('grey', light-i);
border-radius: 4px;
box-shadow: $box-shadow-card-lvl-1;
cursor: pointer;
margin-bottom: 16px;
padding: 4px 0 0;
position: relative;
@include modifier('near-activate') {
border: 1px solid use-color('primary', 'dark');
}
@include modifier('chats-scheduled') {
// border-radius: 6px 6px 0 0;
// box-shadow: none;
margin-bottom: 8px;
padding: 0;
width: 100%;
@include if-block-has-modifier('c-transfer-card', 'selected', true) {
// border: solid 1px hsl(231, 41%, 71%);
border: solid 1px use-color('event', 'success');
&::before {
content: normal;
}
}
@include if-block-has-modifier('c-transfer-card', 'darkselected', true) {
// border: solid 1px hsl(231, 41%, 71%);
//border: solid 1px use-color('complementary');}
background-color: use-color('grey', base);
border: 1px solid #e0e0e0;
color: use-color(base, true-white);
&::before {
content: normal;
}
}
}
@include modifier('selected') {
border: solid 1px use-color('complementary', 'base');
@include media-breakpoint-up('phone-i') {
&::before {
left: 9px;
top: 23px;
}
}
&::before {
align-items: center;
background-color: use-color('event', 'success');
border-radius: 50%;
color: use-color('base', true-white);
// content: '\E00D'; // icon-message-sent
display: flex;
font-family: 'chattigoicons';
font-size: 20px;
height: 38px;
justify-content: center;
left: 9px;
position: absolute;
top: 11px;
width: 38px;
}
}
@include modifier('darkselected') {
background-color: use-color('grey', 'light-iv');
border: 1px solid #e0e0e0;
color: use-color(base, true-white);
@include media-breakpoint-up('phone-i') {
&::before {
left: 9px;
top: 23px;
}
}
&::before {
align-items: center;
background-color: use-color('event', 'paused');
border: 2px solid use-color(base, true-white);
border-radius: 50%;
color: use-color('base', true-white);
content: '\E00D'; // icon-message-sent
display: flex;
float: right;
font-family: 'chattigoicons';
font-size: 9px;
height: 20px;
justify-content: center;
left: 6px;
position: relative;
top: -11px;
width: 20px;
}
}
@include modifier('radius') {
border-radius: 4px 4px 0 0;
box-shadow: none;
}
@include element('section') {
align-items: center;
display: flex;
margin-top: 4px;
padding: 4px 8px;
@include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
box-sizing: border-box;
margin-top: 0;
padding: 7px 7px 8px;
}
@include modifier('attendees') {
@include use-font('caption');
background-color: use-color('grey', 'light-iii');
border-bottom: 1px solid use-color('grey', light-i);
border-top: 1px solid use-color('grey', light-i);
position: relative;
@include if-block-has-modifier('c-transfer-card', 'darkselected') {
background-color: use-color('grey', 'light-alt');
border-top: 0px solid use-color('grey', light-i);
color: use-color(base, true-white);
}
strong {
margin-right: 4px;
}
&:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
@include modifier('date-actions') {
@include use-font('caption');
background-color: use-color('grey', 'light-iii');
border-bottom: 1px solid use-color('grey', light-i);
border-top: 1px solid use-color('grey', light-i);
justify-content: space-between;
@include if-block-has-modifier('c-transfer-card', 'pending') {
color: use-color('grey', 'light-alt');
}
@include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
font-size: 10px;
height: 24px;
line-height: initial;
padding: 5px 6px;
}
&:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
// @include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
// border-radius: 0;
// }
}
&:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
}
// overrides
.c-list {
margin: 0;
}
}
@include element('avatar') {
align-self: flex-start;
border-radius: 50%;
margin-right: 8px;
max-height: 38px;
max-width: 38px;
min-height: 38px;
min-width: 38px;
overflow: hidden;
@include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
height: 35px;
margin-right: 11px;
min-width: 35px;
width: 35px;
}
img {
height: 100%;
width: 100%;
.c-transfer-card#{$modifier-separator}selected:not(.c-transfer-card#{$modifier-separator}chats-scheduled) & {
// display: none;
}
}
[class^='icon-'],
[class*=' icon-'] {
color: use-color('grey', 'light-i');
font-size: 35px;
.c-transfer-card#{$modifier-separator}selected:not(.c-transfer-card#{$modifier-separator}chats-scheduled) & {
display: inherit;
}
}
}
@include element('status-badge') {
background-color: use-color('event', 'success');
border: solid 1px use-color('base', 'white');
border-radius: 50%;
display: inline-block;
height: 10px;
left: 36px;
position: absolute;
top: 10px;
width: 10px;
@include modifier('paused') {
background-color: use-color('event', 'warning');
}
@include modifier('offline') {
background-color: use-color('event', 'error');
}
}
@include element('data') {
@include use-font('caption', 'semibold');
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
@include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
color: use-color('grey', 'base');
line-height: 12px;
}
@include modifier('rol') {
color: use-color('grey', 'light');
@include if-block-has-modifier('c-transfer-card', 'pending') {
color: use-color('grey', 'light-alt');
}
@include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
font-size: 10px;
margin-top: 4px;
}
@include if-block-has-modifier('c-transfer-card', 'darkselected') {
color: use-color(base, true-white);
}
}
@include if-block-has-modifier('c-transfer-card', 'pending') {
color: use-color('grey', 'light-alt');
}
}
@include element('actions') {
@include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
padding-right: 9px;
}
// overrides
.c-action-link {
border: 0;
margin-right: 12px;
text-decoration: none;
@include if-block-has-modifier('c-transfer-card', 'chats-scheduled') {
display: inline-block;
height: 14px;
}
&:last-child {
margin-right: 0;
}
}
[class^='icon-'],
[class*=' icon-'] {
@include use-font('body');
color: use-color('secondary');
}
}
@include element('time') {
@include use-font('caption', 'semibold');
color: use-color('grey', 'light');
display: flex;
}
@include element('actions') {
@include modifier('minutes') {
@include use-font('caption', 'semibold');
color: use-color('grey', 'light');
}
}
}
.c-transfer-card
.c-transfer-card--selected
.c-transfer-card--pending
.c-transfer-card--chats-scheduled
.c-transfer-card__status-badge default: active
.c-transfer-card__status-badge--paused
.c-transfer-card__status-badge--offline
- Marcar una transfer card que le falta poco para estar activado
c-transfer-card--near-activate
.
Examples
html
card-selected - badge active
<div class="c-transfer-card c-transfer-card--selected">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
<span class="c-transfer-card__status-badge"></span>
</div>
<div class="c-transfer-card__data">
<label>Charlie</label>
<span>Rol Usuario</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--attendees">
<strong>8</strong> chats asignados
</div>
<div class="c-transfer-card__section">
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
HablaConmigo
</li>
<li class="app-c-list-channels__item u-tag-wicon--campaign">
HablaConmigo HablaConmigo
</li>
<li class="app-c-list-channels__item u-tag-wicon--campaign">
HablaConmigo HablaConmigo HablaConmigo
</li>
</ul>
</div>
</div>
html
card-pending - badge active
<div class="c-transfer-card c-transfer-card--pending">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
<span class="c-transfer-card__status-badge"></span>
</div>
<div class="c-transfer-card__data">
<label>Charlie</label>
<span>Rol Usuario</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--date-actions">
<span>
Vie <b>13, 16:50</b> hrs
</span>
<div class="c-transfer-card__actions">
<a class="c-action-link">
<span class="icon-group"></span>
</a>
<a class="c-action-link">
<span class="icon-trash"></span>
</a>
</div>
</div>
</div>
html
badge paused
<div class="c-transfer-card">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
<span class="c-transfer-card__status-badge c-transfer-card__status-badge--paused"></span>
</div>
<div class="c-transfer-card__data">
<label>Charlie</label>
<span>Rol Usuario</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--attendees">
<strong>8</strong> chats asignados
</div>
</div>
html
card-chats-scheduled
<div class="c-transfer-card c-transfer-card--chats-scheduled">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
</div>
<div class="c-transfer-card__data">
<label>Charlie</label>
<span class="c-transfer-card__data--rol">
Consulta contrato
</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--date-actions">
<span>
vie
<b>13, 09:00</b>
hrs
</span>
<div class="c-transfer-card__actions">
<a class="c-action-link" title="${{ locales.scheduled-chats.reschedule }}$">
<span class="icon-reschedule"></span>
</a>
</div>
</div>
</div>
html
Card con near active
<div class="c-transfer-card c-transfer-card--chats-scheduled c-transfer-card--radius c-transfer-card--near-activate">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
</div>
<div class="c-transfer-card__data">
<label>Charlie</label>
<span class="c-transfer-card__data--rol">
dev@chattigo.com
</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--date-actions">
<span>
vie
<b>13, 09:00</b>
hrs
</span>
<div class="c-transfer-card__actions--minutes">
<span>15 min</span>
</div>
</div>
</div>
html
Con un border radius solamente en las esquinas superiores y un texto abajo a la derecha.
<div class="c-transfer-card c-transfer-card--chats-scheduled c-transfer-card--radius">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
</div>
<div class="c-transfer-card__data">
<label>Charlie</label>
<span class="c-transfer-card__data--rol">
dev@chattigo.com
</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--date-actions">
<span>
vie
<b>13, 09:00</b>
hrs
</span>
<div class="c-transfer-card__actions--minutes">
<span>15 min</span>
</div>
</div>
</div>
Requires
@mixin use-font()
@mixin element()
@mixin modifier()
@mixin if-block-has-modifier()
@function use-color()
.c-transferable-user [deprecated]
scss
.c-transferable-user {
background-color: use-color(base, true-white);
box-shadow: $box-shadow-card-lvl-1;
cursor: pointer;
margin-bottom: 16px;
position: relative;
@include media-breakpoint-up('phone-i') {
border-radius: 4px;
margin-left: 8px;
margin-right: 8px;
}
@include media-breakpoint-up('phone-ii') {
margin-left: 16px;
margin-right: 16px;
}
@include modifier('pause') {
background-color: lighten(use-color('event', 'paused'), 52%);
}
@include modifier('inactive') {
background-color: use-color('grey', light-ii);
}
@include element('main') {
@include use-font('body', 'regular');
align-items: center;
background-image: url('https://cdn.chattigo.com/assets/img/transferables-background.svg');
background-position: -30% 50%;
background-repeat: repeat;
display: flex;
justify-content: flex-start;
padding: 8px 8px 4px;
@include if-block-has-modifier('c-transferable-user', 'inactive') {
background-image: none;
}
}
@include element('pic') {
border: 1px solid use-color('grey', light-ii);
border-radius: 50%;
box-shadow: $box-shadow-card-lvl-2;
flex-shrink: 0;
height: 48px;
margin-right: 8px;
overflow: hidden;
position: relative;
width: 48px;
// @include media-breakpoint-up('phone-i') {
// height: 48px;
// width: 48px;
// }
@include if-block-has-modifier('c-transferable-user', 'selected') {
border: 0;
box-shadow: none;
img {
display: none;
}
}
img {
height: 100%;
width: auto;
}
}
@include element('info-wrap') {
height: auto;
width: auto;
label {
@include use-font('body', 'regular');
}
}
// FOOTER OF CARD
@include element('footer') {
@include use-font('body', 'regular');
display: flex;
> div {
padding: 8px 0;
text-align: center;
width: 50%;
}
}
@include element('attendees') {
background-color: transparentize(use-color('grey', dark), 0.96);
span {
font-weight: bold;
}
}
@include element('status') {
font-weight: bold;
&::first-letter {
text-transform: uppercase;
}
}
@include modifier('selected') {
border: solid 1px use-color('event', 'success');
@include media-breakpoint-up('phone-i') {
&::before {
left: 9px;
top: 23px;
}
}
&::before {
align-items: center;
background-color: use-color('event', 'success');
border-radius: 50%;
color: use-color('base', true-white);
content: '\E00D'; // icon-message-sent
display: flex;
font-family: 'chattigoicons';
font-size: 20px;
height: 48px;
justify-content: center;
left: 9px;
position: absolute;
top: 11px;
width: 48px;
}
}
@include modifier('bot') {
border: solid 1px use-color('secondary', 'base');
@include media-breakpoint-up('phone-i') {
&::before {
left: 9px;
top: 23px;
}
}
}
}
Es una card con la información de un usuario al que quiero elegir para transferir un chat.
DEPRECATED:
use .c-transfer-card instead.
Examples
html
<div class="c-transferable-user">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/7_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Mark Baum</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Habla conmigo
</li>
<li class="app-c-list-channels__item u-tag-wicon--group">
Ingeniería Civil Industrial
</li>
<li class="app-c-list-channels__item u-tag-wicon--location">
Concepción
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
activo</span>
</div>
</div>
</div>
html
selected
<div class="c-transferable-user c-transferable-user--selected">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/7_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Mark Baum</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Habla conmigo
</li>
<li class="app-c-list-channels__item u-tag-wicon--group">
Ingeniería Civil Industrial
</li>
<li class="app-c-list-channels__item u-tag-wicon--location">
Concepción
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
activo</span>
</div>
</div>
</div>
.c-web-transfers-container
scss
.c-web-transfers-container {
height: 404px;
margin-bottom: 16px;
overflow: hidden;
overflow-y: scroll;
// overrides
.c-transferable-user {
cursor: pointer;
margin-left: 4px;
margin-right: 4px;
@include element('main') {
background-image: none;
}
@include element('attendees') {
@include use-font('body-alt');
}
@include element('status') {
@include use-font('body-alt', 'bold');
}
@include element('pic') {
height: 44px;
width: 44px;
}
@include modifier('selected') {
border: solid 1px use-color('event', 'success');
@include media-breakpoint-up('phone-i') {
&::before {
left: 9px;
top: 23px;
}
}
&::before {
height: 44px;
top: 11px;
width: 44px;
}
}
}
}
Bloque que simplifica los estilos del componente .c-transferable-user
y hace que el contenido sea scrolleable.
Desarrollado para ser usado dentro del componente c-section-card
.
Example
html
<div class="c-section-card">
<div class="c-web-transfers-container">
<div class="c-transferable-user c-transferable-user--pause">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/4_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Vinnie Daniel</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Nombre Campaña
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
en pausa <span>(27min)</span>
</div>
</div>
</div>
<div class="c-transferable-user">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Warren Buffet</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Nombre Campaña
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
active
</div>
</div>
</div>
<div class="c-transferable-user c-transferable-user--selected">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/7_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Ben Ricker</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Nombre Campaña
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
active
</div>
</div>
</div>
<div class="c-transferable-user c-transferable-user--pause">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/4_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Vinnie Daniel</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Nombre Campaña
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
en pausa <span>(27min)</span>
</div>
</div>
</div>
<div class="c-transferable-user">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Warren Buffet</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Nombre Campaña
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
active
</div>
</div>
</div>
<div class="c-transferable-user">
<div class="c-transferable-user__main">
<div class="c-transferable-user__pic">
<img src="https://cdn.chattigo.com/assets/img/profiles/7_dummy.png"/>
</div>
<div class="c-transferable-user__info-wrap">
<label>Ben Ricker</label>
<ul class="app-c-list-channels app-c-list-channels--alt-wicon">
<li class="app-c-list-channels__item u-tag-wicon--campaign">
Nombre Campaña
</li>
</ul>
</div>
</div>
<div class="c-transferable-user__footer">
<div class="c-transferable-user__attendees">
<span>8</span> chats asignados
</div>
<div class="c-transferable-user__status">
active
</div>
</div>
</div>
</div>
<a class="c-button c-button--primary" href="" disabled>
Transferir Chat
</a>
</div>
.c-transfer-card__icon-wrapper
scss
.c-transfer-card {
@include element('icon-wrapper') {
color: use-color('complementary', 'base');
font-size: 18px;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
@include if-block-has-modifier('c-transfer-card--crm', 'added') {
.icon-profile {
display: block;
}
.icon-plus {
display: none;
}
}
.icon-profile {
display: none;
}
}
}
Modificaciones que diferencian a un usuario agregado de uno que no lo fue.
El elemento __icon-wrapper necesita el modificador --added para mostrar el icono del usuario y sacar el plus. Por defecto viene solamente con el plus.
Example
html
<div class="c-transfer-card">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/channels/widget-channel.svg" alt="Channel image">
</div>
<div class="c-transfer-card__data">
<label class="u-text-ellipsis">
Emmett Brown
</label>
<span class="c-transfer-card__data--rol u-text-ellipsis">
[Nombre Campaña 02]
</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--attendees">
<div class="c-inbox-on-hold-card__time">
más de 21 hrs.
</div>
<div class="c-transfer-card__icon-wrapper">
<span class="icon-plus"></span>
<span class="icon-profile"></span>
</div>
</div>
</div>
<div class="c-transfer-card">
<div class="c-transfer-card__section">
<div class="c-transfer-card__avatar">
<img src="https://cdn.chattigo.com/assets/img/channels/widget-channel.svg" alt="Channel image">
</div>
<div class="c-transfer-card__data">
<label class="u-text-ellipsis">
Emmett Brown
</label>
<span class="c-transfer-card__data--rol u-text-ellipsis">
[Nombre Campaña 02]
</span>
</div>
</div>
<div class="c-transfer-card__section c-transfer-card__section--attendees">
<div class="c-inbox-on-hold-card__time">
más de 21 hrs.
</div>
<div class="c-transfer-card__icon-wrapper c-transfer-card__icon-wrapper--added">
<span class="icon-plus"></span>
<span class="icon-profile"></span>
</div>
</div>
</div>
.c-transfer-card-record
scss
.c-transfer-card-record {
background-color: use-color(base, true-white);
border: 1px solid use-color('grey', light-i);
border-radius: 4px;
box-shadow: $box-shadow-card-lvl-1;
cursor: pointer;
display: flex;
flex-direction: column;
margin-bottom: 10px;
overflow: hidden;
transition: border-color 0.3s ease-in-out;
@include element('top') {
display: flex;
padding: 7px;
}
@include element('avatar') {
border-radius: 50%;
flex-shrink: 0;
height: 35px;
margin-right: 11px;
overflow: hidden;
width: 35px;
img {
max-height: 100%;
max-width: 100%;
}
}
@include element('data') {
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
padding: 8px 0;
label {
color: use-color('grey', 'light');
display: inline-flex;
font-size: 13px;
font-weight: 500;
height: 18px;
line-height: 12px;
margin-bottom: 6px;
width: calc(100% - 25px);
span {
display: inline-block;
flex: 1;
margin-left: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
@include element('data-id') {
color: use-color('grey', 'base');
}
@include element('data-info') {
align-items: center;
background: use-color('grey', 'light-iii');
border: 1px solid use-color('grey', 'base');
border-radius: 3.71px;
box-sizing: border-box;
color: use-color('grey', 'light');
cursor: pointer;
display: flex;
font-size: 11px;
font-weight: normal;
height: 20px;
line-height: 17.63px;
padding-left: 4px;
position: relative;
width: 204px;
[class^='icon-'],
[class*='icon-'] {
color: use-color('grey', 'base');
flex-shrink: 0;
}
.text {
flex: 1;
margin-right: 26px;
overflow: hidden;
white-space: nowrap;
}
}
@include element('icon-chat') {
font-size: 13px;
margin-right: 3px;
position: relative;
top: 2px;
}
@include element('icon-points') {
bottom: -2px;
font-size: 16px;
position: absolute;
right: 7px;
transform: rotate(90deg);
}
@include element('search') {
align-items: center;
border-top: 1px dashed use-color('grey', light-i);
color: use-color('grey', 'base');
display: flex;
font-size: 11px;
font-weight: 500;
height: 27px;
line-height: 12px;
padding: 0 13px 0 7px;
> div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@include element('match') {
background-color: use-color('event', 'warning');
display: inline-block;
}
@include element('date') {
align-items: center;
background-color: use-color('grey', 'light-iii');
border-top: 1px solid use-color('grey', light-i);
display: flex;
font-size: 10px;
height: 24px;
padding: 0 6px;
}
&--selected,
&:hover,
&:active {
border: solid 1px #959ed3;
}
}
Example
html
<div class="c-transfer-card-record c-transfer-card-record--selected">
<div class="c-transfer-card-record__top">
<div class="c-transfer-card-record__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
</div>
<div class="c-transfer-card-record__data">
<label>ID Cliente: <span class="c-transfer-card-record__data-id" data-tippy-placement="bottom" data-tippy-content="+569 97548990">+569 97548990</span></label>
<span class="c-transfer-card-record__data-info" data-tippy-placement="bottom" data-tippy-content="/CONSULTA/Informacion general/Mesa de Ayuda ( Recuperacion de contrasena, activacion WIFI, otros)">
<span class="c-transfer-card-record__icon-chat icon-chat-close"></span>
<span>¿Por qué se cerró este chat?</span>
<span class="c-transfer-card-record__icon-points icon-menu-options"></span>
</span>
</div>
</div>
<div class="c-transfer-card-record__date">
<span>Vie <b>13 Ago 2020, 09:00</b> hrs</span>
</div>
</div>
<div class="c-transfer-card-record">
<div class="c-transfer-card-record__top">
<div class="c-transfer-card-record__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
</div>
<div class="c-transfer-card-record__data">
<label>ID Cliente: <span class="c-transfer-card-record__data-id" data-tippy-placement="bottom" data-tippy-content="0c85e5b3-fb0b42c9-bd53-df678-kl56-23">0c85e5b3-fb0b42c9-bd53-df678-kl56-23</span></label>
<span class="c-transfer-card-record__data-info" data-tippy-placement="bottom" data-tippy-content="/CONSULTA/Informacion general/Mesa de Ayuda ( Recuperacion de contrasena, activacion WIFI, otros)">
<span class="c-transfer-card-record__icon-chat icon-chat-close"></span>
<span>¿Por qué se cerró este chat?</span>
<span class="c-transfer-card-record__icon-points icon-menu-options"></span>
</span>
</div>
</div>
<div class="c-transfer-card-record__date">
<span>Vie <b>13 Ago 2020, 09:00</b> hrs</span>
</div>
</div>
<div class="c-transfer-card-record c-transfer-card-record--selected">
<div class="c-transfer-card-record__top">
<div class="c-transfer-card-record__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
</div>
<div class="c-transfer-card-record__data">
<label>ID Cliente: <span class="c-transfer-card-record__data-id" data-tippy-placement="bottom" data-tippy-content="0c85e5b3-fb0b42c9-bd53-df678-kl56-23">0c85e5b3-fb0b42c9-bd53-df678-kl56-23</span></label>
<span class="c-transfer-card-record__data-info" data-tippy-placement="bottom" data-tippy-content="/CONSULTA/Informacion general/Mesa de Ayuda ( Recuperacion de contrasena, activacion WIFI, otros)">
<span class="c-transfer-card-record__icon-chat icon-chat-close"></span>
<span>¿Por qué se cerró este chat?</span>
<span class="c-transfer-card-record__icon-points icon-menu-options"></span>
</span>
</div>
</div>
<div class="c-transfer-card-record__search">
<div>
claro, yo quería saber <span class="c-transfer-card-record__match">más información</span> sobre esa campaña
</div>
</div>
<div class="c-transfer-card-record__date">
<span>Vie <b>13 Ago 2020, 09:00</b> hrs</span>
</div>
</div>
<div class="c-transfer-card-record">
<div class="c-transfer-card-record__top">
<div class="c-transfer-card-record__avatar">
<img src="https://cdn.chattigo.com/assets/img/profiles/1_dummy.png" />
</div>
<div class="c-transfer-card-record__data">
<label>ID Cliente: <span class="c-transfer-card-record__data-id" data-tippy-placement="bottom" data-tippy-content="0c85e5b3-fb0b42c9-bd53-df678-kl56-23">0c85e5b3-fb0b42c9-bd53-df678-kl56-23</span></label>
<span class="c-transfer-card-record__data-info" data-tippy-placement="bottom" data-tippy-content="/CONSULTA/Informacion general/Mesa de Ayuda ( Recuperacion de contrasena, activacion WIFI, otros)">
<span class="c-transfer-card-record__icon-chat icon-chat-close"></span>
<span>¿Por qué se cerró este chat?</span>
<span class="c-transfer-card-record__icon-points icon-menu-options"></span>
</span>
</div>
</div>
<div class="c-transfer-card-record__search">
<div>
claro, yo quería saber <span class="c-transfer-card-record__match">más información</span> sobre esa campaña
</div>
</div>
<div class="c-transfer-card-record__date">
<span>Vie <b>13 Ago 2020, 09:00</b> hrs</span>
</div>
</div>
<script type="text/javascript" src="/js/chattigo.js"></script>