T Capital

Pagination 

<div class="d-flex justify-content-center pt-5">
    <nav class="pagination">
        <a class="arrows previous" href=""></a>
        <a class="pages" href="">1</a>
        <a class="pages" href="">2</a>
        <a class="pages" href="">3</a>
        <a class="pages" href="">4</a>
        <a class="pages space" href="">...</a>
        <a class="pages" href="">13</a>
        <a class="pages" href="">14</a>
        <a class="arrows next" href=""></a>
    </nav>
</div>
 
<div class="d-flex justify-content-center pt-5">
    <nav class="pagination">
        <a class="arrows previous" href=""></a>
        <a class="pages" href="">1</a>
        <a class="pages" href="">2</a>
        <a class="pages" href="">3</a>
        <a class="pages" href="">4</a>
        <a class="pages space" href="">...</a>
        <a class="pages" href="">13</a>
        <a class="pages" href="">14</a>
        <a class="arrows next" href=""></a>
    </nav>
</div>
 
/* No context defined. */
  • Content: 
    //  pagination

nav{
    &.pagination{
        display: flex;
        align-items: center;
        a{
            font-size: 1.8rem;
            text-decoration: none;
            color: $white;
            display: block;
            padding: 0 1.2rem;
            @include media-breakpoint-up(sm){
                padding: 0 1.8rem;
            }
            &.space{
                pointer-events: none;
            }
            &.arrows{
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                height: 40px;
                width: 40px;
                &.previous{
                    background-image: url("data:image/svg+xml,%3Csvg width='21' height='38' viewBox='0 0 21 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.8959 0.999996L1.4148 18.4811L19.0208 36.0871' stroke='%23E20074' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
                }
                &.next{
                    background-image: url("data:image/svg+xml,%3Csvg width='21' height='38' viewBox='0 0 21 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.11578 0.999996L18.6058 18.49L0.999753 36.096' stroke='%23E20074' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
                }
            }
        }
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/components/01-global/pagination/pagination.scss
  • Size: 1.4 KB

No notes defined.