.c-overlay-options [deprecated]

scss
.c-overlay-options {
  background-color: use-color('base', 'white');
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  right: -100%;
  top: 0;
  transition: all 0.4s;
  width: 90%;
  z-index: use-layer('side-menu');

  @include media-breakpoint-up('phone-ii') {
    right: -355px;
    width: 355px;
  }

  // header
  @include element('header') {
    background-color: use-color('base', 'true-white');
    display: flex;
    flex-direction: column;
    padding: 8px 16px;

    @include modifier('label') {
      @include use-font('subheading', 'light');

      @include if-block-has-modifier('c-overlay-options__header', 'complementary') {
        align-items: center;
        display: flex;
      }
    }

    @include modifier('close-icon') {
      color: use-color('grey', 'light');
      cursor: pointer;

      @include if-block-has-modifier('c-overlay-options__header', 'complementary') {
        color: use-color('base', 'true-white');
        line-height: 1;
        margin-right: 8px;
      }
      
      span {
        font-size: 16px;
      }
    }

    @include modifier('complementary') {
      background-color: use-color('complementary', 'dark');
      color: use-color('base', 'true-white');
      display: flex;
      padding: 16px 16px 12px;

      // overrides
      .c-breadcrumbs {
        @include element('item') {
          color: use-color('base', 'true-white');

          a {
            color: use-color('base', 'true-white');
          }

          &:last-child {
            a {
              color: use-color('base', 'true-white');
              font-weight: bold;
            }
          }
        }
      }
    }

    // overrides
    .app-form--search,
    .app-c-section-title,
    .c-indicator-group {
      margin: 8px 0 0;
    }

    .app-c-section-title {
      padding: 0;
      width: inherit;
    }

    // overrides
    .c-breadcrumbs {
      @include element('item') {
        @include use-font('subheading');

        a {
          @include use-font('subheading');
        }

        &:last-child {
          a {
            font-weight: bold;
          }
        }
      }
    }
  }

  // content-area
  @include element('content') {
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 4px;

    @include modifier('with-side-padding') {
      padding: 0 16px 4px;
    }

    // overrides
    .c-empty-state {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 70vh;
      justify-content: center;
    }
  }

  // footer - actions
  @include element('actions') {
    background-color: use-color('base', 'true-white');
    border-top: solid 1px use-color('grey', 'light-i');
    padding: 16px;
  }

  @include modifier('open') {
    right: 0;
  }
}

Block

  • c-overlay-options: creado con los atributos de position: fixed y right: -100% , para que no sea visible.

    Modifieres

    • c-overlay-options--open: atributo right: 0.

Elements

  • c-overlay-options__header

    Modifieres

    • c-overlay-options__header--label
    • c-overlay-options__header--complementary
    • c-overlay-options__header--close-icon
  • c-overlay-options__content

    Modifieres

    • c-overlay-options__content--with-side-padding
  • c-overlay-options__actions

DEPRECATED:

use .c-side-content instead.

Example

html
<div class="u-example-padding" style="min-height: 600px;"> <!-- this div is just for doc example -->
  <div class="l-main__overlay"></div>
  
  <div class="c-overlay-options c-overlay-options--open">
    <div class="c-overlay-options__header">
      <label class="c-overlay-options__header--label">
        <a class="c-overlay-options__header--close-icon" onclick="toggleRightMenuB()">
          <span class="icon-close"></span>
        </a>
  
        Some Title
      </label>
    </div>
  
  
    <div class="c-overlay-options__content u-scrolling-content">
      
    </div>        
  
    <div class="c-overlay-options__actions">
      <a class="c-button c-button--primary c-button--thin" href="" disabled>
        Some Action
      </a>
    </div>
  </div>
</div>

.c-side-content

