.chattigo-widget-header

scss
.chattigo-widget-header {
  color: use-color(base, true-white);
  display: flex;
  height: 52px;
  margin-bottom: 8px;
  padding: 16px 16px 0;

  @include media-breakpoint-up('webchat') {
    margin-bottom: 16px;
  }

  // welcome page components
  @include if-block-has-modifier('chattigo-widget', 'welcome') {
    color: use-color(base, true-white);
    display: block;
    height: auto;
    margin-bottom: 16px;
    padding: 64px 32px 0;

    @include element('logo') {
      fill: use-color(base, true-white);
      height: 44px;
      max-width: 230px;
      width: auto;
    }

    @include element('h3') {
      @include use-font('h3', 'bold');
      margin: 8px 0;
      overflow-wrap: break-word;
      text-align: left;
    }
    
    @include element('subheading') {
      @include use-font('subheading', 'regular');
      min-width: 280px;
      overflow-wrap: break-word;
      text-align: left;
    }

    @include media-breakpoint-up('phone-i') {
      padding: 64px 40px 0;
    }
  }
  
  @include if-block-has-modifier('chattigo-widget', 'ending') {
    color: use-color(base, true-white);
    display: block;
    height: auto;
    margin: 70px 0 4px;
    padding: 64px 32px 0;

    @include element('logo') {
      fill: use-color(base, true-white);
      height: 44px;
      max-width: 230px;
      width: auto;
    }

    @include element('h3') {
      @include use-font('h3', 'bold');
      margin: 8px 0;
      overflow-wrap: break-word;
      text-align: left;
    }
    
    @include element('subheading') {
      @include use-font('subheading', 'regular');
      min-width: 280px;
      overflow-wrap: break-word;
      text-align: left;
    }

    @include media-breakpoint-up('phone-i') {
      padding: 16px 40px 0;
    }
  }
  
  @include element('background') {
    background-color: use-color(secondary);
    background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
    background-position: 100% 132%, 0 0;
    background-repeat: no-repeat;
    background-size: 166px, 100%;
    height: 68px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: use-layer('behind');
    // z-index: -1;

    @include if-block-has-modifier('chattigo-widget', 'welcome') {
      background-color: use-color(secondary);
      background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
      background-position: 100% 0%, 0 0;
      background-repeat: no-repeat;
      background-size: 235px, 100%;
      height: 267px;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: use-layer('behind');
      // z-index: -1;
  
      @include media-breakpoint-up('tablet') {
        border-radius: 8px 8px 0 0;
      }
    }
    
    @include if-block-has-modifier('chattigo-widget', 'ending') {
      background-color: use-color(secondary);
      background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
      background-position: 100% 0%, 0 0;
      background-repeat: no-repeat;
      background-size: 235px, 100%;
      height: 310px;
      left: 0;
      overflow: hidden;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: use-layer('behind');
      // z-index: -1;
  
      @include media-breakpoint-up('tablet') {
        border-radius: 8px 8px 0 0;
      }
    }
  }

  @include element('image') {
    border-radius: 50%;
    height: 36px;
    margin-right: 8px;
    width: 36px;
  }
  
  @include element('agent-info') {
    display: flex;
    flex-direction: column;
    max-width: 60%;
    
    @include modifier('name') {
      @include use-font('body', 'bold');
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    @include modifier('status') {
      @include use-font('caption', 'regular');
      line-height: 12px;
    }
  }
  
  @include element('actions') {
    display: flex;
    margin-left: auto;
    margin-top: 6px;
    
    @include modifier('item') {
      color: use-color(base, true-white);
      cursor: pointer;
      margin: 0 8px;
      text-decoration: none;
      width: 24px;

      span {
        font-size: 24px !important;
      }

      &:last-child() {
        align-items: center;
        background-color: transparentize(use-color(base, 'black'), 0.8);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        margin-right: 0;
        margin-top: -6px;
        max-height: 20px;
        min-height: 20px;
        padding: 8px;
        width: 20px;

        span {
          font-size: 16px !important;
        }
      }
    }
  }

  @include modifier('fixed') {
    align-items: center;
    background-color: use-color(secondary);
    background-image: url('https://cdn.chattigo.com/assets/img/logo-wing.svg'), use-color(gradients, balanced);
    background-position: 100% 0%, 0 0;
    background-repeat: no-repeat;
    background-size: 235px, 155%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 16px 16px 16px 32px;
    position: fixed;
    width: inherit;
    z-index: use-layer('base');
    // z-index: 1;

    @include media-breakpoint-up('webchat') {
      border-radius: 8px 8px 0 0;
    }
  }
}

.chattigo-widget-header - Este elemento es el contenedor padre de todos los elementos correspondientes al header en sí:

<div class="chattigo-widget-header">
  *
  *
  *
</div>

.chattigo-widget-header__background - El background del header se implementa solo agregando esta clase en un div separado del resto.

<div class="chattigo-widget-header__background"></div>

Header Welcome page

  • .chattigo-widget-header__h3
  • .chattigo-widget-header__subheading
<div class="chattigo-widget-header">
  <h3 class="chattigo-widget-header__h3">
    Chatear es la nueva forma de hablar
  </h3>
        
  <div class="chattigo-widget-header__subheading">
    Tu negocio crece cuando te comunicas mejor con tus clientes.
  </div>
</div>

Fixed Header Welcome page

<div class="chattigo-widget-header--fixed">
  <img class="chattigo-widget-header__logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />

  <a class="chattigo-widget__close-icon">
    <span class="icon-close"></span>
  </a>
</div>

Example

html header welcome page
<!-- this div is just for the example -->
<div class="u-widget-example-margin"> 
  <!-- component -->
  <div class="chattigo-widget chattigo-widget--welcome">
    <div class="chattigo-widget-header--fixed">
      <img class="chattigo-widget-header__logo" src="https://cdn.chattigo.com/assets/img/isotipo-grey.svg" />
    
      <a class="chattigo-widget__close-icon">
        <span class="icon-close"></span>
      </a>
    </div>
  
    <div class="chattigo-widget-header__background"></div>
  
    <div class="chattigo-widget-header">
      <h2 class="chattigo-widget-header__h3">Chatear es la nueva forma de hablar</h2>
      
      <div class="chattigo-widget-header__subheading">
        Tu negocio crece cuando te comunicas mejor con tus clientes.
      </div>
    </div>
  </div>
  <!-- end component -->
</div>

Requires

@function use-color()

@mixin element()

@mixin modifier()

@mixin use-font()

Header in Chat

  • .chattigo-widget-header__image
  • .chattigo-widget-header__agent-info
    • .chattigo-widget-header__agent-info--name
    • .chattigo-widget-header__agent-info--status
  • .chattigo-widget-header__actions
    • .chattigo-widget-header__actions--item
<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">
      Porter Collins
    </label>
    <span class="chattigo-widget-header__agent-info--status">
      En linea
    </span>
  </div>
  <!-- actions -->
  <div class="chattigo-widget-header__actions">
    <a class="chattigo-widget-header__actions--item">
      <span class="icon-config"></span>
    </a>
  
    <a class="chattigo-widget-header__actions--item">
      <span class="icon-arrow-down"></span>
    </a>
  </div>
</div>

Example

html header in chat
<!-- this div is just for the example -->
<div class="u-widget-example-margin"> 
  <!-- component -->
  <div class="chattigo-widget">
  
    <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">
          Porter Collins
        </label>
        <span class="chattigo-widget-header__agent-info--status">
          En linea
        </span>
      </div>
      <!-- actions -->
      <div class="chattigo-widget-header__actions">
        <a class="chattigo-widget-header__actions--item">
          <span class="icon-config"></span>
        </a>
      
        <a class="chattigo-widget-header__actions--item">
          <span class="icon-arrow-down"></span>
        </a>
      </div>
    </div>
  </div>
  <!-- end component -->
</div>

Requires

@function use-color()

@mixin element()

@mixin modifier()

@mixin use-font()