HIDA - Helmholtz Information and Data Science Academy

Paging 

<nav class="paging">
    <ul class="paging__ul">
        <li class="paging__li"><a class="button button--primary" href="#" disabled="disabled"><span class="button__inner"><svg class="icon icon--chevron-left" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-chevron-left"></use>
                    </svg><span class="button__text">Zurück</span></span></a></li>
        <li class="paging__li"><a class="paging__li__a paging__li__a--act" href="#">1</a></li>
        <li class="paging__li"><a class="paging__li__a" href="#">2</a></li>
        <li class="paging__li"><a class="paging__li__a" href="#">3</a></li>
        <li class="paging__li"><span class="paging__li__span">…</span></li>
        <li class="paging__li"><a class="paging__li__a" href="#">10</a></li>
        <li class="paging__li"><a class="button button--primary" href="#"><span class="button__inner"><span class="button__text">Weiter</span><svg class="icon icon--chevron-right" viewBox="0 0 200 200" role="presentation">
                        <use xlink:href="#icon-chevron-right"></use>
                    </svg></span></a></li>
    </ul>
</nav>
 
//- Render paging
#{tag || 'nav'}.paging()&attributes(attr)
  ul.paging__ul

    li.paging__li
      +include('@button', buttonPrev)

    li.paging__li
      a.paging__li__a.paging__li__a--act(href='#') 1

    li.paging__li
      a.paging__li__a(href='#') 2

    li.paging__li
      a.paging__li__a(href='#') 3

    li.paging__li
      span.paging__li__span …

    li.paging__li
      a.paging__li__a(href='#') 10

    li.paging__li
      +include('@button', buttonNext)
 
{
  "buttonPrev": {
    "href": "#",
    "icon": "chevron-left",
    "text": "Zurück",
    "disabled": true
  },
  "buttonNext": {
    "href": "#",
    "iconAfter": "chevron-right",
    "text": "Weiter"
  }
}
  • Content: 
    .paging {
  text-align: center;
}

.paging__ul {
  @include list-reset;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.paging__li {
  padding: 0;

  &:first-child {
    padding-right: 1rem;

    @include mq($from: m) {
      padding-right: 3rem;
    }
  }

  &:last-child {
    padding-left: 1rem;

    @include mq($from: m) {
      padding-left: 3rem;
    }
  }

  @include mq($until: m) {
    display: none;

    &:first-child,
    &:last-child {
      display: block;
    }
  }
}

.paging__li__a,
.paging__li__span {
  color: $color-blue;
  display: inline-block;
  font-family: $font-family-secondary;
  font-size: 1.5rem;
  font-weight: $font-weight-bold;
  padding: 1.6rem 1rem 0;
}

.paging__li__a {
  color: $color-blue;
  transition: color 0.2s;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: $color-dark;
    }
  }
}

.paging__li__a--act {
  color: $color-dark;
}
  • URL: /components/raw/paging/paging.scss
  • Filesystem Path: src/components/molecules/paging/paging.scss
  • Size: 924 Bytes

There are no notes for this item.