.chattigo-widget-trigger
scss
.chattigo-widget-trigger {
background-image: use-color(gradients, balanced);
border-radius: 50%;
bottom: 16px;
cursor: pointer;
height: 60px;
position: fixed;
right: 24px;
text-align: center;
width: 60px;
z-index: use-layer('widget-trigger');
// z-index: 50000;
@include modifier('complete') {
background-image: none;
}
@include element('logo') {
height: 33px;
position: absolute;
right: 13px;
top: 12px;
width: 33px;
@include if-block-has-modifier('chattigo-widget-trigger', 'complete') {
bottom: 0;
height: auto;
max-height: 122px;
max-width: 100vw;
position: absolute;
right: 0;
top: auto;
width: auto;
}
}
@include media-breakpoint-up(webchat) {
display: block;
}
}Estructura y clases para el gatillador del widget de chattigo.
Examples
html
<!-- this div is just for the example -->
<div class="u-widget-trigger-example-margin">
<!-- component -->
<div class="chattigo-widget-trigger">
<img class="chattigo-widget-trigger__logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />
</div>
<!-- end component -->
</div>
html
trigger complete
<!-- this div is just for the example -->
<div style="margin: 20px auto;min-height: 100px;">
<!-- component -->
<div class="chattigo-widget-trigger chattigo-widget-trigger--complete">
<img class="chattigo-widget-trigger__logo" src="https://cdn.chattigo.com/assets/img/trigger/robot.gif" />
</div>
<!-- end component -->
</div>