Design Seeds Boiler - Component Library

Pagination 

<div class="pagination">

    <div class="arrow arrow__back"> <!--fwd or back-->
        <span class="arrow__link" href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
                <use xlink:href="#icon__arrow"></use>
            </svg></span>
    </div>
    <div class="pagination__pages">
        <a class="pagination__page" href="#">1</a>
        <a class="pagination__page" href="#">2</a>
        <a class="pagination__page pagination__page--active" href="#">3</a>
        <a class="pagination__page" href="#">4</a>
        <a class="pagination__page" href="#">5</a>
    </div>

    <!-- <div class="arrow pagination__arrow pagination__next">
        <a class="pagination__link"  href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
            <use xlink:href="#icon__arrow"></use>
        </svg></a>
    </div> -->

    <div class="arrow arrow__fwd"> <!--fwd or back-->
        <span class="arrow__link" href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
                <use xlink:href="#icon__arrow"></use>
            </svg></span>
    </div>
</div>
 
<div class="pagination">

    {% render "@arrows" with {dir: "back" } %}
    <div class="pagination__pages">
        <a class="pagination__page" href="#">1</a>
        <a class="pagination__page" href="#">2</a>
        <a class="pagination__page pagination__page--active" href="#">3</a>
        <a class="pagination__page" href="#">4</a>
        <a class="pagination__page" href="#">5</a>
    </div>

    <!-- <div class="arrow pagination__arrow pagination__next">
        <a class="pagination__link"  href="#"><svg viewBox="0 0 20 20" class="a-icon__svg svg-icon__arrow-dims">
            <use xlink:href="#icon__arrow"></use>
        </svg></a>
    </div> -->

    {% render "@arrows" %}
</div>
 
/* No context defined. */
  • Content: 
    .pagination {
    display: flex;
    margin:$elem-pad-sm 0 0 0;
    
    justify-content: center;

    &__pages {
        min-width: 33%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    // &__arrow {
    //     stroke: none;
        
    //     background-color: #ea5d4e;
    //     border-radius: 40px;
    //     border: 1px solid #ffffff;
    //     width: 40px;
    //     height: 40px;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;


    //     a {
    //         color: #ffffff;
    //     }

    //     svg {
    //         width: 15px;
    //         height: 15px;
    //     }
    // }

    &__page {
        color: setcolor(1);
        padding:3px;

        &--active {
            color:setcolor(2)
        }
    }

    &__prev {
        transform: rotate(180deg) !important;
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: components/pagination/pagination.scss
  • Size: 889 Bytes

No notes defined.