.c-bot-carrusel

scss
.c-bot-carrusel {
  position: relative;

  @include element('arrow') {
    align-items: center;
    background-color: use-color('base', 'true-white');
    border: solid 1px use-color('blues');
    border-radius: 50%;
    color: use-color('blues');
    cursor: pointer;
    display: flex;
    font-size: 22px;
    height: 40px;
    justify-content: center;
    left: 0;
    margin: 5px;
    position: absolute;
    top: 40%;
    width: 40px;
    z-index: use-layer('content');
    
    @include modifier('right') {
      left: auto;
      right: 0;
    }
  }

  @include modifier('options-wrapper') {
    display: flex;
    margin: 32px 0;
    overflow-x: scroll;
    padding: 8px 0;
    position: relative;
    width: 100%;
  }
}

Contenedor para los opciones de izquierda y derecha, junto al wrapper para las opciones del carrusel.

  • .c-bot-carrusel--options-wrapper: para las opciones del carrusel.
  • .c-bot-carrusel__arrow: elemento de flecha.
    • .c-bot-carrusel__arrow--right: modificador de posición.

Example

html
<div class="c-bot-carrusel">
  <div class="c-bot-carrusel__arrow">
    <span class="icon-arrow-right"></span>
  </div>

  <div class="c-bot-carrusel__arrow c-bot-carrusel__arrow--right">
    <span class="icon-arrow-left"></span>
  </div>

  <div class="c-bot-carrusel--options-wrapper">
    <!-- c-bot-carruse-option -->
    <!-- c-bot-carruse-option -->
    <!-- c-bot-carruse-option -->
  </div>
</div>

.c-bot-carrusel-option

scss
.c-bot-carrusel-option {
  border: solid 2px use-color('grey', 'light-i');
  border-radius: 4px;
  margin-right: 24px;
  min-width: 185px;
  padding: 12px 16px 16px;
  position: relative;
  width: 185px;

  @include modifier('fake-option') {
    min-width: 16%;
  }

  @include element('remove') {
    align-items: center;
    background-color: use-color('base', 'true-white');
    border: solid 1px use-color('grey', 'light-i');
    border-radius: 50%;
    color: use-color('grey', 'light-alt');
    cursor: pointer;
    display: flex;
    font-size: 9px;
    height: 16px;
    justify-content: center;
    position: absolute;
    right: -8px;
    top: -8px;
    width: 16px;

    // overrides
    [class^='icon-'],
    [class*='icon-'] {
      display: flex;
    }
  }

  @include element('image-wrapper') {
    align-items: center;
    border-radius: 4px;
    box-shadow: $box-shadow-card-lvl-1;
    color: use-color('grey', 'light-alt');
    display: flex;
    font-size: 40px;
    height: 97px;
    justify-content: center;
    margin-bottom: 16px;
    width: 100%;
  }

  @include element('preview-image') {
    height: 80px;
  }

  // override
  .c-input {
    @include use-font('caption');
    padding: 4px 8px;

    &:focus {
      border: solid 1px use-color('blues');
    }
  }

  textarea {
    height: 72px;
    resize: none;
  }
}

Examples

html
<div class="u-example-padding">  

<div class="c-bot-carrusel-option">
  <span class="c-bot-carrusel-option__remove">
    <span class="icon-close"></span>
  </span>

  <div class="c-bot-carrusel-option__image-wrapper">
    <span class="icon-gallery"></span>
  </div>
  
  <input type="text" class="c-input" placeholder="Escriba el titulo acá." />

  <textarea class="c-input" placeholder="Escriba una descripción acá ..."></textarea>

  <input type="text" class="c-input" placeholder="Escriba un botón acá." />

  <a class="c-button c-button--bot-add-option">
    agregar nuevo botón
  </a>
</div>

</div>
html w/ image
<div class="u-example-padding">  

<div class="c-bot-carrusel-option">
  <span class="c-bot-carrusel-option__remove">
    <span class="icon-close"></span>
  </span>

  <div class="c-bot-carrusel-option__image-wrapper">
    <img class="c-bot-carrusel-option__preview-image" src="https://feature-ux-450-diseno-migracion-administrador--chattigo-webkit.netlify.app/assets/img/example-preview-image.png" />
  </div>
  
  <input type="text" class="c-input" placeholder="Escriba el titulo acá." />

  <textarea class="c-input" placeholder="Escriba una descripción acá ..."></textarea>

  <input type="text" class="c-input" placeholder="Escriba un botón acá." />

  <a class="c-button c-button--bot-add-option">
    agregar nuevo botón
  </a>
</div>

</div>