.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;

    @include modifier('selected') {
      font-weight: bold;
    }

    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('top-left') {
    right: 40px;
    top: 4px;
  }
  
  @include modifier('bottom-left') {
    right: 14px;
    top: 58px;
  }

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

  &:hover {
    display: block;
  }
}

Componente desarrollado para mostrar opciones dentro de componentes como:

Este componente tambien incluye una clase modificadora para:

  • alinear el dropup arriba y a la derecha (del trigger) .c-dropup--top-right.
  • alinear el dropup arriba y a la izquierda (del trigger) .c-dropup--top-left.
  • alinear el dropup abajo y hacia la izquierda (del trigger) .c-dropup--bottom-left.
  • 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>