scss
.c-side-content {
  background-color: use-color('base', 'white');
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  right: -100%;
  top: 0;
  transition: all 0.4s;
  width: 90%;
  z-index: use-layer('side-menu');

  @include media-breakpoint-up('phone-ii') {
    right: -355px;
    width: 355px;
  }

  // header
  @include element('header') {
    background-color: use-color('base', 'true-white');
    display: flex;
    flex-direction: column;
    padding: 8px 16px;

    @include modifier('bg-complementary') {
      background-color: use-color('complementary', 'light');
      color: use-color('base', 'true-white');
      display: flex;
      height: 54px;
      justify-content: center;
      padding: 0 16px;
      // NOTE: revisar este padding
      // padding: 16px 16px 12px;

      // overrides
      .c-breadcrumbs {
        margin-bottom: 0;
        
        @include element('item') {
          color: use-color('base', 'true-white');
          cursor: default;
          margin: 0;
          padding: 0;
          
          a,
          span {
            color: inherit;
          }

          a {
            cursor: pointer;
            text-decoration: underline;
          }

          &::before {
            content: '/';
            display: inline-block;
            font-weight: inherit;
            margin: 0 5px;
          }

          &::after {
            content: normal;
          }

          &:first-child {
            &::before {
              content: normal;
            }
          }

          &:last-child {
            color: inherit;
            font-weight: 500;

            a {
              color: inherit;
              font-weight: 500;
            }

            &::after {
              content: normal;
            }
          }
        }
      }
    }

    // overrides
    .app-form--search,
    .app-c-section-title,
    .c-indicator-group {
      margin: 8px 0 0;
    }

    .app-c-section-title {
      padding: 0;
      width: inherit;
    }

    // overrides
    .c-breadcrumbs {
      @include element('item') {
        @include use-font('subheading');

        a {
          @include use-font('subheading');
        }

        &:last-child {
          a {
            font-weight: bold;
          }
        }
      }
    }
  }

  @include element('label') {
    @include use-font('subheading', 'light');
    align-items: center;
    display: flex;

    @include if-block-has-modifier('c-side-content__header', 'bg-complementary') {
      color: use-color('base', 'true-white');
    }
  }

  @include element('close-icon') {
    background-color: transparent;
    border: 0;
    color: use-color('grey', 'light');
    cursor: pointer;
    margin-right: 8px;
    outline: 0;
    padding: 0;

    @include if-block-has-modifier('c-side-content__header', 'bg-complementary') {
      color: use-color('base', 'true-white');
      margin-right: 12px;

      span {
        font-size: 19px;
      }
    }
    
    span {
      display: flex;
      font-size: 16px;
    }
  }

  // content-area
  @include element('content') {
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 4px;

    @include modifier('w-padding') {
      padding: 0 16px 4px;
    }

    // overrides
    .c-empty-state {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 70vh;
      justify-content: center;
    }
  }

  // footer - actions
  @include element('actions') {
    background-color: use-color('base', 'true-white');
    border-top: solid 1px use-color('grey', 'light-i');
    padding: 16px;
  }

  @include modifier('open') {
    right: 0;
  }
}

Main

  • c-side-content: creado con los atributos de position: fixed y right: -100% , para que no sea visible.
    • Modifier c-side-content--open: atributo right: 0.

Elements

  • c-side-content__header: elemento contenedor de los elementos del header.

    • Modifier c-side-content__header--bg-complementary: modifica el background color.
  • c-side-content__label: atributos de fonts y display para el label del header

  • c-side-content__close-icon: este elemento esta hecho para ser usado dentro del elemento c-side-content__label

  • c-side-content__content: para todo el contenido.

    • Modifier c-side-content__content--w-padding: agrega padding: 0 16px 4px
  • c-side-content__actions: para las acciones (btns, anchors, etc…).

Examples

html
<div class="u-example-padding" style="min-height: 600px;"> <!-- this div is just for doc example -->
  <div class="l-main__overlay"></div>
  
  <div class="c-side-content c-side-content--open">
    <div class="c-side-content__header">
      <label class="c-side-content__label">
        <a class="c-side-content__close-icon">
          <span class="icon-close"></span>
        </a>
  
        Some Title
      </label>
    </div>
  
  
    <div class="c-side-content__content u-scrolling-content">
      
    </div>        
  
    <div class="c-side-content__actions">
      <a class="c-button c-button--primary c-button--thin" href="" disabled>
        Some Action
      </a>
    </div>
  </div>
