.c-bot-property

scss
.c-bot-property {
  background-color: use-color('base', 'true-white');
  display: flex;
  flex-direction: column;
  padding: 5px 15px;

  @include element('actions') {
    display: flex;
    justify-content: flex-start;
    margin-top: 30px;
    padding: 8px;

    .c-button {
      padding: 7px 30px;
      width: 150px;
    }
  }
}

Contenedor principal de las opciones de las propiedades

Example

html
<div class="c-bot-property">
  *
  *
  *
  <div class="c-bot-property__actions">
    <button class="c-button c-button--bot-property">
      Guardar
    </button>
  </div>
</div>

.c-bot-property--wrapper

scss
.c-bot-property {
  @include modifier('wrapper') {
    align-items: center;
    display: flex;
    margin-bottom: 32px;
  }
  
  @include element('icon-wrapper') {
    align-items: center;
    background-color: use-color('complementary');
    border-radius: 50%;
    color: use-color('base', 'true-white');
    display: flex;
    height: 44px;
    justify-content: center;
    margin-right: 6px;
    min-width: 44px;
    width: 44px;
  }

  @include element('name-wrapper') {
    width: 100%;

    p {
      margin-top: 4px;
      position: absolute;
    }
  }

  @include element('icon') {
    // display: flex;
    font-size: 27px;
    
    @include modifier('small') {
      display: flex;
      font-size: 22px;
    }
  }

  @include element('label-input') {
    box-shadow: 0 0 5px 0 #e0e0e0;
    margin: 0;
    outline: 0;
  }

  @include modifier('link-info') {
    margin-left: 8px;
    margin-top: -10px;

    @include element('icon-wrapper') {
      background-color: use-color('secondary');
      cursor: pointer;
      height: 30px;
      min-width: 30px;
      width: 30px;
    }

    @include element('name-wrapper') {
      @include use-font('link');
    }
  }
}

Clase creada para envolver un icono descriptivo junto a un label/input(c-bot-property__label-input)

Example

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

<div class="c-bot-property--wrapper">
  <div class="c-bot-property__icon-wrapper">
    <span class="icon-message"></span>
  </div>

  <input type="text" class="c-bot-property__label-input c-input" value="Texto" />
</div>

</div>

.c-bot-property__textarea

scss
.c-bot-property {
  @include element('textarea') {
    font-size: 11px;
    height: auto;
    line-height: 18px;
    margin: 0;
    max-height: 80px;
    min-height: 30px;
    overflow-y: auto;
    padding: 5px 8px;
    resize: none;
    transition: box-shadow 0.25s ease-in-out;

    &[role='textbox'][placeholder]:empty::before {
      color: #959395;
      content: attr(placeholder);
      cursor: text;
      font-style: italic;
      opacity: 1;
      transition: all 0.25s ease-in-out;
    }
    
    &[role='textbox'][placeholder]:empty:focus::before {
      opacity: 0;
    }
  }
  @include element('textarea-extras') {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0;
  }
}

<div> con el rol de textarea para controlar el alto máximo y mínimo.

Example

html
<div class="u-example-padding" style="min-height: 200px;">  

<div class="c-bot-property__textarea c-input"
  role="textarea" contenteditable></div>
<span class="u-word-counter u-color__secondary">
  0/1500
</span>

</div>

.c-bot-property__select-input-wrapper

scss
.c-bot-property {
  @include element('select-input-wrapper') {
    display: flex;

    .c-input {
      border-radius: 0 4px 4px 0;
      margin-bottom: 0;
    }

    .c-select {
      border-radius: 4px 0 0 4px;
      margin-bottom: 0;
      max-width: 110px;

      &:focus {
        border-color: use-color('secondary');
      }
    }
  }
}

Ajustes para select e input dentro de las c-bot-property

Example

html
<div class="c-bot-property__select-input-wrapper">
  <select class="c-select">
    <option id="0">
      Seleccionar
    </option>
    <option id="1">Rut</option>
    <option id="2">Nombre</option>
    <option id="3">Edad</option>
    <option id="4">Mail</option>
    <option id="5">Nivel de satisfacción</option>
    <option id="6">Otro</option>
  </select>
  <input type="text" class="c-input" />
</div>

.c-bot-property__radio-wrapper

scss
.c-bot-property {
  @include element('radio-wrapper') {
    .c-radio {
      + label {
        color: use-color('grey', 'light');
        font-size: 11px;
        margin-left: 0;

        &::before {
          border-color: use-color('secondary');
        }

        &::after {
          background: none;
        }
      }

      &:checked + label {
        color: use-color('base', 'black');
        font-weight: 500;

        &::after {
          background: use-color('secondary');
        }
      }
    }
  }
}

Ajustes para los radio options dentro de c-bot-property

Example

