51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Paginator

100% 
<nav class="c-paginator">
    <ul class="c-paginator__list">
        <li class="c-paginator__list-item c-paginator__list-item--previous">
            <a class="c-paginator__item c-paginator__item--previous c-paginator__link" href="#">
                Vorherige
            </a>
        </li>

        <li class="c-paginator__list-item c-paginator__list-item--current">
            <span class="c-paginator__item c-paginator__item--current">
                1
            </span>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__link" href="#">
                2
            </a>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__link" href="#">
                3
            </a>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__item--ellipsis c-paginator__link" href="#">
                …
            </a>
        </li>

        <li class="c-paginator__list-item c-paginator__list-item--disabled">
            <span class="c-paginator__item c-paginator__item--disabled">
                Should not be visible
            </span>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__link" href="#">
                130
            </a>
        </li>

        <li class="c-paginator__list-item c-paginator__list-item--next">
            <a class="c-paginator__item c-paginator__item--next c-paginator__link" href="#">
                Nächste
            </a>
        </li>

    </ul>
</nav>
 
<nav class="c-paginator">
    <ul class="c-paginator__list">
        <li class="c-paginator__list-item c-paginator__list-item--previous">
            <a class="c-paginator__item c-paginator__item--previous c-paginator__link" href="#">
                {{ prev }}
            </a>
        </li>

        <li class="c-paginator__list-item c-paginator__list-item--current">
            <span class="c-paginator__item c-paginator__item--current">
                1
            </span>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__link" href="#">
                2
            </a>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__link" href="#">
                3
            </a>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__item--ellipsis c-paginator__link" href="#">
                {{ ellipsis }}
            </a>
        </li>

        <li class="c-paginator__list-item c-paginator__list-item--disabled">
            <span class="c-paginator__item c-paginator__item--disabled">
                {{ disabled }}
            </span>
        </li>

        <li class="c-paginator__list-item">
            <a class="c-paginator__item c-paginator__link" href="#">
                130
            </a>
        </li>

        <li class="c-paginator__list-item c-paginator__list-item--next">
            <a class="c-paginator__item c-paginator__item--next c-paginator__link" href="#">
                {{ next }}
            </a>
        </li>

    </ul>
</nav>
 
{
  "prev": "Vorherige",
  "next": "Nächste",
  "ellipsis": "…",
  "disabled": "Should not be visible"
}
  • Content: 
    .c-paginator {
    * {
        // TODO wildcard at the end is bad for performance. // tech debt. shame.css
        box-sizing: border-box;
    }

    font-size: $font-size-xl;
    font-weight: $font-weight-bold;

    &__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;

        @include breakpoint(medium up) {
            justify-content: flex-start;
        }
    }

    &__list-item {
        flex: 0 0 auto;
        margin-bottom: 1.5rem;
        margin-right: .75rem;

        &:last-of-type {
            margin-right: 0;
        }
    }

    &__item {
        background-color: $color-grey-lightest;
        border-radius: 1rem;
        border-width: 0;
        color: $color-grey-dark;
        display: block;
        font-family: Arial, Helvetica, sans-serif;
        font-size: rem-calc(14px);
        height: 1.5rem;
        line-height: 1.5rem;
        min-width: 1.5rem;
        padding: 0 .5rem;
        text-align: center;

        &:hover,
        &.c-paginator__item--current {
            background-color: $color-yellow;
            color: $white;
        }

        &--ellipsis {
            font-family: ff-meta-web-pro, sans-serif;
        }
    }

    &__list-item--disabled {
        display: none;
    }

    &__item--previous,
    &__item--next {
        background-color: transparent !important;
        border: 1px solid $color-grey-lighter;
        border-radius: $border-radius;
        color: $color-grey;
        display: block;
        font-family: ff-meta-web-pro, sans-serif;
        font-size: $font-size;
        line-height: 1.3rem;
        padding: 0 1rem;
        text-transform: uppercase;

        &:hover {
            border-color: $color-grey-darkest;
            color: $color-grey-darkest !important;
        }
    }
}
  • URL: /components/raw/paginator/paginator.scss
  • Filesystem Path: src/patterns/20-components/paginator/paginator.scss
  • Size: 1.9 KB

There are no notes for this item.