</div>
html header complementary w/ breadcrumbs
<div class="u-example-padding" style="min-height: 600px;"> <!-- this div is just for doc example -->
  <div class="l-main__overlay"></div>
  
  <div class="c-side-content c-side-content--open">
    <div class="c-side-content__header c-side-content__header--bg-complementary">
      <label class="c-side-content__label">
        <a class="c-side-content__close-icon">
          <span class="icon-close"></span>
        </a>
  
        <ul class="c-breadcrumbs">
          <li class="c-breadcrumbs__item">
            <a href="#">
              Some Title
            </a>
          </li>
          <li class="c-breadcrumbs__item">
            <a href="#">
              second level thing
            </a>
          </li>
        </ul>
      </label>
    </div>
  
    <div class="c-side-content__content u-scrolling-content">
      <div class="c-empty-state">
        <img class="c-empty-state__image" src="https://cdn.chattigo.com/assets/img/empty-states/agents.svg">
        
        <div class="c-empty-state__title">
          no tienes chats anteriores con este usuario
        </div>
        
        <div class="c-empty-state__content">
          cuando cierras una conversación aparecerá en el historial.
        </div>
      </div>
    </div>
  </div>
</div>

.l-main

scss
.l-main {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  overflow: hidden;
  position: relative;

  @include media-breakpoint-up('tablet-landscape') {
    grid-template-columns: 220px 1fr;
  }

  @include element('side-menu') {
    background-image: use-color('gradients', balanced);
    box-shadow: $box-shadow-card-lvl-2;
    box-sizing: border-box;
    height: 100%;
    left: -220px;
    overflow: hidden;
    position: absolute;
    width: 220px;
    z-index: use-layer('side-menu');
    
    @include media-breakpoint-down('medium') {
      transition: all 0.4s;
    }

    @include media-breakpoint-up('tablet-landscape') {
      display: block;
      left: 0;
      // opacity: 1;
      position: relative;
      z-index: use-layer('content-2');
    }

    @include modifier('open') {
      height: 100%;
      left: 0;
      position: absolute;
      width: 220px;

      @include media-breakpoint-up('tablet-landscape') {
        position: relative;
      }
    }

    @include modifier('open-icon') {
      cursor: pointer;
      left: 4px;
      position: absolute;
      top: 0;

      @include media-breakpoint-up('tablet-landscape') {
        display: none;
      }

      [class^='icon-'],
      [class*=' icon-'] {
        color: use-color('grey', light);
        font-size: 20px;
      }
    }

    @include modifier('close-icon') {
      color: use-color('grey', 'light-i');
      cursor: pointer;
      left: 190px;
      position: absolute;
      text-decoration: none;
      top: 16px;
      z-index: use-layer('modal-2');

      @include media-breakpoint-up('tablet-landscape') {
        display: none;
      }

      [class^='icon-'],
      [class*=' icon-'] {
        font-size: 16px;
      }
    }
  }

  @include element('content') {
    background-color: use-color('grey', light-iii);
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-gap: 16px;
    grid-template-columns: minmax(304px, 1fr);
    padding: 8px;

    @include media-breakpoint-up('desktop') {
      grid-gap: 16px;
      // This almost do it!
      grid-template-columns: minmax(583px, 1fr) minmax(310px, 320px);
      padding: 24px 16px;

      @include if-block-has-modifier('l-main__content', 'one-pile', true) {
        grid-template-columns: 1fr;
      }

      @include if-block-has-modifier('l-main__content', 'two-piles', true) {
        grid-template-columns: 368px 368px;
      }

      @include if-block-has-modifier('l-main__content', 'two-halfs', true) {
        grid-template-columns: 1fr 1fr;
      }

      @include if-block-has-modifier('l-main__content', 'three-piles', true) {
        grid-template-columns: 1fr 1fr 1fr;
      }
      
      @include if-block-has-modifier('l-main__content', 'one-fr', true) {
        grid-template-columns: minmax(304px, 1fr);
      }
    }

    @include modifier('wrapper') {
      > div {
        margin-bottom: 16px;
      }
    }
  }

  @include element('overlay') {
    background-color: transparentize($color: use-color('base', 'black'), $amount: 0.2);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all 0.4s;
    width: 100%;
    z-index: use-layer('content-3');
  }

  @include element('wrapper') {
    .l-dashboard {
      &__row-section {
        margin-bottom: 0;

        @include media-breakpoint-up('stats-top') {
          margin-bottom: 8px;
        }
      }
    }
  }

  @include element('content-header') {
    align-items: flex-start;
    display: flex;
    flex-flow: wrap;
    grid-column: 1/-1;
    padding: 0 4px;
    position: relative;

    @include media-breakpoint-up('tablet') {
      flex-flow: nowrap;
    }

    @include modifier('open-side-menu') {
      cursor: pointer;
      margin: 4px 8px 0 0;
      order: 1;

      @include media-breakpoint-up('tablet-landscape') {
        display: none;
      }

      [class^='icon-'],
      [class*=' icon-'] {
        color: use-color('grey', light);
        display: flex;
        font-size: 20px;
      }
    }

    @include modifier('main-content') {
      flex-wrap: wrap;
      order: 3;
      width: 100%;

      @include media-breakpoint-up('tablet') {
        order: 2;
      }
    }
    
    @include modifier('title') {
      @include use-font('title', 'bold');
      color: use-color('base', 'black');
      margin: 0;

      @include media-breakpoint-up('tablet') {
        @include use-font('h3', 'bold');
        line-height: 28px;
      }
  
      &::first-letter {
        text-transform: uppercase;
      }
    }

    @include modifier('actions') {
      border-bottom: solid 4px use-color('complementary', 'base');
      display: flex;
      height: auto;
      justify-content: flex-end;
      margin: 4px 0 4px auto;
      order: 2;
      padding: 0 8px 4px;
      position: relative;
      width: fit-content;

      @include media-breakpoint-up('tablet') {
        order: 3;
        padding: 0 8px 8px;
      }

      > *:not(:first-child) {
        margin-left: 20px;
      }

      // overrides
      .c-action-link {
        border: 0;
        display: flex;
        font-size: 22px;
        position: relative;
        text-decoration: none;

        &:hover {
          border: 0;
          
          .icon-bell {
            transform: rotate(12deg);
            transition: ease-in-out 0.25s;
          }
        }

        // icons overrides
        .icon-bell {
          color: use-color('complementary', 'base');
        }
      }

      .c-badge {
        right: -8px;
        top: 0;
      }
    }
  }
}