html
<div class="c-bot-property__radio-wrapper">
  <input name="option" type="radio" class="c-radio" id="first">
  <label for="first">letras y símbolos</label>

  <input name="option" type="radio" class="c-radio" id="second">
  <label for="second">números</label>

  <input name="option" type="radio" class="c-radio" id="third">
  <label for="third">ambas</label>
</div>

.c-bot-property__input-number-wrapper

scss
.c-bot-property {
  @include element('input-number-wrapper') {
    align-items: center;
    display: flex;
    justify-content: flex-start;

    // overrides
    .c-input {
      color: use-color('secondary');

      @include element('label') {
        color: use-color('secondary');
        text-transform: capitalize;
      }
    }
  }
}

Ajustes para los inputs type number dentro de c-bot-property

Example

html
<div class="c-bot-property__input-number-wrapper">
  <div class="u-wrapper">
    <input type="number" class="c-input c-input--number" max="999" min="0" value="120" />
    <label class="c-input__label">Minutos</label>
  </div>
  
  <div class="u-wrapper">
    <input type="number" class="c-input c-input--number-small" max="99" min="0" value="30" />
    <label class="c-input__label">Segundos</label>
  </div>
</div>

.c-bot-option-item

scss
.c-bot-option-item {
  align-items: center;
  display: flex;
  margin-bottom: 14px;

  @include element('number') {
    @include use-font('title');
    color: use-color('secondary');
    flex-shrink: 0;
    width: 39px;
  }

  @include element('input-wrapper') {
    display: flex;
    flex: 1;
    margin-right: 20px;
    position: relative;
    width: auto;
  }

  @include element('associated-node') {
    @include use-font('caption');
    background-color: use-color('base', 'true-white');
    border: solid 1px use-color('grey', 'light-i');
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 hsla(0, 0%, 45%, 0.5);
    color: use-color('grey', 'light');
    cursor: pointer;
    font-style: italic;
    line-height: 14px;
    max-width: 15ch;
    padding: 0 8px 0 4px;
    position: absolute;
    right: 3px;
    top: -6px;
    white-space: nowrap;

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

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

    @include modifier('associated-node') {
      top: -5px;
    }
  }
  
  @include element('icon-action-wrapper') {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: 30px;
  }

  @include element('icon-action') {
    align-items: center;
    color: use-color('grey', 'light-i');
    cursor: pointer;
    display: flex;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    width: 22px;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

Creado para vivir dentro de una lista c-list, cada item esta compuesto por:

Elements

  • c-bot-option-item__number
  • c-bot-option-item__input-wrapper
    • c-bot-property__textarea
    • c-bot-option-item__remove-option: opción para remover item.
      • c-bot-option-item__remove-option--associated-node: modificador de posición cuando existe un nodo asociado.
    • c-bot-option-item__associated-node: label para opciones con nodos asociados.
  • c-bot-option-item__icon-action

Examples

html
<div class="u-example-padding" style="width: 95%;">  

<ul class="c-list">
  <li class="c-bot-option-item">
    <span class="c-bot-option-item__number">
      1
    </span>
    
    <div class="c-bot-option-item__input-wrapper">
      <div role="textarea" contenteditable class="c-input c-bot-property__textarea"></div>
      
      <div class="c-bot-option-item__remove-option">
        <span class="icon-close"></span>
      </div>
    </div>
    
    <span class="icon-reorder c-bot-option-item__icon-action"></span>
  </li>
  
  <li class="c-bot-option-item">
    <span class="c-bot-option-item__number">
      2
    </span>
    
    <div class="c-bot-option-item__input-wrapper">
      <div role="textarea" contenteditable class="c-input c-bot-property__textarea"></div>
      
      <div class="c-bot-option-item__remove-option">
        <span class="icon-close"></span>
      </div>
    </div>
    
    <span class="icon-drag-and-drop c-bot-option-item__icon-action"></span>
  </li>

  <li class="c-bot-option-item">
    <span class="c-bot-option-item__number"></span>
    
    <div class="c-bot-option-item__input-wrapper">
      <a class="c-button c-button--new-item">
        agregar nueva opción
      </a>
    </div>
    
    <span class="c-bot-option-item__icon-action"></span>
  </li>
</ul>

</div>
html node associated
<div class="u-example-padding" style="margin-top: 8px;width: 95%;">  

<ul class="c-list">
  <li class="c-bot-option-item">
    <span class="c-bot-option-item__number">
      1
    </span>
    
    <div class="c-bot-option-item__input-wrapper">
      <div role="textarea" contenteditable class="c-input c-bot-property__textarea"></div>
      
       <span class="c-bot-option-item__associated-node">
         nodo asociado
       </span>
       
       <span class="c-bot-option-item__remove-option c-bot-option-item__remove-option--associated-node">
         <span class="icon-close"></span>
       </span>
    </div>
    
    <span class="icon-reorder c-bot-option-item__icon-action"></span>
  </li>
</ul>

</div>