hkk Frontend 2017

Action-Liste 

<div class="action-list">
    <span class="action-list__title">Sortieren nach:</span>
    <ul class="action-list__container">
        <li class="action-list__item action-list__item--active"><a class="action-list__link" href="#">Relevanz</a></li>
        <li class="action-list__item"><a class="action-list__link" href="#">Aktualität</a></li>
    </ul>
</div>
 
.action-list&attributes(attr)
  //- Render title
  if title
    span.action-list__title #{title}

  //- Render link list
  ul.action-list__container
    if items
      each item, index in items
        - 
          itemAttr = {}
          itemAttr.class = classList(itemAttr.class);
          if (index === 0) itemAttr.class.push('action-list__item--active');
        
        li.action-list__item&attributes(itemAttr)
          a.action-list__link(href=item.link) #{item.text}
 
{
  "title": "Sortieren nach:",
  "items": [
    {
      "text": "Relevanz",
      "link": "#"
    },
    {
      "text": "Aktualität",
      "link": "#"
    }
  ]
}
  • Content: 
    .action-list {
  display: flex;
  font-size: 1.5rem;

  @include mq($from: l) {
    font-size: 1.7rem;
  }
}

.action-list__title {
  margin-right: 1rem;
}

.action-list__container {
  @include list-reset();
}

.action-list__item {
  display: inline;
  font-weight: bold;
  margin: 0 0.5rem;
}

.action-list__link {
  color: $color-blue-light;

  .action-list__item--active & {
    color: $color-blue;
    text-decoration: underline;
  }

  &:hover {
    color: $color-blue;
    text-decoration: none;
  }
}
  • URL: /components/raw/action-list/action-list.scss
  • Filesystem Path: src/components/molecules/action-list/action-list.scss
  • Size: 508 Bytes

There are no notes for this item.