Layout principal, hecha para contener un side-menu y el contenido del dashboard.

El modificador l-main__side-menu--close-icon debe ser usado dentro del elemento l-main__side-menu.

El modificador l-main__content-header--open-side-menu debe ser usado dentro del elemento l-main__content-header.

Se puede usar la clase modificadora .l-main__side-menu--open para mostrar el side-menu en mobile, Cuando se agregue esta clase modificadora hay que quitar el attributo display: none del elemento l-main__overlay.

El elemento l-main__overlay cumple la función de oscurecer el contenido detras del sidemenu en mobile.

Example

html
<div class="u-example-padding"> <!-- this div is just for doc example -->

  <div class="l-main">
    <div class="l-main__overlay" style="display: none;"></div>
    
    <nav class="l-main__side-menu l-main__side-menu--open">
      <a class="l-main__side-menu--close-icon">
        <span class="icon-close"></span>
      </a>
    </nav>
    
    <div class="l-main__content">
      <header class="l-main__content-header">
        <a class="l-main__content-header--open-side-menu" onclick="toggleSideMenu()">
          <span class="icon-sidebar"></span>
        </a>
        
        <div class="l-main__content-header--main-content">
          <h3 class="l-main__content-header--title">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </h3>
      
          <ul class="c-breadcrumbs">
            <li class="c-breadcrumbs__item">
              <a href="#">
                home
              </a>
            </li>
            <li class="c-breadcrumbs__item">
              <a href="#">
                second level thing
              </a>
            </li>
            <li class="c-breadcrumbs__item">
              <a href="#">
                last level
              </a>
            </li>
          </ul>
        </div>
      
        <div class="l-main__content-header--actions">
          <a class="c-action-link">
            <span class="icon-download"></span>
          </a>
      
          <a class="c-action-link">
            <span class="icon-language-es"></span>
          </a>
      
          <a class="c-action-link">
            <span class="icon-time-zone"></span>
          </a>
      
          <a class="c-action-link">
            <span class="icon-bell"></span>
            <span class="c-badge">10</span>
          </a>
          
          <a class="c-action-link">
            <span class="icon-filters"></span>
          </a>
        </div>
      </header>

      <!-- all content -->
    </div>
  </div>

</div>

.l-dashboard

