.c-dropup

scss
.c-dropup {
  background-color: use-color('base', true-white);
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: none;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  right: -8px;
  top: -50%;
  z-index: use-layer('content-2');
  
  @include element('trigger') {
    position: absolute;
    right: 8px;
    top: 8px;
    transform: rotate(90deg);

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

    &:hover {
      ~ .c-dropup {
        display: block;
      }
    }
  }

  @include element('item') {
    @include use-font('caption');
    line-height: 20px;
    margin-bottom: 4px;
    padding: 0 12px;

    a {
      color: use-color('base', 'black');
      display: flex;
      text-align: left;
      text-decoration: none;
      width: 100%;
      
      &::first-letter {
        text-transform: uppercase;
      }
    }

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('primary');
      font-size: 20px;
      margin-right: 12px;
      width: 20px;
    }
    
    &:last-child() {
      margin-bottom: 0;
    }

    &:hover {
      background-color: use-color('grey', light-iii);
    }
  }

  @include modifier('top-right') {
    right: 4px;
    top: 4px;
  }

  @include modifier('active') {
    display: block;
  }

  &:hover {
    display: block;
  }
}

Componente desarrollado para mostrar opciones dentro de componentes como:

  • c-message-box para envío outbound en mensajes de grupos.
  • c-hsm-item para recarga de saldo y opciones del item.

Este componente tambien incluye una clase modificadora para:

  • alinear el dropup arriba y a la derecha (del trigger) .c-dropup--top-right.
  • mostrar el contenido de las opciones por medio de la clase .c-dropup--active.

Example

html
<div class="u-widget-trigger-example-margin">

  <div class="c-dropup__trigger">
    <span class="icon-menu-options"></span>
  </div>

  <ul class="c-dropup c-dropup--top-right">
    <li class="c-dropup__item">
      <a href="#">
        <span class="icon-edit"></span>
        Editar mensaje
      </a>
    </li>
    <li class="c-dropup__item">
      <a href="#">
        <span class="icon-clock-add"></span>
        Reprogramar envío
      </a>
    </li>
    <li class="c-dropup__item">
      <a href="#">
        <span class="icon-trash"></span>
        Cancelar envío
      </a>
    </li>
  </ul>

</div>