.c-message-carrousel
scss
.c-message-carrousel {
margin-bottom: 16px;
margin-left: -16px;
overflow: hidden;
padding: 5px 0;
position: relative;
width: calc(100% + 32px);
@include element('container') {
display: flex;
left: 0;
padding-left: calc((100% - 285px) / 2);
position: absolute;
transition: all 0.25s ease-in-out;
}
@include element('item') {
background: linear-gradient(-180deg, use-color('base', 'true-white') 0%, use-color('base', 'white') 100%);
border-radius: 4px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.06),
1px 1px 2px 0 rgba(0, 0, 0, 0.06);
box-sizing: border-box;
margin: 0 15px 0 0;
padding: 10.5px 15px 38px;
position: relative;
width: 285px;
}
@include element('item-image-wrapper') {
align-items: center;
display: flex;
height: 143px;
justify-content: center;
margin-bottom: 5.5px;
width: 253px;
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
}
@include element('item-title') {
color: use-color('grey', 'dark');
font-size: 16px;
font-weight: 600;
letter-spacing: 0.11px;
line-height: 22px;
margin: 0;
width: 255px;
}
@include element('item-subtitle') {
color: use-color('grey', 'dark');
font-size: 12px;
letter-spacing: 0.09px;
line-height: 22px;
margin: 0;
width: 255px;
}
@include element('item-actions') {
display: flex;
flex-direction: column;
padding-top: 13.5px;
}
@include element('item-action') {
background-color: use-color('base', 'true-white');
border: 1px solid use-color('secondary');
border-radius: 8px;
color: use-color('secondary');
cursor: pointer;
font-size: 14px;
line-height: 22px;
margin-bottom: 8px;
min-height: 34px;
outline: 0;
padding: 4px;
transition: all 0.25s ease-in-out;
&:focus {
outline: 0;
}
&:hover {
box-shadow: 0 3px 8px 0 rgba(66, 66, 67, 0.3);
@media (hover: none) {
box-shadow: none;
}
}
&:active {
box-shadow: 0 3px 8px 0 rgba(66, 66, 67, 0.3);
}
&:last-child {
margin-bottom: 0;
}
}
@include element('controls') {
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
width: 100%;
}
@include element('control') {
background-color: transparent;
border: 0;
border-radius: 8px;
cursor: pointer;
font-size: 0;
height: 36px;
line-height: 1;
opacity: 1;
outline: 0;
padding: 0;
transition: all 0.25s ease-in-out;
width: 36px;
@include modifier('left') {
margin-left: 7px;
}
@include modifier('right') {
margin-right: 7px;
}
&:disabled {
// display: none;
opacity: 0;
visibility: hidden;
}
&:hover {
background-color: rgba(66, 66, 67, 0.2);
@media (hover: none) {
background-color: transparent;
}
}
&:active {
background-color: rgba(66, 66, 67, 0.2);
}
[class^=icon-],
[class*=icon-] {
display: inline-block;
font-size: 0;
line-height: 1;
&::before {
font-size: 22px;
}
}
}
}
Example
html
<div class="chattigo-widget" style="height: 711px;">
<div class="chattigo-widget-header">
<div class="chattigo-widget-header__background"></div>
<img class="chattigo-widget-header__image" src="https://cdn.chattigo.com/assets/img/profiles/3_dummy.png" />
<div class="chattigo-widget-header__agent-info">
<label class="chattigo-widget-header__agent-info--name" title="Virginia Faustino Agente Chattigo QA">
Virginia Faustino Agente Chattigo QA
</label>
<span class="chattigo-widget-header__agent-info--status">
En linea
</span>
</div>
<div class="chattigo-widget-header__actions">
<a class="chattigo-widget-header__actions--item" href="./widget--config.html">
<span class="chattigo-icon-config"></span>
</a>
<a class="chattigo-widget-header__actions--item" href="./widget--trigger.html">
<span class="chattigo-icon-arrow-down"></span>
</a>
</div>
</div>
<div class="chattigo-widget__content widget-message-content-js" style="flex: 1;">
<div class="c-message-box">
<!-- INIT HTML EXAMPLE MESSAGE (min-height is for this example) -->
<div class="c-message-carrousel" style="min-height: 373px;">
<div class="c-message-carrousel__container">
<div class="c-message-carrousel__item">
<div class="c-message-carrousel__item-image-wrapper">
<img src="http://api.rovot.io/ws/efePe/imagenes/catalogo_efe.png" />
</div>
<p class="c-message-carrousel__item-title">Bigginers plan</p>
<p class="c-message-carrousel__item-subtitle">50 agents, 1 bot</p>
<div class="c-message-carrousel__item-actions">
<button class="c-message-carrousel__item-action">I want to know more </button>
<button class="c-message-carrousel__item-action">Buy</button>
</div>
<small>10:00</small>
</div>
<div class="c-message-carrousel__item">
<div class="c-message-carrousel__item-image-wrapper">
<img src="http://api.rovot.io/ws/efePe/imagenes/catalogo_efe.png" />
</div>
<p class="c-message-carrousel__item-title">Bigginers plan</p>
<p class="c-message-carrousel__item-subtitle">50 agents, 1 bot</p>
<div class="c-message-carrousel__item-actions">
<button class="c-message-carrousel__item-action">I want to know more </button>
<button class="c-message-carrousel__item-action">Buy</button>
<button class="c-message-carrousel__item-action">Buy all</button>
</div>
<small>10:00</small>
</div>
<div class="c-message-carrousel__item">
<div class="c-message-carrousel__item-image-wrapper">
<img src="http://api.rovot.io/ws/efePe/imagenes/catalogo_efe.png" />
</div>
<p class="c-message-carrousel__item-title">Bigginers plan</p>
<p class="c-message-carrousel__item-subtitle">50 agents, 1 bot</p>
<small>10:00</small>
</div>
</div>
<div class="c-message-carrousel__controls">
<button class="c-message-carrousel__control c-message-carrousel__control--left" disabled>
<span class="icon-arrow-right"></span>
</button>
<button class="c-message-carrousel__control c-message-carrousel__control--right">
<span class="icon-arrow-left"></span>
</button>
</div>
</div>
<!-- END HTML EXAMPLE MESSAGE -->
<!-- INIT SCRIPT EXAMPLE MESSAGE -->
<script>
const slide = direction => event => {
const WIDTH_ITEM = 300;
const carrousel = event.currentTarget.parentNode.parentNode;
const container = carrousel.querySelector('.c-message-carrousel__container');
let ctrlLeft;
let ctrlRight;
const maxPosition = container.children.length - 1;
const left = +container.style.left.replace('px', '') || 0;
const prevPosition = Math.abs(left / WIDTH_ITEM);
const nextPosition = direction === 'right' ? prevPosition + 1 : prevPosition - 1;
// Prevent double click
if(nextPosition < 0 || nextPosition > maxPosition)
return null;
const newValue = nextPosition * WIDTH_ITEM * -1;
container.style.left = `${newValue}px`;
if(direction === 'right') {
ctrlRight = event.currentTarget;
ctrlLeft = carrousel.querySelector('.c-message-carrousel__control--left');
} else if(direction === 'left') {
ctrlLeft = event.currentTarget;
ctrlRight = carrousel.querySelector('.c-message-carrousel__control--right');
}
if(nextPosition === 0)
ctrlLeft.disabled = true;
else
ctrlLeft.disabled = false;
if(nextPosition === maxPosition)
ctrlRight.disabled = true;
else
ctrlRight.disabled = false;
};
Array.from(document.querySelectorAll('.c-message-carrousel')).forEach(carrousel => {
const container = carrousel.querySelector('.c-message-carrousel__container');
const height = container.offsetHeight;
carrousel.style.height = `${height}px`;
const ctrlLeft = carrousel.querySelector('.c-message-carrousel__control--left');
const ctrlRight = carrousel.querySelector('.c-message-carrousel__control--right');
ctrlLeft.addEventListener('click', slide('left'))
ctrlRight.addEventListener('click', slide('right'))
});
</script>
<!-- END SCRIPT EXAMPLE MESSAGE -->
</div>
</div>
<div class="chattigo-widget__footer">
<div class="c-send-message widget-send-message-box-js">
<textarea class="c-input c-send-message__input widget-message-input-js" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="chattigo-icon-attachment"></span>
</a>
<a href="#">
<span class="chattigo-icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="chattigo-icon-send"></span>
</a>
</div>
</div>
</div>
</div>
</div>
.c-message-buttons
scss
.c-message-buttons {
margin-bottom: 17px;
@include element('wrapper') {
display: inline-flex;
flex-direction: column;
}
@include element('button') {
background-color: use-color('base', 'true-white');
border: 1px solid use-color('secondary');
border-radius: 8px;
color: use-color('secondary');
cursor: pointer;
font-size: 14px;
line-height: 22px;
margin-bottom: 6px;
min-height: 34px;
min-width: 208px;
outline: 0;
padding: 4px;
transition: all 0.25s ease-in-out;
&:focus {
outline: 0;
}
&:hover {
box-shadow: 0 3px 8px 0 rgba(66, 66, 67, 0.3);
@media (hover: none) {
box-shadow: none;
}
}
&:active {
box-shadow: 0 3px 8px 0 rgba(66, 66, 67, 0.3);
}
&:last-child {
margin-bottom: 0;
}
}
}
Example
html
<div class="chattigo-widget" style="height: 711px;">
<div class="chattigo-widget-header">
<div class="chattigo-widget-header__background"></div>
<img class="chattigo-widget-header__image" src="https://cdn.chattigo.com/assets/img/profiles/3_dummy.png" />
<div class="chattigo-widget-header__agent-info">
<label class="chattigo-widget-header__agent-info--name" title="Virginia Faustino Agente Chattigo QA">
Virginia Faustino Agente Chattigo QA
</label>
<span class="chattigo-widget-header__agent-info--status">
En linea
</span>
</div>
<div class="chattigo-widget-header__actions">
<a class="chattigo-widget-header__actions--item" href="./widget--config.html">
<span class="chattigo-icon-config"></span>
</a>
<a class="chattigo-widget-header__actions--item" href="./widget--trigger.html">
<span class="chattigo-icon-arrow-down"></span>
</a>
</div>
</div>
<div class="chattigo-widget__content widget-message-content-js" style="flex: 1;">
<div class="c-message-box">
<!-- INIT HTML EXAMPLE MESSAGE (min-height is for this example) -->
<div class="c-message-buttons">
<div class="c-message-box__message">
What do you need help with?
<small>10:00</small>
</div>
<div class="c-message-buttons__wrapper">
<button class="c-message-buttons__button">Be a memeber of Chattigo</button>
<button class="c-message-buttons__button">Know more about Chattigo</button>
</div>
</div>
<!-- END HTML EXAMPLE MESSAGE -->
</div>
</div>
<div class="chattigo-widget__footer">
<div class="c-send-message widget-send-message-box-js">
<textarea class="c-input c-send-message__input widget-message-input-js" placeholder="Envía un mensaje..."></textarea>
<div class="c-send-message__actions">
<a href="#">
<span class="chattigo-icon-attachment"></span>
</a>
<a href="#">
<span class="chattigo-icon-emoji"></span>
</a>
<a class="c-send-button" href="#">
<span class="chattigo-icon-send"></span>
</a>
</div>
</div>
</div>
</div>
</div>