scss
.l-dashboard {
  @include element('header') {
    align-items: center;
    display: flex;
    grid-column: 1/-1;
    height: auto;
    justify-content: space-between;
    // max-height: 32px;
    padding: 0 4px 0 32px;
    position: relative;

    @include media-breakpoint-up('tablet-landscape') {
      padding: 0 4px;
    }

    @include modifier('wrapper') {
      display: flex;
      flex-direction: column;
      width: 100%;

      @include media-breakpoint-up('tablet-landscape') {
        flex-direction: row;
      }

      //overrides
      .c-select {
        margin-left: 0;
        max-width: 320px;

        @include media-breakpoint-up('tablet-landscape') {
          margin-left: 8px;
        }
      }
    }

    @include modifier('title') {
      @include use-font('h3', 'bold');
      margin: 0 0 4px;

      @include media-breakpoint-up('tablet-landscape') {
        margin: 0;
      }

      &::first-letter {
        text-transform: uppercase;
      }
    }

    @include modifier('data-status') {
      @include use-font('body');
      color: use-color('grey', 'light');
      padding-left: 12px;
      position: relative;

      &::after {
        background-color: use-color('secondary');
        border-radius: 50%;
        content: '';
        height: 8px;
        left: 0;
        position: absolute;
        top: 7px;
        width: 8px;
      }

      &::first-letter {
        text-transform: uppercase;
      }
    }

    //overrides
    .c-select {
      margin-bottom: 0;
      // max-width: 220px;
    }
  }

  @include element('row-section') {
    display: grid;
    grid-auto-rows: minmax(min-content, max-content);
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    overflow-y: scroll;
    padding: 8px 4px;
    position: relative;

    @include media-breakpoint-up('stats-top') {
      overflow-y: inherit;
      padding: 0;
    }

    @include modifier('full-width') {
      grid-column: 1/-1;
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @include element('poll-section') {
    display: grid;
    grid-gap: 8px;
    grid-row-end: 8;
    grid-template-columns: 1fr;

    @include media-breakpoint-up(tablet) {
      grid-template-columns: 1fr 1fr;
    }

    @include media-breakpoint-up(desktop) {
      grid-row-end: unset;
    }
  }
}

Este componente entrega elementos de uso especifico para el layout del dashboard.

  • l-dashboard__header : Para los titulos y estados de los datos.
  • l-dashboard__row-section : elemento de ayuda para almacenar hasta 3 c-stats-card
  • l-dashboard__poll-section : elemento de ayuda para las encuestas.

Examples

html dashboard header
<header class="l-dashboard__header">
  <h3 class="l-dashboard__header--title">
    Resumen

    <a class="l-main__side-menu--open-icon">
      <span class="icon-sidebar"></span>
    </a>
  </h3>

  <span class="l-dashboard__header--data-status">
    Datos en tiempo real
  </span>
</header>
html row-section
<div class="l-dashboard__row-section">

</div>
html poll-section
<div class="l-dashboard__poll-section">

</div>

.l-outbound-header

scss
.l-outbound-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 100%;

  @include element('title') {
    @include use-font('body', bold);
    color: use-color('grey', light);
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    width: fit-content;
  }
  
  @include element('subtitle') {
    @include use-font('caption');
    line-height: 12px;
  }

  .c-button {
    align-self: center;
    padding: 8px 12px;
    width: fit-content;
  }
}

*Flex display y modifica el componente .c-button

Examples

html
<div class="l-outbound-header">    
  <div class="l-outbound-header__title">
    outbound
    <small class="l-outbound-header__subtitle">
      32 mensajes programados
    </small>
  </div>    

  <a href="" class="c-button c-button--secondary">
    programar nuevo
  </a>
</div>
html
<div class="l-outbound-header">    
  <div class="l-outbound-header__title">
    outbound
    <ul class="c-stepper">
      <li class="step-complete"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <a href="" class="c-button c-button--secondary">
    Programados
  </a>
</div>

.l-card

scss
.l-card {
  @include element('actions') {
    display: flex;
    justify-content: center;
    padding: 0 0 16px;
    width: 100%;
  }
}

Layout creado para agrupar las card .c-user-card.

Consta con el elemento:

  • .l-card__actions: para componentes como .c-loader o el boton .c-button--low-priority para cargar más datos.

Examples

html w/ loader
<div class="l-card__actions">
  <div class="c-loader"></div>
</div>
html w/ low priority button
<div class="l-card__actions">
  <button class="c-button c-button--low-priority">
    Cargar más
  </button>
</div>

.l-inbox-n-chat

scss
.l-inbox-n-chat {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 1fr;

  @include media-breakpoint-up('tablet') {
    grid-template-columns: 304px 1fr;
  }

  @include element('inbox-wrapper') {
    display: none;
    height: 82vh;
    overflow: hidden;

    @include media-breakpoint-up('tablet') {
      display: block;
    }

    // Overrides
    .c-agent-status-card {
      margin-bottom: 16px;
    }

    .l-inbox-n-chat {
      @include element('inbox') {
        height: calc(100% - 151px);
        
        // overrides
        .u-scrolling-content {
          height: 85%;
          margin-top: 8px;
        }
      }
    }
  }

  @include element('inbox') {
    background-color: use-color('base', 'true-white');
    border: 1px solid use-color('grey', 'light-i');
    box-sizing: border-box;
    display: none;
    height: 82vh;
    overflow: hidden;
    position: relative;

    @include media-breakpoint-up('tablet') {
      display: block;
    }

    // overrides
    .c-inbox-card {
      &__counter {
        padding: 16px 8px 16px 34px;
        z-index: use-layer('content');
  
        &::before {
          top: 16px;
        }
      }
    }
  
    .u-scrolling-content {
      height: 92%;
      padding: 4px 12px;
    }
  
    .c-transfer-card {
      margin-bottom: 8px;
    }
  }

  @include element('chat') {
    border-radius: 8px;
    box-shadow: $box-shadow-card-lvl-1;
    display: grid;
    grid-template-columns: minmax(100px, auto);
    grid-template-rows: 100px 1fr auto;
    height: 82vh;
    overflow: hidden;
    
    .c-chat-header {
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      box-shadow: $box-shadow-card-lvl-1;
      z-index: use-layer('content');
  
      @include element('data') {
        margin-left: 16px;
      }
    }
  
    .c-supervisor-message {
      width: auto;
    }
  }
}

Layout creado para agrupar los componentes de inbox y chat.

Elemento __inbox-wrapper

Este elemento fue creado para contener el elemento de inbox junto a .c-agent-status-card

  <div class="l-inbox-n-chat">
    <div class="l-inbox-n-chat__inbox-wrapper">
      <!-- .c-agent-status-card -->
      <!-- .l-inbox-n-chat__inbox -->
    </div>
    *
    *
    *
  </div>

Example

html
<div class="l-inbox-n-chat" style="display: none;">
  <div class="l-inbox-n-chat__inbox">
    <!-- .c-inbox-card__counter -->
    <!-- .u-scrolling-content -->
  </div>

  <div class="l-inbox-n-chat__chat">
    <div class="c-chat-header c-chat-header--white-background"></div>

    <div class="u-scroll-y">
      <!-- .c-message-box -->
    </div>

    <div class="c-supervisor-message"></div>
      <!-- .c-supervisor-message__mode -->
      <!-- .c-send-message -->
    </div>
  </div>
</div>

.l-side-filter

scss
.l-side-filter {
  .c-input-wrapper {
    &:first-child {
      margin: 16px 0;
    }
  }

  .c-select {
    margin-bottom: 28px;
  }
}

Layout creado para agrupar los componentes del formulario de filtros.

Modifica las clases: c-input-wrapper:first-child y c-select dandoles más margenes hacia abajo (y arriba según corresponda).

Example

html
<div class="l-side-filter">
  <div class="c-input-wrapper c-input-wrapper--prefix">
    <div class="c-input__prefix">
      <span class="icon-search"></span>
    </div>
    <input type="text" class="c-input" placeholder="Buscar" />
  </div>

  <label class="c-input__label">
    <span class="icon-typification"></span>
    Cierre
  </label>
  <select class="c-select">
    <option id="0">
      Select option
    </option>
    <option id="1">Option 1</option>
    <option id="2">Option 2</option>
  </select>

  <label class="c-input__label">
    <span class="icon-ability"></span>
    Canales
  </label>
  <select class="c-select">
    <option id="0">
      Select option
    </option>
    <option id="1">Option 1</option>
    <option id="2">Option 2</option>
  </select>
</div>